top of page
iPhone 11 Pro Max Mockup.png
iPhone 11 Pro Max Mockup1.png
iPhone 11 Pro Max Mockup2.png

Kofee Lite

Kofee Lite is in association with Starbucks. Its mission is clear -"To provide Starbucks Cofee at a cheap and affordable rate". It provides 10 freshly brewed Starbucks beverages a day at a very low price to all the customers and also delivers the product in 30 min. 10 random beverages would be available to all the customers who crave Starbucks beverages but cant afford it.

Project Overview

Challenge

To seamlessly create a Cofee app (In association with Starbucks) that provides cheap Starbucks beverage everyday for all the people who cant start their day without it, and deliver it as fast as possible.

Role

UX , UI designer

Time

3 weeks

Task
Solution
  • To provide 10 random curated Starbucks beverages a day to all the customers at a very low price.

  • To deliver all the beverages to the customers in under 30 min.

  • To create a beautiful and elegant looking UI for the app.

A new cofee app

Tools

Figma , Miro

Design Process

Product
Definition

Research

Analysis

Design

Product Definition

The Problem

The cofee apps today are less efficient than ever. A cofee app with great User experience and which delivers the items on time is hard to find. What if a cofee app (in association with Starbucks) produces great beverages at a very low price?

Cofee apps are less efficient as they do not provide fast delivery and are mostly highly priced.

The Task

My task was to create a cofee app (in association with Starbucks) which provides 10 random curated Starbucks beverages to all the customers at a very low price. Customers should be able to add topping to the beverages and the product should be delivered in or around 30 min.

Untitled.jpg

Research

Provisional Personas

Now that I had a better understanding of Kofee Lite's task, I wanted to start exploring and identifying who their target users might be. By creating provisional personas, I was able to quickly start empathizing with their users and gain a basis for who I would conduct user interviews with to validate this information.

Group 26.png

The Foodie

(25-30 yrs)

Goals

  • Loves a cup of cofee every morning before starting his day.

  • Loves to have different beverages every day and loves Starbucks beverages.

User 03C.png

Young and healthy

(30-46yrs)

Goals

  • Loves to have beverages which are of good quality.

  • Has a busy schedule so loves having delivery apps deliver it to her.

The Fangirl

(18-24yrs)

Pains

  • Starbucks cofee is very expensive and he can't afford beverages everyday.

  • Is lazy and believes he can not make a good coffee for himself.

Pains

  • Most of the cofee delivery apps do not deliver the drinks on time.

  • The drinks are mostly not sanitized and do not follow Covid protocols.

The Survey

I conducted surveys via Google forms and Interviewed few of my friends and family members who drink cofee. Some of these people were obsessed with cofee like I am and always have a temptation to drink one, but others drank cofee couple of times a week. Below I share the questions that were asked in the survey and my situational prompt to better understand the cofee drinking triggers.

  • My first job was to ask the right questions by asking the users what they think of their current cofee app. Throughout the interview process I wanted to get the most honest answers while avoiding false validations.

string theory (4).jpg

The above table shows how I made changes to my questions to get
honest answers from the users.

Survey Questions

  • Do you currently order food or drinks via an app? If so, which one do you use?

  • What are your favorite feature of the food/drink app that you currently use?

  • How often do you drink coffee?

  • What kind of coffee do you order regularly? If you don't, what beverage (if any) do you order?

  • What is the first thing you notice when you walk into a coffee house?

  • When you order coffee, what is the most important part of the experience for you?

  • How do you feel when your Barista gets the order wrong for you?

  • At what time of the day do you drink coffee? What activities do you do when you decide to drink coffee?

  • Tell me the last time you had coffee?
     

These questions help me discover behavioral triggers and
current patterns of users listening to music

Affinity Diagrams

An affinity diagram is an card slotting exercise that helps makes sense to a large quantities of data. For me, this whole process was inspired by Cody Hebert, a well known UX designer. I took the surveys from and interviews as well as requests from the designers and put them on post-it note to synthesize all the data. 

string theory (2).jpg

Lets find a pattern in the data and divide it.

string theory (5).jpg

Order Tracking

Home

Item

Order Review

Analysis

User Personas

I created a user persona that accurately represented who I am designing for. This persona helped guide my decisions along the design process to make sure the solution I am designing is centered on our users.

