Coffee House
Ordering and Tracking mobile App
Ordering and Tracking mobile App
About Coffee House
Coffee House is a mobile app that offers a personalized and efficient coffee ordering experience for coffee lovers who are always on the go. The app is user-friendly, providing customers with a seamless and hassle-free way to browse through a variety of coffee options and place their orders with just a few clicks.
Furthermore, the app boasts a loyalty program that rewards customers with points for their purchases, which can be redeemed for complimentary drinks or food items.
Duration
6 weeks
Team
group of 3
Role
UX/UI Designer
Software
Figma, Miro
Affinity Diagram
Mary is a nurse who needs to order coffee online because she doesn't have time to stay in line in a cafe.
Mapping Mary's journey revealed how helpful it would be for users to have access to a dedicated coffee ordering app .
Goal: Order coffee to stay awake for her night shift
Problems
Users want to customize their coffee orders to match their taste.
Users are unhappy with receiving stale coffee or waiting in long lines to pick up their order.
Users are not receiving notifications when their coffee order is ready for pickup.
Users want to track their coffee order in real-time and see its location on a map.
Solutions
Offer a user-friendly customization feature to enable users to easily create and order their preferred coffee drink online.
Provide users with the option to schedule their pick-up or delivery time, ensuring that their coffee is freshly made and ready when they need it.
Send real-time notifications to users when their coffee order is ready for pickup or on the way for delivery, to eliminate the need for waiting in line or wasting time.
Allow users to track their order in real-time through the map, providing up-to-date information on their order status, expected delivery time, and estimated arrival.
To better understand the users and how they would interact with the mobile I created an user flow and based on Mary's. Below is the journey Mary takes to order a coffee on mobile and track her order
After sketches, we realized that the homepage needed to be improved very well. I developed different homepage layouts based on users' needs and business goals.
In order to reveal possible usability problems and evaluate the design, I did a testing round of our prototype. I developed 4 tasks which are
Enter the address for delivery
Customize a coffee order for delivery
Set up a time for delivery
Check out and complete the order
that I asked users to complete using the prototype in order to evaluate the design. The major iterations are shown below.
Iteration 1
Following the initial usability test, I introduced a feature that displays the number of points users have collected by simply moving the cup handle with ease. In the previous version, participants were often confused about how to accumulate points and had no visibility into their current point balance. This enhancement offers a more intuitive and transparent way for users to track their points and enjoy a smoother experience other version.
Iteration 2
I transitioned from the old, drop-down menu customization to a more user-friendly clickable design. This new design instantly lays out all the customization options, reducing the number of clicks needed for users to access and personalize their choices.
Iteration 3
I've completely redesigned the ordering time selection process. In the past, users often struggled with the hidden single-time option within a drop-down menu, leading to confusion. Now, we've introduced a circular model with shorter time intervals, making it much easier and more user-friendly for selecting your preferred order time.
The final high-fidelity prototype presented cleaner user flows for ordering coffee and picking up the time for ordering in advance. It also meet user needs for a pickup or delivery option as well as more customization.
Through my UX/UI course and working on the CoffeeHouse project, I learned
Make Priority: Create a smart plan for launching a basic version of the product (MVP). This way, we can handle requests that don't fit into the project's main goals, which could otherwise cause delays, and make sure we deliver a great product on time.
Keep It Simple: Designers often like fancy and unique designs, but it's crucial to focus on "why". Our main goal is to understand users, their problems, and create a design that helps them effectively.
Embrace Feedback Early and Often: Many of us are inclined to welcome praise over constructive criticism. However, by engaging stakeholders and users from the start, and testing solutions in different ways like paper, low-fidelity, or high-fidelity prototypes, we can save valuable time and prevent needless revisions.
I firmly believe that the process of iteration and testing should persist until we achieve the optimal version of our app. It's essential to continuously identify any pain points in the revised version and address them through iterative testing. This ongoing refinement not only enhances the user experience but also ensures that our app remains responsive to changing needs and technological advancements, ultimately leading to a product that excels in meeting our users' expectations.