Johnson & Co. Website Redesign

 
 

The Challenge

Johnson & Co. Craft Hardwood Floors needed a new and updated website. The old website was out of date, cluttered, and difficult to navigate. Customers needed to be able to quickly and easily learn about Johnson & Co. and contact them for a quote.

The Solution

The solution to the problem is an updated, responsive website that makes it simple and easy to request a quote from Johnson & Co., and allows prospective customers to learn more about available services.

My Role

Product Designer

 

Understanding the User

Empathy Map.png

In order to establish an initial direction for the new design, interviews were conducted with the target audience of the website. The goal of these interviews was to understand pain points and the user’s goal in using the Johnson & Co. website.

Based on these initial interviews, an empathy map was created in order to concisely understand more about who our user is and what really makes them tick.

 
Using the information gathered up to this point, a persona was created to represent users and help guide the design.

Using the information gathered up to this point, a persona was created to represent users and help guide the design.

 

A key takeaway from time with users was that quality of work was one of their biggest concerns when looking for someone to work on their hardwood floors.

Requesting a quote was another primary concern for users, as they desired a quick and easy way to request a time for Johnson & Co. to look at their floor and offer a quote.

 

Beginning the Design

 
IMG_8942.jpeg
 

With the user in mind, a series of paper wireframes were created to establish some early ideas for the website. Based on initial user feedback, the goal was to create a simple layout that clearly communicated the quality of the service, and allowed for the customer to easily contact Johnson & Co.

Paper wireframes were also created for a responsive website, allowing the user to access the site via a mobile device.

 
IMG_8944.jpeg
 

With paper wireframes guiding the process, it was time to create low fidelity digital wireframes using Adobe XD.

 
A simple layout on the home screen gives more information about Johnson & Co. and multiple options to begin the quote process.

A simple layout on the home screen gives more information about Johnson & Co. and multiple options to begin the quote process.

An overlay form allows users to easily fill out basic information to begin requesting a quote.

An overlay form allows users to easily fill out basic information to begin requesting a quote.

A dedicated Services page gives more information on the different services that Johnson & Co. offers customers.

A dedicated Services page gives more information on the different services that Johnson & Co. offers customers.

 

A low-fidelity prototype was created in order to test the overall basic flow.

Screenshot 2021-07-22 144120.png
 

The Solution

After receiving initial feedback from target users, high-fidelity mockups and a working prototype were created. The emphasis was on highlighting the quality of Johnson & Co.’s work and allowing people to request a quote quickly and easily. A responsive website mockup was created as well, in order to allow users to seamlessly access the site from a desktop or on their mobile device.

 

The home screen offers a clear layout, highlighting the benefits of Johnson & Co., and guiding the customer toward requesting a quote

Home - Desktop – 2@2x.png
Home - Desktop – 3@2x.png
Home - Desktop – 6@2x.png

Requesting a quote is a simple and straightforward process.

 

User Testing

With a working high fidelity prototype, it was time for final input from users. An in-person moderated usability study was conducted in order to gather more insight on the website design and the user flow to request a quote.

Users provided the following primary input:

  • A progress bar during the quote process would be helpful to know how long it is

  • A back button during the quote process would be helpful to allow the user to go back a step if they needed to change something

  • More clarity would be beneficial as to what happens next once the form is submitted

Based on this feedback, iterations were made in order to enhance the overall experience on the website.

 

Moving Forward

Impact

The Johnson & Co. website redesign will make it easier than ever for potential customers to learn more about Johnson & Co. Craft Hardwood Floors’ services, and allow website guests to request a time to receive a free in-home quote. This clearer design and simple process will ultimately lead to increased engagement and increased business for Johnson & Co.

Takeaways

The key to this redesign was simplicity and ease of use. Users wanted to find out more information about Johnson & Co. quickly and easily, and they wanted to be able to receive an estimate for the work without having to spend too much time or energy on that process. Focusing on the needs of the user guided the design decisions along the way, resulting in a website that will ultimately serve both the customer and the business.

Next Steps

  • Finalize launch of new website

  • Monitor utilization of the “Request a quote” function

  • Track completion rate of request process, and watch for drop-offs during quote requests

 

Thank you for your time!