Embedded Files
Sector: Non-profit, Health and Fitness, Sport Club
Skills: Lean UX, UI design, User Research and Analysis
Tools: Figma
Note:
The page is currently under construction and developed by Reuben Hawthorne-Jensen using Material UI.
Images used in the prototype are royalty-free photos from Pexels and Pixabay or pictures taken of club members.
Screenshot of the website design before and after
Previous website
The original website, built on Wix by a dedicated club member, had served its purpose but came with challenges. With six pages of content, it was overly complex and not optimally structured, leading to a confusing navigation experience. The extensive number of pages created unnecessary clicks and made it harder for users to find the information they needed.
Additionally,the site featured a basic branding with intense yellow and black colours, which didn’t fully capture the club's welcoming yet energetic nature.
Objectives
The goal was to create a website that just works—simple to develop, easy to navigate, and user-friendly.
The design needed to reflect the club's core values of community, inclusivity, and personal growth while ensuring new visitors had enough information to start with a trial session.
It was also important to balance the edginess and excitement of combat sports without leaning too heavily into a male-dominant or overly aggressive tone.
Research
I began by talking to club members and those involved in similar sports to understand what they value in a club website. Drawing from my own experiences searching for the right sports club, I also gathered insights throughout the design process to ensure the website resonated with potential and existing members.
Design process and inspiration
I set out to create a simple design system based on the club's logo and core colours (yellow and black), enhancing it with blue to inject vibrancy and fun, aligning with the club's friendly and community-driven spirit. The design needed to strike a balance—showcasing the thrill and intensity of Muay Thai while remaining inclusive and welcoming to all. Using an Atomic design approach, I started with the smallest elements—colour, typography, and icons—and built up to larger components, eventually forming complete pages.
Key Enhancements
Branding: The addition of blue balanced the existing yellow and black, making the site feel more vibrant and approachable while maintaining the excitement and edge associated with combat sports. The typography choices, Darker Grotesque and Space Grotesque, were selected for their modern, clean lines that align with the club’s inclusive yet bold ethos.
Structure: I condensed the original six pages into three, streamlining content to ensure all essential information was easy to find. This included adding a new page for merchandise and gear.
Visuals: The design balanced showcasing the intensity of fighters with a sense of community and fun, ensuring the site appeals to both men and women. The visual style was inspired by the club's values of fostering a supportive, community-oriented environment while encouraging members to push their physical limits.
Usability: Key information was strategically placed for easy access, reducing the number of clicks needed to find crucial details.
Development
The final design was transferred to Material UI for development, ensuring the site remained easy to maintain and update.
Google Sites
Report abuse