Coffee Break

View Prototype

Coffee Break

Role

Reseacher

User Flow

UI Designing

Ideating

Wireframing

Prototyping

Context

Coffee Break is a B2C application,  Which lets its customers order ahead of time, showcases new shop locations, and gives back to customers with its rewarding system. Lastly, a brand new application for a business to expand its enterprise. For this case study, I choose to go with Double Diamond theory.

Double Diamond Approach

Discover Stage : Problem

To get the process started, First I research why do people need to order ahead and what are it's benefits? According to Foodtech Solutions “The National Restaurant Association/LevelUp whitepaper revealed that consumers who have placed an order online visit the restaurant 67% more frequently than those who haven’t and they spend 26% more than they would have in-store!” Addionally, "Data from Deloitte Digital reports that 40% of consumers prefer to order food online." More research will be found on this article.

Research Study

Define Stages : Problem

Based on the research, people find it difficult to wait in line, inconvenient, or wastes time. Because of these few reasons, businesses loses their customers, cannot market themselves better, and there is a potential of having a loss in the business.

Goal

The goal was to create an app that targets an audience between 18 and 45. Additionally, A method for a customer to order online, and give back to customers with its rewarding system for better exposure and engagement.

User Stories

This storyboard helps us get key takeaways from the user perspective. It allows us to see the user Experience through user point of view and what could be the potential problems.

User Persona

Based on the research and user stories, I created this personas, which helped me identify the user needs, frustrations, and goals.

Initial Sketch

Develop Stage : Site Map

After writing down my ideas and app functionality, I went ahead to start creating a sitemap. It helps me to ensure the goal is being achieved and to visualize the hierarchy of a product.

Lo-Fi Wireframe

Initial Wireframe

Colors & Typography

I choose fonts that are playful, modern, symbolize coffee and my persona's personality to stay grounded. For that reason, I elect to do an A/B Testing between "GARAMOND" and "AMATIC SC" for Headlines/body and "JOSEFIN SANS" and "OSWALD" for a body text.

#87533C

#B0826C

#C4B4A8

Heading - Amatic SC BOLD 26

Heading 2 - Amatic SC BOLD 24

Body - Josefin Sans LIGHT 14

Body 2 - Josefin Sans BOLD 14

Final Outcome

Click for XD prototype

Homepage

I choose to put the video on top that showcases a barista's skills & business personality to serve others—followed by a featured menu, Locations, and reviews on the bottom.

Homepage

I choose to put the video on top that showcases a barista's skills & business personality to serve others—followed by a featured menu, Locations, and reviews on the bottom.

User Homepage

Regular customers are more likely to order the same thing; for that reason, I put recent orders on top.
Weekly special: For customers who want to try new things.
Reward: To claim their bonus when paying for an order.
Locations: To show nearest locations based on user's location.

User Homepage

Regular customers are more likely to order the same thing; for that reason, I put recent orders on top.
Weekly special: For customers who want to try new things.
Reward: To claim their bonus when paying for an order.
Locations: To show nearest locations based on user's location.

Menu

Different sections for different categories to get easier access with best seller being on top for a customer convenience.

Menu

Different sections for different categories to get easier access with best seller being on top for a customer convenience.

Thoughts

Though Coffee Break was just a concept, I created it with the potential of using this app in the real world. The hardest part of designing this app was to mask the menu's photos that will look professional and legitimate. My experience on designing was very joyful, I love to go to new coffee shops and try new drinks while connecting with people. Finally, If I had more time I would definitely deliver this concept idea to whomever might be useful.

Checkout Other Projects

LinkedIN

Homepage Redesigned

Darbe

A Philanthropy Platform

Spirit

Productivity App

Designed By Jeet