thumb nail .png




Product Overview


The Application

TOKEI is a stopwatch and timer mobile application that allows user to monitor or record time in various daily tasks, especially in the time management of work-out sports training


The Challenge

To find a balance between the need of user and goal of stakeholder, to compete with time apps comes with mobile system.

  • User - a timer monitoring system, focus on training and work out
  • Stakeholder - Utilize the user time spent for ads



My Role

Working with stakeholder/developer, gathering and refining requirement, conducting user research and exploring strategies, I produce intuitive experience, clean and elegant interface.


User Research



iPad Copy.png

user storyboard sketch

Quick sketch depicting primary user's typical day using a timer app


User Journey

Diagram based on paper prototype usability testing, in order to find out how users feel in the process of using the app. This helps further improving the design.

user journey map.png

Paper Prototype and Usability Testing


3 selected user went through the process of paper prototyping, through the test some mostly talked about problems of the design are as below:

  • Stopwatch laps lack of total time
  • Not able to select or edit the lap history
  • Reset and resume button are confusing
  • TAB switch should be consistent
  • Content wording not accurate, causing confusion
  • Why do I need multiple timer running parallel
  • How is regular timer and interval timer different from each other? 
  • Timer number input - "jump" to the second slot when finished first slot
  • No "reset" button for timer
  • Menu content not consistent, not able to find timer data.
  • Can I set up weekly routines? For example: Monday and Tuesday work out programs are different


Improvement and Solution:


  • Reduce the number of choices (the swipe tab) to only two functions: Stopwatch and Timer
  • Training program set up in the same interface with regular timer - enable a quick start of regular time and simpler steps for training timer
  • Keep consistency in UI
  • Improve higher data management - access editing lap record, training program editing in Menu
  • Program editing made possible within Timer start interface
  • Adding sorting function to training timer by name or calendar 

High Fidelity Prototype - User Flow


stopwatch start.png
stopwatch long time.png

Regular Timer

timer landing page.png
timer start.png
timer in process.png

Training Timer Setting

timer landing page copy.png
preset timer setting copy.png
preset timer setting copy 3.png
preset timer setting copy 4.png

Training Timer

training set one copy.png
training set one copy 2.png


It could be a simple app compare to some other more complicated system. Tokei has a simple purpose - an excellent app user like it so much they spend their time on it disregarding the ads. Nevertheless it is not a simple one. After couple versions of different design, here's my takeaways from this project: 

Visual Design: 

  • Strong contrast of color - especially darker background and brighter content - allows user to focus when they are utilizing their attention on other things.
  • If users body is occupied by other activities, larger buttons and well considered human factor will allow them to operate without thinking

Balance between user and stakeholders:

  • Consider design strategies from two sides. If stakeholder need user to spend more time on this, in order to make ads time count, the workflow of using the product should then serve to that purpose. 
  • Less text encourages longer time spent. however, graphic used should follow the convention or too much will bring confusion, break the user flow.