Project Overview

Background

Founded in 1984, Upper Crust is a beloved local spot in the heart of North Austin, serving a wide arrangement of baked goods from pies to sandwiches to fresh baked bread and more.

Challenge

Taking into account the current state of the world and the effects Covid has had on businesses, many have started increasing their presence online. For Upper Crust, while they do already have an online presence in the form of a website and social media accounts, they want to revamp their site to increase their reach as well as provide customers with easier access to information about their bakery and what they offer.

Solutions

  • A Responsive Website would increase their reach by providing easier navigation to customers using different devices
  • An Updated Website Feature that provides users with definitions of common terms used in the industry

Tools used

Affinity Publisher, Figma, Discord, OBS

Project role

UX Designer (Research, Visual Design, Interaction Design, User Testing)

View Prototype

Empathize

Secondary Research

Research Goals:

  • Identify Upper Crust's competitors
  • Discover Target Audience
  • Learn about customer's experiences both online and in-person at Upper Crust
  • Learn how customers discover local bakeries

Research Assumptions:

  • Demographic is of all ages
  • People discovered Upper Crust through yelp, word of mouth, and online articles.
  • A small percentage of customers use the built-in online ordering system.
  • Customers probably use 3rd party delivery apps more often.
  • Customers are still shopping in-store through the use of the walk-up window.

Research Questions

  • How often do people use the online shop function?
  • How do people usually shop for pastries?
  • What is the overall demographic of people who go to bakeries?
  • How do people discover bakeries?
  • Who are the main competitors? (What are their strengths? Their weaknesses?)

Research Methodologies

Secondary Research:

  • Market Research: Using research already conducted in the space to learn more about industry trends
  • Competitive Analysis: Identifying key competitors in and around the local area to learn about their strengths and weaknesses.

Primary Research:

  • User Interviews: Talking with Upper Crust customers to discover their thoughts on the business as well as unravel potential frustrations they may have.

Competitive Analysis

In the competitive analysis portion, I found five local bakeries offering similar products and looked into how each competitor adjusted for Covid and how they each portray their products online.

Provisional Persona

From the market research conducted on industry trends and patterns and general demographic, I was able to create three provisional personas that roughly represent the range of customers of bakeries.

Primary Research

User Interviews

One of the key methods of research for this project was the user interviews. With this project, one of the major difficulties was finding customers to interview in the given time. Despite that, I was able to talk to a wide array of customers and get valuable feedback on their experiences with Upper Crust, both good and bad.

Empathy Map

After conducting the user interviews, I created an empathy map using the transcripts from the recorded interviews. From there, those groupings were then used to discover key insights of the customers we interviewed along with needs that would address those insights.

Insights

  • Time is the biggest factor when it comes to people's decision making
  • The UX of the online ordering system plays a large role in how people feel about ordering
  • Users like to see what they’re purchasing
  • User’s main frustration towards Upper Crust stems from Upper Crust running out of stock

Needs

  • Users need to be able to order quickly
  • Users need to have an easy time purchasing online
  • Users need to know what they’re purchasing
  • Users need to buy what they want to buy

Persona

Taking into consideration the user interviews and the data I was able to collect, I created a persona to better reflect the general demographic and their key goals, frustrations and needs.

Define

POV Statements & HMW Questions

In order to move forward, I needed more concrete problems to solve. To do that, I created a POV & HMW chart in order to expand on the original problem.

Individual Brainstorming

Once I created those "How Might We" Questions, I used those as the basis for brainstorming potential solutions that would specifically target the needs brought up in the persona.

Project Goals

After getting to sit down with the owner of Upper Crust and hearing their goals for their business, I outlined both the goals that were realized from our interviews as well as the goals stated by the owner and created a Venn diagram to hone in on a unified goal for this project.

Ideate

Feature Roadmap

Referencing the major goals I outlined, I created a product roadmap that further detailed how I would go about achieving those goals.

Site Map

To get started incorporating the main features for a MVP, I created a simple outline showcasing the hierarchy of pages within the website.

