Ensuring Food Quality

Project Overview
Design a conceptual responsive website and new logo for Stella's Bakery, a family-owned Greek bakery located in Rockville, Maryland.
Project Type
Speculative
When
Autumn 2020
Role
UX/UI Designer
Stella's Bakery is a small establishment known countywide for its European-inspired delectables, offerings ranging from the Greek baklava to French eclair. However, in the time of COVID-19, the company continues to sell its products in its traditional manner: walk-ins and orders over the phone. For this project, I assumed both the company and its customers value safety. With this all in mind, how might we ensure that while indulging users in some semblance of their former lifestyles?
View Solution
The Problem

Not Easy as Cake

Prior to the COVID-19 pandemic, there were an estimated 3,000 bakeries in the United States alone. Bakeries are often a gathering place of community, where friends can catch up over a slice of cake or students can study while fueled by freshly brewed coffee.

However, this has been taken away due to the isolatic reality of the COVID-19 pandemic, resulting in bakeries either closing permanently or resorting to the less-than-atmospheric take-out delivery option.
The Challenge

A Smart Cookie

The goal of this project was to modernize Stella’s Bakery while increasing business revenue during the COVID-19 pandemic.

The high level objectives were:
  1. Design a responsive website for Stella’s Bakery.
  2. Design a new and more contemporary Stella’s Bakery logo.
  3. Develop branding for Stella’s Bakery that is consistent with its new website and logo.
My Role

Fit for a King

I worked as the end-to-end UX designer and researcher for this project for two weeks in November 2020.
The Solution

Answer Key

My research uncovered that users experience a noticeable drop in quality when ordering food for pick-up. To give users a sense of control and quality they expected, I designed the main features and screens below.

Online Ordering

From the site, users can more safely order baked goods from Stella's Bakery instead walking into the shop or relying on an answered phone call.

Order Tracker

To determine the best time to pick up an order, users can rely on the order tracker.
My Design Process

Let's Get on the Same Page

I. Empathize

II. Define

III. Ideate

IV. Prototype & Test

  • Market Research
  • Competitive Analysis
  • Provisional Personas
  • User Interviews
  • Empathy Map
  • User Persona
  • Brainstorming
  • Site Map
  • Task & User Flows
  • Wireframes
  • Desktop Prototype
  • Remote Usability Testing
  • Affinity Map
  • Design Revisions
  • Mood Boards
  • Logo Design
  • UI Kit
  • Revised Desktop Prototype

I. Empathize

Gaining an understanding of the market and users.

I. Empathize
Secondary Research

Uncovering Information

I started this project by completing secondary research so that I could uncover existing information about the bakery industry. The methods I used were market research and a competitor analysis; later assembling information from the former into a provisional persona.

Market Research

I conducted market research in order to gain a broad understanding of the bakery industry. Through reading news articles online, I sought out potential opportunities or threats that Stella's Bakery may want to consider moving forward. Below are a few key findings I uncovered.
Nuts About You
Consumers appreciate inclusivity, even in the food industry. This may mean offering gluten-free baked goods, for instance.
Not Cookie-Cutter
Consumers are on the lookout for something new and different in order to expand their palette.
Brownie Points
It’s been recommended that food and beverage companies need to grow name recognition to survive and hopefully grow during the COVID-19 pandemic.

Competitor Analysis

After gaining a high-level understanding of the bakery industry, I dug deeper and compared Stella's competition to learn from their user experiences. For each bakery, I visited its site and completed an order while writing notes along the way.
I looked at both direct and indirect competition; concluding that appealing photographs of offered baked goods are integral to any bakery's UI design.

Provisional Personas

In order to determine who to reach out to later in my user interviews, I devised a series of provisional personas. These were created by examining by examining users commenting on Stella's Yelp and Facebook pages.
Primary Research

Discovering Information

Once secondary research was completed, I moved onto primary research so that I could discover new information about the Stella's Bakery customer. I completed this by conducted a series of user interviews.

User Interviews

Acknowledging that provisional personas can only get us so far in design, I sought out individuals who embodied the characteristics possessed by the different personas. I ended up interviewing seven participants, with 71.4% being female and 85.7% being within the 25 - 34 age demographic. Through hearing each one speak, I was truly able to gain empathy for the user.
Research Synthesis

Making Sense of It All

