Workout Log — Android App Redesign

Enhancing Usability and Accessibility for a workout tracking app

Role
UX Research · UI Design
Type
Unsolicited Concept Redesign
Tools
Figma
Platform
Android Mobile

Overview

Workout Log is an Android app for tracking gym sessions. As a daily user, I identified three recurring friction points that were making the app harder to use than it needed to be: a misleading statistics chart, cluttered home screen and a broken exercise search. I redesigned the app as a solo project, applying UX principles and WCAG AA accessibility standards throughout.

Original home screen
Original home screen
Original statistics screen
Original statistics screen
Original exercises screen
Original exercises screen

01 — Problems

Problem 01

The statistics chart was misleading.

The chart combined volume from all workout days into a single graph. Comparing leg day volume to push day volume on the same chart is meaningless — they are completely different workouts. A user trying to measure progress had to manually count backwards through the chart to find the last time they did the same workout.

Original statistics screen — combined chart across all workout types

Problem 02

Settings was impossible to find.

Settings was buried inside a utilities menu grid, which was itself sitting on the home screen with no clear reason to be there. It took 3 days to find it, and only by accident. Nielsen's heuristic #6 — recognition over recall — exists precisely for this reason: users should never have to hunt for a feature as fundamental as settings. on the a phone screen everything was bigger, meaning the utilities grid was actually buried down and you had to scroll to see it.

Original home screen — utilities grid mixed in with workout plans

Problem 03

The exercise database was unsearchable.

multiple different exercises shared the name "Bench Press." The only difference between them was the equipment, shown in a small subtitle. Searching for "flat bench press" returned nothing. Users had to filter by muscle group and scroll through the entire list visually — making search completely pointless.

Original exercise screen — duplicate names, search icon hidden

02 — Research

I used Workout Log daily for 45 days before touching Figma. Every problem I solved was something I personally ran into as a real user. Self-ethnography was the natural research method — living with a broken product for long enough gives a level of context that a one-week audit never would.

Research method 1

Self-ethnography

I kept using the app specifically because I could see its potential as a case study while I was still learning UX. Every moment of friction was documented in "I wanted to X but Y happened" format. The recurring patterns became the problem statements.

Research method 2

Competitive analysis

I downloaded Hevy and MuscleMonster, both with millions of downloads, to understand what design decisions were working at scale.

03 — Sketching & iteration

Full sketching process — all screens and iterations
All screens sketched first: home screen iterations, statistics screen, utilities, exercise screen, and the colour contrast check between old and WCAG-compliant blue.

Statistics screen iteration

Statistics screen iteration

The first sketch had the workout selector replacing the timespan selector entirely. After reviewing it, it became clear users might still want to filter by time — the final solution kept both. The workout selector became the primary control and the timespan selector became a secondary button underneath it.

Home screen iteration - Version 1 vs. Version 3

Version 1 vs. Version 3 home screen

The original program selector was a plain text label centered at the top of the screen with no visual indication it was interactive. In the redesign it moved to the top left as a header with a chevron next to it, making it immediately clear that tapping opens a menu to switch programs. The utilities grid was removed from the home screen entirely and given its own screen in the nav bar.

Exercise screen — naming

Exercise screen — naming

MuscleAndStrength.com was chosen as the single source of truth for all exercise names. Every exercise got its full descriptive name as the title — "Dumbbell Bench Press", "Smith Machine Bench Press", "Barbell Bench Press" — and the subtitle was reduced to muscle group only. Equipment no longer lives in the name; it is the name.

Exercise screen — UI

Exercise screen — UI

For every element on the screen, one question was asked: does this label tell the user what to do, or does it make them guess? That question drove every change — from replacing the plus icon with a "New Exercise" button to replacing the hidden search icon with a visible, always-present search bar.

04 — Accessibility

Colour contrast

The original primary blue (#2E90FE) had a contrast ratio of 2.73:1 against white — well below the 4.5:1 WCAG AA minimum. It was darkened to #0A62C7, which passes the standard while keeping the same visual identity. Every screen was then verified using the Contrast plugin in Figma.

Touch targets

Every interactive element has a minimum tap area of 48×48dp. Smaller visual elements like chart toggles and timespan selectors have an invisible 48×48dp frame on top as the actual tap target — so the visual design stays clean without sacrificing usability.

Text size

No text in the design goes below 12px, ensuring readability across different screen sizes and vision abilities. The minimum applies to every label, caption, and secondary element in the interface.

05 — Results, The redesigned app.

Redesigned home screen
Home screen — program selector with chevron, utilities removed to nav bar.
Redesigned statistics screen
Statistics — workout-specific chart with secondary timespan control.
Redesigned utilities screen
Utilities — consolidated into a single screen with clear navigation.
Redesigned exercises screen
Exercises — full descriptive names, visible search bar, muscle group subtitle only.

06 — Reflection

What I learned. What's next.

What I'd do differently

This was my first case study as a UI/UX designer. The most important thing I learned is that good design is mostly good reasoning — every change needs a specific reason, and every reason should come from a real problem. If I were to do this again, I would involve other gym users earlier rather than relying entirely on my own experience. My usage patterns are not universal, and there are likely friction points I missed because they never affected me personally.

Next steps

  • Contact the developer: the problems identified and solved are real problems their users are experiencing. The solutions are ready to share.
  • User testing with gym users: one external reviewer confirmed the layout and hierarchy were clear. Testing with actual gym users is the logical next step — they'll surface friction points that my own usage patterns may have made invisible.
"The accessibility work was the most technically demanding part of the project and the part I am most proud of. It is easy to make something look good. It is harder to make something that works for everyone."