Product design | case study

Artemys

Your all-access pass to womens professional sports action

Project overview

Artemys is the ultimate destination for passionate fans of women's professional sports by providing real-time updates, scores, and highlights from their favorite leagues and teams, allowing fans to personalize their experience and connect with other passionate fans.

Project

Independent - Academic

Role

UX Researcher/Designer & UI Designer

Duration

12 Weeks (Sept. - Nov. 2023)

Tools used

Figma, Adobe Photoshop, Adobe Illustrator, Stark

Problem

Professional women’s U.S. sports receive significantly less year-round media coverage compared to men's sports, putting female athletes at a disadvantage and leaving their fans feeling disconnected due to the lack of coverage and access to information.

Solution

A mobile application that encourages fans to stay engaged in women’s sports by providing a fully customizable experience and establishing a connection with their favorite United States teams, leagues, and players.

View prototype
view prototype
secondary research

What Are The Challenges Fans Are Facing?

Diving deeper into U.S. women’s sports coverage and what makes up the ideal fan experience, I conducted research and uncovered these statistics:

is dedicated to women athletes, mostly during major playoffs and championships.
(Source: Wasserman)
believe that a robust year-round experience would increase their engagement with a team in the upcoming season.
(Source: Deloitte)
say they would watch more women’s sports on TV or on online platforms if the content were available.
(Source: shu.edu)
are women's sports fans according to a study of 556 U.S. adults who consume women’s sports monthly.
(Source: Morning consult pro)
interviews

Who's the demographic?

To prepare for interviews, I determined the key criteria when recruiting participants based on the research conducted. With the focus on women’s professional sports in the United States, the criteria became:

Aged 22 - 40

Falls under the demographic of Millennial and adult Gen Z

Sports fan

Watches at least one sporting event a month
(Defined by Morning Consult Pro)

Lives in the U.S.

This study and research is mainly focused on U.S. sports coverage

What fans have to say

With the criteria in mind, I recruited and interviewed 3 different people due to availability and time constraints, following this interview guide.

Each participant provided new insights and considerations regarding the problem space.

Interview Guide
"It was kind of hard to find other channels to watch live broadcasts, and also big events. Like the World Cup, the Olympics, the marathons it’s very hard to try to find coverage for that."
- 24 years old sports fan
“I really don't feel like there is much representation. If you go to ESPN and click on highlights, the clips aren’t necessarily highlight worthy. I think they should just show the coverage.”
- 27 years old sports fan
“I didn't even know that women's basketball was on. You know if you just Google basketball, women's basketball doesn't even pop up.”
- 37 years old sports fan
affinity map

Finding the hitch

From the interviews, the participants’ pain point, motivations and behaviors when accessing and watching sports broadcasts were identified within an affinity map, broken down into three common themes:

Ultimately the chosen theme became awareness as many of the pain points, behaviors, and motivations tied back to that idea. This theme and insight seemed like the best approach for the presented objectives and for a possible digital solution.

Navigating the unexpected

As a result of the interview insights, a bit of a pivot was needed considering all of the participants were not very concerned with year-round coverage regarding women’s sports and more so with being aware of events and broadcasts. Resulting in the new question,

persona & experience map

Identifying the intended user

From the interviews and new how might we question, I developed a persona of a potential user.

Meet jessica moore

Persona for the intended user

Further stepping into her shoes, I began to understand her experience as it stands now and where I can implement improvements with an experience map.

Experience map for the intended user
user stories & epics

What fans Want most

With the persona in mind, I developed user stories relating to what someone like Jessica would want out of a product to accomplish her goal.

Crafting 30 user stories, I broke them down into key epics tied into functions the product could perform. Considering the user’s main pain points and the overall theme of awareness, I chose an epic and a key user story:

Chosen epic
Personalization
Different epics pulled from the user stories
Main user story
As a sports fan...
I want to create an account to access women’s sports news and stats so that I can keep track of all the teams I’m interested in in one place.
I want to pick which women's teams I receive information about so that I can receive the information I want about the leagues I'm interested in.
I want to discover what women's leagues I can gain more information about so that I am aware of what leagues and teams exist.
Examples of user stories
task flow

the road to customization

As personalization appeared to be the intended users’ most impactful feature, I designed a task flow for the onboarding process that allowed the user to modify their experience using Artemys to fit their interests.

Task flow for the onboarding process
wireframing

initial mobile wireframes

To fully develop the task flow, I first began ideation sketches based off of UI inspiration from apps like ESPN, CBS Sports, and The Score, then moved into developing the first round of mid-fidelity wireframes.

First round of wireframes for every screen in the onboarding process
user testing

Putting it to the test

With the mid-fidelity wireframes, I conducted 2 rounds of user testing with 5 people in each round. Due to time constraints and availability, not all of the testers fit the demographic of identifying as a sports fan.

The testers were given 5 tasks to complete with the overall goal of creating an account and personalizing their dashboard. The results from the each round were used to influence the following round of wireframes.

key updates

“Should I be dragging and dropping my choices?”
“I haven’t heard of a lot of the leagues before so I’m not familiar with the acronyms and I may not know their logos right away.”

Some testers expressed confusion with the functionality of the selection screens with the layout of the favorites bar. Others also were unsure of the league acronyms and felt they would not be familiar with the logos. So, I updated the favorites bar to have solid strokes as opposed to dotted lines and including sports icons for the leagues.

There were also some cosmetic edits made to prepare for alternate color injections in the future.

League selection | Before
After
“It’s not very clear to see when I’ve added a team to my favorites after adding leagues.”

Switching from league selection to team selection, some testers felt they would like to see a clear difference when favorites were added from the teams vs the leagues. I ultimately created a second, smaller row of sports icons representing the selected leagues above a favorite teams bar.

Team selection | Before
After
branding

make it artemys

Following the user testing and iterations, I was able to move forward with developing Artemys’ brand identity. Here is a short recap of the main elements.

Color injection

Branding the uI

Brand colors defined, I tried different iterations of color in the wireframes and looked at competitor products for inspiration, such as ESPN, Bleacher Report, and The Score. The main challenge lied in considering the multiple colors of the team logos and avoiding overwhelming the user.

High-fidelity screens (left to right: welcome screen, top of dashboard screen, bottom of dashboard screen)
HIGH-FIDELITY PROTOTYPE

Bringing Artemys Together

With the brand determined and the color injection complete, I created Artemys’ final UI design and fleshed out the prototype.

Full prototype video
Marketing website

let's spread the word

With the brand determined and the color injection complete, I developed a marketing site for the app in order to reach a wider audience and advertise the product. Creating both desktop and mobile, I kept responsiveness in mind and how the content would shift depending on the user's view.

Home screen of mobile and desktop versions of the marketing site

Defining artemys’ journey

Next Steps

A prototype does not mean Artemys stops here. To continue growing and expanding on the project, I considered some next steps to keep Artemys' journey going.

Takeaways

Nothing is as you’d expect, which is a good thing. It causes us to reevaluate our own bias and enforce the idea to step out of our own shoes. The user is always at the center of every decision in this process and our assumptions will be tested and proven wrong.

Always be ready to pivot. You won’t get the answers you’re hoping for all the time and to best accommodate your intended market, you will have to pivot and reevaluate the problem space also refining the how might we question.

Testing is incredibly helpful and is very important to do early in the process as well as at every step where possible. It helps to catch any confusing elements of the user flow and the design itself, saving time and avoiding having to complete full redesigns.

*with Spotify & Abbott Elementary providing moral support