With primary research finished, it was time make sense of all the information I had gathered. However, before digging too deeply, I transcribed each of my user interviews so that any obtained details would remain raw and unedited.

Empathy Map

With the help of my transcripts, I created an empathy map using statements that were spoken. Direct quotes were written down on post-its and organized by the following categories: doing, thinking/feeling, seeing, hearing, gains, and pains. Each participant was represented by a different color to enhance readability and help in visualizing majorities later.

Derived Insights

Within the categories of the empathy map I was able to recognize emerging patterns of participants' behaviors, as well as their pains and gains in relation to bakeries. This allowed me to further synthesize the information I collected during the user interviews and gain additional empathy for the user. The most prevalent patterns were grouped into insights. For each insight, I wrote an adjacent user need so that I could later address it in my designs. These insights and needs are all listed below.
Insight #1: Users are on the lookout for unique offerings.
"So I worried that the menus were not updated enough. What if they made some super cool secret cookies?"
Need: Users need to be informed of what differentiates Stella’s Bakery.
Insight #2: Users experience a quality drop when ordering food for pickup.
"Takeout is just not as good... You're not going to eat it sitting outside on their sidewalk, you're going to go take it somewhere. And that travel time really lowers the quality of the food. So something that was exceptional would now just be delicious."
Need: Users need to receive baked goods at their optimal temperature.
Insight #3: Users use photos to determine potential taste of baked goods online.
"I'd click the store, see if it looks appealing. Then look at their photos. If their photos look good... I guess that would be an indicator of if I decide to go ahead and purchase from them."
Need: Users need to see appealing photographs of baked goods.
Insight #4: Users are sentimental for their pre-COVID lives.
"Previously, before the pandemic, I used to spend a lot of time at cafes... I would just sit there at the bar... Just sit there and do something a little different. And drink a mocha for a couple hours. So I don't get that anymore... It was a good life."
Need: Users need to re-experience their pre-COVID lifestyles.
Insight #5: Users appreciate high-quality baked goods.
"Quality makes a difference."
Need: Users need to be informed of the attributes of Stella’s baked goods.

II. Define

Revealing the Stella's Bakery user, his needs, and his problems.

II. Define
User Persona

Meet Lukas

To summarize all synthesized information from the empathy map and its resulting insights, I created a persona named Lukas. For the remainder of the process, Lukas acted as a continuous reference point of the targeted Stella's Bakery user. All information of the persona was directly derived from my research to ensure accuracy and eliminate bias.
Brainstorming

Outside of the Box

Based on the insights that emerged earlier as I created my empathy map, a series of "How might we...?" questions were established. These inquiries, listed below, later acted as prompts for my brainstorming.
  1. How might we inform Lukas of what differentiates Stella’s Bakery?
  2. How might we ensure that Lukas receives baked goods at their optimal temperature?
  3. How might we ensure Lukas sees appealing photographs of baked goods?
  4. How might we help Lukas re-experience his pre-COVID lifestyles?
  5. How might we inform Lukas of the attributes of Stella’s baked goods?

Individual Brainstorming: Mind Map

In order to come up with ideas of how I might address the needs of Lukas, I chewed on the "How might we...?" questions from earlier. For each question, I listed as many potential answers I could based on what design patterns already exist on other sites, as well as anything that simply came to mind.
Site Map

Getting Organized

With my ideas prioritized according to the project, I put together a site map showcasing the best solutions. This would inform the overall organization of Stella's site, as well as how I would design its navigation bar. Some of the information architecture was based on what already exists on the Stella's Bakery website. Otherwise, I made assumptions, since I knew I would later determine the app's overall navigability through usability testing.

III. Ideate

Generating solutions to the problems Lukas is facing.

III. Ideate
Task & User Flows

Let It Flow

Using the application map as a guide, I created task and user flows. These were made so that I could understand how a user might achieve his needs discovered earlier through user interviews.

Task Flows

I started with task flows in order to understand the potential actions and pages a user would face. These were based entirely on assumptions since I knew I would be testing the same exact flows in usability testing later on.

User Flows

Knowing that task flows are imperfect due to a lack of acknowledging a user's decisions, I wanted to generate a better empathy for the user. Therefore, in the form of user flows, I thought of how he would navigate through the app with decisions in mind. Like the task flows I created prior, these were based entirely on assumptions since I knew I would eventually conduct usability testing.
Wireframes

