Objective
The objective was to redesign the One Stop Coach app to deliver a user-centered experience with a clean, flat monochrome design. The focus was on clear user flows, intuitive navigation, and innovative features like a dark theme. The app is intended to serve as a digital personal trainer, offering customised workouts, nutrition guidance, and progress tracking, while eliminating the need for physical trainers. The monochrome design was chosen to enhance focus, reduce visual clutter, and achieve a modern, minimalist look that aligns with the client’s brand.
Requirement Gathering
In the initial phase, I conducted multiple sessions with clients and stakeholders to fully understand the app’s core objectives and user challenges. The primary goals identified were:
A seamless, user-friendly experience across devices
An easy-to-navigate, user-centric design approach
The inclusion of an innovative dark theme to reduce eye strain and improve nighttime usability
Data-driven features like calorie and activity tracking
Community and social sharing capabilities
These requirements informed the app’s structure, with a strong emphasis on a minimalist and intuitive interface that could present complex information in a simplified way.
Phase 1: Wireframing and Initial Concepts
Wireframes were created to outline essential elements and establish the user journey. This phase emphasised mainly on:
Homescreen: A dashboard showcasing daily steps, calories burned, and today’s workout and diet plans.
Profile and Progress Tracking: Sections where users can view personal details, log workouts, and track progress.
Program Selection: Providing easy access to different training programs and setting workout goals.
Food Diary: A space for meal tracking with options to customise and log dietary information.
Dark Theme Toggle: Integrated into settings to allow users to switch between themes conveniently.
The wireframes prioritised simplicity in user flow, allowing access to main features with minimal taps. Key journeys like workout logging, updating profile details, and interacting with social features were streamlined based on initial feedback.
Phase 2: Prototype Development and High-Fidelity Mockups
After wireframe approval, I created high-fidelity mockups in Figma. The designs focused on clean, uncluttered visuals with consistency across screens.
Key design principles applied:
Minimalist Aesthetic: Each screen was designed with a flat monochrome palette, using whitespace effectively to avoid overwhelming the user.
Dark Theme: This was a major feature, designed for readability, reduced eye strain, and a distinct aesthetic.
Use of Familiar Navigation (Jakob’s Law): Leveraged familiar navigation patterns to enhance user intuitiveness, ensuring users could easily learn and navigate the app.
Prototype Testing
The interactive prototype enabled stakeholders to experience the app as users would, gathering feedback that refined navigation and clarity, particularly for the dark theme toggle. Specific user flows like tracking workouts, updating personal information, and using social sharing features were tested thoroughly.
Phase 3: Finalising the Design and Handoff
Feature Overview
Login/Signup: Simple phone verification for easy access.
Dashboard: Displays steps taken, calories burned, workout and diet plans, and insights.
Profile: Stores user details, progress photos, past workouts, and logs.
Programs: Multiple training programs with goal-based tracking.
Food Diary: Tracks nutrition, meal plans, and custom entries.
Calendar: Goal-setting and workout scheduling for specific routines.
Settings: Includes the dark theme toggle, subscription information, log settings, notifications, and measurement units.
Special Focus on Dark Theme Feature
The dark theme was designed meticulously with high-contrast colours, adjusted typography, and subtle accents to ensure both aesthetic appeal and usability. Users can easily switch to the dark theme via the settings menu, and the interface instantly adapts, providing a comfortable experience, especially for low-light environments.
Outcome
The redesign successfully improved user engagement by simplifying navigation and enhancing accessibility. The dark theme received especially positive feedback for reducing eye strain, and the clean, minimalist design aligned well with the brand’s values. Overall, the redesign provided a modern, user-centered experience, reinforcing One Stop Coach’s role as a comprehensive digital personal trainer.
