top of page

Sunrise Bakery

Mobile App and Responsive Web Design

sunrise bakery transparent.png

My contributions

ROLE

UI/UX Designer and researcher, designing a mobile app and responsive website for Sunrise Bakery, from conception to final prototype

RESPONSIBILITIES

Competitor analysis

Wire-framing: Paper and Digital

Low-fidelity wireframes and prototypes

High-fidelity layouts

Determining information architecture

User Interface Design

Accounting for accessibility

Usability testing and validation/project information

PROJECT TYPE

UX Design

PROJECT DURATION

May - July 2023

DESIGN TOOLS

Sunrise Bakery

Sunrise Bakery strives to deliver a wide variety of bakery foods as well as coffees, teas, and various cold drinks. 

The Sunrise Bakery app targets busy working adults who lack the time to wait in line for their order or the time to pick it up altogether. 

Sunrise Bakery also targets customers who order often in groups, as the app allows users to easily place group orders by the simple scan of a QR code. 

Adobe XD, Figma, Photoshop

The Process

In order to best cater my designs to my targeted users, I utilized the Design Thinking methodology. This approach, formulated by the Hasso Plattner Institute of Design at Stanford University, helps UX designers address complex problems by understanding the users needs. 

The process all starts with empathizing with users, followed by defining the problem that needs to be solved, ideating, prototyping, and testing. 

My project (3).png
Problem Statement

Busy workers lack the time to wait in line for their orders and/or they lack the time to pick up their order from Sunrise Bakery. 

The goal

The goal of Sunrise Bakery's website and app is to allow a user to easily place an order for themselves or for a group for pick up or delivery.

Research

Competitive Analysis

The initial step in my research was to understand successful patterns in current bakery websites and identify missing gaps. I explored 5 different similar bakeries, some of which were large corporations, and others that were smaller. I analyzed the good and bad of each competitor, and intensively studied their apps and websites. I noticed that there was something missing throughout every app and website I studied. None of the apps allowed for a simple way to place group orders. 

I took this idea and ran with it. I thought to myself about the times when I have been asked to write down my coffee order in work settings, and how much easier it would be if everyone could simply scan a QR code and customize their order from their own phone. 

Secondly, I had some accessibility concerns with multiple competitor's apps and websites. I checked their contrast ratio for a few of these organizations websites, and multiple websites did not meet WCAG guidelines for accessible guidelines. 

User Interviews

In the empathize stage, I created interview questions and conducted interviews with 2 different groups of users:

  • People who had ordered from a food delivery app before 

  • People who had not ordered food or drinks from an app before

User Interviews:  

Style
Unmoderated
Participants
5 people interviewed
Duration
15 minutes each
Location
Remote
Initial Questions
  • Have you ever ordered food or drinks for delivery or pick up before? 

  • If you have ordered food for delivery or pick up before, have you used a telephone, mobile app, or website to place your order? 

  • How often do you order items for pickup or for delivery? 

  • What is your motivation for placing an order for pick up or for delivery? 

  • How often do you order in group settings?

Synthesize

User Findings

I synthesized my findings from the interviews under the 4 main categories below in order to create a more solid frame and foundation for my designs moving forward.

Motivations, Behavior. pain poins SB.png

For this step it was important to understand the target user and the specific situation and motivation for placing an order for pick up or delivery instead of placing an order inside the store. In addition, it was important that I heard from individuals who have tried using other online ordering apps and for me to listen to what they had to say about the pros and cons of the online ordering apps they have tried before. 

insights gained SB.png

Understanding the User

User Interviews

In the define stage I conducted thorough user research, including developing personas, user stories, and user journey maps. 

 

Synthesizing the data from the interviews, I was able to create two distinct user personas and and their pain points.  This helped me to write definitive problem statements, and formulate their user journeys as they navigate the app and website.

 

This new understanding allowed me to recognize roadblocks and pain points to correct, and thus improved my designs.

Persona #1

Problem Statement

Jordan is a CFO at a large company who needs to order bakery items for delivery without ever having to leave the office so that she can continue working on completing the days tasks efficiently. 

new jordan sb.png

Persona #2

Problem Statement

Kasie is an intern at a law office who needs an easy way to place group orders from her local bakery so that she does not have to worry about accidentally getting anyone's order wrong.

new kasie sb.png

Storyboard

I created a big picture storyboard as a way to put myself in the user's shoes  and imagine the steps they might take to complete a group order on the Sunrise Bakery app.

In this big picture storyboard, you can see one user showing their phone with the QR code to two group members, so that they can easily place a group order.  

Storyboard 2.jpg

Ideate

Crazy Eights & "How Might We" exercises

