Overview

The Client – Sri Akshayam Builders has over 10+ years of experience in the construction industry and handled more than 40 medium and small scale projects. The company provides a wide variety of services from plan drawings to turnkey projects.
‍The Challenge – The client wanted to set up a web business portfolio in order to appeal to existing and new customers and showcase the services provided by the company.
‍Outcome – A usable and aesthetically appealing online business portfolio.
‍Length of the Project – 5 weeks
‍Software used – Figma | Balsamiq | Adobe Photoshop | Adobe Illustrator

Approach

Research

Research goals ‍

• Define users’ motivations, aesthetic appeal and needs while browsing the website looking for construction services.
• Understand what makes a customer’s visual experience satisfying.
• Understand industry standards and what services and visuals give a competitive edge in the industry.

‍
‍Market Research
I conducted desktop research to familiarize myself with the national and local builders’ websites and identify industry best practices. I collected information from articles and case studies on trends, challenges, and areas for growth to identify industry standards and user expectations.
‍
‍Competitive Analysis Research
To build off my market research, I analyzed some of Sri Akshayam Builder’s competitors in the construction industry. I uncovered the strengths and weaknesses of the business' direct competitors, India Builders and Akshaya Homes. In addition, I performed a competitive analysis on Sreenivas Homes and Vijayaraja Groups which are indirect competitors of Sri Akshayam Builders.
‍
My competitors' analysis produced the following insights:‍

• Most independent builder’s website did not have a detailed price quote. There were usually several main pages: Home, About, Contact and sometimes events and/or promotions.
• All the competitor companies had responsive websites. Sri Akshayam Builders needed a responsive website with high quality photos to be competitive at the local and national levels.
• Brand identity would go a long way in distinguishing builders that provided similar services. India Builders and Akshaya Homes offered similar services but the former was more popular among middle and high-income groups even though the prices of the provided services were high. Brand identity and diversifying its customer base were identified to be crucial to Sri Akshayam Builders.

Empathize

User Personas
To get a sense of the target audience, understand how the business would appeal to different demographics with varying needs and to base design decisions depending on the disparate goals, motivations and behaviours of sections of the society, I created user personas (refer Fig 2). This study complimented the data I had collected through desktop research about the construction industry.

User Interviews
Empathizing with the target audience being a crucial step in the design thinking process, I embarked on field research to interact with real customers.I connected with Sri Akshayam Builder’s past clients to learn more about their motivations, needs, and frustrations according to their experience in hiring the company’s services.
‍
Research Assumptions:

• Customers expect a price quote option on a builder’s website.
• Customers care about the vision and values of the builder.
• Affordability and quality are the most important factors for customers when choosing who to go to for their construction and renovation needs.
• Customers live primarily in the same neighbourhood as Sri Akshayam Builders.
• Customers choose Sri Akshayam Builders for its affordability and quality.

After an in-depth analysis, I was able to identify several user needs:

1. Customers need to know that Sri Akshayam Builders provides high quality services.
2. Customers need engagement with the company and its employees.
3. Customers need to see the unique identity and brand of the company.
4. Customers need to know they’ll find the services that they’re looking for on Sri Akshayam Builder’s website.

Brainstorming - 'Point of View' (POV) Statements & 'How Can We' (HCW) Questions
After wrapping up user interviews, I dug deeper into the insights and needs I had generated. First, I restructured insights into POV statements, that is, an actionable problem statement that defines the design challenge. Next, I restructured those POV statements into ‘How Can We’ questions that would generate solution-oriented brainstorming (refer Fig 3).

Finally, I brainstormed with a select user group to analyse user expectations and preferences to develop as many solutions as possible to the HCW questions.

The brainstorming session led me to the following possible solutions to the HCW questions:

• Users prefer minimalistic design and text and appropriate use of white spaces for a convenient viewing.
• Incorporation of breadcrumbs, search feature and logical information structure is necessary for finding information on the website.
• An intuitive design was key to an efficient viewing experience.
• Visuals including images and videos appeal to users.

Intersection between business and user goal
Now that I had empathized with target users and identified their needs,I needed to define strategic design solutions. I reflected on the business goals, user goals, and technical considerations to find a happy medium for all stake holders. Once I identified common areas (refer Fig 4), I could decide what product features were necessary for the prototype, bearing in mind also the user-centred design principles.

At this stage, I presented the user research findings and ideation results at a meeting with stakeholders involved - leadership from the business, marketing,sales, operations teams of the client. I recorded their reflections and confirmed alignment with the company’s mandate and vision. Engagement with stakeholders ensured keeping the leadership informed of design decisions. There was consensus largely among the leadership which provided motivation to proceed to the next phase of the project, information architecture.

Create

Information Architecture
I created a high-level list of site features to further define and guide the vision of the product. I conceptualized organization of information and data flow. I prioritized the features with supporting research to obtain seamless user navigation using tools like data categorization and labelling. I created a site map (refer Fig 5) which laid out the structure of data on the site, supplemented by navigation rules.

Interaction Design
I completed a task flow (refer Fig 6) and user flow (refer Fig 7) to imagine the ways a user might navigate through the site to achieve his/her goals. These methods allowed me to ensure that the information was organized in a way that is intuitive to the user.

Low-Fidelity Wireframes (Sketches)
In Balsamiq, I began the process of wire-framing with sketches of different variations of the website landing page. During this process, I thought about how the layout and content could be structured to satisfy user and business goals in a technically feasible way. The sketch I chose (refer Fig 8) served as a guide for my mid-fidelity wireframes.

Mid-Fidelity Wireframes
Guided by the sketches, I developed mid-fidelity wireframe (refer Fig 9) using Balsamiq. I created UI design patterns to outline all the design elements I wanted to incorporate into the website.

