Olympia

End-to-End Mobile App

Project Overview

With the current climate of Covid-19, sports fans everywhere have been maintaining their sanity by keeping up with with their favorite teams and sports. Fandom affords followers a much-needed sense of belonging and community and provides bridges for people to connect despite varying degrees of difference.
About half of women world-wide consider themselves sports fans and studies have shown that women are increasingly becoming engaged in sports viewership, especially with recent cable-cutting trends.
Project Scope
Concept Project
Creating an end-to-end mobile app
Tools
Figma
Airtable
Role
Product Designer

Challenge

Even though women make up 47% of highly engaged, passionate sports fans, women are not downloading sports media apps at the same rate as men. Given that women spend 87% more for their apps and control 80% of dollars spent, the challenge here is to create a sports app that appeals to women.

Objectives

Design a sports media app that appeals to women.
Design the logo and branding around empowerment, energy and playfulness.

Constraints

Limited Research Budget and not a lot of research has been done in this area.
View Prototype

01 Empathize

I wanted to understand the audience for the app, so I conducted empathy research through market research and user interviews.
Initial Assumptions
  • Women want to talk to other women about sports
  • Women use sports as a vehicle for socialization
  • Women are interested in both men's and women’s sports
  • Women regularly use social media
  • Few women use sports apps on their phones

Market Research

I wanted to find out...
u
How do women engage in sports fandom?
®
How do women engage in sports media?
^
Which apps do women download?
"
What sports do women engage with the most?
Key Findings
  • Majority of internet users who are sports fans are Gen Z (31%) and Millenials (28%)
  • 57% of women use their phone to keep up with sports over traditional tv
  • Women use the following apps more than men
    • Social media apps by 600%
    • News apps by 90%
  • 77% of American women are mostly likely to watch American Football regularly

Competitor Analysis

I wanted to know what competitors are doing well and where there were opportunities for improvement so, I created a competitor analysis. I looked at the top downloaded sports media apps and, as an indirect competitor, an online sports newsletter written for a female audience.

Strengths
  • Suggests teams to follow based on location
  • Curate your feed by sports or teams
  • Live play-by-play
  • Game Chat in play-by-play
Opportunities
  • Overwhelming amount of info. No idea where to start
  • No explanations of rules available
Strengths
  • Curate your feed by sports or teams
  • Easy access to favorites
  • Easy to share
  • Chatrooms for individual games
  • Live play-by-play
Opportunities
  • No explanations of rules available
Strengths
  • Suggests teams to follow based on location
  • Easy access to favorites
  • Curate your feed by sports or teams
  • Visual portrayal of play-by-plays
Weaknesses
  • Paywall for some content
  • Long load times
  • Not all icons are easily understood
Strengths
  • Content specifically targeted toward women
  • Easy to find info on different sports
  • Explanation of rules, glossary and guide to the game available
Weaknesses
  • No app
  • Limited information on sports
  • Not updated daily
Key Patterns
Strengths
  • Options to personalize based on location or favorites
  • Live play-by-play, gamecast or other video content
  • Chatrooms for individual games
  • Stats, scores and lots of details available
Opportunities
  • Overwhelming amount of info for a new user
  • No explanations of rules or stat abbreviations

User Interviews

Based on my research, I reached out to female sports fans between the ages of 16 and 40.
groups
I interviewed 5 casual sports fans ages 28 to 35 to discover...
subscriptions
How do women engage with sports media?
sports_soccer
What sports information is important?
block
What are the barriers they face?
View User Interview Research
Key Insights
Insights
  • Women want to understand the game while watching
  • Women have an emotional connection to players
  • Women use sports to connect with others
Needs
  • User needs easy access to the rules
  • User needs to see player-related content
  • User needs to be able to interact with the sports community

User Persona

Meet Laura...
She portrays a composite of potential Olympia users so, moving forward, I will reference her needs and preferences to inform my design decisions.

02 Define

POV Statements + HMW Questions

