Coffee House
Ordering and Tracking mobile App
Embedded Files
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.
Problem statement
Problem statement
The Coffee House app aims to solve the problem of the inconvenience and time-consuming process of traditional coffee ordering methods. Waiting in long lines, difficulties in personalizing orders, and the possibility of receiving stale coffee can negatively impact the overall coffee experience for customers. Coffee House app focus on providing users with a personalized, convenient, and efficient coffee ordering and tracking experience that meets their individual preferences and needs.
The Coffee House app aims to solve the problem of the inconvenience and time-consuming process of traditional coffee ordering methods. Waiting in long lines, difficulties in personalizing orders, and the possibility of receiving stale coffee can negatively impact the overall coffee experience for customers. Coffee House app focus on providing users with a personalized, convenient, and efficient coffee ordering and tracking experience that meets their individual preferences and needs.
Duration
6 weeks
Team
group of 3
Role
UX/UI Designer
Software
Figma, Miro
THE PROCESS
THE PROCESS
Design Process
Design Process
1.DISCOVER
1.DISCOVER
Interview
Interview
During the discovery phase, I conducted five user interviews to gain a better understanding of users' needs and concerns.
During the discovery phase, I conducted five user interviews to gain a better understanding of users' needs and concerns.
Affinity Diagram
Affinity Diagram
To organize the information gathered from the interviews, I used an affinity diagram. This involved writing observations, ideas, and direct quotes from the participants on sticky notes and grouping them together based on common themes.
To organize the information gathered from the interviews, I used an affinity diagram. This involved writing observations, ideas, and direct quotes from the participants on sticky notes and grouping them together based on common themes.
Affinity Diagram
Competitive Analysis
Competitive Analysis
A competitive analysis was conducted to evaluate the strengths and weaknesses of Coffee House's competitors, assessing the services they offer and how effectively they address users' problems. This provides valuable insights for Coffee House's product development.
A competitive analysis was conducted to evaluate the strengths and weaknesses of Coffee House's competitors, assessing the services they offer and how effectively they address users' problems. This provides valuable insights for Coffee House's product development.
2.DEFINE
2.DEFINE
User Understanding
User Understanding
I created a user persona and storyboard based on research insights to better understand the target users and their needs. This helped me identify potential gaps in my understanding and conduct further research to ensure the final product meets their needs and provides a positive user experience.
I created a user persona and storyboard based on research insights to better understand the target users and their needs. This helped me identify potential gaps in my understanding and conduct further research to ensure the final product meets their needs and provides a positive user experience.
Persona: Mary
Persona: Mary
Problem statement
Problem statement
Mary is a nurse who needs to order coffee online because she doesn't have time to stay in line in a cafe.
Storyboard
Storyboard
User journey map
User journey map
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
After understanding the user problems and needs, we went through several hours of brainstorming on how we can respond to the concerns. These are the possible solutions that we came up with.
After understanding the user problems and needs, we went through several hours of brainstorming on how we can respond to the concerns. These are the possible solutions that we came up with.
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.
3.DEVELOP
3.DEVELOP
User Flow
User Flow
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
4.DESIGN & TEST
4.DESIGN & TEST
Sketches
Sketches
The next steps was to do a low-fi sketch to quickly incorporate our brainstorming ideas into rough sketches, and outline the different screens
The next steps was to do a low-fi sketch to quickly incorporate our brainstorming ideas into rough sketches, and outline the different screens
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.
Lo-Fidelity Wirframes
Lo-Fidelity Wirframes
Mood Board
Mood Board
We designed the visual elements of our website to create a positive shopping experience for our users, opting for a minimalistic approach with warm and welcoming natural colors.
We designed the visual elements of our website to create a positive shopping experience for our users, opting for a minimalistic approach with warm and welcoming natural colors.
UI Kit
UI Kit
User Testing
User Testing
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.
HI-Fidelity Wireframes
HI-Fidelity Wireframes
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.
5.DELIVER
5.DELIVER
5.REFLECTION
5.REFLECTION
What I Learned
What I Learned
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.
Next Step
Next Step
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.
Page updated
Google Sites
Report abuse