As a Freelance UX Designer and Frontend Developer, I partnered with FORTH to redesign their website in line with a business shift from selling fitness socks to offering fitness classes and events. The new site better aligned with user intent, reduced bounce rates, and increased traffic to class bookings through a refactored user journey and updated visual identity.
Overview
FORTH is a fitness and lifestyle brand building a community around their fitness classes and events. I joined as a freelance UX designer and frontend developer to help bring that vision to life online. I delivered a new website marketing/e-commerce alongside a strategy that covered social media journeys, third-party booking flows, and post-booking/class interactions. By refining the website experience and architecture, I helped clarify a confusing user journey and lay the groundwork for future platform features.
Freelance UX and Web Designer
User Journey Mapping, User Research, UI Design, Content Strategy, Front-End Implementation (HTML/CSS/JS)
Team
Solo Freelance UX and Frontend Developer
Date
December 2024 - February 2025
15% decrease in bounce rate
Higher click-through on booking links
Higher return visitors to the website
The website no longer reflected the business focus
FORTH started with performance socks, but fitness classes quickly proved more popular. The founder pivoted, but the website didn’t. Despite classes driving 95% of revenue, it still wasn’t built to support booking journeys.
Aligning early, together
Freelancing taught me to frame projects with non-designers, making user-centred thinking part of the problem-solving process. I use a template to uncover business goals, user needs, and success criteria early on.
How I structure kickoff calls with clients to gather useful information to help build a strong starting point for the project
These early conversations gave me a clear scope for what I needed to deliver the client. But it also made space to think about what the brand would need next.
Identifying what the client needed from me, helping me create my project plan
Project plan
- Auditing and research:
Reviewed current flows, structure, and usability; gathered insight from users, content analytics, and competitive context - Experience strategy:
Mapped updated user flows, introduced emotional goals, and used OOUX to structure new website - Design Execution:
Created low- and high-fidelity wireframes, a style guide, and refined UI - Front-end delivery
Built and launched a responsive, custom Shopify theme, optimised with CMS-like functionality for maintenance by non-technical team
Key business goals
Increase number of class bookings
Clearer user journey to booking
Increase click-through rate on core revenue-generating CTAs
Redesign homepage and IA to communicate offerings
Increase % of returning class attendees
Emphasise community, UGC and post-class engagement touchpoints
*No baseline metrics established at this stage
Understanding the project parameters
Constraint
Design Considerations
The journey to the problem statement
I used a deliberately sequenced set of steps designed to help me move from context to problem definition.
User flow mapping
I chose not to create a full journey map at this stage due to limited access to validated user insights and emotional context.
Mapping out all the friction points in the user flow for the process of booking a class starting on social media
UX/UI heuristics review
From there, I moved into a heuristics review, zooming into key screens to evaluate usability issues and any patterns of inconsistency or confusion.
Existing visual inconsistencies between different areas of the website
Navigation lacked clarity and pathways to key actions like booking and class information were buried 4 layers deep. Visual and layout inconsistencies and clutter weakened hierarchy and diluted the brand identity. In some cases, false affordances created confusion.
Content & information architecture analysis
The most valuable real estate on the website was still focused on fitness socks
The original sitemap prioritised products over classes, with key actions buried and broken pages disrupting the user journey
There were disconnects between the site and the brand’s direction. Unclear branded labels such as "The FORTH Club", low-context and broken pages were confusing, while the homepage messaging still prioritised fitness socks.
Behavioural analytics
To identify real user behaviours, I made use of Shopify's built-in analytics:
Over 90% of the traffic came from social media or direct search
Bounce rate was high on homepage and vague The FORTH Club page, suggesting drop-off due to confusion or dead ends
Low engagement with deeper-level pages (often containing critical information like packages and pricing)
Informal user feedback
Hey, I saw pilates on Instagram but couldn’t find it on the site.
...I'm trying to book a class but I can't find it?
What are the add-on options for private bookings?
What the discovery uncovered
By this point I became a lot more confident framing the problem from the user perspective.
High-intent users arrived ready to book a class but the site was creating many points of friction. It did not reflect FORTH’s new business direction, instead prioritising socks, using needlessly complex navigation for key user actions, and lacking the strong community-oriented visuals users would have experienced on their social channels. This disconnect between brand perception and their website disrupted the journey and eroded credibility.
Structuring the new experience
What users need to be able to do
To begin translating findings into structure, I started restructuring core user flows. Each of these flows begins with a high-intent user action.
Defining user flows for core actions and the steps needed to support them
Mapping the restructured user flows helped me identify what users needed at each step to achieve the intended outcome of each key user action.
What are these experiences made of
Updated user flows helped me identify the content objects needed at each step. Using the ORCA process from OOUX, I mapped key objects like Class, Instructor, and Package—their relationships, attributes, and associated CTAs—to begin shaping the interface.
Defining user flows for core actions and the steps needed to support them
Where do these actions and objects live
This process got me to a revised sitemap. Knowing what users needed to complete a core action meant that I could structure the website to surface the right information at the right moment.
A simplified, intent-led structure shaped by user flows and content objects
Simplified to prioritise driving high-intent users toward conversion
Surfacing key actions like booking, viewing the timetable, and exploring packages
Each nav item was built around a single user action or question
Clearer access points to the third-party booking platform
Putting concepts to screens
With flows and content relationships defined, I focused on wireframing components instead of full pages to speed up feedback and iteration. Since a non-technical team would manage the site using these components, it was crucial to get their function and messaging right.
I'll now walk you through an example of how I used user insights, user flows and object-mapping to design components:
1) Shared Object: "Class"
“Class” emerged as a core object across touchpoints. I defined its schema and mapped key attributes, then designed a neutral class card—a flexible pattern that holds all attributes without locking in display rules.
Reusable foundation — contains all relevant attributes
2) Mapping entry points to mindsets
I looked back at the user flows and insights to start answering the question: “How do these attributes show up for the class card?”. By mapping out key touchpoints and the possible associated goals, it became clear that the way users would use the "class" object might vary by context.
Showing the different intentions a user might have interacting with class information on the homepage vs the timetable page
3) Emerging contextual variants
I explored how users might interact with the “Class” object on the homepage vs. the timetable. Based on hypothesised goals and mindsets, I designed two class card variants—one for the more exploratory mindset likely found on the homepage.
Lofi wireframes of the homepage variant of the class card component
On the timetable page, users are in a more intentional, decision-focused mode, so the class card variant surfaces more attributes to support logistical decisions.
Lofi wireframes of the timetable variant of the class card component
Further considerations
Platform limits shaped the design. For example, class cards couldn’t link to specific packages or filtered timetables. To manage expectations, I kept a generic “Book a Class” CTA separate from the cards, avoiding confusion over where links would lead.
Guidelines for visual design
While a full design system wasn’t required, it was important to establish a process for design that could be maintained by a small internal team.
The visual foundations to support FORTH's brand presence across all user touchpoints
In addition to visual foundations like colour and typography, the style guide also included practical guidelines for key UI components such as buttons, input fields, and layout patterns.
Usage guidelines to support the proper implementation
These visual guidelines helped me bring these logic and structure focused wireframes to life and ready to be built.
Coding in a modular way to support a non-technical team
Because I’d approached design with OOUX and modularity in mind from the start, I was able to build reusable components using Shopify's JSON schema. This meant that the same components could adapt across the site and it's content could be updated without touching code.
Building things as modular components gave the client "CMS-like" functionality by being able to add components on to the screen, swap images and content on the screen without interacting with code using Shopify's theme editor
Design Showcase
Reframing the homepage
The homepage was redesigned to prioritise key actions like booking a class or checking the timetable. This meant that there were now two direct booking links above the fold.
The "What is FORTH?" question
Users arriving from social channels felt confused about what FORTH actually offered. The About carousel was designed to quickly communicate their brand story as well as their offerings, whilst creating a clear path to conversion.
Flexible, reusable components
Reusable components designed to adapt across contexts, streamline core user flows, and strengthen brand consistency.
Designed for discovery: Flexible class cards that adapt to user goals
Designed for transparency: a timetable that's visible without sign-ups or redirects
Designing for connection: a scrollable instructor slider to humanise the experience
Mobile-first considerations
With most users arriving from Instagram, I ensured that important content and actions were easy to scan, tap, and navigate on small screens.
Designing for third-party handoffs
To ease the shift to a third-party booking platform, I added a redirect screen that helped set expectations and maintain trust.
Visual consistency across touchpoints
Visual continuity in image style whilst reinforcing class brand identities through colour and image effects
Outcomes
15% decrease in bounce rate
Higher click-through on booking links
Uplift in average sign-ups per visit
Increase number of class bookings
Clearer pathways to action; continuity with social presence; stronger IA
Increase click-through rate on core revenue-generating CTAs
Booking CTAs and class details more discoverable for high-intent users from socials
Increase % of returning class attendees
Connected site to other touchpoints with proposed comms strategy
Future-focused
Broader Journey Recommendations
- Link directly to LegitFit from Story CTAs
- Use class-specific colours and patterns in social posts
- Leverage LegitFit’s automated emails and push notifications for re-engagement
- Follow up with class-specific content
- Use email comms for feedback to start building a repository of user insights
If I were to continue working with FORTH...
- Track clicks on all booking CTAs, by page, to understand which content drives the most conversions.
- Run A/B tests on button language, CTA placement, or layout order etc.
- Collect feedback after booking via a quick email survey or embedded form to understand lingering friction points.
