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.
Portal Evolution
Gamma Telecoms’ portal improvements make managing services and orders easier, enhance user experience, and support the move to digital communications like unified solutions and the PSTN switch-off.
My role
On the Portal Evolution project for Gamma, I led the design and development of a next-generation platform aimed at streamlining complex workflows and enhancing user engagement. My focus was on creating intuitive, scalable solutions that empowered users to navigate and manage their tasks with ease.
I collaborated closely with stakeholders to identify pain points and opportunities for improvement, conducting user research and usability testing to gather actionable insights. These findings informed the creation of personas, user journeys, and wireframes, which I shared with cross-functional teams to align on a clear vision. By leveraging a combination of research, design, and iterative problem-solving, I delivered a platform that not only addressed immediate user needs but also provided a foundation for future growth and innovation.
Key challenges:
Inconsistent, inefficient navigation
Challenge
The Portal’s overly complex navigation left customers struggling to locate the areas they needed to work on, resulting in frustration, wasted time, and decreased productivity.
This lack of intuitive design not only hindered users from completing tasks efficiently but also contributed to a negative perception of the platform’s usability and reliability.
Solution
I researched into all the sections and pages within the navigation to identify opportunities to separate, group, or merge them. The goal was to simplify the experience and make it easier for customers to find what they needed.
As a result, I created a streamlined experience where users could clearly distinguish between creating and managing orders within a single flow. Previously, these actions were split across separate links, which added unnecessary complexity.
Key challenges:
Fragmented user journeys
Challenge
Users of the Gamma Portal encountered inconsistent user interfaces and disjointed journeys when navigating the platform’s features, including reporting dashboards, ordering processes, and administrative tools.
These inconsistencies made the platform less accessible and efficient, ultimately affecting customer satisfaction and retention.
Solution
I explored specific ways to help customers streamline their ordering processes.
One key area I focused on was reducing friction by encouraging users to self manage within a profile area. This allowed customers to input their information beforehand, so when starting an order, they could simply select a profile. With one click, all the required fields would be automatically pre-filled, making the process faster and more efficient.
To further enhance usability, we added a convenient checkbox at the bottom of the form for users who hadn’t prepopulated their profile. This feature allowed them to transfer the information they entered on the form directly to their profile for future use.
For Channel Partners managing multiple customers, this approach was scalable, as users could easily select the relevant account to streamline their workflow even further.
Goals
Improve navigation across the platform
The navigation was excessively large, with over 147 individual links!! Users found it difficult to identify which links were relevant to their workflows and how to navigate to specific sections that were important to them when needed.
Simplify all journey flows
Throughout many order journeys, there was significant repetition and unnecessary mandatory fields that had to be completed when placing an order. Many customers believed this was a way for Gamma to collect data from them.
Although these input fields were mandatory, the system was unable to validate whether the data entered was correct. As a result, customers realised they could input anything into the fields to proceed to the next page in the flow.
Reduce pressures on support teams by allowing users to self serve on the platform
When users placed an order or needed to make any changes to their accounts, users were required to call the support line so an agent could make the necessary updates.
No matter how small the task, this was still required.
Research:
Site mapping
After gathering extensive feedback from users across the business, first-hand customers, and exploring the platform myself, I decided it would be best to create a site map.
This process allowed me to review all areas of the site and gain a clear overview of its structure. I also made rough notes describing the actions required on each specific page to better understand the purpose and layout.
Could any of the sections within the navigation be simplified or condensed, as there may be duplications throughout? Surely a navigation menu can be streamlined from 147 links!
Research:
Journey flows
Once I had gained more insight into the platform, I began mapping out the journeys users would take to create orders. Each time an order was created across the business, the user had to log in, select an account, and input their details—followed by additional steps specific to the type of order they wanted to make.
Key findings:
Site map
I wen’t through every page on the site, going through the navigation links and made a brief note of what each page required the user to do to complete the relevant task. (Yes! It was quite a job!)
Key findings:
Site map overview
I grouped all the finding together. This gave me a breakdown of the main areas of focus to start improving.
It was obvious just by looking at the numbers that areas needed to be streamlined, instead of having a page for every single area, lets have one global feature instead.
By streamlining the navigation, I thought it would be a great idea to see if every duplicate page could be removed, if there were reasons to keep that page, I would see if I could integrate that particular part in the grand design so functionality wasn’t being missed out.
Ideation:
Landing page
The idea was to create a landing page when the user logs in. Users can see their products, services, sites and locations easily.
The navigation has been completely stripped back and simplified:
One of the main frustrations when creating a new order was the lack of flexibility to amend or change orders, upgrade services, or even update site details and equipment for each site.
Users had to phone or email to make changes to their account. The same process applied when placing an order: users would endure the laborious task of creating their order, only for it to be emailed to someone in accounts, who would then calculate the costs and send an invoice back to the user.
The whole process felt incredibly outdated and wasn’t very transparent.
Wireframes:
‘My products’ page
I created an area where users could easily self-serve and ‘Manage’ their active products manually, as well as a space where they could easily ‘Create’ a new order if they wanted to add another service.
The screen is split into two sections: the left side displays your active services at each site, while the right side dynamically updates to show specific information about whatever you’ve selected on the left. This could be site details or information about a particular service.
If nothing is selected, the screen provides helpful guidance to indicate that you can interact with the panels on the left.
Edit an active service
If a user selects a specific service, they can see the level of service they have, along with its location.
If the service or product is eligible for an upgrade, users can do this themselves by simply toggling the options on or off. Alternatively, users can also select any relevant bolt-ons for that particular service, with prices clearly highlighted for transparency.
This removes the need to wait for accounts to recalculate everything and get back to the user.
Edit a site
Similarly to selecting a service, the site details could be easily edited or adjusted, and users could view all the products and services active at a particular site.
They could also toggle a service on or off if it was no longer required.
Final design:
‘My products’ page
When the user logs into the Portal, the first thing they see is a breakdown of all the sites that the business has registered on they system.
Sites can be empty if they don’t have any active services. When services are active, you can see them on the page. Users can select the site as a whole or a specific service to update accordingly.
Edit an active service
When a service is selected, you can add bolt-ons or upgrade / downgrade and change settings accordingly based on the service thats been selected.
For transparency, you can see the cost difference for everything at a glance (none of that previous ’email / call’ in to get an updated price).
Edit a site
When a site is selected, you can edit the address and numbers, as well as toggle services on or off – the business has bought the service, so they can distribute the services however they wish.
Each site has it’s own equipment, the same as the site settings, these can be updated and toggled on / off.
Research:
Creating a new order
I began collecting first-hand information and insights on users’ opinions and behaviours of the current platform – specifically creating a new order as this was a common task that users did on the platform.
I noticed there were lots of similarities and repeated tasks for each flow – could I simplify this step in the journey somehow?
I asked users what they liked and disliked about the journey, while also making general notes. I organised these notes into categories:
Along the way, I also gathered suggestions on how the platform could be improved moving forward.
User interviews:
Step 1: Contact details
All users would have to start by entering their details – they would have to select their account, along with information such as email address, name, company name, phone and mobile numbers as well as selecting what the nature of the business was.
These fields felt very accessive and they had to be filled in every time users wanted to create a new order – if the details were linked to the account they’ve selected in the first step then surely the other details could be pre-populated based on the selected account.
User interviews:
Step 2: Product details
Users then have to select what level of security they want for the product. The options were very jargon heavy and wordy – plus I don’t know what the difference is between each choice, what extra am I paying for?
I also noticed users kept missing the yellow “I confirm” checkbox and then clicked ‘Continue’ to progress with the order.
This felt like it used to be at the bottom of the page, but more and more information has been added to the page over time like the ‘Promotions’ section.
The broadband service rental cost is typically lower than the SIP Trunk Call Manager cost because of the cost of DDI's etc, so even if it's not used we do have a couple where they have an existing ethernet circuit and we've put a broadband service in that's not even used just to get the free SIP Trunk Call Manager
User interviews:
Step 3: Build details
The first yellow warning message at the top of the page say: “It is vital that CPE information is correct”, but lots of people mentioned that they didn’t know what a SBC / IP-PBX was.
I've not always been accurate with the information and is hasn't caused me a problem
User interviews:
Step 4: Service configuration
Users would then have to set up their daily fraud limit by inputting a daily amount of their choice and select what calls they can block from being made.
User interviews:
Step 5: Call manager configuration
This was an optional page, but users would select if they wanted to upgrade their product – however it didn’t tell the user what the cost was for the upgrade.
User interviews:
Step 6: Number selection
When users could create phone numbers, they could select the area code they needed, along with the quantity they needed and if they needed to be a consecutive amount or just randomly ordered.
User interviews:
Step 7: Order complete
The last page is literally where the user reads and accepts the terms and conditions.
Once that task is complete, then the order gets sent over to the accounts team for them to review and work out the total costs.
Research:
Journey mapping
Create a new SIP Trunk order
After sorting out the dashboard for Portal Evolution, one of the first projects I worked on involved redesigning and defining the user experience for creating a new oders, specifically for SIP Trunk orders (this was because it was one of the larger journeys.
My approach typically involves mapping out the current journey and documenting every interaction required to complete the task, including optional interactions. For example, I note that the user lands on the login page and needs to click on the email address input field to begin entering their email address.
This detailed process allows me to create a clear before-and-after comparison, where a reduction in clicks highlights a simplified and more efficient task, ultimately saving time for the user.
You might notice the term “Between” in the analysis – this accounts for the optional interactions users can make. For instance, the current flow in its simplest form required 52 clicks, while the redesigned flow reduced this to just 15 clicks.
Current click count: Between 52-88 clicks
Suggested click count: Between 15-30 clicks
Final designs:
Profile area
One of the larger pieces of work that fell out of these flows was to create a profile area for users to add or update their details.
Currently, there wasn’t anything like this on the platform – the aim of creating the profile area was for users to enter the details that were asked throughout the ordering flows.
These details could then be prepopulated during the order journeys, reducing the users need to constantly input information over and over again.
Account overview
TBC
Personal information
TBC
Payment methods
TBC
Orders overview
TBC
Notification settings
TBC
Login and security
TBC
Final designs:
Create your order
I noticed when users wanted to create a new order they couldn’t add multiple services to their order.
It was literally a case of having to add all the details and information into the system multiple times, depending on how many services they wanted to place in the order.
Phase 1 – Price transparency
One of the main points I kept hearing from users and team members was the absolute lack of transparancy around the pricing of products, services and add-ons.
When a user selects a service – a ‘reciept style’ section appears showing the price (before, the users only saw the cost days after submitting their order).
We also tried to encourage upselling and add-ons, so if a user added another product to their order, they would save more money.
Phase 1 – Reduced jargon
TBC
Phase 1 – Simplified order journeys
One of the larger pieces of work that fell out of these flows was to create a profile area for users to add or update their details.
Currently, there wasn’t anything like this on the platform – the aim of creating the profile area was for users to enter the details that were asked throughout the ordering flows, these could then be prepopulated during the order creation, reducing the users need to constantly input information over and over again.
