An App for
Coffee Explorer

This is a business project to create an app to allow the customers to explore the good coffee shops and use the virtual currency : Caffè Coin, to pay for coffee.

Get Started!

The Obsevation in Coffee Shop

Our stakeholders told us that they wanted to build up an app for a virtual currency payment service specifically used for coffee related product. It needs to show all the selected shops with explicit location guide and have the function of purchase and use Caffè coin.

"I just want a coffee, what is the story?"

The customer is our targeted user. To begin with, I looked at how customers might go through the whole coffee shops visiting experience by going to some coffee shops (the targeted cooperative ones )and talk to the shop staffs as well as chatted with customers who were willing to share their their experience, from the coffee types they choose to the payment method they use. After the research and discussion, we decided to focus on people who prefer to look for good quality and features among the idea of coffee and designed our targeted personas and empathy map.

The road to get a coffee

User Journey
Design

Having a much solid idea of what our customers look like, we started to design the user journey and sorted out the path of opportunities the app can offer to the customers in different levels.

A clearer look of the product

Site Map

After the research, we sorted out the elements we need for the app and built up the sitemap to go through all the details the product need and proceeded to design the wireframes and UI kit.

Main Flow

Wire frames

Color code and system

The feeling of Coffee

In order to collaborate with the branding color (yellow) chosen by the stakeholder, and echoes with the idea of coffee more directly. I created a series of main color derived from the look of "Latte" and designed the rest of the supportive color to establish the color system.

Buttons, in-put and text

Through the design process, I created the design system independently to make sure the buttons and assets for the app are applied with consistent color and styles to allow the developers to follow the guideline and create visual consistency and united aesthetic in the APP.

Style in details

Icons and tab bar

The icons and the tab bars also preserve the consistency of the color system with some creativity applied.

Mission Accomplishment

Badges design

The app also contains some mission sections, these designs are for the members and mission accomplishment.

Developer Communication

End to End

During the development, I work closely with Product Manager and front-end / back-end developers to make the development process go smoothly. With my experienced knowledge and design methodology, I can communicate and adjust my design efficiently and clearly if requires.