This initiative is a Health category project, culminating in the design of TFL (Train for Life). Conducted over 10 weeks and validated with 20+ participants, the project capitalizes on the global shift toward personal digital wellness, especially post-pandemic.

A digital artwork featuring a shadowed woman and a smartphone displaying a fitness app interface, with the bold text 'TRAINING OR LIFE' in neon green against a rocky background.

Training for Life (TFL)

ROLE
UI/UX Designer

SKILLS
End - End Product Design, Design System, Brand Identity

TIMELINE
10 weeks

Problem
Modern people are too busy, personal trainer classes are unaffordable, and gyms feel uncomfortable.

Impact
Leads to difficulties maintaining fitness habits. (Data: 86% struggle to maintain routine alone)

Solution
Offering affordable AI/Real Trainer online courses, eliminating geographical limits and social pressure for consistent, comfortable at-home workouts.

A black and white infographic describing the design process, including steps like empathize, define, ideate, design, and test, with detailed descriptions and methods for each step.

Discovery

Methodology: Utilised the Triple W (Why, How, What) framework, combining interviews, competitive analysis, and Persona analysis to define core challenges.

Action

Lack of personalization and time management supports the need for customized at-home solutions.

Persona (WHY)

Showed existing apps lack trainer follow-up and a shopping mall, which TFL addresses with AI coaching and community.

Competitive Analysis (How)

Visualized low emotional points in the user journey when struggling to find courses and maintain motivation.

User Journey

IA & Flows

A page from a document focused on design strategy, featuring headings such as 'Design Strategy', 'Executive intent', 'General Tasks', and 'Critical Success Factors'. The text explains the importance of design strategy, stakeholder insights, competitive landscape assessment, and details tasks like creating user-friendly applications and personal training courses.

Information Architecture and Task Flows served as the blueprint for the What (Deliverables) phase, ensuring intuitive navigation.

A blue screen displaying a user interview questionnaire with questions related to online fitness programs, including goals, motivation, challenges, and interaction preferences.
A digital infographic titled 'Qualitative Research' with statistical data presented as circular progress charts on a dark background. The chart displays survey results about online workout applications and exercise habits.
Comparison chart of fitness applications analyzing features such as push notification, follow-up with trainers, data recording, appointment scheduling, workout history, tips, food diary, and media gallery, with checkmarks and minus signs indicating feature availability.
A brightly colored infographic profile of a user named Fiona Anderson, including a photo of her with long blonde hair, standing outdoors with a cityscape background, and sections detailing demographics, personality traits, future goals, context-specific details, and frustrations.

Define

Profile page of a user named Andy Smith with personal details, a photo of him wearing sunglasses, and sections detailing demographics, personality, future goals, context-specific details, and frustrations, all on a bright green background.
A visual empathy map titled 'EMPATHY MAP' with a photo of a man wearing sunglasses in the center. The map is divided into four sections: 'THINK & FEEL?', 'SEE?', 'HEAR?', and 'SAY?'. The 'THINK & FEEL?' section contains notes about motivation and frustration regarding fitness goals, highlighted in green. The 'SEE?' section discusses fitness app advertisements and influencer content, also highlighted in green. The 'HEAR?' and 'SAY?' sections are labeled but do not contain visible text.
An infographic titled 'Empathy Map' with a circular photo of a woman in the center, surrounded by text. The left side lists feelings such as frustration over progress, determination to reach fitness goals, and listening to fitness podcasts. The right side describes social media views of fitness influencers, advertisements, and sharing achievements. The bottom sections pose questions about what others hear and say.
A customer journey map with a gray background, detailing the scenario, phases, actions, and emotions of John Puth, a project manager using online applications to exercise at home, including his experiences, expectations, and emotional responses.

Develop

A flowchart diagram with three main categories: coaches, workouts, and community. Coaches include progress, target areas, coaches, a coach's portfolio, feedbacks, messages, and booking an appointment. Workouts include workout videos, activity, activity program, program page, plan, calendar, and add activity. Community includes exploration with articles (details of articles), news (details of news), videos (details of videos), following with posts, news, and your challenges.
Flowchart outlining three processes: setup, customized training plan, and AI instructor training program, with steps connected by arrows.
Flowchart illustrating task flows for user registration and hiring an online coach, including steps like loading the app, social media account connection, email input, login, and coaching appointment procedures.
Diagram showing information architecture flowchart for an application, with sections on login, training, and features like portfolio, calendar, notifications, and activities, leading to various tracking and activity options.
Page showing handwritten sketches of app screens on graph paper, with a smartphone in the center displaying a sample sketch. The page emphasizes handwritten sketches for app design.

Before the final Deliver stage, I facilitate a Design Review phase to synthesise feedback from user post-interviews and technical feasibility assessments from the engineering team. This ensures that any logic gaps are identified early, enabling rapid iteration to guarantee the highest quality and precision in the final product.

Design

Smartphone app onboarding screens showing user registration, personal questions (height, weight, birthday), workout preferences, equipment selection, and device pairing options for a fitness app.
Mobile app onboarding and login screens for a fitness app, showing features, personal questions, equipment selection, device pairing, and user interface questions.
A collection of smartphone screens showing a fitness app with workout plans, exercises, voice prompts, and workout tutorials, with a background image of two people shaking hands.
Collection of smartphone screens displaying an AI fitness training app interface, including training plans, exercise routines, voice prompts, workout tutorials, and users performing exercises.
A digital infographic showing the features of a fitness coaching app, including screens for searching trainers, messaging trainers, booking sessions, and payment options.

Project Conclusion

"Beyond Tracking: Elevating the Fitness Journey through Connection and Insight."

In concluding this project, the goal was to transcend the traditional boundaries of fitness applications. By bridging the gap between expert guidance and social connectivity, we created an ecosystem where users are not just tracking numbers, but are supported by a community and powered by data-driven motivation.

This design successfully transforms the solitary and often monotonous nature of working out into a vibrant, human-centred experience. By making body changes visible and social interactions seamless, the product fosters a profound sense of belonging and long-term commitment, ultimately empowering users to sustain their health goals with confidence and clarity

woman in a black dress lying on the concrete ground outside

203 Issue

woman in a grey suit walking away in front of a concrete building
woman outside waving her beige linen jacket.

Street Photography

SQSP Magazine