CoffeeHouz

Mobile Application - Case Study

Timeline

Sep 2021 -
Jan 2022

Tools

Figma
UXMetrics

My Role

UX Research
UX Design
UI Design

Introduction

In today's fast-paced world, coffee enthusiasts often find it challenging to order their favorite brew quickly and conveniently. Long queues and complex menus at coffee shops can lead to frustration. To address this issue, I designed CoffeeHouz, a mobile application aimed at simplifying the coffee ordering process and enhancing the overall coffee experience.

Product

In this project I am building a mobile applications for CoffeeHouz. The application is meant to be native to iOS with consideration for future support to Android OS.

Problem Statement

Waiting in long lines and deciphering complex coffee shop menus can be frustrating. CoffeeHouz addresses this challenge by streamlining the coffee ordering process, offering customization options to cater to individual preferences, and reducing wait times.

Objective

The objective of this project is to design CoffeeHouz, a user-friendly mobile application that revolutionizes the coffee ordering experience. CoffeeHouz aims to achieve the following key goals:

Enhanced User Experience: Create an intuitive and visually appealing user interface that ensures a seamless and enjoyable experience for all users, regardless of their tech-savviness.

Personalization: Offer a range of customization options, enabling users to tailor their coffee orders to their specific preferences, from bean type to milk alternatives and flavorings.

Delivery Options: Introduce a reliable coffee delivery service, allowing users to enjoy their favorite brews at home, in the office, or on-the-go.

Efficient Coffee Ordering: Streamline the coffee ordering process, allowing users to place orders swiftly and conveniently through the CoffeeHouz app.

Design Thinking Process

EMPATHIZE

User Interviews

Interviews was conducted with potential users, and users who are using similar products or services to get a grasp of their pain points and understand their needs. Themes in respondents’ feedback were identified and used to extract insights. The insights were then used to create personas that resembles the users and their needs. Users details kept confidential.

Interviews Insights

• Uses food delivery apps regularly.
• Appreciates quick order placement and tracking features in mobile apps.

• Recent experience: Frustrated by long lines at a busy coffee shop during the morning rush.
• Long lines impact: Makes him late for work.
• Menu confusion: Yes, especially when there are too many options.

• Member of multiple loyalty programs, including coffee shops and airlines.
• Loyalty rewards importance: Very important; she actively seeks out businesses with rewards.

• Loves customizing coffee orders with different milk and sweeteners.
•Essential customizations: Non-dairy milk options and sugar-free syrups.

• Favorite coffee: Cappuccino.
• Visits coffee shops 2-3 times a week.
• Factors influencing choice: Proximity to work and quality of coffee.

• Orders coffee through apps occasionally, mainly for office meetings.
• Expects accuracy in order fulfillment and timely delivery.

Back to the top of this section

Online Survey

An online survey was conducted to reach a broader audience in shorter time and with lower cost. The insights drived from the survey are providing valuable source of information that will help direct the design process.

Survey Insights

Demographic Insights:

A majority of respondents are aged between 25-34 years, indicating a younger, tech-savvy target audience.
A significant portion of respondents (around 70%) are located in urban areas or major cities, highlighting the potential for coffee delivery services.
Occupations vary, with a mix of students, professionals, and freelancers showing interest in the app.

Coffee Consumption Habits:

45% of respondents order coffee from coffee shops 2-3 times a week, indicating a regular coffee consumption pattern.
The most popular coffee beverages among respondents are lattes (37%) and cappuccinos (28%).
60% prefer to enjoy coffee at coffee shops, while 30% prefer it at home.

Mobile App Usage:

85% of respondents use mobile apps for food or beverage orders, suggesting a high level of familiarity with app-based ordering.
Popular apps mentioned include Uber Eats (42%), Starbucks (35%), and DoorDash (28%).

Pain Points and Preferences:

Long lines and wait times at coffee shops are a common frustration, with 68% of respondents indicating this.
78% of respondents express a strong preference for customizing their coffee orders.

