Overview
A concise introduction to the project and its core outcomes.
Get Fit is a web platform designed to promote healthier lifestyles by integrating fitness routines, nutrition guidance, and mental wellness resources. The final site delivers a responsive and accessible experience with interactive features, dynamic content, and community spaces that encourage users to connect and share their journeys.
Background
Understanding the client brief and defining the project goals.
Client Brief Analysis
The Get Fit website was developed to address the growing demand for accessible health and fitness resources. The client brief positioned the platform within the health and wellness sector, with the aim of supporting individuals seeking to improve their lifestyle through exercise, nutrition, and mental wellness.
Website Goals
- Deliver Comprehensive Resources
- Encourage Healthy Living
- Build Community Support
- Integrate Dynamic Content
Research
Identifying user needs and translating insights into design directions.
Approach
To better understand the needs of different users, I carried out interviews and organized the findings using thematic analysis and affinity diagrams. This process helped me capture what people expect from a health and fitness platform and translate those needs into design directions.
Affinity Diagrams
Key Insights
-
Key Insights
Users want progress tracking to measure improvement and stay motivated.
-
Community & Social Interaction
Community support is especially valuable for beginners.
-
Age-Specific Workout
Age-specific workouts make the platform more inclusive for older adults.
-
Nutrition & Dietary Preferences
Personalized nutrition is important for users with specific dietary needs.
-
Mental Health Resources
Mental wellness resources help busy professionals manage stress.
User Stories & Personas
Design
From visual style guide to interaction patterns and page structure.
Goals
-
Clarity
A simple layout with consistent navigation and spacing.
-
Accessibility
High-contrast colors, scalable fonts, and inclusive features.
-
Interactivity
Dynamic elements such as hover effects, modals, and responsive cards to make the site engaging.
-
Brand Identity
A consistent visual style that communicates energy, trust, and motivation.
Site Map
The site map defines the information architecture of Get Fit, outlining the core sections and navigation flow.
Site Map
Brand Identity
Layout and Structure
Layouts for Different Pages
Spacing
Consistent margins and padding create a clean layout that improves readability and reduces cognitive load. UI Components
UI Components
-
Buttons
Buttons
Sometimes words don't really needto mean anything at all, You can justkeep typing sentences that go incircles, pretending
-
Forms
Forms
Forms feature rounded input fields, clear labels, and red error indicators, ensuring contrast, usability, and WCAG compliance.
-
Navigation
Navigation
Navigation uses a top menu, breadcrumbs, and styled links with hover effects, ensuring accessibility, consistency, and intuitive site interaction.
-
Cards
Cards
Cards use a clean grid layout with clear titles, interactive hover effects, and call-to-action buttons, offering a structured and user-friendly way to engage with content.
-
Modals
Modals Centrally aligned with fade effects, modals deliver supplemental information without distracting from the main content. -
Toggles
Toggles Accordions let users expand or collapse sections with clear headers and arrows for easy navigation. -
Usability
Usability These elements ensure accessible, focused, and efficient interaction for a positive user experience.
Content Guidelines
-
Tone and Voice
Energetic and health-focused, motivating users with confidence, uplifting and approachable.
-
Writing Style
Clear, concise, active voice, simple instructions, short paragraphs, headings for readability.
Content Accessibility Requirements
-
Alt text for images
Descriptive text for screen readers ensures accessibility.
-
Heading structure
Hierarchical headings (H1, H2) improve navigation.
-
Text contrast
Meets WCAG 2.1 AA guidelines with high contrast for readability.
Development
Transforming design concepts into a functional, responsive website.
Key Features
-
Privacy & Transparency
Added a privacy popup to inform users of data handling practices.
-
Responsive Navigation
Built collapsible menus and icons for desktop and mobile.
-
Accessible Visual Design
Increased color contrast and ensured consistency with WCAG guidelines.
-
Dynamic Content
Expanded sections such as Recommended Nutrition Products and user-submitted recipes.
-
Community Categories
Organized the Community page into activity groups (Run, Ride, Hiking, Training).
-
Interactive Visuals
Hover animations, card elevation, and button click effects for engagement.
Technical Challenges & Solutions
CSS Organization and Efficiency
Challenge:
Keeping all page layouts in one CSS file caused frequent style conflicts and made maintenance inefficient.
Solution:
I modularized the CSS into base, reset, components, and layout files, which reduced errors and improved workflow efficiency.
Enhancing User Interaction with Visual Effects
Challenge:
I wanted to make the site more interactive and visually engaging without losing a professional aesthetic.
Solution:
By experimenting with CSS animations and transitions, I added hover and click effects that improved feedback and created a more dynamic user experience.
Implementing API Calls and Form Data Management
Challenge：
Integrating API calls to manage dynamic user data required establishing reliable methods for both data submission and retrieval.
Solution：
I implemented structured POST and GET requests to handle form inputs and display user contributions, enhancing interactivity and expanding site content.
Reflection
Challenges faced, solutions applied, and key learnings gained.
Key Outcomes
-
Privacy & Transparency
A privacy popup builds trust by informing users about data handling.
-
Comprehensive Resources
Dedicated sections for fitness, nutrition, and mental wellness make content easy to access.
-
Community Interaction
Activity-specific categories encourage users to share and connect.
-
Accessibility
Responsive layouts, clear navigation, and high-contrast typography enhance inclusivity.
Future Improvements
-
Enhanced Personalization
Introduce tailored workout, nutrition, and wellness suggestions based on user data.
-
Advanced Privacy Control
Allow users to customize data collection preferences for greater transparency and trust.
-
User Feedback Mechanism
Enable on-page feedback options to refine design and functionality continuously.
-
Health Data Tracking
Integrate wearable devices for step counts, heart rate, and sleep monitoring.
Conclusion
Get Fit combines fitness, nutrition, and wellness into a responsive, accessible platform that fosters community and motivation. The project demonstrates how thoughtful design and development can turn user needs into an engaging, inclusive digital experience.
Thank you for watching!
@2025 Yinhan Liu. All rights reserved.