Persona1.png

Brainstorming

Next I started the brainstorming process. I used Aashiq's experiences with other cofee delivery apps and started working on ways I could help make a great cofee app for everyone.

string theory (6).jpg

Project Goals

After coming up with different solutions for the main problems identified, I started to lay out the strategy in terms of how these solutions would be implemented. I started by clearly defining the project goals to understand what we’re trying to achieve through implementing these solutions.

Business Goals

User Goals

string theory (8).jpg

A cofee app with best quality cofee.

  • To be the most loved and go-to cofee delivery app.

  • Expand Social capabilities.

  • Help people by providing them best quality Cofee.

  • To get Starbucks Cofee at a cheap rate.

  • To get best quality and cofee.

  • A cofee delivery app that delivers cofee in a limited time.

Provide people with fast delivery services.

Design

Design

User Flow

I wanted to take an deeper look into the overall user’s journey while interacting with the new cofee app. In order to more deeply empathize with the user, I created a user flow to explore the scenarios the users would be in and the different paths and decisions they would encounter when trying to complete the key tasks defined.

Its 6:30 in the morning and Aashiq wants to have a cofee. He is ordering cofee from the new Starbucks Kofee lite app.

HOME

MENU

SELECT A COFEE

ADD TOPPINGS

TOPPINGS

ADD TO CART

DELIVERY ADDRESS

PLACE ORDER

PAYMENT OPTIONS

PROCEED TO PAY

Aashiq's Order has been placed and would be delivered within 30 minutes.

He can contact the delivery guy if he wants' and can also track his location.

Lo-Fi Wireframe

Taking what I’ve learned throughout my process to this point, I started to make decisions on how the content on the app would be organized based on the project goals we want to meet.

Untitled (1).jpg

Mid Fidelity Wireframes

To create my prototype, I first started by creating mid-fidelity wireframes on Figma of the key screens the users would be interacting with.

smartmockups_kqfae3601.jpg
smartmockups_kqf8ocpl1.jpg
smartmockups_kqf8o2u61.jpg
smartmockups_kqf8ntas1.jpg
smartmockups_kqf8ltv81.jpg
smartmockups_kqfaen8q1.jpg
smartmockups_kqf8nkem1.jpg
smartmockups_kqf8omtn1.jpg

Textures & Colors

I have always tried to bring the physical world to my digital space in my design process. To do this I put myself in the shoes of the customers and try to observe them and try to understand what makes their experience delightful. For this Cofee delivery app, I came to know how important an app with vibrant colors would be. A simple yet fresh color was my primary focus.

Typography

Open Sans

Regular, Medium, Bold

UI Colors

#F33B5F

#FFE0E0

#000000

#C5C3C3

Textures Used

jene-stephaniuk-XyvAQGLIms4-unsplash.jpg
jene-stephaniuk-30tKlnFG5KE-unsplash.jpg

High Fidelity Mockups

With the above given typography, color palette and textures chosen, I have dropped images which are suitable to the frames and designed out a subtle and simple UI for the Kofee Lite (Cofee delivery app)

smartmockups_kqfj1rl01.jpg

"A splash  of cofee shop personality and animated artboards"

smartmockups_kqfj26mt 1.jpg
smartmockups_kqg8ozf41.jpg

"Dynamic and texture filled artboards with easy signups"

smartmockups_kqg8pgdx1.jpg
smartmockups_kqg9d3l91.jpg

"A Dynamic homepage with new drinks to try daily"

smartmockups_kqg92fyd11.jpg
smartmockups_kqg9dva01.jpg

"Your full cofee shop menu now in your hands with a simple way to search."

smartmockups_kqg9d3l91.jpg
smartmockups_kqga1www1.jpg

"An easy way to review your order and track your cofee "

smartmockups_kqga1j9t1.jpg

Project Reflection

Overall, this project was a lot of fun to work on - building an app from start to finish. Through this project, I learned the importance of really diving into studying the design and flow of the application to introduce app the Kofee Lite. Doing research on the background and how the app evolved was also key to identifying the best solutions for the problems at hand. It was interesting to discover how much technology has advanced and learning more about its capabilities and limitations, and look forward to continuing to see how it evolves in the future.

bottom of page