CafeGenie Intro

Café Genie

Pre-order coffee, bypass queue.

The Problem

Long Coffee queue?

Samara is getting late for her early morning presentation and she desperately wants her coffee. However, she does not have time to stand in long queue at coffee house. What could be done for her?

My Role

  • I did this project independently.
  • Wireframes and Visual design created using Adobe Illustrator.
  • Interaction created using InvisionApp.
User Research

Discovering Needs & Goals

User Research Questions

Formative User Research

How did I create?

7 User Interviews

Wide Demographic Interviewees

Competitive Analysis

Competitve Analysis

What did I find ?

Limitation in existing products

Inspirational design ideas

Overall User Experience

Usability Standards



What did I find ?

Various constrain free ideas.

Visualize broad range of design solution.

Research Insights

Inception Icon
  • User felt hopeless, stressed & irritated when they cannot get their coffee.
  • Coffee must be served instantly without waiting in long queue.
  • Payment process must not be slow and painfull.
Design Icon
  • Pre-order coffee using smart devices.
  • Ability to view real-time status of orders.
Technology Migration
  • Friends can make or receive order on users' behalf.
  • Delight users' mood by creating charming visual interface.
Scoping & Refining

Rendering User Needs

sketch sketch sketch


What did I find?

Sketching helped visualize the site flow.

After few iterations I narrowed the scope to the most basic needs.

Wireframe Wireframe Wireframe Wireframe Wireframe Wireframe Wireframe


What did I find?

Clarification on app features.

It helped me push usability to the forefront.

Concrete site map was finalized.

Presenting Cafe Genié

  • Pre-order coffee without bypassing queue.
  • View real-time status of your order.
  • Lets you friends make or pick order on your behalf.

View Ads in your proximity

In a hurry? Order instantly.

Drop menu to quickly order your coffee.

“Instant Buy” feature lets you instantly buy a coffee taking you directly to payment option.

Easily Save & Fetch Coupons

Friends can make or recieve order.

Gift your friend a coffee. Show your care.

Your friends can receive an order on your behalf.

View details of any ads

Real-time status of an order.

Get real-time update of your order.

Plan your pick-up accordingly without waiting in queue.

Design Evolution

  • My design evolved as I iterated to better understand needs and goal.
  • Critiquing my own design and peer review increased the user-friendliness.
  • Several design decision were made during the project to deliver better usability.
  • Introducing new features also helped make the coffee ordering process fast and hassle free.

Best color scheme & Layout

Bold Red

Users (especially female) found red color scheme too loud. Menu bar options were not hierarchically placed.


Subtle White

White color background was more soothing and coffee icons look more elegant. Menu bar options are placed in a stepwise sequence.

How to present order menu?

Less options

User cannot order multiple size of same coffee. No instant buy option. The design elements look more cluttered.


More options

Ordering multiple size and quantity a coffee is easier. Buy instantly or keep on shopping.

Invision prototype

Let's place an Order

All works
Famish Fish