Responsive Design
At this point in the design process, I needed to think about how I wanted the site to look on different screen sizes. It was essential that the website was well-displayed on tablet and mobile devices as it does in desktop size without interfering with the smooth user experience. I created responsive wireframes (refer Fig 10) for Sri Akshayam Builders’s key pages and began to flesh them out.

Test

Usability Testing
The usability test plan directed engagement with appropriate participants to attempt realistic activities, by turning user goals into task scenarios. By doing this, I gained qualitative insights into why users had trouble.

Instead of simply instructing the test users to perform the task with no explanation, I preferred to supplement the request within a short scenario that sets the stage for the action and provides a bit of context for why the user was embarking on the task. During testing, I preferred to call the tasks“activities” to avoid giving the participants a feel that they were being tested.

I asked 5 participants to test the prototype's usability. The participant pool comprised of people between the ages of 25 and 65, belonging to different professional backgrounds, varying levels of technological literacy and career stages while also accommodating those who have accessibility challenges. A few participants met me in person to complete the usability test,while others did so remotely. The participants were given four different scenarios, each with a task to complete.

Task scenarios:

• Task 1 – You want to redo your office interiors. Find out if Sri Akshayam Builders provides renovation services.
• Task 2 – You are interested in finding out Sri Akshayam Builder’s presence in the market. Explore the designs and models of Sri Akshayam Builder’s past and present projects.
• Task 3 – You are happy with the past work of the company and intend to check if it’s affordable and fits your budget. Check how much their service costs.
• Task 4 – You are satisfied with the company’s services as projected in the website and wish to reach out to them in person. Find directions to reach their office.

Once the participants completed the tasks, I measured the percentage of tasks that users completed correctly (user success rate) as a way to communicate a site’s overall usability. The resulting usability metrics helped inform improvements that were warranted to certain designs and set the design direction.

The success rate of this testing was 55%.

Affinity Mapping
I created an affinity map to organize and synthesize the responses and observations I captured using testing. I uncovered insights, which I reconstructed into a list of recommendations. I organized these by priority level (high to low) as a way to determine what had to be changed immediately and what could be saved for later.

Findings:
Overall, users navigated through the website without difficulty. 100% of users referred to the tasks as either simple or easy. More usability tests were planned to be conducted on other site features once it’s complete.

Recommendations:

1. Create larger image sliders in the ‘Gallery’ page.
2. Create larger navigation buttons in the prototype.
3. Add a feature that shows if a project is live or completed.
4. Bring the‘Cost estimation’ feature out of the “Process” tab to a conspicuous part of the website, like the Home page.

An iterative design is the best method to increase the quality of a user’s experience. I iterated the design and usability three times, since in some occasions, usability metrics decreased in some versions if a redesign was focused on improving other parameters. The overall usability reached 155% from the first to the last iteration, and the advancement per iteration was 29%.
‍
After completion of testing phase, a status meeting was held with the stakeholders. The leadership raised some concerns/recommendations with the design and data flow –

1. The business leadership of the company suggested not to alter the ‘Cost estimation’feature’s position to the Home page. Their intention was to bring large audience to contact the company. Hence, receiving a price quote needs to be an additional feature that the website provides, and possibly incentivise customers to hire their services. But bringing it to the Home page involves the risk of viewers only accessing that feature and not navigating to other pages(like Gallery) that might urge them to connect to the company.
2. Showcasing upcoming projects was identified to be a key component to market the services in the website. A feature that would attract prospective customers was suggested. I recommended adding a “360 degrees image/ Virtual tour” to visually engage users and instil curiosity in the company’s projects.

The above concerns were resolved in a new iteration which was again tested with the same usability testing group (5 participants) to ensure that the fixes did indeed solve the problems and incorporated the recommendations. The test revealed that no new usability problem was introduced by the changed design.

Branding

At this point in the process, I began thinking about how the website would look and feel to visitors. I came up with a series of descriptive words that captured the essence of the Sri Akshayam Builders brand: modern and minimalistic.
‍
With these adjectives in mind, I created mood boards where I collected images of typography, logos, and colour schemes that aligned with the vision of Sri Akshayam Builders.

I brainstormed ideas for a logo, aided by the inspiration I found through research (refer Fig 11). I maintained elements of the current design trend to project a professional image as per sector best practices.

The result was a simple logo image of Sri Akshayam Builders by using Adobe Illustrator.

In addition to branding, I defined the design patterns (user interface components) such as alert notification, header, footers, buttons, navigation and breadcrumbs. These patterns were reused throughout the website to create a consistent user experience.

The logo was added to the UI Kit which was a comprehensive collection of all site components and UI design patterns (refer Fig 12). This kit, designed with Adobe Photoshop, was a constantly changing document as the website and brand grew.

High Fidelity Wireframes
I applied the UI design and branding requirements to mid-fidelity wireframes in order to create high fidelity wireframe (visual mock-ups) using Figma. With all the visual details added, they were fully fleshed out (refer Fig 13). I continued the iterative cycle of developing, testing and updating the prototype.

Web accessibility
Aiming for an inclusive design, I incorporated the accessibility guidelines by including high contrast ratio, not relying on colour alone; clear labelling of forms, simple headings, consistent spacing, navigation and adding language options to include English and Spanish.

Develop

Project hand-over meeting
The stakeholders were briefed about the final developments to the project and their concurrence was received. I managed user experience design deliverables (UI Kit) and used Figma to hand off the design to the developer team after I made all necessary improvements to the prototype. Thereafter, I collaborated with the development team as and when required, to ascertain if the developed product efficiently showcases the design elements.