Identify gaps and opportunities

  • How might we design an app for a bakery that lets users easily place orders for delivery so that they will be able to continue on with their day without having to leave to pick it up?

  • How might we design an app for a bakery that allows users to easily place group orders so that they don't have input everyone's order on one device?

Ideas generated with Crazy Eights Design Sprint

  • Provide the option for users to easily start a new group order by providing a personalized QR code where every person in a group can scan the code and input their own order on the same group order. One person in a group can have others scan a personalized QR code, and then everyone else in the group can add their order from their own phone. The person with the QR code can see all of their orders and submit the order for delivery.

  • Provide an option for users to easily place an order from Sunrise Bakery for delivery so that they do not have to pick it up in the bakery.

Crazy 8's s.b.jpg

Crazy 8's is a core Design Sprint method. It is a fast sketching exercise that challenges designers to sketch eight distinct ideas in eight minutes.

Design Flow

user flow s.b..png

Information Architecture

I.a. s.b..png

Paper Wireframes - App

IMG_8615.jpg
IMG_8615 2.jpg

Digital Low-Fidelity App Wireframes

During user interviews, I discovered that users are more likely to order food online if there are pictures of the items on the menu. There are many food delivery apps out there that provide a description of the food item, but not many include both a description and a photo. After finding this out, I made it a point to include a photograph and detailed description of the item. 

Secondly, I found that many users were frustrated with long onboarding processes. For this reason, I made the onboarding process extremely simple. All users need to do is type in their email and password, and there is even an option to save their login information to make the next time a user orders from the app even easier. 

Lastly, many interviewees described how frustrating text-heavy menus were. For this reason, I found it important to focus on the pictures of the items on the menu and make those the main focus.
 

onboarding lo fi s.b..png
order item lo fi s.b..png
main menu lo fi s.b..png

Low Fidelity App Prototype

This low-fidelity prototype, built in Figma, connects the the 13 frames showing the primary user flow of ordering a menu item and inputting the payment and delivery details to submit the order.

This low fidelity prototype contains the interactive connections that allow the user to proceed both forwards and backwards within the sequence. Users are always able to return back to the home screen as well using the back arrows. After the order is submitted, they can then click the "back to home" button to return to the beginning.
 

lo-fi wireframe s.b..png
lo fi wire w_ connections s.b..png

Usability Study

Before conducting my usability study of the Sunrise Bakery app, I carefully drew up a UX Research study plan which included my research questions, KPI's, and methodology. I strove to understand how easy it was for users to navigate the app, determine if there were any parts where users were getting stuck, and learn from the user's click path. 

Research Questions: 

  1. How long does it take for a user to find the items they would like to order and input their payment and delivery details in the app? 

  2. Is the payment process easy for the user? 

  3. Are there any parts where the user is getting stuck? 

  4. What can I learn from the steps that the users took to place an order on the app? 

Key Performance Indicators: 

  1. Time on Task: measure the time it took for users to order, pay, and enter a delivery address on the Sunrise Bakery app.

  2. System Usability Scale: A questionnaire to evaluate user feedback.

Methodology: 

  • Unmoderated usability study

  • Location: United States, remote 

  • Date: Sessions took place on June 13th, 2023 and June 14th, 2023 

  • Five participants 

  • Each session will last 15 minutes and it will include an introduction, a list of tasks, and a questionnaire on their experience. 

Usability Study: Findings

1

3/5 participants were frustrated that there was no breakdown of the total cost on the payment screen, therefore they were unsure of how much the delivery fee was.

2

2/5 participants recommended a "save address" button while checking out if they wish to order from the same location again.

The Outcome: Refining the Design 

After the testing stage, I went back to my initial designs and specifically reconsidered the checkout process screens based on the valuable feedback and recommendations I was given from the usability study.

At this point I was able to focus on my favorite part of the UX design process: choosing colors, fonts, and images to include in my mockups! While editing my low-fidelity designs, I also made sure to take into account accessibility considerations. 

 

This section shows examples of changes in screen designs as well as my polished high-fidelity mockups. 
 

Mockups: Low Fidelity to High Fidelity

In my usability study, 60% of users expressed frustration that there was no breakdown of the total cost while going through the checkout process. They wanted to know exactly how much the delivery cost was and how they got to the final total total amount. For this reason, at the bottom of the payment screen I added a summary which contained the breakdown of the total, including the subtotal as well as delivery fee.

payment 2 phones.png
Mockups: Low Fidelity to High Fidelity

2/5 participants in my usability study were surprised that there was no "save address" button in the event that a user would like to place another order on the app another time. This was a wonderful idea from the participants of the usability study, so I made sure to add that feature to my last screen of the checkout process. 

