Independent project completed in the Google UX certificate program. I worked on this July to October 2023.
Challenge
Due to infrastructure restrictions around the market, customers of the La Pana Bakery y Cafe wish to have an app for ordering that allows users to place orders for a specific pick-up time.
As La Pana Bakery y Cafe is an existing restaurant, I wanted to keep my designs closely aligned to the restaurant’s existing brand standards.
I followed a mobile first design process, making the app and then creating web designs after.
My Role
I was responsible for all aspects of the project, including research, usability studies, wire-framing, prototyping, iterating on designs, and more.
Process
I began with a competitive audit of other food services apps and websites. These included local coffee shops, and a few restaurants in the Louisville area. I also audited nationally known coffee chains.
Through user research, I decided that I wanted clear imagery of the products offered as not every user is familiar with common Mexican coffee and pastries. I also knew that due to a lack of easy parking, and customer use of public transportation, a clear scheduling interface was key.
Personas
After going through my research, I created a few personas to visualize my users. I wanted to make sure these personas captured as many of the key user needs as possible.
One such persona is Joseph, a user who relies on public transportation to get to the bakery, and who has limited knowledge of the names of products offered as he does not speak English or Spanish as a first language.
Sketching
I started with some paper sketches of the homepage. In the research phase I noted that many apps have complicated and messy screens for the menu. I aimed to clearly separate the two main categories of the menu, food and drink.
Wireframes and Low-Fidelity Prototypes
The low-fidelity prototype connected a user’s journey to ordering a drink, so the prototype could be tested. View the low-fidelity prototype here.
User Testing
After getting my first prototype together, I conducted a round of usability testing. Through these tests I learned I users want the ability to customize their tipping options. Additionally, users wish to be able to write in item customizations. Most importantly, I realized that I needed to make the scheduling process easier. I moved the date and time picker to the front of the flow as a first step to before getting into menu options.
Next Iterations
I knew I wanted the menu to be visually heavy, but after testing I decided to lay options out vertically, allowing large type for product names in addition to pictures of each item.
After the second usability study, I edited the process for ordering a specific item to make sizing and customizations easier.
Final Designs
The user flow for ordering a drink through the mobile app can be found below. Please open in fullscreen for the best experience.
You can also view the desktop version of their website here.
Next Steps
As mentioned above, I made this project adhering to La Pana’s current branding as close as possible. In the future I would like to edit these designs to move away from such a strict following to their color palette. In particular, I would like to move away from the heavy use of brown, and emphasize a richer shade of pink.
A sample of that direction is given below.
