Village Baking Co.

Website Redesign

Problem

Their current website lacks responsive web design, there are some unreliable buttons, outdated information, and design that is not accessible. There are opportunities to improve the design of the website to improve the experience of the users and improve business outcomes.

Solution

Redesign the Village Baking Co. website to improve navigation and usability.

User Research

Upon first glance, I could tell the intial website had a lot of accessibility issues. Although the color palette passed the accessibility test, the font sizing and arrangement of images made it difficult for users to view the page.

Proto Persona: High Roller

High Roller is a young and hip person who is looking for high quality pasteries. They live in an affluent neighborhood with shops within a walkable distance. High Roller is looking for their daily coffee and treat.

Pain Points

No online ordering on the website - they have to call in advance
Not knowing in advance what is available. Missing out on products because it sells out quickly
Menu is hard to find and is not up-to-date.

User Research

Before interviewing users, my team and I sent out a screener survey to gather insight. We wanted to target people who like to treat themselves frequently by going to a bakery or coffee shop. After the survey, I conducted 2 in-person user interviews and all together as a team, we had a total of 6 interviews. One of the team members also interviewed one of the stakeholders.

Objectives

Understand their perception of the brand and Village Baking Co.
Understand the experience with the website
Identify pain points and opportunities for improvement
Identify what users want from the website

Survey Results

The survey showed us what their users do and expect out of a bakery. The main highlight was that most users visit the website before going to the actual location. With this in mind, we aimed to better the user/customer experience by narrowing our focus on what the user needs to see.

Affinity Diagram

My team and I put our data from our interviews onto sticky notes on Figjam and separated their pain points into reachable goals for the redesign. A significant takeaway was the overall readibility of the website and menu system.

Design

User Persona: Sweet Tooth Sally

Sweet Tooth Sally lives in Dallas, TX around Uptown. She is a foodie that works as a designer and enjoys a great coffee and pastry before work. Sally enjoys luxury living and comfort. She is a regular at Village Baking Co.

Pain Points

Thinks the font and color are not accessible
Annoyed that the menu is not update and lacks detail
Would like to see more photos of the pasteries, bread, and other products
Not being able to order online

Sweet Tooth Sally's Journey Map

Her main goal is to find information about the available products before going to the bakery.

Heuristic Evaluation

Because this was a website redesign, I performed a heuristic evaluation to further investigate what we needed to improve for the website. After doing the evaluation, I annotated the website to get a better picture of what iterations we needed to make.

Color Accessibility Test

The original website does pass the color accessibility test but it fails at the font choices as it was difficult to read. This test was also supported separately in the user insights that stated the font was difficult to read because of the size and type.

Ideation

To redesign the website so that it targets all of the pain points we discovered, we started by reworking the style kit so that all of the fonts and color scheme are accessible for the user as well as updating the images and menu items on the homepage. In addition, we will add in a responsive menu, and a feature to inform users of any updates from the bakery.

User Flow and Site Map

To better understand the flow of the website, we created a user flow of the current page. From there we created categories of each navigation to conduct a card sorting activity. As a team we sorted it the cards on our own to get a better idea of how the users would categorize each subsection. Afterwards we had 3 different people do the same. Once we had an idea of how the redesigned website should work, I directed two team members to create the site map.

Low-Fi Prototype

To be efficient with time, I split up the roles for the ideation procress. I took the time to sketch a few ideas of what the website would look like based on the inspiration and moodboard that we created. Once done, I shared the sketches within the team chat and we all voted on the best options.

UI Style Guide

As the other team members were working on their roles, I had delegated for another team member to work on the UI Style Guide based on our findings. We had agreed upon not changing too much of the company's brand and tone because that is what they wanted to represent. However, we did change the font and colors that did not originally pass the color accessibility test.

Prototyping and Testing

Mid-Fi Prototype and Usability Testing

Once the project leader returned, we all worked on the Mid-Fi Prototype together. Each person taking on a different page to create. Despite the roles being dispersed, the mid-fi prototype came together flawlessly. After the prototype was created, we conducted 6 usability testings.

Through this we found that:

Footer content should be distributed in the space
Multiple screens for locations for easier readabiltiy
Social media icons as links

A/B Testing

One important finding that we noted was that there was a mix of emotions towards the menu page. We had half of the users state that they loved the usage of all the images for the menu while the other half felt overwhelmed by the amount of information thrown at them. So as a result we agreed on doing an A/B Testing where one prototype showed the original mid-fi we created and the other prototype showcased a dropdown menu of just text.

We found that although option A was more memorable, the majority of the users preferred option B.

Hi-Fi Prototype

With the results of the A/B usuability testings in mind, we got to working on the changes for the Hi-Fi prototype. Aside from the menu, we also made iterations to the career page, location position, dividing the jobs based on location, and we cleaned up the look by removing components that did not serve the user.

To view the final product, you can go to [here for mobile] and [here for web].

Conclusion

Through this project we had to work with stakeholders and local users, this has proved to be very valuable in my journey as a UX Designer because I was able to learn that users always know best. Despite what the stakeholders want, the data showed that with the changes we made, the overall user experience was improved.

Possible next steps for this business

I imagine that if granted the time and resources, the website can be improved to have:

An FAQ page that includes information about allergens and dietary needs
An updated about this business page because the company had been reaquired recently
An updated menu page that allows user to hover over text to view the images
An online ordering system