Booking a basketball court with GoBask— a UX Case Study
Project Overview
Brief
My first project was helping my client to easily find the nearest basketball court and to be able to book or join it. This all started from a given brief by General Assembly (GA), which is a 2-week project split into one week of UX and one week of UI. The first week was learning the basics of user-experience processes, principles and methods. The second week was learning all about user-interface design.
Key deliverables
The required deliverables for this project were:
-
Problem statement/ storyboard
-
Experience map
-
User flow
-
Wireframes
-
Wireflows
-
Prototypes
-
Branding
-
Brand Voice Statement
-
Moodboard
-
Style guide
-
Brand Logo
Results
The newly created mobile app now allows users to:
-
book/join basketball court
-
select available time slots
-
set the player’s level to book
-
invite friends/others via contacts or manually
-
see player’s level when choosing to join existing courts
-
see booked/joined courts
PROJECT
Concept
WHAT
Mobile app
WHEN
Aug 2019
TIME
2-Week Project
Week 1 - User Experience (UX)
I started this project by asking him what interests him and the topic fitness came up then, from there I asked various questions such as:
-
What sports do you do?
-
How do you find your courts to play?
-
Once you have found the court, what was the experience like?
His response was:
-
“I often play basketball with my friends.”
-
“Can be frustrating to find similar level players.”
-
“Can be confusing to find court availability.”
-
“Takes a while to find courts.”
Problem Statement
Making a problem statement allowed me to use this as a reference for designing my app.
Juwon (my client) needs a way to find/join a basketball court because he finds it stressful to find available courts and similar level players.
Solution - He uses a mobile app to find his nearest court and be able to join or book it. In addition, he can check what level the players are.
Outcomes – He can now play basketball with his friends.
Storyboard
To visualise my clients experience of finding a court to play, I made quick sketches on sticky notes and made it into a storyboard. Doing this enabled me to see a bigger picture of my client’s journey and knowing where frustrations happen.
Experience Mapping
In order to fully grasp the whole picture of my client’s pain points, I decided to make an experience map which is shown above. After looking at the research data, it shows that my client was getting unhappy trying to find a court and steadily becomes more frustrated trying to find players, availability and court size. His happiness starts to soar up as he gets to know his price and being able to pay for it.
User Flow
Knowing what the user’s pain points were, I started thinking about how the user will navigate through my app. To get a quick understanding of what the user flow is for the mobile app, I jotted down what user’s see and user’s does.
Afterwards, I made a diagram using Miro showing how the users would proceed with the mobile app. What I learnt from doing this was knowing how many steps it took for user to get to their end goal. Then what I realised was that the steps were very minimal and simple, which is ideal for the next stage.
-
If Juwon(client) wanted to book a court, he taps the time slot then he can create a group with his friends, sets the level his team plays and then proceeds to pay the court.
-
If Juwon wanted to join an existing court, he can again tap the time slot then the app will show how many players are playing and what level they are playing at, if he is happy with this then proceeds to paying.
Paper Wireframes
In order to know if the process for my app was usable, I quickly generated some paper wireframes and tested the app on my client. The feedback that the client gave on my first iteration was:
-
“Change the hours to session, as booking basketball courts consists of a few hours.”
-
“Would like to see level of players because, I tend to have a good time playing with those on a similar level. If the players I play with are low-level, I don’t have a good time.”
-
“I wish there were photos of people playing on the court, as this would give me a good sense of how big the court is.”
In the second iteration, I have changed the design according to the feedback to improve the app further. Afterwards, I decided to do Usability Tests on 4 users. Doing this activity enabled me to find any problems that did not appear before. I have highlighted the following key insights that informed the next stage:
-
Maybe leave the Login/Sign-up a separate page
-
Include name and description of place
-
Creating a group is confusing
-
Show Book/Join, there was no way to tell if I am booking or joining
-
Show an option to be able to select multiple sessions
Wireflow
A wireflow was made to show designs in the context of common user tasks. During the making of the wireflow, I realised that the process for users to book/join a basketball court is short meaning that users can quickly get what they want, and the interactable buttons/elements are located where users can easily see.
Low-Fidelity Prototype
I then progressed into making Low-Fidelity Prototypes. A prototype is a clickable model, which I have used Marvel to achieve this. Making a prototype at this stage helped with understanding how users interact and knowing what they would expect out of the app.
Week 2 - User Interface (UI)
Branding
In this second-part of this project, the focus was on UI. I was taught about branding, typography, colour, style guides and hi-fidelity prototypes. To know what colours and fonts to use for my app, I first have to know what my brand values are, as this will be referred to back a lot for making visual design choices.
First, I have made my brand values and personality to allow people to understand what my app stands for:
Brand Position
I researched the Google Play store on similar competitors and plotted them on a graph to see common trends. I found that the common trends were an interesting discovery as many of my competitors leaned towards being both complex to use due to having a social-platform involved. My product would sit on the simple side and involving more of the community.
Brand Voice Statement
The brand voice statement allows people to understand who my product is for. I find this to be challenging to make because this has to reflect both my brand’s values and personality.
My brand voice statement:
Moodboard
To invoke the emotions of my brand, I created a moodboard to represent my brand values. I felt quite unsure if the moodboard did invoke emotions of my brand, so I showed this to my peers. The feedback that I received was that the moodboard did not represent those values as much. Knowing this I would change my moodboard completely to rectify the problem but, due to time constraints I had to stick with this board and proceed to the next step.
Style Guide
I have made several decisions of what my design elements will be for my brand. The main colours and font chosen were:
-
Green - representing health and growth of the community of players
-
Orange - representing energy of playing sports competitively
-
Avenir - friendly and approachable
Brand Logo
The design of the logo is derived from the basketball court layout. I have played around with the shapes of the court and made them into letters of GoBask. The name of the logo was intentionally made short so that users can easily remember the app; the word ‘Go’ was used because it represents movement which invites the user to do something.
High-Fidelity Prototype
Next Steps & Key Learnings
Next steps
-
Need to do Usability Tests on High-Fidelity Prototype.
-
Need to reconsider branding as a whole, as it does not reflect my brand values and personality.
-
Check if colours are accessible.
-
Reiterate design of mobile app to be easily used.
Key Learnings
-
Learning UX and UI for the first time has broadened my perspective of how to design for the users.
-
Design is an iterative process, nothing is going to be perfect
-
Problems can appear from solutions
-
Become empathetic towards the users. Putting myself in the users shoes will allow me to understand their pain points.