Role
UX/UI Designer
Client
Mike Molloy
Business Owner
Duration
12 weeks
Overview
Desborough Dragons is a small Kung Fu club in Northamptonshire, founded by schoolteacher Mike Molloy. Initially offering after-school classes, the club now provides Kung Fu training for children and adults, recently expanding to Market Harborough. Affiliated with the British Kung Fu Association (BKFA), the club teaches the Lau Gar style and aims to grow its local membership.
Challenge
Desborough Dragons’ existing website lacked the competitive design and user experience needed to attract new members. To support growth, especially in Market Harborough, the club needed a modern, intuitive site aligned with BKFA branding to better showcase its offerings and enhance user engagement.
Design Audit on Existing Website
- Conducted a design audit on the existing website to identify key areas for improvement.
- This audit highlighted issues such as outdated visuals, accessibility issues, and limited alignment with the British Kung Fu Association's branding guidelines, all of which informed the goals for the website redesign.
User Personas
- User personas were developed to represent Desborough Dragons' key audience segments to guide the design process.
- These included a primary school parent interested in after-school activities for their child, a young adult seeking beginner-level martial arts classes, and an experienced martial artist looking for advanced training options in the Lau Gar style.
- Each persona helped identify unique needs and preferences, ensuring the redesign would address specific user goals and improve overall engagement with the club’s offerings.
Empathy Maps
- The next step involved creating empathy maps, which helped us deeply understand our key users' thoughts, needs, and pain points, ensuring that our design decisions would align closely with their real-life motivations and challenges.
- The empathy map for Sarah Williams highlights her need for affordable, convenient, and safe activities for her children.
- Designing the site to provide simple navigation, flexible options, and easy access to support directly addressed her concerns.
User Journey Maps
- For the journey maps, we outlined the steps a typical user, like Sarah, would take when exploring Desborough Dragons' website —from initially discovering the club online to signing up her children for classes.
- Mapping this journey allowed us to identify critical touchpoints and potential friction points, like difficulties in finding schedule information or unclear pricing, guiding our design improvements to create a smoother, more intuitive user experience.
User Needs Statements
- User needs statements were created to clearly define and prioritise the core requirements of our target users, ensuring that our design solutions addressed their pain points and delivered a seamless, user-centered experience.
- Sarah’s, like other parents exploring Desborough Dragons, needs included easy access to class schedules, clear pricing, transparent communication, and a straightforward registration process.
Wireframes
- In the ideating phase, we translated our user needs and insights into low-fidelity prototypes to visualize the layout and structure of key website pages.
- These wireframes allowed us to map out the user flow, ensuring that essential features—such as class schedules, pricing, and the contact form—were easy to access and logically organised.
Hi-Fi Prototypes
- During the prototyping phase, we transformed our wireframes into interactive, high-fidelity prototypes that closely resembled the final design.
- These prototypes allowed us to simulate real user interactions, test functionality, and refine the overall flow of the website.
Use of Gestalt Principles
- In our design, we applied several Gestalt principles to create a more intuitive and cohesive user experience.
- For example, the principle of similarity was applied by ensuring that icons, buttons, and interactive elements shared consistent styles, such as color and shape, making them easily recognisable and helping users quickly identify actions across the site.
Interactions & Transfer to Framer
- In Figma, we added interactive nodes to create clickable prototypes, allowing us to simulate user flows and test navigation between key pages.
- Once the interactions were finalised, we transferred the designs to Framer, where we built a live, fully interactive website that brought the
prototypes to life for final development.
Live Website, Delivered to Client in Business Presentation
Once the website was finalised, we ensured that all interactions and design elements were polished and aligned with the project goals. We then delivered the live website through a presentation, where we showcased the final product to both the business client and our professor. This presentation included a walkthrough of the user flows, key features, and how our design solutions addressed the users' needs, offering a comprehensive view of the project’s outcome.
Link to full website: https://ddragonsbyhm.framer.website/
Conclusion
This project provided valuable insights into the design process, from identifying user needs to creating an interactive, user-friendly website for Desborough Dragons. By applying key design principles, such as Gestalt theory, we were able to refine our designs to meet both the users' expectations and the business goals. The final live website offers a streamlined experience, addressing critical pain points like navigation, accessibility, and clear pricing, ultimately enhancing the user journey. Presenting the completed project to both the business client and our professor allowed us to showcase the impact of our design decisions and how they contributed to a more engaging and effective online experience.
