Le Petit Cafe
Overview:
As part of the Google UX Design Certificate, I created a mobile app that allows users to quickly and easily place food orders for large groups of people.
My Role
Sole UX/UI Designer from start to finish
Duration
Jan 2023-Feb 2023
Tools
Figma, CanvaPro, Excel, Google Slides, Paper & Pencil
Watch a demo of the final product
Le Petit Cafe
About the Project
I was tasked with creating a mobile app for the french patisserie "Le Petit Cafe". There was no mobile app that existed for the business so I had to create one from scratch. The stakeholders expressed that they want the app to focus on the group delivery option. Throughout this project I conducted user research, usability tests, created mockups, prototypes, infographics, presentations, reports, and more!
About the client
Although it was not required of me in this certificate program, I decided to create a business bio. This helped me better understand the client's position in the market as well as their current UX needs. If I were working in a team, I thought this would be a useful asset to distribute internally.
Problem Statements
While the clients were clear that they wanted a group order feature on their app, the goal statement and value proposition became more concise during and after the user research phase.
User Interviews
I carefully curated 20 questions to ask each user in their interview. They were mostly open-ended questions to allow for the most detailed responses possible. This allowed me to clearly identify user pain points to focus on solving with my app.
Creating Personas
After carefully combing through all of the interview responses, I compiled personas that best represented our users. One persona is a young professional that needs to quickly and easily place group orders for her office team. The other persona is a remote worker who wants his coffee delivered to his doorstep.
User Journey Map
By carefully analyzing the data collected so far, I created a full user journey map. You can see that Linda starts her journey overwhelmed and anxious. However, she ends her journey feeling happy and satisfied.
Empathy Map
By combining direct quotes from interviews and data from the personas, I put myself in the user's shoes yet again by creating an Empathy Map.
Competitive Audit
For my Competitive Audit, I focused on our four main competitors. We were in direct competition with two and indirect competition with the other two. I created tables to properly organize the information I collected. I separated the audit into two sections: General Overview and UX Design.
Competitive Analysis Report
Although it was not required of me to create an in-depth analysis report for the Google UX Design Certificate, I did anyway. For all competitors, I used the SWOT analysis, wrote business bios, showcased key highlights, and even included pie charts of the overall app score.
Starting the Design
User Flow Chart
For this app, I wanted to focus on one main feature: group delivery. My goal was to keep the app as clutter-free as possible and keep only a few options on the home page. I learned in my research that users actually become overwhelmed with too many options which can result in losing the sale. However, when the user has fewer options and a straightforward checkout experience, it is much more likely to make the sale.
Site Map
This site map focuses on the pages of app that need to be created. I like to keep site maps as streamlined as possible to avoid confusion for the user. When I started creating wireframes and mockups later on, I made some changes to the sitemap based on usability testing and design feedback.
Storyboard
Because the user always comes first, I created a storyboard to illustrate what the typical UX would be like using the app. This helped remind me that there are real people looking for real solutions when they open the app.
Paper Wireframes
Here you'll see some wireframes I drew for the home page design. I ended up using my favorite elements from each sketch to create the final wireframe. Before I came to these six solutions, I used the "Crazy 8's" method to let my imagination run wild and come up with some interesting designs.
Low Fidelity
Then, in Figma, I made my sketches into Low Fidelity designs and prototypes. This is often where the fun really begins for me! I truly enjoy seeing all the hard work I've put in up to this point really take shape and become more tangible.
Usability Testing
Prompts
For the usability study, I created prompts for the user to follow. This allowed me to more accurately quantify the ease of flow for the users.
System Usability Scale
After they completed the tasks in the app, the users filled out a System Usability Scale that I created. There were 10 questions regarding the ease of use. This allowed me to get a better idea of what the user's most prominent pain points were after using the prototype.
After the study was complete, I synthesized the data. I organized all the data into charts that could be easily distributed to a team. I highlighted the user's click path, any memorable quotes, and the ease of task completion.
Usability Study Notes
Affinity Diagram
After combing through my findings, I found patterns and themes that I organized into an Affinity Diagram. This helped me see what needed to be iterated on in the prototype in order of importance.
.png)
Design Process
This portion was also not required of me, but I created it from my own volition. To begin the design process, I like to start with a mood board that really captures the aesthetic of the brand. Because this is a french patisserie, I was heavily inspired by the french flag. But, I didn't want the color scheme to be red, white, and blue because I wanted the app to have a more cozy, romantic vibe. Therefore instead of red I opted for a deep burgundy and I created a color palette that incorporates several warm, earthy tones. For typography, I wanted simple fonts that communicated a high-end style. As the design process continued, I created a sticker sheet to keep the most used design elements in one place.
High Fidelity Mockups
Transitioning from Low Fidelity
to High Fidelity
Taking into account all of the actionable insights I learned from the usability study, I started my High Fidelity designs. I removed a step from placing group orders and made the timer notifications more seamless. I also added engaging copy, images, color, icons, and more.
.png)
Conducting Usability Test #2 and Iterating the Design
Now that I had a high fidelity prototype, I conducted another Unmoderated Usability Study and gained more actionable insights. I then worked to correct any pain points and add new features that would create an easier user flow. I taught myself how to animate the prototypes and create a horizontal scrolling effect on the "Create A Group" and "Home" pages.
Next Steps & Final Thoughts
After completing the final design, I thought of more designs I can implement to the app in the future. Designs that include adding more accessibility features, a rewards program, and delivery notifications.
.png)
I successfully created a way for Le Petit Cafe’s customers to place group deliveries quickly and easily. I learned that developing apps takes constant iteration and research. And, most of all, the user comes first!
