Flat Track Roller Derby is a fast-growing and exciting sport. It can also feel utterly baffling for first-time spectators and so the discoverability of games is not as it could be. To solve these problems, the Women’s Flat Track Derby Association needs me to design an app.
As of 2016, the WFTDA in the U.S. included a total of 381 full member leagues and 66 apprentice leagues. Active derby participants nationwide are estimated in the tens of thousands. Only a relatively small portion of derby spectators are aware of the rules and the subtle, tactical intricacies of the sport. While there is a “rules” app for referees and coaches, a “minimum skills” app for novice participants, and “penalty timer” apps for those administering an event, there are no apps for derby spectators.
Design a mobile application for spectators and fans of Women's Flat Track Roller Derby. The brand is not yet defined. The app will be backed up by the Women’s Flat Track Derby Association, but the app needs to have its own branding.
Because Women's Flat Track Roller Derby is a brand new sport for me, I wanted to take some time to learn about it. I visited the WFTDA website and various other secondary sources of information. Unfortunately, there isn't a ton of posted statistical data, however, I was able to uncover some stats from a census taken in 2015. According to this poll, derby fans are 61% Female, 39% Male, 48% are 34 years old or younger, 82% Identify as heterosexual, 32% of fans are single, 43% are married, and 83% have some college education. I was also fortunate to get in touch with a former derby athlete that provided some more information about the sport, it's history, and it's potential future.
After learning about the sport of Roller Derby, I wanted to learn more about its competitors. Since this new app will be the first of its kind, I chose to look at two mobile applications that cater to women's sports (WNBA, UEFA Women's Football League) and the ESPN app due to its global position as a source for sports related information. I examined each app, taking note of strengths and weaknesses.
Based on the quantitative data I discovered, I created several provisional personas in order to begin gaining empathy with potential users of the new mobile application. Because the secondary data was limited, I chose not to include ages here. Instead, I focused on general archetypes.
To better understand the pain points and goals of those who attend derby bouts, I attended a Roller Derby bout between two local teams. After the bout, I was able to conduct one-on-one interviews with five participants who fell within the provisional persona profiles I’d established. I asked each subject some questions about their experiences attending derby bouts. During the interviews, I took notes as I asked questions and conversed with each participant.
After completing the one-on-one interviews, I created an empathy map that allowed me to uncover common patterns based on my interview notes and observations. From these patterns, I found key insights that directly translated to the needs and goals of my user. These needs and goals are the cornerstone of my design process and allow me remain empathetic to my user throughout the design and iteration phases.
Once I had an understanding of the goals of my user as well as their needs for interacting with a mobile application for fans of Women's Flat Track Roller Derby, I created a persona for my target user. Providing me with a realistic representation of my key audience segment, this persona helped to keep the concerns of the user at the forefront of every design decision I would make moving forward.
With my primary persona established, I moved into translating Sarah's insights and needs into defined "Point-of-View" statements, then crafting a set of "How Might We" questions to guide my design.
I decided to use Mind Mapping to brainstorm ideas for features that I could potentially include in the app as solutions to the "How Might We" questions from the previous phase. I allowed two minutes for each initial HMW and one minute to brainstorm the connecting branches. I wrote down anything that came to mind, hoping to find a few creative solutions.
Now that I had a clear picture of my user's goals, I wanted to learn how they interacted with the goals of the business in order to discover any goals that may be shared by both entities. These shared goals helped to focus the next few stages of the design process of creating the MVP (minimum viable product).
With the project goals in focus, I created a product roadmap, with features presented in order of priority in terms of development, investment, and importance to business and user goals. Sarah's needs were used to focus the exercise. The roadmap includes proposed metrics for measurement so that the impact and effectiveness of the features can be analyzed.
Informed by the features and priorities outlined in my product roadmap, I created an App Map showing the content architecture proposed for the new application.
Equipped with my sitemap, I moved into design iteration. I created flows that showed the ways that my User would move through the app, paying close attention to the key task of learning the rules of the sport and following favorite teams and players. The flow charts aided me in prioritizing the key pages that I'd need to create in order to complete this task.
I created some low-fidelity wireframe sketches of key frames corresponding to the user flows I'd mapped out. I referenced the UI requirements and site map to make sure I included priority elements for each page, and conducted a brief search for design patterns to reference as well.
Working from my lo-fi wireframes, I began working in Sketch to create a set of mid-fidelity responsive screens. This set of wireframes shows the site pages that a user would encounter as they progress from the home screen. These frames were developed with the goal of quickly translating them into a prototype, so that I could begin testing my design early in the process.
In order to see how successful I was in making my design choices, I created a Mid-Fidelity Prototype using InVision. I wanted to see, in real-time, how my user would be able to flow through the main task and identify any pain-points or friction before moving into branding and higher fidelity deliverables.
Before conducting usability testing, I created a rubric outlining objectives, methodologies, information about participants, along with the task and scenario to be tested.
Usability testing feedback was gathered and organized into various categories (successes, problems, and observations). An affinity map output insights and recommendations, which served as a guideline to create the next iteration of the app. Recommendations were prioritized high to low, while considering time and budget constraints.
My second challenge was to create a Brand ID for the new app. First, I began to consider the keywords that I hoped to convey : Confident, Strong, Feminine, Playful, Powerful. From here, I created a Mood Board to help inspire my decisions and keep me focused.
View Mood Board here.
Using my Mood Board as inspiration, I started to sketch ideas for a new logo which is included in the Brand Style Tile below.
Once I had my new logo ready to work with, I created a Style Tile depicting the visual design direction of the brand.
With my recommended revisions list from the affinity map in hand, I moved forward with developing a revised set of high-fidelity wireframes. These show how the visual design will be applied to the site.
Finally, I created a UI Kit to serve as a reference and resource guide for anyone working on the site. Maintaining this guide will help to ensure the consistency of styles and elements used across the site.
Now that I had a clear visual direction and high-fidelity wireframes that have been updated to include the new branding I designed, I uploaded my screens into Marvel and generated high-fidelity prototype.
Creating the brand for the new app from scratch presented a few challenges. In the world of women's sports there doesn't seem to be any real established design patterns. Some were too niche, while others were too broad. I believe that some of the broader concepts displayed on these apps influenced my design decisions in a way that presented extra challenges for designing an app for Women's Flat Track Roller Derby and it's fans.
Because of the limited amount of available visual content, I was really tasked with finding a way to design a modern (yet familiar) take on a sports app that stayed true to the spirit of the game and the women who play it. During my exploration of available imagery, I noticed that there isn't a default for league, team, and player branding which added a level of difficulty when attempting to streamline the app for all leagues, teams, and players.
