BLUE BOTTLE COFFEE
Blue Bottle Coffee application redesign focusing on better user experience
OVERVIEW
When I was starting this project, Blue Bottle Coffee has only the simple website and no mobile application.
I re-designed blue bottle coffee mobile application to fulfill the needs of users, by adding additional features and function which could lead to friendlier user experience.
When I was starting this project, Blue Bottle Coffee has only the simple website and no mobile application.
I re-designed blue bottle coffee mobile application to fulfill the needs of users, by adding additional features and function which could lead to friendlier user experience.
DURATION
3 months
3 months
ROLE
Individual project
User Research
Visual Design
Prototyping
Design System
Individual project
User Research
Visual Design
Prototyping
Design System
TOOLS & METHOD
Figma
Illustrator
Photoshop
Visual Design
Prototyping
Wireframing
Figma
Illustrator
Photoshop
Visual Design
Prototyping
Wireframing
Rewards
Get rewards from each drinks you buy , Collect Blue bottle rewards and get free drinks
Order page
Menu page , User’s favorite menu, Order History page
Track on your order
Checkout, Order confirmation, Choose delivery option, Check the status of the orders
Store location
Search the stores, Select the stores and order, Get navigation to the store
DESIGN PROCESS
1
Discover
Ideation
Research
2
Define
Problem Target audience Design goal
3
Develop
Wireframe
User flow
Design system
4
Design
Final design
Important feature
PROBLEM
How can I provide better user experience to Blue Bottle Coffee customers?
RESEARCH
To understand customers, I started from researching of coffee trends and customers purchasing behavior in the U.S
The U.S. has the largest coffee market worldwide, with revenues reaching over 80 billion U.S. dollars.
American coffee consumption has slightly fluctuated in recent years yet has remained around two cups per day.
Daily routine
58%
of people drinks coffee to wake up
Nowadays coffee isn’t just a source of energy or caffeine, it’s something people appreciate and enjoy in every day of peoples lifes
58%
of people drinks coffee to wake upAPPRECIATION
Nowadays coffee isn’t just a source of energy or caffeine, it’s something people appreciate and enjoy in every day of peoples lifes
Brand recognition
AGE
As there are lots of coffee brands and franchises, Personalizing options and specialty coffee menu is an opportunity to reach younger consumers
Brand
39% of people select coffee based on BrandAGE
As there are lots of coffee brands and franchises, Personalizing options and specialty coffee menu is an opportunity to reach younger consumers
Coffee consumption
1.87 cups
People drink 1.87 cups of coffee
per day
Female customers value flavor varieties of coffee more than male customers
1.87 cups
People drink 1.87 cups of coffee
per day GENDER
Female customers value flavor varieties of coffee more than male customers
KEY TAKEAWAYS
One
User look for short and easy steps in ordering process, and want to keep track on their orders
Two
Pick-up orders, navigation to stores, and reward program are most frequently used features in coffee mobile applicationThree
Loyalty program, Promotion, and Personalization option can influence users purchases, and purchasing behavior
TARGET AUDIENCE
Based on the research, I set potential target audience group for re-designed Blue Bottle Coffee application
Age range of
18 - 44
Young generation, Love trying new menus, Coffee lovers
18 - 44
Young generation, Love trying new menus, Coffee lovers
Trendy
![]()
People who is open for newest trends, using mobile applications frequently
People who is open for newest trends, using mobile applications frequently
Maniac
![]()
Blue bottle brand lovers, Coffee bean /merchandise buyers, trying seasonal menu
Blue bottle brand lovers, Coffee bean /merchandise buyers, trying seasonal menu
RE-DESIGN GOAL
Help user to get personalized and friendlier experience when they are ordering
![]()
Intuitive
Clean, Simple Interface
Clean and Simple presentation by keeping overall theme and philosophy of original brand identity of Blue Bottle Coffee brand
Functionality
Additional features by fullfilling users’ needs
Rewards | My Favorite page | Order history
Navigation | Order status
DEVELOP
User flow of re-designed blue bottle application
DESIGN SYSTEM
Design system I designed, in re-designed Blue bottle application
To maintain consistency, I developed reusable components, such as cards, list items, and controls.
To maintain consistency, I developed reusable components, such as cards, list items, and controls.
FINAL DESIGN
Key Features and main screens to highlight
Rewards
Get rewards from each drinks you buy,Collect Blue bottle rewards and get free drinks
Order page
Menu page , User’s favorite menu, Order History pageTrack on your order
Checkout, Order confirmation, Choose delivery option, Check the status of the orders
Store location
Search the stores, Select the stores and order, Get navigation to the store
REFLECTION
From this Re-design project, I wanted to help users to have friendlier experience in ordering their menus, personalize and be able to track on their orders.
I thought by adding new features, which provide Blue Bottle Coffee customers to get more user friendly experience through out the whole process of ordering and getting their drinks delivered.
By adding Rewards, My favorite - Personalization option, Track on orders - allowing customers to track on their whole process, can give better experience in using the Blue Bottle Coffee Application.
I tried to keep the brand identity of the original Blue Bottle Coffe, by keeping simple, clear user interfaces and visual elements such as typefaces and colors.