game. set. match.
project overview
As a UX Design student at General Assembly, I created Game. Set. Match. for my course case study after noticing a discrepancy between users desire to play tennis and users frustrations finding an available tennis court.
This case study was completed independently over an 8-week period.
discover
understanding the user
To better understand the user, I conducted user interviews with tennis players from across the country. The main goal of conducting the interviews was to listen to users experiences, frustrations, and needs.
While conducting the user interviews, I asked questions such as:
How often do you play tennis?
Where do you usually play?
How did you discover that tennis court?
Was the tennis court suitable for your needs?
How often do you experience issues reserving a court?
The questions were selected to gain an understanding why users were expressing initial dissatisfaction with searching for tennis courts and the court reservation process. It was also important to understand how often the user experienced the problem of reserving a court.
During the interviews, I listened closely as users mentioned the following details:
“I searched on Google, but I did not have much luck finding a court close by my apartment.”
“I found a place to play online. I wanted to reserve a court, but their website didn’t allow me to.”
“I drove to a tennis club nearby, but all of the courts were taken. It was a huge waste of my time.”
The user interviews revealed the following insights:
Frustration with finding a court nearby
Searching for a court online took too much time
Dissatisfaction with online reservation systems
Problem Statement
User needs to be able to find a tennis court so that they can play matches with other tennis players nearby.
How might we
How might we allow avid tennis players to find courts in their nearby neighborhood, reserve a court, and play tennis matches.
ideate & design
user persona
Behaviors
Sara is a competitor on the court. She plays an aggressive, baseline game. Sara wants to reserve courts ahead of game time.
User Flow
To illustrate how the user would get from start to finish, I created a user flow. In the user flow, I included entry points, steps, actions, and exit points. This allowed me to think through the critical activities from the user’s perspective. In drafting a user flow, I found that the user needed to be able to navigate the app in a streamlined process, one which considered their geographic location and the club or courts’ availability.
The critical activities that I thought through were:
search
geographic location
calendar availability
call to action to reserve the court
Feature Prioritization
Now that I had a solid understanding of who the user was, their core concerns, and some initial flows, I began to list out all of the features the user wanted and needed. I followed the MoSCoW method, which categorizes features by priority of Must, Should, Could, and Won’t have. By prioritizing the app’s features, I am able to focus on solving the user’s frustration of finding a tennis court nearby.
Must
Facility details
Search
Directions
Contact Info
Reservation
Should
Reviews
Calendar
Profile
Frustrations
She gets easily frustrated trying to reserve her court online. She is a busy professional and doesn’t have time to waste.
Needs
Sara would like to access a calendar when reserving tennis courts. Before trying a new club, she wants to see reviews and view contact info.
Could
Sharing on social media
Favorites
Chat
Won’t
Video chat / audio chat
Match scores
Rankings
Sketching
To translate the ideas in my head to something tangible, I took pen to paper and followed the Four-Step Sketch Method:
Notes - gather key info
Ideas - doodle rough sketches
Crazy Eights - sketch rapid variations
Solution Sketch - figure out details
The reasoning behind following the Four-Step Sketch Method was to mimic a design sprint to create a structured and effective initial solution.
Wireframes
With sketches drawn, I now wanted to turn my focus to how the interactions would be represented in a sequence of screens. Thus, I created wireframes to communicate to my users how they would begin to navigate the app interface.
The wireframes demonstrated visual solutions to my research findings and highlighted the critical activities from the user flows. I created a solution where users could search for a court or club using their geographic location, learn the calendar availability for courts or clubs selected, and featured a call to action to reserve a court.
test and iterate
prototype
After designing solid wireframes, I added color and images while continuing to build out the app. The key was to create a functional version of the interface by making the static screens of the wireframe into a dynamic, flowing prototype to simulate an interactive digital experience.
Usability Testing 1.0
With a prototype on hand, it was time to put it to the test. Conducting a usability test was crucial, as it would allow me to validate, or invalidate, improve, and iterate my designs with real human feedback.
I created a Usability Test Plan that included the following tasks:
Create a profile
Reserve a tennis court
To conduct my unmoderated usability tests, I sent each of the 3 participants a Figma link to my prototype. Then, I scheduled a Zoom call with each participant so that I would be able to observe their expressions and listen to them think out loud while trying to complete the tasks and navigate the app.
During the usability testing Zoom calls, I listened closely as the users described what went well and where they struggled.
“I found it very intuitive and easy to navigate, but I couldn’t create a profile.”
“I completed the task of reserving a court, but I didn’t understand how to make a profile.”
“I struggled to reserve a court because the numbers on the calendar were too small.”
With real human feedback at my disposal, I knew that I had to iterate my prototype to solve a few critical issues: increase the size of the dates on the calendar so they are more readable; establish a clear path for the user to create a new profile on the app.
High Fidelity Prototype
With usability testing complete and user feedback provided, I iterated my medium fidelity prototypes by adding a page for a new user to create a profile, fill in their information, and register. Additionally, I increased the size of the calendar dates to be larger and more readable, and gave the interface a more sporty aesthetic overall.
For the visual design, I made rounded edges on components, selected blue and white colors to match a tennis court, and selected Sans Serif and Serif fonts that would be legible and sporty.
Usability Testing 2.0
After creating a high fidelity prototype that addressed user frustrations, I decided to conduct further usability testing by conducting heat mapping tests. Heat mapping would allow me to receive a graphical representation of the areas of my product that received the most user attention. I performed the heat mapping tests using Maze.
On Maze, the high fidelity prototype was linked and emailed to users. The mission provided was, “You want to create a new account and reserve a tennis court on October 7th at 4pm at South Austin Tennis Center.”
The heat map usability testing was conducted as a check and balance system for me to see if users would take the route I was expecting. After the tests were complete, the results revealed 7 of 10 users took the direct path that I had expected when completing the task. The second round of usability testing revealed that I needed to further increase the size of the calendar dates so that users could select the date “October 7th” more easily.
deliverables &
final prototype
Once a second round of usability testing had been conducted, it was time to add the finishing touches to Game. Set. Match. With the results from the heat map tests, I further increased the size of the dates on the calendar and the available time slots. I wanted to ensure that the users pain points were resolved.
Ultimately, I was able to design an app that listened to the user’s frustrations of not being able to reserve a court, as well as answering user’s needs and goals to see reviews, contact info, a calendar, and directions.
To try the app yourself, use this link.
Lessons Learned
Reflecting on my first project as a UX Designer, I learned how to:
Conduct more thorough user research
Navigate personal bias and assumptions
Connect and empathize with a user