Hanchau.app: Building your fitness journey strategically Part #1

A side-hustle that aims to elevate the experience of fitness logging and tracking

A side-hustle that aims to elevate the experience of fitness logging and tracking

A side-hustle that aims to elevate the experience of fitness logging and tracking




Product Design Design System


Jerry Yeh (Frontend Developer)



Dashboard Sidebar Close Up
Dashboard Sidebar Close Up
Dashboard Sidebar Close Up

Hanchau.app is a fitness and nutrition tracking application designed to help users monitor their exercise routines and track their nutritional intake. The app aims to simplify the process of recording and analyzing workout data while providing a convenient way to monitor daily food consumption. As this project is currently still ongoing, this case study is going to serve as the first part of the project sharing. To learn more about the latest updates and the nitty-gritty detail, feel free to drop me a message!


In 2022, my friend and I started working out and soon realised that we needed a system to help us record all the important details such as sets, reps, and weights to ensure the progression is on track. While Notion templates offered some utility, their lack of automation and scalability made customisation challenging. Existing workout apps, while better, seemed to be overloaded with features, losing sight of simplicity and user experience. For instance, some apps restricted users from logging in their next set until the rest time was up.

We eventually decided to initiate a side-project to build our own workout app, Hanchau.app, with a primary focus on creating a seamless and intuitive record logging and monitoring experience. Recognising the importance of nutritional intake, which has been widely overlooked by most of the workout apps, we also aim to create a solution that values both exercise and nutrition tracking. 

Project Goals

  • Build a robust solution for record logging and monitoring 

  • Incorporate nutrition tracking into the app to provide a comprehensive solution that integrates exercise and nutrition monitoring.

  • Ensure the scalability to adapt to user needs and enhance convenience in tracking workouts and nutrition.


Intent statement

To establish a clear research direction, we developed an intent statement framework to collect and clarify the needs, goals, and potential solutions of our target users. Through affinity sorting, we categorised the goals and solutions into three main sections: exercise logging, nutrition logging, and progression monitoring, which later became the foundation for our product roadmap.

Competitive analysis

We conducted a thorough competitive analysis to gain valuable insights into the user experience, design, and development aspects of existing workout apps. This analysis allowed us to identify design opportunities, constraints, and best practices, enabling us to create a more refined and user-centric solution.


After learning from the competitors, we began the wireframing process to rapidly ideate solutions for our app. We developed several principal flows for each section and rigorously evaluated their feasibility before progressing to the design and development phase. Wireframing played a vital role in aligning our development and design teams, ensuring clear expectations for the final product.


After solidifying our project direction, we dedicated substantial effort to ensure the accuracy and reliability of the content. Recognising the importance of trustworthy information, we meticulously sourced our data from reputable governmental open sources. This allowed us to gather a comprehensive dataset that formed the foundation of our workout app.

To effectively manage and organise the data, we utilised Airtable as our chosen database planning tool. Leveraging the flexibility and collaborative features of Airtable, we carefully restructured and optimised the data to align with our app's requirements. This process involved defining relevant fields, establishing relationships, and implementing data validation measures to ensure data integrity.

Once all the necessary adjustments were made in Airtable, we seamlessly transferred the database to Firebase, the selected database service. This strategic decision not only provided a reliable and scalable hosting solution but also resulted in significant cost savings. While Firebase is not entirely free to use, its cost-effective pricing structure allowed us to effectively manage expenses while ensuring the stability and performance of our app's database.


Workout Plans

Access pre-built or customisable workout plans tailored to your specific goals and fitness levels. Hanchau.app provides a variety of strength training workouts designed to help you build muscle, increase strength, or improve endurance.

Activity Tracking

Easily track any gym workout activities. Enter details such as sets, reps, weights, and more to keep a comprehensive record of your exercises.

Exercise Library

Explore a thorough library of exercises with detailed instructions, images, and videos. Whether you're new to a specific exercise or want to perfect your form, the exercise library provides valuable resources to guide you.

Personalised Goal

Create personalised profiles with information such as age, height, weight, fitness goals, and activity levels. This allows Hanchau.app to provide tailored recommendations and track progress based on individual needs.

And more to come!

Design System

As we evaluated the scope and complexity of the project, we recognised that creating a well-designed and cohesive product would require a thoughtful and systematic approach. Understanding the long-term benefits and efficiency gains, we made the decision to invest in a design system. By implementing a design system, we aimed to ensure consistency, scalability, and future-proofing for our workout app.

To integrate the design system effectively, we incorporated the design languages into our existing CSS guidelines and component library. This allowed for a seamless hand-off process between the design and development teams, ensuring that the design vision was accurately translated into the final product. In addition, within the Figma design file, we synchronised the design token names with the front-end codes. This synchronisation facilitated smoother collaboration and streamlined the design-to-development workflow, enabling efficient implementation of design elements.


While our project is still in progress, we have made significant strides towards achieving our goals. Currently, we are actively conducting alpha testing, gathering valuable feedback to refine and enhance the user experience. With the exercise logging features nearing completion, we are excited to soon launch the beta testing phase, allowing a wider audience to experience and provide further insights on our app's functionality and usability.

Built with Framer from Taipei, Taiwan

Built with Framer from Taipei, Taiwan

Built with Framer from Taipei, Taiwan