Coffee Delivery Preferences:

55% of respondents have ordered coffee for delivery or pickup through a mobile app in the past.
42% of respondents order coffee for delivery at least once a week.

Back to the top of this section

Competitive Analysis

Conducting a competitive analysis is crucial for understanding the strengths and weaknesses of existing coffee ordering apps and identifying opportunities for CoffeeHouz to stand out in the market.

Competitors

Strengths:

Extensive global presence and brand recognition.
Offers mobile ordering and payment options.
Robust loyalty program with rewards and discounts.

Weakness:

Limited coffee customization options.
Primarily focused on Starbucks products.

Strengths:

Efficient mobile ordering and payment.
Wide range of menu options, including coffee and snacks.
Loyalty program with rewards.

Weakness:

Less emphasis on coffee customization.
Limited global presence compared to Starbucks.

Strengths:

Large user bases and extensive restaurant networks.
Offers coffee delivery from various coffee shops.
Convenient mobile ordering and payment.

Weakness:

May not provide customization options for coffee.
Less coffee-specific and more restaurant-focused.

Key Opportunities for CoffeeHouz:

Emphasize robust coffee customization options to cater to individual preferences.
Develop a loyalty program with attractive rewards and discounts to foster user retention.
Focus on user-friendly design and intuitive navigation to enhance the app's user experience.
Provide clear menu descriptions and visuals for ease of use.
Offer efficient mobile ordering, payment, and delivery services.
Leverage a strong social media presence and user community for engagement.

Back to the top of this section

DEFINE

Affinity Maps

After doing research, I created an affinity map, which is a collection of insights from users. Creating an affinity map helps to organize and analyze the data from the research, uncover patterns, and drive insights

Affinity Mapping Insights

Pain Points:

Long Queues.
Complex Menus
Limited Customization

Application Usage:

High usage of food and beverage delivery apps, indicating familiarity with mobile ordering.
A majority of respondents enjoy customizing their coffee orders.
Interest in apps with robust customization features

Delivery Preferences

A substantial number of respondents have ordered coffee for delivery or pickup.
A preference for home delivery is prevalent.
Various preferred delivery locations, including home, office, and on-the-go.
Flexibility and convenience in delivery options are essential.

User Interface and Features

Clarity and simplicity in menu design are highly valued.
An intuitive and user-friendly interface is a top priority for app users.
Efficient navigation improves the overall experience.

Back to the top of this section

Personas

The information I got from online surveys and interviews gives me an idea of the target users in the form of user personas. This is to know that this Product (CoffeeHouz) can match the user’s background, attitude, motivation, goals, and emotions. I created this to represent my real target users.

Demographics:

Age: 32
Gender: Female
Occupation: Marketing Manager
Location: Urban area

Coffee Habits:

Sarah is a coffee enthusiast who relies on caffeine to kickstart her busy workdays.
She orders coffee from coffee shops 3-4 times a week.

Pain Points:

Sarah often finds herself in long queues at coffee shops near her office.
She doesn't have time to wait, especially during her morning rush.

App Usage and Preferences:

Sarah is tech-savvy and regularly uses mobile apps for convenience.
She values an app that offers quick coffee customization options and a streamlined ordering process.

Goals and Needs:

Sarah is looking for a coffee ordering app that allows her to pre-order her favorite latte with customizations.
She wants to avoid long queues, save time, and have her coffee ready for pickup when she arrives at the coffee shop.

Demographics:

Age: 28
Gender: Male
Occupation: Environmental Activist
Location: Urban area

Coffee Habits:

Alex is passionate about coffee and values high-quality, sustainably sourced beans.
They order coffee 2-3 times a week and prefer pour-over coffee with locally sourced beans.

Pain Points:

Alex is concerned about the environmental impact of coffee delivery and disposable packaging.
Limited eco-friendly options for coffee delivery disappoint them.

App Usage and Preferences:

Alex is comfortable using mobile apps for various purposes.
He is interested in an app that not only offers great coffee but also prioritizes sustainability.

