Redesigning FiToBe health management app
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.
Sketch, InVision prototype, Illustration
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.
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.
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.
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
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.
The company was shut down recently, as these two app were available in Google Play and App Store before...