delivery 2 phones.png
Key Mockups for Mobile App

In the beginning of my research, I conducted interviews with both people who had used delivery apps before in the past, and those who had not. I learned that people who had used delivery apps before in the past often were easily frustrated by food delivery apps when they were too text-heavy with not enough pictures of the food item. For this reason, I focused in on the pictures of the food and drink items, making sure they were high-quality, so users knew what to expect when there order would be getting delivered to them. 

 

Secondly, interviewees expressed that they wanted a delivery app with a smooth sign up and log in process. To me, this meant a few different things. First, it meant making the process as little text-heavy as possible. All a user needs to do to sign in or sign up is to enter their email and a password. Secondly, I included helpful features such as a "Forgot password" button and a "Remember me" button for when a user signs in a second time.

 

sign in and sign up iphone.png
homepage_main menu iphone.png

High Fidelity Mobile Prototype

This high-fidelity prototype, built in Figma, contains screens for on-boarding/ signing in, then it allows users to order food or drinks from Sunrise Bakery. There are many options for different food and drinks, spread amongst 4 food categories and 4 beverage categories (shown in the fourth picture above). Each category includes 8 different options, which meant 64 detailed screens showcasing the food and drinks offered at Sunrise Bakery.There is also the option for a user to pick up their order instead of having it delivered. 

 

I also had to account for different user flows, so if the user decided to order a beverage over a bakery item, the prices were not the same which meant different checkout screens. 

In total, my fully-functioning prototype contains 723 screens and over a thousand connections. 

700+ hi fi s.b..png

Prototype in Motion

sb app gif.gif

Redesigning the Desktop Screens: High Fidelity Mockups

The desktop/web version of Sunrise Bakery is almost identical to the app version, with a few added features. Interested users can still choose to order for delivery or pick up, but they also have the option of ordering an eGift card to send to someone. 

It was important to me that the website and app have a very consistent feel to them. The colors, typography, and images stayed consistent throughout the app as well as desktop website. The main difference between the app and the website is the amount of text and information on the desktop website, because there was more space to fill on a desktop screen than an app.

Some other notable differences are the addition of a page where users can learn how to download the Sunrise Bakery app, and a page where users can learn more about the Perks program and sign up for it.

Screenshot 2023-07-15 at 4.43.47 PM.png

Key Mockups

Web 1920 –Homepage.png

Homepage

number 2 menu page.jpg

Main Menu

giftcard 3 mockup.png

Gift cards

High Fidelity Desktop Prototype

This high-fidelity prototype, built in Adobe XD, contains screens allowing users to create an account, order a beverage or bakery item for pick up or delivery, order an eGift card, and read more about the company. The desktop website also goes more in depth about the company and their values.

I had to account for many different flows the user could take. The user could be on the website to order food or beverages, order a gift card, or maybe they were just there to look for more information on the company. If they were there to order food or beverages, they also had the choice between delivery and pickup. I made sure that all of these potential flows were accounted for in my prototype. 

In total, my fully-functioning prototype contains 345 screens and over a thousand connections. I also created 32 gift card designs of my own in Figma, and uploaded those images to the gift card page in Adobe XD.

newest s.b. hi fi.png

Accessibility Considerations

1

Keeping in mind the speed and duration of motion in my designs, I have followed the recommendations provided by the World Wide Web Consortium, which recommends that transitions should be between 150-500 milliseconds.

2

I made sure that my text, buttons and icons were of an appropriate size to be easily legible, no matter upon what screen size a user was viewing and using the site. 

Going Forward 

In the final stage of my case study, I explored the takeaways and next steps of my project, considering what I have learned and what I could improve on going forward.

Takeaways:

Screenshot 2023-08-04 at 11.43.42 AM.png

Impact: 

The feedback I have received from my usability study and my high-fidelity prototype for my app, desktop and mobile site has been positive. They show that the design of this app and website is usable and meets the user's needs.

A quote from participant feedback:

"The app made it so easy to place an order for delivery! I would definitely use this app as a go-to for ordering coffees and bakery items for the office!"

Screenshot 2023-08-04 at 11.44.00 AM.png

What I learned:

In designing Sunrise Bakery to be responsive on desktop and mobile, I learned that not only extensive user research, but also strict attention to design guidelines for different sized screens, play a crucial role in the UX design process.

Next Steps:

1

Conduct further user research to determine any new areas of need.

2

The next step is collaborating with a developer to launch this app into the app store. 

Thank you!

Thank you for your time reviewing my work on the Sunrise Bakery website and app! If you'd like to connect with me or view more of my work, my information is provided at the bottom of the screen!

bottom of page