Gymshark workout app
Gymshark set me a design brief: concept a workout app targeted at social natives who wanted to train alongside their favourite Gymshark athletes, get tips on form and technique from the pros and track their strength and conditioning workouts.
The brief covered a home screen redesign, a free vs premium content badging system, onboarding improvements and a pull-to-refresh mechanism for dynamic content.
I added an additional layer on top of the brief – an interactive muscle map overlay showing which muscle groups each exercise targeted in real time.
I spent a few weeks on the project, and the concepts I developed closely mirror the direction Gymshark ultimately took with the product.
My role
I was the sole designer on the project – research, competitor analysis, observations, design solutions, UI and interactive prototype.
The brief asked me to demonstrate creative and conceptual skills alongside iOS knowledge, with user experience prioritised over visual polish.
I treated it as a full end-to-end design exercise.
Research:
Competitor analysis
Before touching a wireframe I analysed how the leading players in the activewear and fitness space handled their product experiences – looking for patterns worth adopting and gaps worth exploiting.
Gymshark already had a strong quick-add feature on their website – hovering over a product revealed size availability and added it directly to the basket, cutting out multiple clicks compared to competitors. A lean model worth carrying into the app experience.
Under Armour showed colour availability without clicking into a product, but still required additional clicks to select a size – less lean than Gymshark’s approach.
Nike used clean, simple imagery with colour breakdowns and prominent Add to Cart buttons – a familiar, functional pattern.
Lululemon required users to click into a product and then open a dropdown to select a size – two additional clicks, and if the size wasn’t available, a frustrating waste of time.
Boohoo took a smart approach by only showing sizes that were actually available for each product – removing the disappointment of selecting an unavailable size entirely.
Amazon used hover states to surface sub-categories quickly, detailed filtering and Best Seller tags – useful patterns for surfacing content efficiently.
Key takeaway
The most effective experiences were the leanest ones. Every unnecessary click was a potential drop-off point, particularly for users mid-workout or on the move.
Research:
User journey mapping
I mapped out the current Gymshark user journey against competitor journeys to understand where friction existed and where the app could learn from best practice.
Gymshark’s quick-add flow was already strong – but the app experience needed to carry the same lean principles through to workout discovery, tracking and content consumption.
Patterns from best-in-class experiences like Petco and Zumiez informed the approach – limited exit points once in a flow, descriptive CTAs that set expectations, guest access, and clear progress indicators.
Observations and suggestions:
About you
Observations
The gender selection only offered Male and Female – no Non-Binary or Prefer Not to Say option.
The Continue button’s active state changed from dark grey to black – a subtle shift that would be easy to miss for users with visual impairments.
Touch targets on the checkbox and buttons were below Apple’s recommended 44px minimum, meaning users could easily tap the wrong element.
Suggestions
Adding a Non-Binary and Prefer Not to Say option promotes gender inclusivity and reflects Gymshark’s audience more accurately.
Increasing touch targets to 44px prevented accidental taps and made the interface usable mid-workout.
Making the active state of the Continue button more visually distinct ensured users knew they could proceed.
Observations and suggestions:
Home screen
Observations
The “Create your first custom plan” element didn’t look like a button – easy to overlook entirely.
The “View Athlete Plans” link failed WCAG 2.0 accessibility guidelines – low contrast made it difficult to read for anyone with a visual impairment, and the tap target was too close to the button above it.
Suggestions
Redesigning “Create Your Custom Plan” as a proper button with a supporting icon made the action clear and consistent with the rest of the app.
Updating “View Athlete Plans” to match the bottom navigation colour improved brand consistency and made the link immediately legible.
Observations and suggestions:
Search empty state
Observations
First-time users were greeted with a completely blank search page – no guidance, no suggestions, no starting point.
A new user who doesn’t know what to search for has nothing to go on.
Suggestions
I replaced the empty state with onboarding copy explaining that no searches had been made yet, alongside curated “Get Started”, “Popular” and “Hot This Week” suggestions.
New users got a gentle nudge in the right direction. Experienced users could ignore it and search directly.
Observations and suggestions:
Onboarding
Observations
The Skip button was positioned centrally at the bottom of the screen – exactly where a user’s eye and thumb naturally land.
Users were unconsciously skipping onboarding without reading it.
Suggestions
Moving Skip to the top right of the screen – where it’s visible but not prominent – meant users were far more likely to read through the onboarding content before dismissing it.
A small change with a significant impact on how much information users actually absorbed.
Ideation:
Home screen
The home screen redesign brought together all of the research findings into a single cohesive experience — promoting new and existing workout content to a mixed male and female audience, surfacing shortcuts to previous activities, and providing a pull-to-refresh mechanism for dynamic content loading.
The screen was structured around three priorities: getting returning users back to where they left off quickly, surfacing new content from athletes they follow, and giving new users a clear path into their first workout.
Ideation:
Free vs Premium badge system
Gymshark planned to introduce a premium subscription tier – with some athlete content free, some premium only, some new and free, and some new and premium. Users needed to be able to tell the difference at a glance without it disrupting the browsing experience.
Taking inspiration from Strava’s badging approach, I designed a consistent visual badging system covering all four states:
Free
Clearly labelled, accessible to all users
Premium
Badged to indicate subscription required
Free + New
Dual badge surfacing both attributes
New + Premium
Dual badge combining novelty and premium status
Any content not marked as Free was treated as premium by default – keeping the system simple and consistent throughout.
Ideation:
Muscle map overlay
Going beyond the brief, I designed an interactive muscle map feature – an addition I felt would meaningfully improve the workout experience.
When a user selected an exercise, a body map overlay highlighted which muscle groups that exercise targeted in real time. Users could also tap a muscle group on the map to discover exercises that worked that area.
The design challenge was surfacing detailed, dynamic information without cluttering the screen or breaking the user’s focus mid-workout.
The overlay was kept clean, minimal and dismissible – information on demand rather than information by default.
What happened next
The brief didn’t lead to a role – but the concepts I developed closely mirror the direction Gymshark subsequently took with their workout product.
The muscle map, the content badging system, the personalised home screen and the empty state improvements all found their way into the product in some form. Sometimes the work lands even when the opportunity doesn’t.
Gymshark workout app
Gymshark set me a design brief: concept a workout app targeted at social natives who wanted to train alongside their favourite Gymshark athletes, get tips on form and technique from the pros and track their strength and conditioning workouts.
The brief covered a home screen redesign, a free vs premium content badging system, onboarding improvements and a pull-to-refresh mechanism for dynamic content.
I added an additional layer on top of the brief – an interactive muscle map overlay showing which muscle groups each exercise targeted in real time.
I spent a few weeks on the project, and the concepts I developed closely mirror the direction Gymshark ultimately took with the product.
My role
I was the sole designer on the project – research, competitor analysis, observations, design solutions, UI and interactive prototype.
The brief asked me to demonstrate creative and conceptual skills alongside iOS knowledge, with user experience prioritised over visual polish.
I treated it as a full end-to-end design exercise.
Research:
Competitor analysis
Before touching a wireframe I analysed how the leading players in the activewear and fitness space handled their product experiences – looking for patterns worth adopting and gaps worth exploiting.
Gymshark already had a strong quick-add feature on their website – hovering over a product revealed size availability and added it directly to the basket, cutting out multiple clicks compared to competitors. A lean model worth carrying into the app experience.
Under Armour showed colour availability without clicking into a product, but still required additional clicks to select a size – less lean than Gymshark’s approach.
Nike used clean, simple imagery with colour breakdowns and prominent Add to Cart buttons – a familiar, functional pattern.
Lululemon required users to click into a product and then open a dropdown to select a size – two additional clicks, and if the size wasn’t available, a frustrating waste of time.
Boohoo took a smart approach by only showing sizes that were actually available for each product – removing the disappointment of selecting an unavailable size entirely.
Amazon used hover states to surface sub-categories quickly, detailed filtering and Best Seller tags – useful patterns for surfacing content efficiently.
Key takeaway
The most effective experiences were the leanest ones. Every unnecessary click was a potential drop-off point, particularly for users mid-workout or on the move.
Research:
User journey mapping
I mapped out the current Gymshark user journey against competitor journeys to understand where friction existed and where the app could learn from best practice.
Gymshark’s quick-add flow was already strong – but the app experience needed to carry the same lean principles through to workout discovery, tracking and content consumption.
Patterns from best-in-class experiences like Petco and Zumiez informed the approach – limited exit points once in a flow, descriptive CTAs that set expectations, guest access, and clear progress indicators.
Observations and suggestions:
About you
Observations
The gender selection only offered Male and Female – no Non-Binary or Prefer Not to Say option.
The Continue button’s active state changed from dark grey to black – a subtle shift that would be easy to miss for users with visual impairments.
Touch targets on the checkbox and buttons were below Apple’s recommended 44px minimum, meaning users could easily tap the wrong element.
Suggestions
Adding a Non-Binary and Prefer Not to Say option promotes gender inclusivity and reflects Gymshark’s audience more accurately.
Increasing touch targets to 44px prevented accidental taps and made the interface usable mid-workout.
Making the active state of the Continue button more visually distinct ensured users knew they could proceed.
Observations and suggestions:
Home screen
Observations
The “Create your first custom plan” element didn’t look like a button – easy to overlook entirely.
The “View Athlete Plans” link failed WCAG 2.0 accessibility guidelines – low contrast made it difficult to read for anyone with a visual impairment, and the tap target was too close to the button above it.
Suggestions
Redesigning “Create Your Custom Plan” as a proper button with a supporting icon made the action clear and consistent with the rest of the app.
Updating “View Athlete Plans” to match the bottom navigation colour improved brand consistency and made the link immediately legible.
Observations and suggestions:
Search empty state
Observations
First-time users were greeted with a completely blank search page – no guidance, no suggestions, no starting point.
A new user who doesn’t know what to search for has nothing to go on.
Suggestions
I replaced the empty state with onboarding copy explaining that no searches had been made yet, alongside curated “Get Started”, “Popular” and “Hot This Week” suggestions.
New users got a gentle nudge in the right direction. Experienced users could ignore it and search directly.
Observations and suggestions:
Onboarding
Observations
The Skip button was positioned centrally at the bottom of the screen – exactly where a user’s eye and thumb naturally land.
Users were unconsciously skipping onboarding without reading it.
Suggestions
Moving Skip to the top right of the screen – where it’s visible but not prominent – meant users were far more likely to read through the onboarding content before dismissing it.
A small change with a significant impact on how much information users actually absorbed.
Ideation:
Home screen
The home screen redesign brought together all of the research findings into a single cohesive experience – promoting new and existing workout content to a mixed male and female audience, surfacing shortcuts to previous activities, and providing a pull-to-refresh mechanism for dynamic content loading.
The screen was structured around three priorities: getting returning users back to where they left off quickly, surfacing new content from athletes they follow, and giving new users a clear path into their first workout.
Ideation:
Free vs Premium badge system
Gymshark planned to introduce a premium subscription tier – with some athlete content free, some premium only, some new and free, and some new and premium. Users needed to be able to tell the difference at a glance without it disrupting the browsing experience.
Taking inspiration from Strava’s badging approach, I designed a consistent visual badging system covering all four states:
Free
Clearly labelled, accessible to all users
Premium
Badged to indicate subscription required
Free + New
Dual badge surfacing both attributes
New + Premium
Dual badge combining novelty and premium status
Any content not marked as Free was treated as premium by default – keeping the system simple and consistent throughout.
Ideation:
Muscle map overlay
Going beyond the brief, I designed an interactive muscle map feature – an addition I felt would meaningfully improve the workout experience.
When a user selected an exercise, a body map overlay highlighted which muscle groups that exercise targeted in real time. Users could also tap a muscle group on the map to discover exercises that worked that area.
The design challenge was surfacing detailed, dynamic information without cluttering the screen or breaking the user’s focus mid-workout.
The overlay was kept clean, minimal and dismissible – information on demand rather than information by default.
What happened next
The brief didn’t lead to a role – but the concepts I developed closely mirror the direction Gymshark subsequently took with their workout product.
The muscle map, the content badging system, the personalised home screen and the empty state improvements all found their way into the product in some form. Sometimes the work lands even when the opportunity doesn’t.