Matt Bateman
UX Design:
Sunnyside Breakfast App
Sunnyside was a UX project I worked on and completed in 2022. The goal was to create a mobile ordering app that specialized in breakfast meal customization. The project involved user research, personas, designing wireframes and mockups, usability studies, and creating a functional high-fidelity prototype.
At the start of development, I completed a competitive audit of similar services' websites and apps. This was extremely helpful to determine gaps in the market and where my app could find a niche.
The audit 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.
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 then 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 also collected simple feedback and impressions on their experience.
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. There were also numerous smaller fixes and improvements I made with the users' feedback.
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.
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:
