UI/UX Design Case Study: App to find recreational clubs
“All work and no play makes Jack a dull boy.” So many of us take up extracurricular activities and hobbies at recreational clubs or academies. The usual way of taking admission is physically visiting the location, inquiring and taking a decision, or repeating the process if the criteria wasn’t met. Most of the experiences ending with a loss of time and effort.
Goal: Finding a recreational activity and a suitable (in terms of distance, resources and availability) club.
Problem: Added physical effort and time to go to the locations to inquire.
Problem Statement
Designing a booking app to make discovering recreation clubs and activities easy and effortless for the users.
Primary flows I had to focus on:
1. Login/signup
2. Browsing searches
3. Details page
4. Booking flow
The targeted users would be busy working adults who wanted to do something apart from their work, and working parents who wanted to put their kids into a recreational activity.
Business opportunity: The clubs setting up an online presence on a dedicated app would mean increase influx of memberships. A commission based business model could be used, and also from club advertisements to promote them.
Constraints
This project was done as a part of a 10kdesigners cohort assignment with a deadline of 2 weeks.
The goal was to complete an MVP version of the app in 2 weeks, and iterate over the 3rd week after usability testing.
Into the Design Process
Research
Primary Research: I talked to my friends and neighbours who were already into some extracurricular activities. Also, to experience it first hand, I went through the admission at 3 different recreational clubs (and now I’ve taken Badminton as a hobby 😛).
Objective:
- to understand how users currently interact with the club/academies.
- to understand the user personas and delve into the pains they have going through the admission process and how the design solution could add value to their lives.
- to empathize with how they respond to the current scenario and if they are aware of the problem.
Curating the Research
To empathize with the users better, I mapped and created a user persona and journey map.
And then I created the user journey map of the current situation to analyze how I could find an opportunity to improve every touchpoint.
- Ashish, 23
He wants to take up a hobby to relax the burn out from his busy job. He gets inspired from social media or friends to learn something new, and uses Google, Google Maps or relevant sites on google like JustDial or Nearbuy, to find the contacts of the club/academy.
Pain: Sorting out all the results from Google and other sites, compare and take the time to call and inquire or, worse having to visit the location.
Gain: Having all the information without having to call or visit in a very short time effortlessly. - Meghna, 37
A working mom. She finds it a need for her kid to be in multiple extracurricular activities for overall growth. She usually asks her friends or her kid’s friends’ parents for clubs and academies, less adapted with finding online.
Pain: Being a working parent, she finds little time to spend time with family, and finding a suitable club for her kid tires her.
Gain: Finding a club quick so she doesn’t have to keep repeating the searching process. Also making sure the place is safe and friendly for her kid.
Competitive Analysis
- Google, Google Maps: Results just based on location. Chances of fake reviews, and have to be checked by either calling or visits, which again doesn’t actually solve the problem.
- ClassPass: An app especially to find gyms, but not available in India, but helpful for reference.
- Good UX and UI but its job ends after it connects the user with the club.
- Optimized search results and information is well represented.
Ideation
Key Metrics
- Since the primary goal of the user in the app will be to find a suitable club for their activity, it is necessary to measure rate of opening the details page, which indicates a successful result.
- Its a commission based business model, so revenue is earned only when transaction occurs. So it is necessary to measure the number of demo class/membership bookings.
How Might We
- help the user get suitable search results quick so they don’t drop off?
- Minimizing sign up to reduce friction.
- Optimizing the search flow to recommend better options to user. - retain users as they are done with the app right after they find a club?
- Creating a space for the user where they can manage their memberships.
- Showing recommended activities and clubs to nudge user for more memberships, since parents are prone to admitting their kids to more than one extracurriculars. - make the transactions and document uploading a smooth and automated experience?
- Integrating a wallet feature where fees are paid automatically on time.
- Easy scanning of ID verification.
User Flow and Information Architecture
Wireframes
There were a some inconsistencies in the flow and the overall UX could be improved along with the layouts, as pointed out by my mentor on the feedback round.
So I made the changes along as I progressed with multiple iterations.
High Fidelity Designs and Solution Breakdown
Since design is an iterative process, I stressed on iterations before coming to a proposed solution. I’ve highlighted how the design structure changed with every iteration.
Onboarding
Iteration 1:
Problems: 1. The structure of information shown to the users seem haphazard and random, also increasing more clicks and steps into finding a club.
2. Difficult for users to predict what happens after answering the questions on discover page.
Iteration 2:
I revisited the metrics I had had decided on designing the solution around, to have clarity.
For the onboarding the flow, the goal was to reduce the drop-off rate by making the search process quick. For that I had to narrow down the onboarding flow to educating the user to take the first step and ask for quick information for best recommendations.
I assumed there would be two kinds of users, first, who knows exactly what they want in terms of the activities or club, and second, who are not sure of they want (they can be influenced with personalized recommendations).
Searching
Iteration 1:
Problems:
1. Some information of the search result cards is unnecessary, like the timings and admission open/close tag which depends on the different slots for that activity.
2. Distance filter can be neglected if searched results are shown for closest distances and ranging only within the city or town.
Iteration 2:
Details Page
Booking Flow
From primary research, my inference was that club and institutions ask for ID documents for record keeping.
Challenge:
Resistance in booking flow which could eventually result in higher dropout rates.
To help resolve this friction in the booking flow, I crunched three steps (Verifying mobile number, ID, and Photo) into one screen and used goal gradient effect to encourage users to complete the task.
Also, I found out from a survey done by Business Today that approximately 75% users prefer UPI payments with 46% of them preferring Google pay.
This data helped me make the booking flow quicker by directly adding UPI (Google Pay as default) as a CTA.
Post Booking Flow
For this specific use-case of a product that facilitates easy discoverability, the usual user behaviour dictates “done and dusted”.
Challenge: Forming a habit for the users to keep coming back to the app, which can be used as touchpoints for marketing, and to retain users.
From the User Journey Map, we see irregular payment by the users which affect the clubs. One way to deal with it would be to implement a wallet feature that stores balance and auto-pays. But, majority of Indian consumers are less likely to store a more-than-needed amount in the wallet (assumption). The reward to effort ratio is skewed to the low here.
So, a simple and action oriented notification system is sufficient in this scenario.
Another inference from understanding the user persona of Meghna, is that she would like her kid to be involved in more than extracurricular activities. This is a good opportunity to promoting different activities within her interest to her.
After User Testing
Objective:
1. To find and validate if the proposed design solution aligns with the user behaviour.
2. To test if users can complete the test tasks (searching for an acitivity, going through the booking flow)
Findings:
1. The map in the search flow wasn’t quite helpful in locating or having an idea of the distance.
2. Users were more prone to explore first and see the interest cards on home page, than straight away search.
Learnings and Takeaways
- Midway through my design, I had got distracted into solving a lot of problems because it was fun. But it hit me that my job was to solve that ONE big problem and I had to focus on that. I used the Double Diamond framework to keep exploring within the scope of the problem.
- Defining the problem well is the biggest challenge and the most rewarding. And also being aligned to metrics.
- Having clear objectives set helped me to not divert too much from the problem at hand.
- I learnt to work within a deadline, and taking feedback and working on them.
Future Opportunities
- A certain use-case could be — Meghna using the app to enroll herself to some club, as does her kid, and her kid not having email or phone number has to use hers.
Thus, designing to manage more than one profiles from one account. - Enrolled to more than one clubs or activities implicate going checkout flow more than once.
The auto-pay feature can be tested in future to solve this.
The End
Thank you for reading this case study. Your valuable feedback is appreciated. And if you liked this case study, I’d appreciate some claps.
If you want to connect with me, here’s my Twitter and LinkedIn.
