BakeCo

A Bakery App prototype paired with a Usability Study

Tools used: Figma, Tally.so (user research), Google Suite (Sheets, Docs & Slides)

Context: Solo Project, 4-5 weeks, finished November 2023

This self-directed solo project was a part of my google UI / UX certificate. It consisted of a user study, wireframes as well as low and high fidelity prototypes. The app's purpose was to showcase the food produced by one bakery, and allow users to order online.

Process

Persona & user research → Wireframe prototype (V1) → Usability Study → Low fidelity prototype (V2) → Usability Study → High fidelity prototype (V3)

Highlights

Strong user study
Lots of existing online bakery examples
Learned to wireframe and prototype in figma

Lowlights

High Fidelity prototype was a struggle due to learning Figma
Lost momentum without mentoring
Overly complex designs for skill level

Persona, research and first prototype

I started with a competitive audit and established several personas for the expected users of my app, BakeCo.

I analyzed the strengths and weaknesses of different services. Once I had enough information, I made my first wireframes in figma.

Initial Prototype

Some screens from the first low fidelity prototype (V1)

Usability study on my first prototype

My methodology consisted of a 10-20 minutes unmoderated remote usability study followed by a study analysis. Participants' screens and voices were recorded as they used the app. Tasks were given through a presentation which showed the same questions for all participants. They were invited to describe their actions and thoughts out loud, which were then broken out into a FigJam Board and spreadsheet for analysis.

Study post-mortem: Analysis in context of the app

Once common user pain points and flow were grouped together I made a presentation showing where users got stuck and how designs could be improved. I learned a lot just by observing and listening to users. Seeing them struggle was important and showed me the importance of user-driven design.

Prototype V2

I applied what I learnt from the study, and created a modified version of the greyboxed prototypes. These designs focused on user flow, and addressing any points where users got stuck in the study

Many quality of life features were added, like back buttons, favorites, and ingredient icons

High Fidelity Concepts

Sticker Sheet & High fidelity Mockups

I started to flesh out the UI art with a sticker sheet with figma components as well as a basic colour palette.

My intention was to follow material design, but it was difficult to learn on figma and find the style. The project started to become messy with a lot of versions, and I lost sight of UX while doing the UI.

Project Takeaways

While I am proud of the user research, the final design is something I want to come back to. Attempting a more complex design was challenging while I was still learning Figma. Integrating Material Design also added to that difficulty, as it was my first time using someone else’s design system.

Studying user flow throughout the design informed my designs throughout the whole process and allowed me to make changes early on before I’d invested too much in the design.

Now that I know more I am confident in both Figma and Material Design I would enjoy progressing this design into a more robust high-fidelity prototype.

Check out another project?

My Projects

Page updated

Google Sites

Report abuse