COMPANY: Shuttlecats Badminton Club ROLE: UX/UI designer & front-end dev WEBSITE:shuttlecats.com.auPROTOTYPE:FigmaTIME: 10 weeks
THE CHALLENGE
As President of the Shuttlecats committee, I led membership growth and redefined the branding for the club. The website had never been updated since it was created so I took up the challenge to improve it.
Defining the problem: Melbournians, who identify as LGBT+ and want to be more active, feel confused about where they can find casual sports clubs when looking for social ways to be healthy and want to understand who would be a good fit but websites often don’t provide enough information to make a satisfying or meaningful decision on which club to join.
The main challenges were:
1 Define current user groups
2 Revise customer journey and find new opportunities
3 Correct existing UX issues 4 Implement features and set tests for future updates
Here's how I took on these challenges.
CHALLENGE #1: DEFINE CURRENT USER GROUPS
Since the website was hastily created several years back, how users would actual interact with it was never thought out. I decided to dig further into user behavior with the current website and how the overall process of engaging with the Shuttlecats can be improved.
SOLUTION
Conduct in-depth quantitative and qualitative research Working with the committee as my stakeholders, I conducted Google Form surveys, competitor analysis, and 1 on 1 interviews to gather data.
Pull data analysis into empathy map Using the data, I produced affinity maps to find common threads and collated the insights into an empathy map.
Create personas based on findings After dissecting the information, I made two user types to represent the data collected.
snippet of survey results
Your Subtitle Here
affinity mapping a collected data
empathy mapping
additional snippet of survey results
CHALLENGE #2: REVISE CUSTOMER JOURNEY & FIND NEW OPPORTUNITIES
When I started, there had been no formal investigation done to define the existing or ideal user groups. Without any pre-existing UX research, I set to work to gather as much data as possible to understand our users and design a solution for them.
SOLUTION
Analyse website traffic and Google Analytics data To get an in-depth understanding of current user behaviors on the website, I further deciphered the live data from the past 90 days of the website.
Redefine information architecture and user flows Taking into consideration the defined personas and data, I rearranged the key information and user flow to work hand in hand.
Create new feature list based on personas I brainstormed new possible features then prioirtised them based on value vs ease of implementation.
Flesh out customer journey for personas I refreshed the previous ill defined user journey by using these new personas and recommended ways to improve the overall user experience.
Website traffic analysis
Your Subtitle Here
Updated User flow
feature value comparison chart
CHALLENGE #3: correct existing ux issues
With a sound understanding of the current user, I mocked up an updated website interface using Figma to account for the corrections in the existing UX. Then conducted two rounds of usability testing to find ways to further improve on the UI designs.
SOLUTION
Create low fidelity wireframes Initial sketches were done on paper before transferring them to Figma.
Design high fidelity wireframes Based on feedback from the stakeholders, the lo-fi wireframes were made into hi-fi wireframes while taking into consideration a new branded design and technical limitations.
Conduct usability testing and adjust based on feedback The first round of testing focused on checking if the information was laid out in an easy to find and intuitive manner based on the data. Round 2 consisted of testing against the assumptions made in the personas and customer journey.
paper sketches to digital lo-fi wireframes
lo-fo wireframes turned to hi-fi wireframes
Snippet of round 2 usability question interviews
usability testing wireframe comparison
CHALLENGE #4: IMPLEMENT FEATURES & SET TESTS FOR FUTURE UPDATES
The final UX/UI designs were approved by the Shuttlecats committee so I set to work implementing the redesign on through Weebly. Usability testing also gleaned insights into potential A/B testing to be setup to further improve on features of the website.
SOLUTION
Update the Shuttlecats website
Weebly was previously used to setup the website so I'll implement the updated design into the website via the website builder and custom code where needed. As Weebly has several limitations on theme customisation, the final design color palette was adjusted slightly, the footer space has additional compliance information, and the Facebook logo in the top navigation menu was altered to accommodate these restrictions.
Set up A/B Testing for to continue enhance the UX
Notably the "Session Times" section had a lot of mixed feedback from usability testing, becoming the priority feature to find more insights in.
implementing changes via weebly
next feature set for a/b testing
conclusion
Working with the Shuttlecats committee to improve the UX and UI of the website has been an amazing experience. The biggest challenge was defining the users when no prior work had been done. The biggest reward was hearing feedback from actual users during usability testing to affirm what areas were on track or need further improvement.
Next steps: Continue testing specific features in the UX/UI design, revise the content strategy to incorporate the Facebook group
