Cafe Soleil
Duration: October 2022 – May 2023
Role: Product Designer
Cafe Soleil is a mobile ordering experience that allows users to order food and beverages from this establishment. The target users for this product are customers of cafes that want a quick and easy way to place their orders for pick up or delivery.
The problem:
Many factors can impact the customer’s experience with a web based ordering site. After interviewing users, I found that some of these problems include; social anxiety, having a tight budget, ordering for a large group of people that require many customizations, and not having much familiarity with mobile ordering apps.
The goal:
In In this project I set out to create a product that considered the needs of the users in my sample group. The goal was to create a product that could limit social interactions, made it easy to redeem points, included many customization options, and made the whole process simple and accessible to all users.
User Research
When conducting my user research, I chose to include people of a variety of ages and needs. My first round of research included interviews with my user group asking about their current experiences with mobile ordering apps. I went into these interviews with a clean slate and was surprised with the way the age groups had similar needs and concerns with their current app experiences. I also noticed that the more advanced age group had more accessibility concerns whereas the younger group were able to navigate apps even when they encountered some confusion.
Pain Points
When ordering through an app, users want to prioritize saving money and having easy access to their rewards points throughout the experience.
Rewards
While many of our users order for large groups of people, it is important to have many customization options available. This includes adding names to each order.
Customization
Convenience
Users want this mobile ordering process to be quick and easy.
Social Anxiety
Users want the option to not interact with people at all while going through this process.
Personas
Journey map
User flow
Wireframes
Paper wireframes
Digital wireframes
User pain points are addressed in these digital wireframes. On the home screen, the header shows the rewards points to highlight savings that can be redeemed. The order screen shows customization options in a dropdown menu. The checkout screen allows the user to review before placing their order, and it shows a transparent pricing breakdown.
Lo-Fi prototype
This preliminary iteration of the prototype was used to test the user’s ability to carry out the action of redeeming a reward and checking out.
Usability study findings
In this usability study I tested my low-fidelity prototype on users of the same demographics as my initial research study. I tested the product by using a moderated usability study which was followed by questions regarding the user’s experience.
01 Touch targets were too small
02 Menu organization was confusing
03 Checkout navigation is hard to find
04 The required fields were not evident
05 It was not clear when items were being added to the cart
06 Not enough customization options
Hi-fi mockups
The high fidelity mockups introduce color and typography styles to the design. All placeholders were removed and replaced with details that will simulate a more realistic navigation experience. Issues from the first usability study were also addressed.
Usability study findings
For my second round of testing, I conducted a moderated usability study. I asked the participants to do through the same flow that was tested in the previous study. The introduction of color in the design, presented issues of accessibility that needed to be addressed.
01 Hamburger menu is confusing
02 Color contrast on bottom navigation is not accessible
03 Icons do not clearly communicate navigation
Final design
Much of the UI elements were updated in the final design to improve accessibility, and create a more intuitive experience that met the needs of the user.
Takeaways
The final result of this product would make it easier for users to order items from this cafe. This product addresses many issues that users commonly face when using mobile ordering apps.