Goals and Needs:

Alex is looking for a coffee ordering app that offers sustainably sourced coffee with eco-friendly packaging options.
They want to support local coffee shops with ethical sourcing practices.

Back to the top of this section

Empathy Mapping

Empathy maps for the two personas, highlighting their thoughts, feelings, needs, and pain points.

Thinks

"I don't have time to wait in long coffee shop lines."
"I wish there was an easier way to customize my coffee order."

Feels

Frustration when facing long queues during her morning coffee run.
Overwhelmed by complex coffee shop menus.

See

A crowded coffee shop with people rushing to get their orders.
Fellow customers enjoying their coffee quickly without waiting.

Say and Do

Sarah seeks out mobile apps that offer convenient coffee ordering and customization options.
Sarah expresses her frustration with long queues to colleagues and friends.

Thinks

"I want to enjoy great coffee without harming the environment."
"Coffee sourcing and eco-friendly packaging matter to me."

Feels

A deep concern for the environment and the impact of their choices.
Excitement when discovering coffee shops with ethical sourcing practices.

See

Sustainable coffee brands emphasizing their eco-friendly initiatives.
Coffee shops promoting their use of local and ethically sourced beans.

Say and Do

Alex seeks out coffee shops and brands known for sustainable practices.
Alex engages with communities discussing sustainable coffee.

Back to the top of this section

User Journey Maps

A user journey map is a visual representation of the customer experience. I have created the user journey maps for the two personas to help me look at the product from the user's point of view.

Touchpoint 1: Awareness

Sarah learns about CoffeeHouz through social media ads and recommendations from friends.
She is intrigued by the promise of avoiding long coffee shop lines.

Touchpoint 2: Installation

Sarah downloads the CoffeeHouz app from the app store.
The onboarding process is straightforward, with clear instructions on how to use the app.

Touchpoint 3: Registration

Sarah signs up with her email and creates a profile.

Touchpoint 4: Customization

Sarah opens the app, selects her preferred coffee, and customizes her usual latte order.
She is pleased with the variety of customization options available.

Touchpoint 5: Loyalty Benefits

Sarah's loyalty points are automatically applied, giving her a discount on her order.
She appreciates the cost savings.

Touchpoint 6: Payment and Pickup

Sarah's loyalty points are automatically applied, giving her a discount on her orderSarah securely completes the payment process within the app.
She selects the nearest store and specifies her preferred pickup time.

Touchpoint 7: Pickup

Sarah arrives at the coffee shop and bypasses the line.
Her customized latte is ready and waiting for her at the pickup counter.
She feels satisfied with the convenience.

Touchpoint 8: Savoring Coffee

Sarah enjoys her coffee, knowing that it was made exactly to her taste.
The loyalty reward points she earned make her feel valued.

Touchpoint 9: Feedback and Loyalty

After enjoying her coffee, Sarah has the option to rate her experience.
She leaves positive feedback and accumulates more loyalty points.

Touchpoint 1: Eco-Friendly Promotion

Alex discovers CoffeeHouz through an article about eco-friendly coffee apps.
He is excited about the prospect of ordering sustainable coffee.

Touchpoint 2: Installation

Alex downloads the app and is immediately drawn to its environmentally conscious branding.

Touchpoint 3: Registration

Alex completes registration and opts to receive updates on sustainable coffee practices.

Touchpoint 4: Sustainable Coffee Choice

Alex explores coffee options with eco-friendly sourcing practices.

Touchpoint 5: Payment and Delivery

Alex chooses eco-friendly packaging for their coffee delivery.
He makes a secure payment and wait for the eco-conscious delivery to arrive.

Touchpoint 6: Delivery Arrival

Alex's eco-friendly coffee delivery arrives promptly.
He appreciates the sustainable packaging and ethical sourcing.

Touchpoint 7: Savoring Coffee

Alex savors their pour-over coffee and shares a photo on social media, promoting ethical coffee consumption.

Touchpoint 8: Community Engagement