I used the insights and needs previously collected to identify  "How Might We..." questions to define the problems I should be solving for our user Laura.
INSIGHT
Women want to understand what is happening in the game while watching
Women have an emotional connection to players
Women use sports as a way to connect with others
NEED
User needs easy access to the rules
User needs to see player-related content
User needs to interact with the community in the app
POV Statement
Laura needs easy access to the rules because she wants to understand what is happening in the game
Laura needs to see player-related content because women have an emotional connection to players
Laura needs to interact with the community within the app because women use sports as a way to connect with others
HMW Question
How might we help Laura access the rules?
How might we help Laura see player-related content?
How might we help Laura interact with the community?

03 Ideate

Let's solve that problem!
Time to brainstorm ideas to answer the following questions.
  • How might we give Laura easy access to the rules?
  • How might we help Joy see player-related content?
  • How might we help Laura connect with the community?
To begin brainstorming, I used mind maps for each HMW question. I noticed that there was some overlap with how people find and share music and it made me consider how social media apps often start with a comments section.

Feature Prioritization

Listing out the features that came out of earlier ideation sessions, I pared the list down to those that met common goals and had supporting research. These were prioritized based on impact, effort and strategic value.

Application Map

With features prioritized, I worked on the app map, to show the structure, labels and organization of the application. I referenced top competitor apps to see existing IA patterns.

Due to time constraints, I focused on the home, watch and my sports screens.

Task Flows

I created task flows to focus on a high-level view of the actions the user would need to take to accomplish these tasks.
  • Laura wants to watch a game cast
  • Laura wants to know what a call meant during the game cast
  • Laura wants to add a player to her favorites
  • Laura wants to unfollow a team she’s not longer interested in
  • Laura wants to participate in today’s poll
HMW Questions   +   Site Map   +    Feature Roadmap    =    Task Flows
Click to see additional task flows

User Flows

I used user flows to flesh out the process from the Laura’s point of view to identify an additional UI elements that might be needed based on the decisions she might make, which informed my UI Requirements.
Click to see additional flows

Sketches

I started with some sketches to see get some ideas flowing.
Click to see additional sketches

Mid-Fidelity Wireframes

With solutions sketched out, the mid-fidelity wireframes helped me focus on the placement/size of the different UI elements.
HMW... See Player Content?
HMW... Access the Rules?
HMW... Connect with the Community?

04 Prototype and Test

Prototype

I used Figma to to generate an interactive prototype to test the home screen, watch screen, gamecast screen, ref call modal, my sports screen, team screen, player bio and article
View Prototype 1
Click images to see full set of wireframes

Usability Testing

With the prototype complete, it's time to conduct some testing. Poor usability can hurt customer trust in the brand and it’s difficult to regain that trust
Think Aloud Remote User Testing
I asked the participants to dictate aloud what they are doing and explain their choices as they completed their tasks. I observed their behavior and reactions as they did so. This method allows me to better understand the mindset of the user as well as observe any behavior such as non-verbal cues or behavior that the user may not be fully aware of.
I asked ....
P
6 participants
Ages 25 to 33
V
Who were Casual Sports Fans
Casual fans have at least one favorite player or team
^
To use their phone
To replicate a realistic experience
To complete the following tasks
  • Find the San Francisco 49er game play-by-play.
  • Find out what the terms “offside” and “touchback” mean.
  • Add the Cubs' player Anthony Rizzo to your favorites.
  • Remove the Los Angeles Lakers from your favorites.
  • Answer today's daily poll.
All users were able to complete the tasks successfully with a 98% error-free rate. I recorded findings for reference at a later point in time.
View Usability Test Research

Affinity Map

Taking the observations from testing, I wrote them down on post-it notes and color coded them by user. I then grouped the notes with similar observations and categorized them as I saw patterns emerge.

Users loved
The tweets. They want more posts from the players
The play-by-play
Following and unfollowing players

Opportunities

Iterations

Based on the usability testing findings, I revised some of the wireframes to...
...create a simpler way to find and understand terms and explanations...
Before
After
  • Switch Play-by-Play to Default Tab
    Users cared more about what was happening in game play vs the latest articles and posts
  • Finding Definitions and Explanations
    Users wanted a simpler way to understand terms, so revised to linking to explanation by the actual term instead.
  • Color Coding
    Users didn't understand the icons and wanted a more digestible way to understand the game and important plays.

    Further iterations resulted in a card format.
  • Removed the Game Chat
    Without the initial community, this feature is a low impact and high effort.