All Wired Up

Now that I had a sense of how a user would potentially navigate the Stella's Bakery site within its information architecture, I designed a series of pages. Throughout I remained inspired by the design patterns of other food service sites, such as Grubhub and DoorDash, to hopefully decrease cognitive load for the user.

Low-Fidelity Wireframes

I started by sketching low-fidelity wireframes on a whiteboard to spew out ideas and pages. This helped me quickly communicate the user experience I was striving for without spending hours on Adobe XD.

Mid-Fidelity Wireframes

After sketching wireframes on a whiteboard, I recreated the ones I felt addressed the user's needs the best in Adobe XD. As I went along, I refined some of the elements, such as spacing and overall layout. Despite this, I still kept it relatively basic. This is because during usability testing, I wanted users to focus more on the user experience itself and less on the user interface design.

IV. Prototype & Test

Building best ideas and iterating based on real user feedback.

IV. Prototype & Test
Desktop Prototype

Ready for Testing

The mid-fidelity wireframes were then configured into a prototype on Adobe XD. This finally gave me the ability to test the assumptions I made about the site's overall navigability, as well as the pages and actions associated with different tasks.
Remote Usability Testing

A Dry Run

Using the complete desktop prototype, I carried out remote usability testing on Zoom with five participants. Throughout, each participant engaged in a think-aloud exercise and were recorded with expressed permission. This allowed me to receive real-time feedback on the desktop prototype and gain additional empathy for users through hearing their opinions. Just like my user interviews, I transcribed each test so that any details would remain raw and unedited.
Affinity Map

Room for Improvement

Using the transcripts from usability testing, I pulled salient quotes from each participant on wrote them on post-it notes. Similar to the empathy map, each participant was represented with a different color in order to increase readability and help in visualizing majorities later. Using the affinity map, I synthesized what participants said by separating post-its into the different tasks they completed, as well as a section designated to any remarks about the overall experience. From there, I was able to distinguish patterns of pain points and successes from my testing.
Design Revisions

Change for the Better

Each pain point that was discovered through the affinity map was then evaluated by how much time it would take to fix against how many participants mentioned it during testing. This helped me determine not only what needed to be fixed on the mid-fidelity wireframes before designing the high-fidelity prototype, but which fixes are more important than others. These fixes became known as my design revisions, with an explanation of how I conquered one below.

Making Specific Products Findable

During usability testing, 60% of users confessed that they struggled to find eclairs within Stella's menu. Some stated it was simply because they didn't know which category it would fit under. To address this, I added a search bar to allow a user the ability to be specific when looking browsing through the menu while respecting Stella's existing information architecture.
Mood Boards

Getting in Character

Once I understood what needed to be fixed in my designs, I went back to redesign the fundamentals of Stella's branding. This was completed so that when I finally designed in high-fidelity, I had inspiration to refer back to. I started by creating a series of mood boards based on the brand attributes Stella's Bakery wishes to convey.
Logo Design

Putting On a Good Face

Using the mood boards as inspiration, I redesigned Stella's logo so that it better reflected the brand attributes of the bakery. I started by sketching a series of ideas before converting the one I thought conveyed the attributes the best digitally through Adobe Illustrator.
UI Kit

On Brand

After assembling the different elements of Stella's new branding, I created UI kit to act as a reference document and ensure consistency. If the Stella's Bakery ever wanted to build additional pages for the site, all of the main UI elements would all be in one place.
Revised Desktop Prototype

Making Amends

Once Stella's branding was fully established, the revised mid-fidelity desktop wireframes were updated to high-fidelity with the established UI design elements. From there, a new desktop prototype was created in Adobe XD.
View Solution
Reflections

Looking Back

Next Steps

Onwards

  • Complete another round of usability testing to ensure previous user pain points were successfully addressed.
  • Conduct additional UX research in relation to Stella's menu and its information architecture.
  • Develop prototypes of mobile and tablet versions of site and conduct additional usability testing.

Like what you see?

View my other projects.

Smithsonian

End-to-end mobile app that enhances the existing museum user experience through mobile navigation and augmented reality (AR) labels.

Spotify

Adding features to an existing app that decreases a user's reliance on company's competitors through recommendations and timed streaming.

Primary illustrations by absurd.design
Additional illustrations by Alex Muravev, Olga, and Tatyana from the Noun Project.