Design a conceptual responsive website and new logo for Stella's Bakery, a family-owned Greek bakery located in Rockville, Maryland.
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?
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 goal of this project was to modernize Stella’s Bakery while increasing business revenue during the COVID-19 pandemic.
The high level objectives were:
- Design a responsive website for Stella’s Bakery.
- Design a new and more contemporary Stella’s Bakery logo.
- Develop branding for Stella’s Bakery that is consistent with its new website and logo.
I worked as the end-to-end UX designer and researcher for this project for two weeks in November 2020.
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.
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.
To determine the best time to pick up an order, users can rely on the order tracker.
My Design Process
- Market Research
- Competitive Analysis
- Provisional Personas
- User Interviews
- Empathy Map
- User Persona
- Site Map
- Task & User Flows
- Desktop Prototype
- Remote Usability Testing
- Affinity Map
- Design Revisions
- Mood Boards
- Logo Design
- UI Kit
- Revised Desktop Prototype
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.
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.
Consumers are on the lookout for something new and different in order to expand their palette.
It’s been recommended that food and beverage companies need to grow name recognition to survive and hopefully grow during the COVID-19 pandemic.
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.
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.
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.
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.
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.
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.
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.
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.
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.
- How might we inform Lukas of what differentiates Stella’s Bakery?
- How might we ensure that Lukas receives baked goods at their optimal temperature?
- How might we ensure Lukas sees appealing photographs of baked goods?
- How might we help Lukas re-experience his pre-COVID lifestyles?
- How might we inform Lukas of the attributes of Stella’s baked goods?
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.
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.
Task & User Flows
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.
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.
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.
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.
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.
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
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
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.
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.
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.
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.
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.
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.
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
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.
- This was my first time I usability tested a mid-fidelity prototype. It ended up being incredibly insightful and allowed participants to stayed focused, with all their feedback being directly related to the user experience.
- As mentioned earlier, during usability testing I discovered there was some difficulty finding eclairs within the existing Stella's Bakery menu. Before revising my wireframes, I conducted a remote open card sort to see if the menu's information architecture should be re-organized entirely. I unfortunately couldn't derive any patterns from this and therefore settled on the search bar. With more time, I would have liked to conduct additional research on this user pain point.
- 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.
View my other projects.
End-to-end mobile app that enhances the existing museum user experience through mobile navigation and augmented reality (AR) labels.
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.