InHome Renovation

Mockup.jpeg

Project Overview

Problem

InHome Renovation is a small-construction company based in Southern California. I was tasked with redesigning the company's website. During user research, I found out that users wanted a quick way to obtain price estimates for potential projects. The company spends too time in having to respond to potential customers and customers get impatient having to wait for a response. Users need a new way to obtain price estimates that requires less effort and time.

Solution

In order to achieve the main goal of obtaining a price estimate users need to message the company and wait for a response. The company spends too time in having to respond to potential customers and customers get impatient having to wait for a response. Users need a new way to obtain price estimates that requires less effort and time.

Role

User Research

UX Design

UI Design

Timeline

3 Weeks

Audience

The target user for InHome Renovation are homeowners living in Southern California.

Mockup 2.jpeg

Discovery & Research

At the start of this design sprint I met with my client in order to define the design challenge. I asked questions about the goals of the website and any issues that needed to be addressed. We reframed these pain points and insights into design opportunities using the "How Might We" brainstorming activity. We narrowed down our scope to 2 problems that needed to be addressed:

HMW.jpg

1. How might we improve the information architecture of the current website?

2. How might we allow users to obtain a quick price estimate on a project?

User Research

The current website features a live chat module. I decided to look at the chat history within the last 6 months in order to gain user insight and noticed a similar pattern with how users interact with the chatbox. Using this information I was able to create a user flow based on how users interact with this website feature and how it’s used to obtain a price estimate.There are 2 steps in the current user flow that depend on the company to respond to the user in order to obtain a price estimate. This response time can vary which can cause frustration amongst impatient users. This frustration became a pain-point I set out to solve. How might we make the process of obtaining a price estimate straight-forward and automatic?

Chat Box User Flow

userflow v1.jpeg

Proto-Persona

persona.png

Martha

Biography: 

Martha is a first time homeowner from southern california and is looking to improve her living space. Maria works full-time as an accountant during the day and she enjoys staying in and cooking with her husband in the comfrot of their new home in the evening. Both Maria and her husband take part in handling finances and both need to come to an agreement when deciding to fund a home improvement project.

Motivations:

Martha has been browsing photos of backyards on pinterest and has been inspired to have a new patio built outside. She wants to a new cozy patio which she and and her husband can use to enjoy dinner with guests. Maria has started reaching-out to different construction companies and has become frustrated with the time she’s wasted having to negotiate a price for her project. Martha is looking for a company that is transparent and can provide a straight-forward estimate.

Goals & Needs: 

- Home improvement project that is within budget
- A flexible payment plan
- A quick and easy price estimate

Frustrations:

- Lack of transparency
- Having to negotiate in order to get an estimate

User Journey Map

I met up with my client and we collaborated on a narrative of the user and their main goal on the website. We defined our persona and the steps along their journey. We identified obstacles on the current website that might keep our target persona from achieving their goal. We also looked for opportunities for improvement that could be made along their path. In the end we managed to align ourselves with a shared narrative of our persona and their journey.

User Journey Map brainstorm.jpeg

Journey map brainstorm sketch

User jouney map.jpeg

Journey Map Deliverable

Competitive Analysis

During our design brief I asked my client if there were any construction companies that they admired or were inspired by. I received the names of 3 competitors and decided to conduct a competitive analysis on the websites of these 3 competitors. I did this exercise because I wanted to find out how other competitors had laid out content and organized information on their websites. From the competitors, I noticed a common pattern within the homepage layout and learned about best practices within web design.

CA Icons.png

Insight #1: Landing Page with A Clear CTA

All 3 competitors featured a landing page with a strong value proposition and hero image as well as a call-to-action which encouraged users to contact the company. InHome Renovation's website did not have a call-to-action button or a clear hero image on their landing page.

606be0de7fddaacbb15c47d5_CA_Insight1.jpeg

Landing Page from Snyder Construction Group website.

Insight #2: Social Proof

Social proof in the form of awards and testimonials were displayed throughout the pages of each competitors website. The use of social proof helped the competitors build trust among potential customers. Although InHome Renovation has won awards and received positive reviews none of this information was found on their website. Social proof could be leveraged better on InHome Renovation's website in order to provoke a positive impression.

