MYLF Coaching / Full UI overhaul
A fitness platform, rebuilt around the daily routine.
A full UI overhaul for MYLF Coaching: clearer dashboards, food diaries, workouts, recipes, and check-ins, with a shared visual language across phones and desktop.
- Platform
- MYLF Coaching · Fitness & nutrition
- Work reviewed
- August–October 2026
- Octo's role
- UI engineering & responsive modernization
The interface, rethought
One visual language.
A whole daily routine.
Light surfaces, clear task rows, rounded cards, and teal-to-blue accents carry through the dashboard and food diary.
Shared foundations A reusable palette, type scale, spacing, and card treatment.
Layouts that adapt Room for an overview on desktop; compact task and meal rows on phones.
Consistent interactions Shared patterns for check-ins, media, photos, and daily logging.
The challenge
Make daily coaching
easier to navigate.
MYLF Coaching brings program details, daily tasks, nutrition logging, workouts, recipes, and weekly check-ins into one fitness platform. The UI overhaul needed to make that daily routine easier to follow, especially on a phone.
What made it complex
The screens already carried program access rules, saved entries, uploads, and coach review workflows. Fixed card sizes, crowded navigation, and layered popups made small-screen changes more involved than a fresh coat of CSS.
Our approach
Octo translated supplied design mockups into a shared styling system, then updated the interface in stages. We refined layouts and repaired the interactions behind them as the redesign progressed.
What it enables
A consistent interface for the habits people return to every day.
The overhaul connects the dashboard, task dialogs, and food diary through shared styling while keeping the established coaching workflows behind them.
- Clients can see program information, calorie summaries, and daily and weekly tasks together on the dashboard.
- Meal logging, targets, reports, and coach comments sit within a responsive food-diary layout.
- Workouts, recipes, check-ins, and photo tasks follow reusable interface patterns across screen sizes.
The connected workflow
From today's plan
to the weekly check-in.
The redesign follows a client's recurring routine, bringing the next action and the information around it into the same interface.
See the plan
Review program details, daily calories, and today's tasks.
Do the daily work
Open a workout, log food or water, or complete a check-in.
Review the day
Move between dates and inspect meals, nutrition targets, and reports.
Check in each week
Open weekly photo and question tasks as part of the coaching routine.
Engineering an existing interface
A shared system, introduced screen by screen.
The work had to improve the presentation while accounting for the application behavior already attached to each screen.
- Make the styling reusable
- Introduced shared color, type, spacing, and radius tokens, then reusable card and modal styles. Page-specific styles are scoped to the screens adopting the new system.
- Respect the existing workflows
- Retained the form hooks and data bindings behind redesigned views. Recipe tables keep their search and pagination; diary changes account for both client and coach views.
- Work through phone constraints
- Addressed input zoom, tap targets, overflowing content, short viewports, background scrolling, and stacked dialogs. These details shaped the foundation and subsequent popup refinements.
- Carry fixes through to the interaction
- Follow-up commits address photo previews, quoted food names, recipe logging, program switching, and repeated check-in submissions alongside layout and styling corrections.
How the work evolved
A platform-wide overhaul,
delivered in stages.
The reviewed history traces the interface work from mobile foundations through the dashboard, shared dialogs, media, and coached food diary.
August 2026
Establish the foundation and dashboard
Added mobile foundations and design tokens, rebuilt the dashboard, and refined the shared header, navigation, calorie cards, and service tiles.
September 2026
Bring tasks and media into the system
Introduced shared popup treatments for daily and weekly tasks, then refined photo galleries, workout dialogs, video players, and recipes.
October 2026
Restructure and refine the food diary
Reorganized meals, targets, calendar navigation, tasks, and reports. Follow-up work addressed narrow layouts, coach-view compatibility, and weekly photos.