...help usersfind information on unfamiliar players in the game...
Before
After
After
  • Changed the "Live" tab to "News"
    Users were confused by the term "Live". This tab has the latest news and posts on the specific game.
  • Replacing "Ranking" tab with "Lineup"
    Users expressed the least amount of interest in the Ranking tab.
    "Lineup" shows the players currently playing, positions and game stats to help users better understand unfamiliar players.
  • Adding Follow/Unfollow in the Lineup
    In the event that users find a new favorite player, they can more easily add them to their favorites in the lineup
...customize the level of "help" in the app...
Before
After
  • Customize Explanations as You Learn
    User can choose whether the app continues to highlight the term to encourage clicking for the definition.
...highlight social media and more player content in the app...
Before
After
After
  • Stat Abbreviations Definitions
    Tapping on the stat will take you to glossary explanation
  • Highlight Player Social Media Posts
    Prioritize and highlight latest player posts from social media like Instagram and Twitter in it's own carousel.
  • Highlight Player Pictures
    Increased the screen space for player photo carousel and moved the remainder into a drawer

Branding

Using inspiration from across the internet, I created a mood board to help set a bold, high energy direction to appeal to a female audience.

Logo Design

I spent some time considering different ideas that would represent the idea of sports that would encompass the breadth of sports that women watch. This included a classic wordmark idea, a referee whistle and, then I recalled that in some of my user interviews they mentioned becoming sports fans by watching the Olympics, which inspired the idea of the torch flame.
Sketches
expand_more
Digitizing
expand_more
Scalability
expand_more
Color Testing
expand_more
Final Logo Design

Style Tile

Using the mood board and the logo, I created the style tile for the app to determine the color palette, icon set, buttons and patterns

Hi- Fidelity Wireframes

Once the style tile was finalized, I put those items to use in the hi-fidelity wireframes to show the final layout with branding and imagery.

UI Kit

Final Prototype

Available Tasks
  • Find the San Francisco 49er game play-by-play.
  • Find out what the terms “offside” and “touchback” mean.
  • Add the Cubs' player Anthony Rizzo to your favorites.
  • Remove the Los Angeles Lakers from your favorites.
  • Answer today's daily poll.

Reflection and Next Steps

Reflection

There were quite a few challenges on this project. The first of which was that much of the gender-based research was held behind paywalls, so I had to rely heavily on user interviews and their anecdotal experiences to validate assumptions.
‍
As an Android user, I was challenged to create a natural iOS experience.
‍
Having learned the value of context from a previous project, I tried testing on mobile devices using Zoom. There were still some issues to work out that may have worked better with Figma mirror, but this experience did allow for more natural observations from the user.

Something new I learned was the value of content strategy and planning. I wish I had done more of this when I was considering the overall problem and strategy, as I think it would drive the layout of the initial wireframes. I'll definitely keep this in mind as I approach future projects.

Next Steps

Based on testing, there's still some room to explore
In testing, I'd received a lot of feedback as to wanting a visual representation as to how fouls are committed. It's difficult to get video highlights of specific fouls since it's dependent on broadcasts and, users tested were okay with a generic visual.

Many designs for these representations are patented, so this will take some investigation and cooperation with developers to determine what is feasible, since some of the code to achieve those patterns has been patented as well. This representation does not affect the usability of the project, but will add an element of delight, so it should not affect the initial viability of the project.
Moving forward
Once testing the revisions is complete, I'll hand over all appropriate documentation to the developers and additional team members to implement.
‍
From there, I'll be available as needed to answer questions and work on updates or new feedback.
Additionally, looking at how communities are created warrants some exploration as increased engagement is the ultimate goal to maintain long-term viability.
© 2021 Lucy Kent
home
CONTACT
About
CONTACT

Get in touch!

Ready, Aim, Sent!
Thank you for your message. I'll respond to your message shortly via e-mail.
Oops! Your plane veered off-course. Feel free to e-mail me at lucy@lucykent.io.