606be13b64f6832b1ddb3836_CA_Insight2.jpeg

Awards Section from Matt Construction homepage.

Insight #3: Simple Project Gallery

Each competitor's project gallery had a different layout and style, however, each gallery was simple and plain with lots of whitespace which directed all the attention to their body of work. InHome Renovation's project gallery was in need of a redesign that was also minimal. Their current gallery was visually cluttered with many images overlaid on top of each other.

606be14c35dd7bb04ecd777a_CA_Insight3.jpeg

Image gallery from Clark Construction website.

Information Architecture

We decided to design a calculator which would required the following information from the user: (1) services type & (2) square footage of project.These 2 bits of information were needed in order to provide an accurate price estimate. Using a design sprint method known as Crazy 8’s I began sketching different variations of how the calculator might look. After sketching a few different variations I consulted with my client over which drawing would best transfer over into an actual wireframe. For the organization of the website and the layout of the homepage I referenced the 3 websites I analyzed from my competitive analysis.

Ideation & Sketching 1.jpeg
Ideation & Sketching 2.png

Wireframe Sketches

Price Estimate User Flow

Price Estimate Userflow.jpeg
Price estimate wireflow sketch.jpeg

Site Map

IA.png
IA pages.jpeg

Homepage Layout

Layout sketch.jpeg

Prototyping

At this stage in the design process I created a testable prototype of the website with the price estimate feature. In order to figure out if the redesign was a better design that I current website to conduct usability testing. I began looking for participants who fit the target audience of my redesign (Homeowners living in southern California). After testing, I then revised my prototype based on the insights and feedback gathered during these sessions.

Mockup 3.png

Usability Testing

I managed to find 3 participants who fit the target audience of my redesign (Homeowners living in southern California). My tests focused on figuring out the overall impression of the website as well as the functionality of the estimation calculator. We tested out the prototype with our target audience and asked the following questions:

Key Scenarios

1.Based on your first impression of the landing page, what services do you think this company offers?

2.Where on this website do you think you can find a past projects this company has worked on?

3.Let’s pretend you want to build a patio cover that is 288 square feet. Use this information to get a price estimate.

Insights & Feedback

Insight #1: Landing Page Feedback

Hero Image is ambiguous and does not show services offered. Value Proposition Text is difficult to read when placed on top of the image. CTA Button in a red color does not have a positive connotation.

Insight #1.jpeg

Landing page before feedback from test participants

Revision: I replaced the image on the landing page with an Image that clearly demonstrates services offered. The value proposition text is separately displayed from the image instead of overlaid on top of the image. I changed the color of the CTA button to green which has a positive connotation.

Insight #1 revision.jpeg

Landing page after feedback from test participants

Insight #2: Price Estimation Calculator User Flow

Users found it inconvenient to re-type project details into on contact form after having entered it into the calculator. My client also wanted a way to acquire the information user using the calculator. By having the users provide their contact information my client can reach-out to them in case they do not fill-out the contact form.

Insight #2.jpeg

Calculator user flow before feedback from test participants

Revision: I made sure the project details (size, service & price) automatically populate on the contact form. This revision helps create a more seamless experience. I also revised the user flow by requiring users to provide contact information. This requirement allowed the business to reach-out to potential customers in case they left before sending a message.

Insight #2 revision.png
Insight #2 revision 1.png

Calculator user flow after feedback from test participants

Retrospective

I managed to finish my 3 week sprint with a design that satisfies the needs of both my client and target audience. I learned about the importance of balancing users' needs as well as business needs. For example, I had to revise the initial user flow of the project estimation calculator in order to satisfy the business need of customer acquisition. I did this by requiring the user to provide contact information before receiving an estimate. The revision was both user friendly and provided value to the business. Going forward with this project there are more ways in which I can improve upon my current design:

1. Focus on responsive design and create a prototype of my redesign for mobile devices.

2. Create a visual system for my website redesign. This 3 week design sprint was only concerned with creating a low fidelity  prototype I did not get a chance to create a high-fidelity mockups.

3.Find the right tools to create and implement my design of the price estimate calculator.