GoBread
The ultimate app for crafting your dream sandwich and having it delivered to your door!
About the project
This project marks my first big leap into the world of UX design, completed as part of the Google UX Design Certificate program. With a background in design, I felt like I had a head start, which did make things a bit easier than expected, but it was still a challenge. I selected the design prompt "design a food order customization app for a sandwich shop" simply because I'm a huge fan of sandwiches. I also thought it would be fun to bring this idea to life, and spoiler alert – it absolutely was!
My role
UI/UX Designer
Timeline
2 months
Platform
Figma
Problem
Users experience inconvenience and frustration when ordering customized sandwiches for delivery due to the lack of user-friendly online platforms, leading to difficulties in communicating preferences clearly and efficiently, as well as uncertainty regarding the status of their orders.
Solution
It is necessary to develop an intuitive and user-friendly app that enables customers to easily customize their sandwiches online and track the status of their orders in real-time. Through clear ordering process, our app aims to alleviate the stress and uncertainty associated with ordering customized sandwiches for delivery.
Process
User research
I kicked off the project by conducting qualitative research, aiming to gain a deeper understanding of the end users. I interviewed 7 people for this research.
My goals:
Explore the processes and emotions involved in ordering customized food.
Identify user needs and frustrations as they order food online with delivery from a restaurant.
Target audience:
People who order from a sandwich shop at least once a week
Age 20-50
Live in urban and suburban areas
Questions:
Can you describe the process that you go through when ordering customized food from a restaurant?
What challenges do you face in the ordering process? How does this make you feel?
Is there any way in which you feel these challenges could be resolved?
What cool features would you like to see on a food order customization app?
Pain points
After conducting research, I identified several pain points users face when ordering food:
Personas
Research helped me identify key themes, which I used to build two detailed user personas that reflect the characteristics of my target audience. Let me introduce Janine and Ken!
By addressing the specific needs and frustrations of users like Janine and Ken, I can tailor the food ordering platform to provide a seamless, efficient, and satisfying experience for a broad range of customers.
User journey map
I created a user journey map for Janine, which helped me visualize the path she would take to interact with the product. By empathizing with her and imagining her emotions while using the product, I was able to identify improvement opportunities.
Problem statement
Based on the personas I created, I was able to write specific problem statements for each of them. Initially, I identified an overall problem, but after conducting thorough research, I developed more accurate and detailed problem statements that address real issues. These targeted statements will help in solving the actual problems users face.
Janine
Janine is a busy therapist who needs to order a customized sandwich without any stress because she is tired and doesn’t want to deal with the sandwich shop’s staff.
Ken
Ken is product manager who needs to easily track his order because he prefers not to spend time calling the sandwich shop to inquire about his order's status.
Value proposition
Then, it was time to start thinking about the features of my product. I came up with lots of features, but then I cut it down to essential ones that will satisfy the needs of my users. Here is the list of what my product will offer to users:
Order a sandwich with delivery
Customize a sandwich from the menu
Online payment (saved credit card information)
Order history page
Profile page
Track order page
Cart (delete items from the cart)
Easily search favorites and popular items
Competitive audit
For the competitive audit, I researched the web to identify direct and indirect competitors to my product. I then downloaded and carefully used their apps, resulting in the following insights (you can follow the link below to view the original competitive audit in Google Sheets):
Storyboard
And this is the part where I finally got to be creative and draw something! Storyboarding is a fun and engaging way to better understand the user flow.
Scenario:
An app that allows users to order customized sandwiches with delivery.
This is the big–picture storyboard (focusing on the user needs):
And this is the close–up storyboard (focusing on the product):
User flow
My next step was to create the actual user flow, outlining the typical path a user takes on my app. This process involved considering the actions users will take, the decisions they will make, and the screens they will see.
Information architecture
Building the information architecture or site map was the first major challenge I encountered on my journey into UX. It required extensive thinking and planning. Often, I would leave my desk and return later to make changes with a clear head. But in the end I did it!
Paper wireframes
At this stage, I began experimenting with different techniques to find the best workflow for myself. Initially, I sketched wireframes on paper, but then I decided to clean them up digitally on my iPad. Ultimately, I found that starting with a rough sketch on paper and then refining it digitally on the iPad worked best. For important screens, I sketched a few variations and then combined the best features of each into the final version. My goal was to create a rough idea that I could improve later. In industrial design, we always start with rough sketches and make them more detailed with each iteration. Here are my first paper wireframes:
Digital wireframes
Based on my paper wireframes, I created more accurate and clean digital wireframes. And that took forever! It was my first time using Figma, and I was figuring it all out while making the wireframes. Plus, I didn't know about auto layout at that time. I applied it to everything only after the usability study. The lesson I learned here is that "learning on the go" isn’t always the best approach. Next time I learn a new program, I'll definitely watch a bunch of tutorials first.
For the checkout process, I decided to reduce cognitive load by breaking it into smaller, more manageable steps.
Low–fidelity prototype
Then I "connected the dots" and turned my wireframes into the first real prototype. The main user flow involves ordering a sandwich for delivery, which includes the onboarding process, adding items to the cart, and checking out.
Research plan
Introduction:
Title: Creating GoBread ordering and delivery app
Author: Laura Kuljanova, UI/UX Designer, klaura56.mt@gmail.com
Stakeholders: Laura Kuljanova
Project background: I’m creating an app for a fictional GoBread sandwich shop to help people order customizable sandwiches, sides or drinks whether they want to skip a line at the GoBread sandwich shop or just get it safely delivered.
Research goals: Determine the elements of the GoBread app that are difficult to use or unappealing. Determine if users can successfully complete core tasks : sign in, navigation, ordering, checkout process and order tracking.
research questions:
Are the UI elements large enough and placed well?
Is the checkout process too long and confusing?
Are there any parts of the ordering process where users are getting stuck?
Are there more features that users would like to see included in the app?
Are there any design changes that can be made to improve the user experience?
Are users able to successfully order a sandwich that they want with delivery?
Is the customization process easy?
Key Performance Indicators
User error rates
System usability scale (SUS)
Conversion rate
Methodology
Unmoderated usability study
Location: Kazakhstan, remote
Length: Each session will last 10-15 minutes, based on a list of prompts, with a SUS following the study
Compensation: No compensation
Participants
Participants are anyone who orders out at least once a week
Participants live in urban or suburban areas
Two males, two females, aged between 18-65
Script
Introduction
Send participants a message.
“Hey! I’m creating an app for a fictional GoBread sandwich shop app to help people order customizable sandwiches, sides or drinks with delivery. I made low-fidelity prototypes of this app and am currently conducting a usability study to evaluate the product by testing it on users. I would really appreciate it if you could participate in my usability study. It would only take 10-15 minutes.”
Instructions:
Please answer the basic questions about your background.
Name
Age
Gender
Where do you live?
How often do you order takeout?
Start the usability study. Start screen recording. Turn on the microphone. Please, think aloud while going through the study. Follow the link to view the prototype. https://www.figma.com/proto/bLpMN868x7dLHvSUx3VQ07/GoBread-app?type=design&node-id=123-117&t=2U4nxWmfyBEob1fl-1&scaling=scale-down&page-id=0%3A1&starting-point-node-id=123%3A117&mode=design
Prompt 1: Go through the onboarding process: get from splash screen to home screen (only delivery option is available)
Follow-up question: How easy or difficult was the onboarding process? Is there anything you would change?
Prompt 2: Choose a sandwich (for this prototype ingredient customization is not working)
Follow-up question: What do you think of the customization screen? Is there anything you would change?
Promts 3: Add a sandwich to cart and go through the checkout process
Follow-up question: How easy or difficult was it to complete the order? Is there anything you would change?
Prompt 4: Track order
Follow-up question: What do you think of the track order screen? Is there anything you would change?
Prompt 5: Find order history
Prompt 6: How do you feel about the user interface design at this stage?
Complete a quick questionnaire. Follow this link. https://www.surveymonkey.com/r/9LXQXVD
SUS
I think that I would like to use this app frequently.
I thought there was too much inconsistency in this app.
I thought the app was easy to use.
I found the various functions in this app were well integrated.
I would imagine that most people would learn to use this app very quickly.
I felt very confident using the app.
The main user flow to order a sandwich is clear.
I found the checkout process very cumbersome.
I found the onboarding process frustrating.
Send me a video of the recorded usability study with answers to basic questions.
Notes
I took notes while reviewing the usability studies that participants sent me and then organized these notes in a Google spreadsheet.
Affinity diagram
I created an affinity diagram by organizing data from usability studies into groups with common themes. This helped me see the big picture of all the flaws in my app. When I was making the prototype, I thought I had considered everything. However, after conducting the usability study and creating the affinity diagram, I realized that I missed so many things. I learned how important it is to test your product with real users. No matter how smart you are, you still need other people’s perspectives.
Themes
I then looked for patterns and identified themes. I considered a theme when multiple users were confused about the same thing. After identifying each theme, I added a recommendation to address it.
Improvements
Based on the findings from the usability studies, I revisited Figma and made essential improvements. This made me feel like I was finally getting closer to the final product!
I then made a few other improvements as well.
Style guide
Before moving on to UI design, I read "Practical UI" by Adham Dannaway. I learned that great UI designers don’t just have an "eye" for good design; they follow specific guidelines that make their designs effective.
For this project, I decided to use this bright orange as my primary color. Orange is known to attract attention and stimulate appetite, making it ideal for a food delivery app. I then created a monochromatic color palette, consisting of variations of my primary color. This approach provides a more cohesive look and conveys a strong brand presence.
I used APCA instead of WCAG 2 to measure contrast because it’s more practical. To save time, I utilized the Figma plugin "Visual Contrast" by Nowork.
High-fidelity prototype
High-fidelity prototypes were definitely more intricate. Suddenly, I had to juggle a lot of design elements: spacing, size, fonts, colors. It was all about bringing them together to create a balanced and clean UI.
Onboarding
Get started quickly with our intuitive onboarding process. You can either sign up, log in with their existing credentials, log in with social accounts or skip straight to the Home Screen for immediate access.
Home
Browse through a variety of sandwiches, sides, and drinks.
Customize
The intuitive customization screen empowers you to personalize any sandwich exactly how you like it.
Cart
View your cart, make any changes, and complete your order.
Checkout
All your information is already filled in based on your previous selections. Simply review the details for accuracy and proceed to the confirmation screen.
Order tracking
On the order tracking screen, you can conveniently track your orders and get in touch with your courier.
Profile
On the profile page, you can update your personal information and access other relevant details like order history, rewards, and support options.
Order history
Users can view their order history and reorder any item individually or the entire past order with ease.
High–fidelity prototype
I could hardly believe it; just like that, I've reached the last step of this journey. Here's the final prototype, and I'm incredibly proud of it!
After thoughts
Challenges faced
I encountered lots of challenges throughout this process, but my motivation to complete it never failed. The most demanding parts were likely information architecture and creating early wireframes, as they required the most cognitive effort.
Lessons learned
The most valuable lesson I've learned is the importance of leaning on your social support system. Without the support of my friends and family, I wouldn't have been able to complete this project. Some actively participated in my research and usability studies, while others were simply there for me, providing encouragement along the way.
Another great lesson I learned is the importance of continuously streamlining your workflow. Discovering tools, shortcuts, and reading a book about UI significantly contributed to improving my efficiency. Utilizing auto-layout and plugins in Figma saved me a ton of time and effort.
Results
I gave my 100% and I'm proud of the final product, but there are still areas that could be improved. Please don't hesitate to let me know if you spot anything that needs refining. Your feedback is invaluable!
