BiteSize

Small steps to better health

The Health Promotion Board, our client, is a board under the Ministry of Health of Singapore. It acts as the main driver for national health promotion and disease prevention programs. In 2019, I was assigned mainly as a visual designer to work on their new project, and worked closely with the client and agency.
‍
The goal of this project was to create a mobile application to promote the health and fitness of Singapore citizens.
MY ROLE
Product Designer
User Flow, Design System, Wireframing, UI design
TEAM
Tzu Hsuan Yang, Product Designer
AGENCY team, Research and Illustration
JUL - SEP 2018
(3 months)
THE PROBLEM

For people who have backslidden from their exercise routine, getting back on track again is very challenging and intimidating.

Thus, our mission is to make being healthy simpler by encouraging taking small ‘BiteSize’ steps, to get to a healthy routine.
Vision & hypothesis ⛳
The Design System ⚙️
The pixel-perfect UI screens were designed based on a style guide and design system. In this project, I used Figma to be the main design tool because this tool encourages collaboration within the team and is easy for stakeholders to see and comment on designs. The final UI screens were synced into Zeplin to share with developers.
design principles
The design principles were created to set the purpose and be the guideline for design practices as the project goes along.
Atomic pattern library
The pattern library was built along with the UI of each screen, followed by a global design system like font style, color palette, and accessibility guide. I used Atomic design methodology to craft this design system more deliberately and hierarchically, by dividing designs into 5 stages including Atoms, Molecules, Organisms, Templates, and Pages. This design system can help us to create new UI screens much easier.
the user journey 🗺️
After investigated user’s problems and had a clear understanding of business requirements, I then started ideation from creating screens and put them into a big user journey. This can help the team to visualize each stage of product and easy for developer to estimate their future work.
DOING EXERCISE
Start daily exercise blocks to complete daily routine
‍
ADD EXERCISE
Add or edit unlocked exercise blocks to daily routine list
UNLOCK EXERCISES
Unlock all exercises by completing the challenge
MEET BItesize
BiteSize is a health and fitness app that makes physical activity feel inclusive, attainable, and achievable. It is personalized to fit around users’ lifestyles and help them progressively build an exercise routine, even when they have a tight schedule.
Choose your preferred exercises and intensity level
Choose more than 30+ quick exercises curated by professionals in the sports science field. Start daily workout with animated graphics instructions and the ability to adjust an intensity level based on your current fitness level.
Discover new exercises that fit your needs
Explore a variety of exercises that work for you, in a set of Cardio type, Flexibility type, and Strength type. Select a set of exercises for your daily exercise plan or mix-and-match to create your flavor.
Fun and Challenging
We applied several gamification strategies to boost users’ enjoyment and motivation while playing this app, like a challenge test to unlock more exercises, setting a daily goal for personal achievement, or self-reflecting scores.
The Reflection
Making a living design system may require a lot of effort, but the value of return is totally worth it.
wishaya jeen
Facebooklinkedin