Mastercraft Kitchens

USER EXPERIENCE & User interface design
2018
SKETCH | Invision | WEbflow

Mastercraft Kitchens Staging Website Link

Mastercraft Kitchens has a website servicing it’s 28 locations but lacks a personal connection with the user. The owner of two of the franchises wanted a website (dedicated to the two locations) that would enable direct contact to their customers and a personalised experience. With an audience of 45-60 year old homeowners, the biggest design challenge was conveying trust to the user as they journeyed through the site.

As the sole user experience and interface designer on this project I used the Design Thinking process to gain an understanding of what the user looked for in their decision making. The results from this informed the direction the website took in order to fulfil user objectives, both from an experience and design perspective.

Mastercraft Kitchens Homepage

Stakeholder Focus Group

I held a stakeholder focus group to better understand the goals of the business and who their users are. The client needed a website that spoke personally to potential customers and directed traffic from advertising straight to them, as opposed to the generic Mastercraft website. Three challenges I picked up from the focus group included:

- How can I answer "how much?" without giving an exact price?
- How can I answer "how long?" without giving specifics?
- How can I make the website show quality without seeming too expensive or out of reach for the everyday person?

Mastercraft Kitchens - Stakeholder Focus Group

User Survey

My next task was emphasising with the user and understanding their decision making process. I used open ended questions on Google Forms with a great response from 42 homeowners. The answers proved a pivotal moment in the research as some results differed from stakeholder discussions, particularly in regards to price.

It was suggested not to include price as there were too many contributing factors. However, price was overwhelmingly the number one reason why the user would pick one company over another as well as being the first question people wanted answered in initial interactions. It was crucial that the website provided a satisfactory answer that would lead the customer to get in touch.

Mastercraft Survey

The biggest revelation from the survey was the value of trust. Respondents wanted to have a relationship with the Mastercraft team and a mutual understanding of their vision. The user needed to have the confidence that they were working with people they could trust. Customers are typically spending at a minimum, $10,000, so they need to know that they are getting value for their money.

How can we instil the feeling of trust throughout the website?

A problem I found after the survey was that I had given people example answers to some of the questions to prompt them, but some people used those prompts as their answers instead of writing what they truly thought. This would have caused some bias in the survey results and next time I would word my questions more carefully to avoid that.

Mastercraft Results

User Personas

Using information gathered in the survey I created two user personas at either side of the target age spectrum. When design decisions were made, I cross checked back to the personas. The process of developing the personas, particularly writing them down, helped me get in the user’s mindset and question things I usually wouldn’t. An important consideration was age with the typical user between 45-60 years and potentially not tech-savvy. The website needed to be as simple as possible with information displayed clearly to avoid any frustration.

Mastercraft user personas

Customer Journey

Two customer journey maps were created based on a persona. One looked at the journey a user had once they landed on the site. The other examined their full decision making process starting before they interacted with the site, through to saying yes to their new kitchen. Considering the journey before the first website interaction helped bring to light user questions and concerns that the website needed to answer to get a positive engagement.

There isn’t one path for users - they explore at their own pace, learning what they personally need to make an informed decision that leads them to get in contact. The end goal is always the same - to have the user make contact and convert them to a customer.

Mastercraft Kitchens customer journey

Definition of the problem

A homeowner needs to find a kitchen design and build company to facilitate their renovation because they would prefer to work with trustworthy professionals who can deliver a result they can be proud of.

Brainstorm

From the user research, 6 key points that were necessary for the user in their decision making process were identified. For each point I brainstormed different ways they could be visualised on the website. This was used as a guide to ensure the website was catering to each of the user needs. I also tried to push those ideas further by using the SCAMPER method but found that this process would be more beneficial once the website had been tested as a live product.

Mastercraft Kitchens brainstorm

Sketches

Now with an understanding of the user, I started the design process with low fidelity sketches to quickly iterate different variations of each page. From the sketches I started working out what layouts would work best for the user and which might cause problems. I worked through different structures until I found ones that were as stripped back and simple as possible.

Mastercraft Kitchens sketches

Wireframe and Prototype Testing

Low fidelity wireframes were composed on Sketch based on the initial sketches. The purpose of the wireframe was to test the layout and navigation flow with users. Since written copy is crucial to the user it was used in the wireframe to ensure that the content was what users were looking for. The prototype was created on Invision and sent to users for testing along with a survey.

The response was positive, with users remarking that everything was clearly laid out and easy to follow. They also liked that there was plenty of information without feeling like they were being overloaded and that it felt personal and conversational. Improvements that needed to be made were all related to copy, with some users wanting to see additional information.

Mastercraft Kitchens wireframes

Website Design

With the structure and flow of the website determined there were several factors that would influence the design of the site. These included:

- The age of the user: an unclear layout and multiple animations may confuse or distract.
- The Mastercraft brand: Typography and colours have already been set out and must be abided by.
- Responsiveness: the experience needs to remain the same from mobile to desktop.

Mastercraft Kitchens gallery design

I kept the design layout close to the wireframe as users were able to navigate through the site easily with that structure. The design is kept minimal and features the imagery to draw people in and serve as a place of inspiration. Buttons and links are kept consistent throughout the site so users understand where they can click for more information.

The animations were kept simple with a fade in on page scroll to avoid any unnecessary distractions and keep the user on task. The content is king here and the animations needed to be secondary to that. Buttons and copy all have a strong contrast to ensure that even someone with failing eyesight can still clearly see the elements.

Mastercraft Kitchens mobile

Conclusion

Establishing trust and confidence with potential customers was the project’s biggest challenge -  which I found could be overcome by using user surveys to understand how to build a rapport with the user. Initial testing of the wireframe produced positive feedback with testing of the final website design yet to occur due to client timeframes being pushed back.

The next step will be to bring the design and development to completion and have another round of user testing. I’ll be using user surveys to reach the homeowners from the first round of tests to understand if the website is delivering to them the trust and confidence they need to make a decision.

This research process has taught me to be more precise with my user questioning and to word questions in a way that will produce an unbiased result. I am confident in my research and processes but feel like I could have pushed it a lot further by working alongside a team and gaining different perspectives on results.

Mastercraft Kitchens Staging Website Link