Desborough Dragons
Website design for an independent kung fu club based in Northamptonshire, England.
Timeline
October → November 2022
Team
Worked alongside two other UX designers
Tools
Adobe XD
Figma
Miro
HTML and CSS
Role
User Researcher
UX/UI Designer
Usability Tester
at a glance
This project was undertaken for my UX Design Lab module as a part of my MA in User Experience Design at Regent’s University London.
For this project, we worked with Desborough Dragons, a Kung Fu Club based in Desborough, Northamptonshire that teaches a style of Kung Fu called Lau Gar. The organisation offers two main classes: a junior class for children aged 6-11 years old and an adult class for anyone above the age of 12 years old.
We worked through the design thinking cycle to produce prototypes for the client’s new website. Our group was awarded the best prototype in the cohort.
PROBLEM
Desborough Dragons has relied on social media platforms and online directories to advertise their services. However, they do not currently have a website and are missing out on the competitive advantage their competitors have through their strong online presence.
GOALS
• Develop an understanding of the potential customers
• Create an intuitive user experience that directs users through the service offerings
• Visually demonstrate the connection the club has with the British Kung Fu Association (BFKA)
SOLUTION
The website has three main users: parents looking to book classes for their children, existing customers, and potential customers. A simple desktop booking website was designed to cater to the needs of the three user personas.
the process
The client’s previous research was provided to us as a starting point for the research process. We then expanded upon their findings through secondary research. After building the prototype, we conducted heuristic evaluations with five participants to gather feedback.
*Please double click images to expand them
USER PERSONAS
EMPATHY MAPS
USER NEEDS STATEMENTS
USER JOURNEY MAPS
WIREFRAMES
HEURISTIC ANALYSIS
design iterations
ERROR PREVENTION
Three users flagged error prevention as a critical issue, explaining that the data validation on input forms were not comprehensive. I used the format controls native to HTML, but it did not prevent all errors such as a missing domain at the end of an email address. A reset button was also suggested to help users clear their input. Participants have suggested that error messages could be phrased to better aid users in identifying solutions.
SYSTEM FEEDBACK
Participants found the site easy to navigate and were able to access pages easily and without need for further guidance. Hover interactions were also helpful in revealing which elements users can interact with. However, some places participants faced difficulties in submitting the contact form due to the absence of a message pop-up box and it was therefore difficult to know if their form was successfully submitted.
final design
Interact with the prototype on Figma below, or through this link.
key takeaways
Prioritising user needs
I learned that in putting users first, the product solutions created were not trivial and were able to solve real issues users are going through.
This was also the first time I had conducted user testing, and putting work out there to be judged by others was scary. Having been invested in the design process, findings from the user testing sessions brought to light issues that we missed while designing.
Having a nuanced understanding of users
It was not until we moved on to the define stage that we realised our understanding of the users lacked depth, after which we went back to reevaluate.
Once we expanded our understanding, revising the empathy maps proved to be much simpler as our users felt like real people to us. Although frustrating at times, it proved to be helpful as we were able to efficiently work through the rest of the process.
Working in a UX team
Designing for a real client alongside a design team allowed me to understand how to collaborate with others in creating a solution.
Though I have completed website design projects in the past, I create the sites purely based on aesthetics rather than function. Shifting the focus to user needs required a team to bounce ideas off of in order to create a truly functional website.