Duration
80 hours in 4 weeks (Winter 2020)


Overview
Match Baker, a Chicago-based bakery and wine bar, is planning to open its retail store in the spring of 2020. As a certified Level 1 Sommelier, owner Lauren Sprowl brings years of baking prowess and knowledge of global wines to provide a one-of-a-kind culinary experience, pairing wines and mini cupcakes.

ROLE
UI/UX Designer
Project Manager

SKILLS
User Research
UX Design
Visual Design

The challenge

There are dozens of bakeries in the city of Chicago, but most of them are missing a crucial component to the way they serve cupcakes: wine.  

As a new business to the Chicago neighborhood of Ravenswood, Match Baker needs a redesigned website that offers customers and prospective visitors the ability to browse menus, submit bakery orders, purchase gift cards, submit catering inquiries, and understand the unfamiliar dining concept.

The solution

Design a responsive website that highlights the neighborhood bakery's unique pairing concept and aligns with their brand identity and attributes.

View the prototype

Want to see the mobile prototype? Click here.

01. Research

Identifying our ingredients

To get started on this project, I wanted to understand the types of features and content that people would expect from a bakery or dining establishment’s website, and what type of information they seek out prior to engaging with a food and beverage storefront (either in-person or online).

View the research plan

I conducted a competitive analysis and several interviews, both in-person and remote, with folks who frequent local bakeries to make sure I had a clear understanding of what purpose bakery websites serve.

View the competitive analysis

During the interviews, I asked questions to understand a bit about how website visitors engage with bakeries prior to visiting.

From the in-store experience, bakery visitors like the opportunity to try unique baked goods and things they can't pick up at a local grocery store.

"I generally visit bakeries that have some kind of unique product—not the typical things that you can just find anywhere."

That's good news for Match Baker, whose pairing concept is not a common one within the city of Chicago.

On the other hand, those who visit bakery websites for the first time often do so via a Google Maps search, during which they look for local bakeries in close proximity to their current physical location. Visiting a bakery in your city or neighborhood doesn't involve many risks (other than the potential for the baked good you're looking for to be sold out). The websites in this industry aren't frequented all that often, just as people don't visit a single bakery on more than a monthly-ish basis.

Additionally, while it can sometimes be helpful to know that the option exists to place an order for baked goods, it's much further down the list of reasons why someone might visit a bakery's website. Instead, they're looking for logistics (hours of operation, contact info, location), product imagery, menu, and the story behind the bakery.

02. DEFINE

Writing the recipe

After synthesizing all of my research findings, I created a persona that aligned with my research findings. I revisited this single persona's needs throughout the project, as her goals and pain points were a summarized version of the interview responses I received.

With a better understanding of the landscape and a persona to guide me, it was time to develop an information architecture plan and begin defining the solution for Lauren's new business.

After identifying the features and main content sections that needed to be present on the website, I created a sitemap that I could later use to determine which features should exist on each page.

In addition to developing a persona and sitemap, I created a feature roadmap, identifying which features were mandatory from the get-go in order to build a minimum viable product, as opposed to those that could be added post-launch.

After developing the feature roadmap, I created two user tasks and their associated UI requirements, assembling a document to outline what sorts of features and content the visitor would need to complete those tasks when visiting the site.

View the UI requirements

03. CREATE

Whisk it together, put it in the oven

Referring to the sitemap I had created, along with doing some additional research on layout trends amongst direct and indirect competitors, I sketched multiple wireframes for the pages I had identified, making sure to keep the priority of responsive design at the forefront of the sketches.

Once I had a few variations for each page, I selected the most effective based on feedback received, digitized and brought to mid-fidelity.

Match Baker had an existing logo that I worked with throughout the design process, and fortunately Lauren was open to refreshing the color palette and typeface.

It was important to make sure the colors and typeface resonate with the industry and align with the brand attributes: unique, comforting, and whimsical.

I selected colors that aligned with the colors visitors will find in Lauren's bakery - whether in the red velvet cupcake batter, a glass of red wine, or a vanilla cupcake - and chose typography that aligned with some of the brand attributes.

View the brand style tile

Once the brand style tile was in place, I was able to work with the mid-fidelity wireframes and pull out different UI elements to create a comprehensive UI kit.

With a style tile and a UI kit in place, I was almost ready to refine the wireframes and move them to high-fidelity screens.

04. ITERATE

Cupcakes are served

Before moving directly to high-fidelity designs, it was time to conduct usability tests to see whether or not the design was functional and achieved the goals it was set out to do.

I conducted three in-person usability tests, during which I observed the participants navigate through the mid-fidelity prototype (built in InVision). Keeping the tasks vague, I wanted to observe if the participants were able to navigate to different sections of the menu, sign up for the bakery's newsletter, place an order, and read more about the bakery's origin story.

View the usability test plan

Through these tests, I received helpful feedback about the overall information architecture and was able to make some minor updates while moving to high-fidelity screens, which can be accessed by clicking the below images (for the respective screens' prototype).

Next steps

Now that the design is functional, I'll determine what the best approach is for building this site.

One thing that I know: the business owner would like some amount of hands-on ability with the content, so I will likely be building this via some kind of CMS/website building solution so that she can update the menu, add images, and whatever other frequent content updates she will need to make.

In the meantime, my next steps are to:

From there, it's time to let them eat cupcakes!

Findings & Reflections

I think my biggest takeaway from this project was the reminder to let the people determine what they want in a digital product.

It would have been easy to design a bakery website based off of the bajillion examples that are already on the internet, without conducting any research. But would that website really give folks what they're looking for? Hard to say. Not worth the risk.

In my interviews, and even during informal discussions, I received invaluable feedback on what kinds of information to include on the website that hadn't even occurred to me. "Is the space ADA accessible? That should be on the website." "Can I bring my dog? As a dog owner, I always look to see if that's mentioned on the website of the restaurant I'm going to visit." The people (usually) know what they want, and it's important to listen to them.

I also learned learned was reminded that people really, really love wine and cupcakes.


© charlie weber 2021