Chiiing
Portfolio of Chi-Ching Tsai
PHYSICAL_COMPUTING Copy 2.jpg

EXPLORE

Creativity is nothing but a mind set free.

A Teasim Journey

This is a 2 week UI Micro-Interaction Prototype testing project for A teaism Journey, a APP for tea novices to learn the way of tea.

 
 
01_Face@0,5x_2.gif
 
 
Tea heals everything.
 
 
 

Throughout the years, I have been practicing the way of doing Chinese and Japanese tea. Before I started mu journey, I thought that making tea is pretty simple and easy - putting tea bag into a mug and pouring hot water.

The fact is that teaism is actually a very delicate process that a lot of factors affect the outcome, from choosing the tea leaves to the infusion process, even the water temperature can affect the quality. That is, I created an APP that aims for tea novice to learn the way of tea.

The factors that affect the tea and etc.

The factors that affect the tea and etc.

 

01 Define

Here are the user story and some asked questions, defining these requirements and needs before going further helps me keep track of my design decision and the final prototyping.

 

 

02 Design

Information architecture

To begin, I did the information architecture to ensure all the structures and behaviors would be consistent for users. As you can see from the graph below, the complete tutorial steps can briefly be divided into 4 section: onboarding, choosing tea, step by step tutorial, and the post-tutorial experience which provokes an emotional response upon completion of steps.

 
 

Wireframe for each steps

 
 

Sketch for UI interaction idea

The most intriguing part was to

sketch_2.png
edited.jpg
 

 
 
 

03 Prototype validation

This is a partial prototype of the process “Choosing Tea”. By using the action sheet below, users can choose the tea based on their mental and physical conditions and the occasion when they are making tea.

Version 1.0

 
1_small.gif

The bottom action sheet

Users can customize their preference by the bottom action sheet below, the recommended tea list will change according to their selection.

01_Face@0,5x_2.gif

Tea variation detail

Before the users confirm the tea they want to make, they can browse the detail page for each tea kind which provide the water temperature, time, measurement, tea origins, tools, and how-to information.

 
 

Rapid Usability Test

After the design of version 1, I did a rapid test for the prototype. The tool used was Principle, so I provided my interviewees with a mobile device and observed how they operated and played with the prototype.

Here are some feedback:

 
 
 

Version 2.0

 
 

Revised Prototype

 
 
A Teaism Journey prototype 1

Modified navigation bar

A Teaism Journey prototype 2.gif

Add stepper & unified titles