Task Flow

In conjunction with both the site map and the UI requirements that I outlined, I created a flow of actions and pages to reflect the ideal and linear nature of a user performing specific tasks.

User Flow

To broaden the scope of the task flow and start to take into account user decisions and potential drop-off points within the task flow, I needed to create this user flow to discover those deviations that could take place during the task.

Sketches

After cementing the task flows that I'd be designing, I began sketching pretty general layouts to create the general look that I planned on going for.

Medium Fidelity

Once those sketches were finished, I went into Figma to draft a mid-fidelity variant in order to proceed with prototype, then testing.

Prototyping

Desktop Prototype

In the prototyping phase, for testing purposes, I created a mid-fidelity prototype of the re-imagined website for Upper Crust Bakery. With this prototype, there were a few things I wanted to achieve and discover through testing;

Testing Goals:

  • See if users can complete the tasks
  • Test ease of navigation throughout the site
  • To identify potential frustrations users may have with the current implementation of the site

Testing Methodology:

Moderated Think-Aloud Method: I will conduct this method over Zoom or the appropriate Voice Call Software by asking participants to verbalize their thoughts and actions all while completing the specified tasks through their screen-share. All sessions, both video and audio, will be recorded via OBS with consent.

  • Scenario #1: “Pretend you are looking to buy a cake for your friend’s Birthday and this is your first time visiting Upper Crust.”
  • Task #1: Find a cake and learn more about it.
  • Scenario #2: “After looking at the available options, you have decided to purchase a 9 inch round of the Italian Cream Cake.”
  • Task #2: Find out information about the store.
  • Task #3: Purchase the cake.
View Prototype

Testing

Affinity Map

Taking the notes from our usability test, we created an Affinity Map to make sense of, and organize the data into patterns observed. From our findings, we discovered that there were two crucial insights:

  • Participants expected to learn more information on the bakery in the about page (and this includes learning about the location and hours).
  • Participants found the text-based details on the list page to be distracting.

These insights led themselves to potential solutions that led to the final revisions for our prototype.

These are the potential solutions that I ended up suggesting, in accordance with the feedback received from the usability test participants. Here,  they are arranged in order of priority, based off of impact and cost:

  • Priority #1: Move location and hour information to about page
  • Priority #2: Combine the order details with the available sizes in the product details page

One added thing that needed major updates for the High Fidelity revision was a necessary makeover. The previous sketches and lower fidelity versions of the website still looked quite outdated which was one of the major things I had intended to address when first starting this project.

Branding

Mood Board

Style Tile

UI Kit

High-Fidelity Wireframes

Desktop

Tablet

Mobile

Reflections & Next Steps

Reflections

This project definitely got me out of my comfort zone. With the other projects, there was an ease to the one-on-one interview processes as I could find acquaintances and acquaintances of acquaintances to interview. With this project, it was definitely not the case as I had to find active customers of Upper Crust to interview. In addition to that, the actual design of the website was a challenge in its own right. The case of designing a site that has more modern influences while retaining the look of a bakery website required a fragile balance between the two.

Next Steps

  • Moving forward, we’ll continue to make necessary changes as more feedback comes in.
  • Additionally, we are ready to hand off the project to the developer. In our case, we have decided to use Zeplin as our main tool to facilitate the procedure.

Reflections & Next Steps

Reflections

This project definitely got me out of my comfort zone. With the other projects, there was an ease to the one-on-one interview processes as I could find acquaintances and acquaintances of acquaintances to interview. With this project, it was definitely not the case as I had to find active customers of Upper Crust to interview. In addition to that, the actual design of the website was a challenge in its own right. The case of designing a site that has more modern influences while retaining the look of a bakery website required a fragile balance between the two.

Next Steps

  • Moving forward, we’ll continue to make necessary changes as more feedback comes in.
  • Additionally, we are ready to hand off the project to the developer. In our case, we have decided to use Zeplin as our main tool to facilitate the procedure.