Matt Bateman
Sunnyside Breakfast App
Sunnyside needed a mobile ordering app that specialized in breakfast meal customization. Their goal was to give as much control over meal personalization to the user as possible.
Case Study
Year: 2022
Client: Sunnyside Breakfast Restaurant
Deliverables: User research, personas, graphic design, mockups and wireframes, high-fidelity Figma prototype
At the start of development, I completed a competitive audit of similar services' websites and apps.
Determining gaps in the market helped me focus on the next step: understanding the user. To better understand the userbase, I conducted user research and developed personas. This helped identify potential pain points in existing apps. For example, many users were frustrated with the inability to customize orders to meet their preferences or dietary needs. Additionally, while there were many apps available for national chains, local restaurant favorites were often unable to websites or apps with the sufficient level of complexity to allow online ordering and customization.
I wanted to start early with the user journey.
I evaluated the basic user tasks, and created a few user journey maps to understand the project's scope.
Next, I brainstormed layouts.
After drawing various wireframes by hand, I chose a few that I enjoyed and proceeded to create digital mockups in Figma.
Moving on from wireframes, I created a low-fidelity prototype in Figma.This enabled me to begin user testing. I conducted an initial usability study with five individuals. Assigning them tasks with three prompts, I was able to observe their path through the site and make notes on any issues I had not anticipated.
After the test, I collected users' feedback and impressions.
With this data, I identified three main takeaways: users had issues navigating to the filters page, knowing the pickup location and time, and getting confirmation of their order.
I incorporated all the user feedback to improve the mockup and began creating assets for a high-fidelity mockup and prototype, including a wordmark and establishing branding through color schemes and typeface. There were also numerous smaller fixes and improvements.
At last, it was time for the high-fidelity prototype.
I established connections and transitions for each page and interaction. An additional round of user testing on the prototype helped contribute to the final adjustments to layout, pages, and user flow. The high-fidelity protoype included menu functionality, user pages, and simulations of the checkout process.
Check out the prototype on Figma.
See Also:
