Redesigning FiToBe health management app

Project type

Solo project of mobile application, Android, iOS


2017 March - October


Directly communicate with stakeholders, planning features and flow. Executing design at all stage from concept to the end.

Tools used

Sketch, InVision prototype, Illustration

What's FiToBe?

FiToBe is a health-management app owned by Watics corporation, which helping users manage their health condition by tracking their daily diet and activities. Also, it provides health-related articles for users to read.

Project Background

When I joined Watics in December of 2016, I was assigned to design the Android version of FiToBe, as it already had iOS version on App store, but after completing Android design, I was asked to redesign iOS as well.

My challenges

This was my first and also solo project of app redesigning. Basically I was totally fresh to this area. Without mentoring, the whole flow, optimized plan and UI design are completed on my own.

Define problems & goals

The problem for this kind of health management app is retention, cause user needs effort to recall their memories about what they eat, but it’s pretty hard for user to remember to do the record after every meal. If they forget to do it once, they may not come back again. The interaction between user and the app is one-way. Moreover, FiToBe don’t have any regulation power, if user doesn’t record, there is no punishment-like system to force user continue to use our product.


However, due to deadline and short of developer, the company is unable to build new backend api. My challenge was to do the redesign based on existing logic and mechanism.

Apply methodology

Instead of directly heading into design the interface, I executed the in-depth interviews around my friends who had experiences about diet, and had used some fitness app before.

By understanding their goals, and how those existed app can or can't help them to achieve their goals. I concluded some insights from interviews:

  • People prefer to be instructed.

  • People has needs of social belonging, and can copy other people’s experiences.

  • People prefers to have feedbacks.

Set up hypothesis

After gaining insights from interviews, I used HMW statement to turn them into workable solutions.

How might we

sustain retention

by making let user feel be instructed?

by satisfying their needs of social support?

by providing feedbacks?

Building the experiences by flows
Communications between cross-functions

In order to put possible solutions into existed flow, I need to make sure all the team members are in the same page. Thus, I was responsible for cross-functions communication, spec confirmed and schedule, as I directly reported to CEO, the communications between stakeholder and development team was part of my job.

Clarify the information architecture

In order to clear understand the existed mechanism, I drew out the information architecture, also confirmed with engineers. Trying to find the entry point of our solutions.

Brainstorming workable solutions

Brainstorming the workable solutions base on information architecture framework from the HMW statement.

  • Clearly show the goal and progress : let them feel be instructed

  • Share & comment function for articles : let user can discuss with each other

  • Improve the user flow : make experiences more user-friendly and smoothly

Creating visual mock-up
Building design guideline

In order to keep the design consistency, I built the FiToBe design guideline.  Clearly defined the usage of color, typography, icon and any ui components that had been used in application. It’s not only easy for other people to take over your design, but also helped me review my design.

image_preview (10).png
image_preview (11).png
Page showcase

The company was shut down recently, as these two app were available in Google Play and App Store before...