Mastercraft Kitchens / Website Design & Build

Mastercraft Kitchens homepage
Mastercraft Kitchens homepage

Mastercraft Kitchens has a website servicing its 28 locations but lacks a personal connection with its users. The owner of two of the franchises wanted a website (dedicated to the two locations) that would enable direct contact with their customers and a personalised experience. With an audience of 45-60 year old homeowners, the most significant 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 understand what the user looked for in their decision making. The results from this informed the website's direction to fulfil user objectives, both from an experience and design perspective.

UX & UI Design

Sketch | Invision | Webflow

pukekohekitchens.co.nz
Case Study

Stakeholder Focus Group

I held a stakeholder focus group to understand better the business's goals and who their users are. The client needed a website that spoke personally to potential customers and directed traffic from advertising straight to them instead of 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 everyday people?
Stakeholder focus group notes
Stakeholder focus group learnings

User Survey

My next task was empathising 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 regarding 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 and be the first question people wanted to be answered in initial interactions. The website needed to provide a satisfactory answer that would lead the customer to get in touch.

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 typically spend at a minimum, $10,000, so they need to know that they are getting value for their money.



After the survey, I found 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 honestly thought. This would have caused some bias in the survey results, and next time I would word my questions more carefully to avoid that.

Research results analysis
Research results analysis

User Personas

Using information gathered in the survey, I created two user personas on 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.

Persona development written in book
Persona development

Customer Journey

I created two customer journey maps based on a persona. One looked at the journey a user had once they landed on the site. The other examined their 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 need to make an informed decision that leads them to get in contact. However, the end goal is always the same - to have the user make contact and convert them to a customer.

Customer journey mapping document written in book
Customer journey mapping document

Problem Definition

Homeowners need 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.

Ideation

From the user research, I identified six key points necessary for the user in their decision-making process. 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 utilising the SCAMPER method but found that this process would be more beneficial once the website had been tested as a live product.

Wireframing & Prototyping

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

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 the written copy is crucial to the experience, it was included in the wireframe to test. 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 overloaded and felt personal and conversational. However, improvements that needed to be made were all related to copy, with some users wanting to see additional information.

Low-fidelity website wireframes built in Sketch
Low-fidelity wireframes created in Sketch and tested in Invision.
No items found.
No items found.
No items found.
No items found.
No items found.
No items found.

Website Design

With the structure and flow of the website determined, several factors 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.

I kept the design layout close to the wireframe as users could easily navigate the site with that structure. The design is kept minimal and features kitchen and cabinetry imagery that draws people in and serves as a place of inspiration. Buttons and links are kept consistent throughout the site, so it's clear where users can click.

The animations were kept simple with a fade-in on page scroll to avoid 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 solid contrast to ensure that even someone with failing eyesight can still clearly see the elements.

Screenshot of final Gallery page on website
Screenshots of website on mobile
No items found.
No items found.
No items found.
No items found.
No items found.
No items found.

Conclusion

The new Mastercraft Kitchens website for the Pukekohe and New Lynn branches has seen great success for the owners. With only a 32% bounce rate, Mastercraft Kitchens has also seen a 15% increase in sales due to the website (on average having three months of work booked ahead).

Nearly 20% of people make it to the contact page, book consultation page, or click on phone numbers and email addresses. In addition, the owners have noticed an increase in customer satisfaction - after viewing the website, customers felt more reassured before the first conversation.

Next project