TopEmpathizeDefineIdeatePrototypeTestConclusion

An End-to-End App to Follow Your Favorite Athletes

Case Study
How can we provide quick and easily accessible information for fans of individual athletes?
Background
  • The sports industry is huge with many people fascinated and entertained by it. Rooting for sports teams and athletes provides a sense of belonging for fans. It offers an escape from the daily grind of work and life. People enjoy watching masters at their craft perform skills that the majority of us probably could not do.
  • There are people who only follow individual athletes of sports teams and are interested in their stats and information. This is relevant for casual sports fans and fantasy sports users.
Role
UX Research, UX Design, Prototyping, Testing
Duration
4 Weeks
Back to Top

Empathize

Research Methodologies
Secondary Research
For my initial research, I looked at the market share for casual sports fans along with the number of fantasy sports fans in North America. As I was doing my research, I realized that the gen Z demographic tends to follow individual athletes more especially with social media having a large influence on the sports industry. I then compare 3 of the top sports apps with their strengths and weaknesses.
The Sports Fan
The Younger Demographic
Gen Z sports fandom is slightly different from any generation before. They are almost 10% more interested in the individual athlete vs the teams than previous generations.  They no longer solely follow teams - they identify with the athletes themselves and are more likely to root for the person, no matter the team.

“You see this shift in sports where kids are following athletes first, then they’re following clubs and then they’re following leagues because they want that one-to-one connection with the athletes, or athletes that they admire.”  - Heidi Browning, chief marketing officer for the NHL.
Social Media's Influence
Two of the biggest name in sports demonstrate the following of the athletes rather than the teams:
European soccer player Cristiano Ronaldo has 3 times as many social media followers on Instagram and Twitter than his team, Juventus, and league, Serie A, combined.
American basketball superstar Lebron James has 3 times as many followers on Facebook, Twitter, and Instagram than his current team, the Los Angeles Lakers, and 11.6 million more than the NBA.
Competitive Analysis
Interviews
After completing the secondary research, I decided on performing 1-on-1 interviews to get direct feedback from sports fans - especially the casual sports fans. This would give me direct insight into what a user of this app would be looking for and what is important for them. I was able to gather 6 interview participants for the research study.
Key Takeways from the Interviews
All participants are often engaged in sports content and have at least 1 app they use to access that content. Here are some of the key takeaways from the group:

Define

Our Ideal Sports Fan Personified
After completing the research and interviews, I created a persona to empathize with the target user. This would give keep me focused on the potential user I am designing for.
Sitemap
With the research complete, I created a sitemap to provide information architecture to the screens and features I would design. This would aid my decision making and allow me to keep in mind what I would be designing.
Task Flows
With the research synthesized and site map created, I thought of the main tasks that I wanted to highlight on the app. The first tasks would be finding a player in two different ways. The second task would be looking at a player's game log information, and then the last task would be to see a player's social media links. These were decided because they were highlighted as a couple of the main information a user would want to see about a player.
User Flow
Here is the user flow which shows the main paths a user can take from the designed screens of the app.

Ideate

Wireframe Sketches
After deciding on the flows, I created sketches of the wire frames to highlight the main screens and tasks. While sketching these initial wireframes, I designed a newsfeed of the favorited players based on other popular newsfeed designs which makes it clean and simple to understand. I also sketched out a main player list screen which is easily viewable and searchable for players. I also iterated on the features and elements the actual player screens would have based on what information is most important to users. I then sketched a favorites screen, an alerts screen, and a profile screen.
Lo-fidelity Wireframes
After sketching the wireframe ideas, I digitized the first iteration of wireframes in Figma. The main idea with the first screens of the player list screens is to show the most popular players. This also includes a weekly ranking system (rank number and arrow pointing up or down from the previous week) which is based on the amount of people that player is favorited and the social interaction with the app's users for that player.
Hi-fidelity Wireframes
Using the lo-fi frames, I added the color palette and player images throughout the screens to give Player Scope a proper look and feel. Being that it is a sports-related app, a lot of the text and images are smaller because of the amount of information that is usually needed to be displayed. These screens are the 3rd iteration of the high-fidelity designs as I got feedback from others throughout my previous iterations.
UI Kit
While putting together the high-fidelity wireframes, I put together a UI kit for the app project. This would act as a guide for any future iterations of the app design.

Prototype

View Prototype

Test

Usability Test
Using Maze.co, I wanted to gather insight on the Player Scope prototype by performing a usability test.
Format:
Maze with all testers performing remotely on their time
Tasks:
Searching for a player (Josh Allen) and then going to the social media tab. Then looking for another player (Steph Curry) through the main player list screen and accessing his gamelog information.
Metrics:
Maze Usability Score, average success rate, heatmap, mouse click accuracy
14
Users Tested
75
Usability Score
64%
Task Success
Rate
89%
Mouse Click
Accuracy
The usability score with Maze is an exact number from 0 to 100 and reflects how easy it is for a user to perform a given task with the prototype. The higher the usability score indicates the design will be easy to use and intuitive.  The initial usability test received an average usability score of 75 and a low 64% task success rate. I needed to look further into why the task success rate was rated very low.
Finding Improvements and Solutions
I created an affinity map based on the user test data.  Looking further into the test results, there were a few challenges for the testers. The main problem was on the initial task of searching for a player and then adding him to the favorites. I think this was a combination of my wording in the request and then also requesting a few too many requests at the same time. The feedback and affinity map would assist me in the next iteration of the designs.
Iterations
I completed another iteration of the app screens with data from the usability test and affinity map, as well as feedback from my mentor The key changes are:
Potential Next Steps
Conclusion & Reflection
Designing this end-to-end app was fun and amazing! There were definitely challenges along the way especially while iterating the high-fidelity screens as I completed about 5 iterations in total. As a sports fan, I thoroughly enjoyed getting into this project and creating a solution for those who want something different from the usual sports platforms. The main idea for this project is to eliminate the problem of using Google to find information on a player, as well as going through all the clutter to get that info on other platforms. This could be a database for professional players' information that is easily accessible and engaging.

Other Projects

Let's work together:
 2024 Steven Trang. All Rights Reserved