Alex continues to engage with the CoffeeHouz community, discussing sustainable coffee practices and sharing their experiences.
He looks forward to his next eco-conscious coffee order.

Back to the top of this section

IDEATE

How Might We?

HMW statements can serve as valuable starting points for brainstorming and ideation sessions to address specific challenges and opportunities within the CoffeeHouz app project.

How Might We Statements

HMW make coffee ordering faster and more convenient for users like Sarah?
HMW simplify complex coffee shop menus for quicker decision-making?
HMW enhance coffee customization options for users like Alex?
HMW design an intuitive user interface that guides users seamlessly through the app?
HMW incentivize users to try different coffee varieties and expand their palate?
HMW provide users with coffee recommendations based on their preferences and history?

User Flow

After knowing what to do next, we created a user flow to make the flow easier before sketching and wireframing. We create user flow logins, sign-ups, placing orders, making payment, and modify profile details.

You can check all of the potential user flow here.

Back to the top of this section

Information Architecture

Based on the user flows and the insights gathered during the research, the information architecture (IA) was constructed as follows:

1. Home Screen

Quick access to profile, notification, and cart.
Search for drinks.
Most recent offers (deals) banners (Scrollable).
Categories.
Recommended products.

2. Product Page

Image of the product.
Name and description.
Customization options.
Add to Cart (CTA)
Cart access.

3. Customization

Size.
Type of Milk.
Extra Additions.

4. Cart Screen

Products in the cart.
Total price before tax.
Promo code entry section.
Checkout (CTA).

5. Checkout Screen

Order details.
Payment method.
Collection method (delivery or in-store pickup).
Address (for delivery) or Store location (for Pickup).
Delivery or pickup time.
Estimated time for order delivery or preparation.
Total payable amount.
Save order for easy order option.
Pay (CTA).

6. Confirmation Screen

Confirmation message.
Track order (CTA).
Navigate Home.

7. Tracking Screen

Current state of order.
Rating (CTA).

8. Rating Screen

Rating for the experience, Delivery time, and temp. of coffee.
Comments section.
Submit (CTA).

9. Offers Screen

Daily offers.
Coupons.

10. Orders Screen

Latest order with (Reorder -CTA-).
Previous orders with dates ad paid amount.

11. More Screen

Primum subscription ad.
Invite friends.
Profile.
Address Book.
Vouchers.
Payment options.
App Settings.
Customer Support.
Logout.

12. Profile Screen

Name.
Mobile number.
Email.
Date of birth.
Gender.
Update (CTA).

12. Onboarding Screens

Informative illustrations.
Explanation of service and show of value proposition.
Login, Signup, and Social Login options.
For Login (Username, Password, Login (CTA)).
For Signup (Email, Phone, Username, Password, Signup (CTA)).
Verification screen.

Back to the top of this section

DESIGN

Wireframes

I created wireframes before starting the final design of the UI. Wireframes were used to clearly visualize the the layout, structure, and key features of the CoffeeHouz app. It also helps by providing a clear and concise representation of how the app will look and function without being affected by the visual design elements (Colors, Typography, etc..).

Home

Checkout

Cart

Profile

Product

More Options

Offers

Order History

Tracking

Rating

Back to the top of this section

Design System

This application was designed to be iOS native, hence, the Human Interface Guidelines set by Apple is adhered. You can take a look at the guidelines here. The components and typography styles of this application is taken from the Figma resource that Apple has published. I will be showcasing only a small part of the design system, you can check the full file by Apple here.

Typography

Typography styles that was used in the design - provided in Apple's design resource.

Color System

Colors are being used as variables in order to keep the design scalable for future expansion and for addition of dark mode in the future.

Iconography

Solar Icon Pack was used in this project. The pack was chosen because of the variety of styles it offers. This is a sample of the icons, you can access the full icon pack here.

Back to the top of this section

UI Screens

Wireframes were converted to the final User interface design by applying design system, adding copy, while following the structure and the layout of the preliminary design.