.png){kind=small}
Sports Application Design
How might we help sports fans find women's sports media content more easily, so they can enjoy more of the games and news content they love?
I completed a comprehensive user experience bootcamp via Brainstation's 3 month program and chose to focus on a new design concept for a sports app as part of my capstone project.
Over the course of 3 months, I managed all aspects of the design process, including research, content strategy, visual design, and usability testing. You can find and access the completed figma prototype below.
The Problem Space
Women's sports media is becoming more and more popular for both sports fans, aspiring female athletes and as a career for broadcasters. However, the sports industry continues to lack in female representation and coverage. This makes accessing media that focuses on female sports and representation incredibly difficult. (source)
To gain further context into the problem space, I conducted a literature review to investigate whether users wanted more sports media coverage with female representation, and identify what opportunities there were for solutions. This research gave me the following statistics. (source)
Based on this data, I saw there was great interest in women's sports specifically, but there were challenges in accessing this type of media for sports fans. Before exploring opportunities to mitigate these challenges through design solutions, I needed to evaluate my assumptions by directly asking sports fans about their experiences.
Generative Research
Interviews with sports fans and subsequent documentation about how fans access sports media surfaced insights about limitations in access. Mobile was cited as the most frequently used platform for keeping up with news and media in sports. However, sports news apps often did not include or had very limited access to female related sports media.
I saw there was an opportunity to mitigate these challenges through design solutions. Since tracking news and media related to female sports was brought up as a one of the most frequent limitations of sports news apps during interviews, I decided to focus on creating an app that would include team tracking specifically for women's sports teams.
To help keep the user in mind throughout the process, I also created a persona and experience map using the insights I gained from my interviews.
"Since tracking news and media related to female sports was brought up as a one of the most frequent limitations of sports news apps during interviews, I decided to focus on creating a mobile app feature that would include team tracking specifically for women's sports."
Evaluative Research
After drawing rough sketches of the initial design, I built mid-fidelity prototypes for internal evaluation and user feedback. I took this mid-fidelity prototype back to the same sports fans who I initially interviewed to assess and evaluate.
Based on user feedback, it became apparent that the text and images were too big. So I redesigned and simplified the wireframes so that screens would better adhere to user mental models, making it more intuitive to use. A third round of user testing confirmed this felt better for users.
You can see the mid-fidelity prototype of the sports app tracking feature below.
Click to magnify image
Brand Development
I defined a set of adjectives that the brand embodies. Since the brand had to do with sports, I wanted it to feel exciting and electric. But I also wanted elements that felt feminine, since the content pertained to female sports specifically.
I created a colour palette that both met the brand guidelines and met WCAG AA standards. I also went with a dark mode because many sports and game apps choose this colour scheme, and I wanted the app to adhere to user mental models of what a sports app should look like.
I organized all buttons, components, and design elements including state changes using the Atomic Design System framework. I annotated and used redlines on all components including specifications, contextual detail, properties, dimensions, padding and spacing measurements.
Primary Colour
Purple
Purple to signify regal wisdom, and investigation
Tertiary Colour
Blue
Blue to signify cool professionalism.
Secondary Colour
Pink
Pink to signify soft femininity. But also feel futuristic and electric.
Neutral Colour
Grey
Grey to exemplify solidity, strength and calculation.
The Solution
A final usability test with internal stakeholders revealed that the process of tracking teams and setting up the news feed was intuitive and easy to do. A few others were slightly confused by the news feed, and would have preferred more images or video to provide a more holistic media consumption experience, however due to time constraints, I was not able to build out the news feed more.
Overall, I received positive feedback from my peers, as well as my instructor and will continue to iterate on this design in future.
Future Considerations
Due to time constraints, I was not able to test with my target user base. In future, I would like to consider performing a more robust usability test to see if my users would find this app helpful for them.
The news feed is an important part of the app’s functionality. For future, I would also like to develop a design that would help build out the news feed more so that the end goal for the user is achieved.
I also found based on my secondary research, there is a significant portion of users who prefer to find news through a desktop website. I would want to translate this app into a responsive website in order to better meet the needs of sports fans.