Roller Derby (WFTDA)
Creating a mobile app for the sport, roller derby or Women’s Flat Track Derby Association.
Overview
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. We are hoping with the app it would be a great way to build a strong community around the business and reinforce roller derby brand image.
Though there are other platforms for sports that fans can follow of well established Associations. Roller Derby is still growing as an inclusive sport for everyone from participating to spectating. We are looking to build an app that fans; old and new can keep up with news, check their favorite team and promoting the app for people to download and follow the sport.
There is an opportunity to design for a mobile app meant to help roller derby spectators gain a better understanding about the sport, follow the action, keep up with different teams, and discover upcoming games in the area.
How might we create an app that is accessible for both players and spectators?
Solutions
• Creating a mobile app with necessary features
• Finding derby participants current issues and ways to include a new spectators
What did I do…
UX/UI Design. Research. Branding.
Scope
Mobile App. Visual Design. Branding
How long did this take…
4 Weeks (20 hours per week)
Tools
Figma. Pen & Paper. Butter
Consider the human needs
(Empathize)
Research could potentially get tricky… (But gotta start somewhere)
I wanted to go with this project but was hesitant at first after discussing with my friends, I decided to trust my gut and shot myself in the foot. Actually I became really excited thinking about my first derby game and still keeping in touch with a college friend who participated in it. See my research goals, questions, and assumptions here. After I choosing this project I have to see what was on the market as far as where Roller Derby is in popularity. Word of mouth is responsible for attracting the majority of fans, either by having a friend or family member involved (34%) or hearing about it through a friend (23%) See my Market Research here. I had more questions, I was asking myself such as How are people watching sports through a pandemic? What does the market look like for other sports and how we can plug Roller Derby into it?
Here are a few trends I saw through my research
• Word of mouth is responsible for attracting the majority of fans, either by having a friend or family member involved (34%) or hearing about it through a friend (23%)
• Many sports fans argue that women’s sports are boring compared to men’s sports. Simultaneously, women’s sports, compared to men’s sports, are rarely broadcasted in the media.
• Ninety-five percent of fans today have some form of interaction with their favorite team or league in the off-season
• Those who watch live sports, more than three-quarters (77%) of Boomers (older than age 56) most commonly watch a TV broadcast, as compared to 57% of Gen X (ages 40 to 56) and just 35% of Millennials and Gen Z.
• 53% of Gen Zers identify as sports fans, compared to 63% of all adults and 69% of millennials.
Empathy Map (Insight and Needs)
To organize the data I have collected from my participants interviews to then create one personas.
I referred back to my notes and interviewees answers from the empathy research and then grouped the commonalities I saw from the interviews. View the Map
Competitive Analysis for Roller Derby (WFTDA)
After my market research helped me understand my direction better, it was time to find competitors in the App Store that user’s enjoyed using and what was slipping through the cracks as far as keeping them. There is a couple of apps that are doing something right but the following four was considered the best in the market and the best to look at as far as popularity. View extended Competitive Analysis
My biggest takeaway was that most apps have sponsors but it can be overwhelming to users who just want content they are looking for.
Create User Personas
After conducting my research findings it was time to come up with my personas, this is to help with the next process of having a reliable and realistic representations of my key audience for reference by addressing the major needs, goals, frustration and motivation. View full User Personas
Define the problem
(Define)
Following the methodologies of market research, to understand what is going on currently for sport media and to identify gaps in customer expectations and competitive analysis, to evaluate current competitors strength and weakness and how Flat Track Roller Derby can plan to fulfill their spectator and supporters needs. As well as, conducting user Interviews through Skype and or Google Hangouts with participants by asking questions about their experiences. Informing me with detailed information about their attitudes and desires.
After my research synthesis, it was time to helps understand users' feelings and actions by coming up with POV statements at the same time How Might We…
Once those questions are brought up it’s time to get the creative juices flowing with brainstorming, you can see my mind mapping here. But I had to bring out my organization and leadership skills with hosting a Group Brainstorming which was very successful at bringing up more ideas.
Business and User goals
During this process I needed to take a step back, since I was very user focused and start to consider the Business and going into the Technical aspect of developing the app. Below is my venn diagram of align user goals and understand, how they can work with business goals to keep it in mind moving forward. In a real-world setting, to always take technical considerations into account.
Product Roadmap
In order to develop key elements that should be included in my product’s added feature design and to know as a UX designer on the team, that I can help with suggestions and ideas from my user research with creating a product roadmap. View Product Roadmap.
Brainstorming & Group Brainstorming
Now I could actually staring thinking about ways I could design solutions to Lauren’s problems. I wrote each one of the HMW questions on a sheet of paper and sketched out as many solutions I could think of in 15 minutes: View my Brainstorming session
Leading to an excellent solution
(Ideate)
It was another time to take a step back and start creating the structure of the app.
Sitemap
To show the relationship, visualize the hierarchy and content layout of the website. I created the sitemap with pen and paper first then factored in my personas need based on the product roadmap
Task Flow
I kept reference flows I like in my competitors app to apply the flow to the app and keeping in mind my personas goals. tried to include most of the pages & actions that users would have possibly done to complete their tasks. View the complete Task Flow. The steps by step and possible reactions the user may have moving through a product to accomplish their goals. Outlining most possibilities, errors and outcomes. I imagined that if my persona, Emilia, were to come to the app for the first time, she would likely be searching for a particular function or game that she was considering to keep up with. My user flow reflects that process, and includes loops for finding the functions that have been considered because that’s all she needs to know for the moment and tapping on icons to get to things that are of interest to her. View User Flow
Low Fidelity Wireframe Sketches
To visualize and plan the layout of key pages and elements before digital phase. I followed my User Flow and sketched key pages while referencing my competitor sites. Also keeping my personas goal, needs, frustrations and motivations in mind.
Creating innovative solutions
(Prototype)
It’s a marathon not a sprint. I have built the foundation of the app in the process making sure its fresh and doesn’t have outdated elements with my mid-fidelity. After that process I created a guide when conducting the usability test to identify any user error so that updates can be made to the prototype to lead to a seamless product.
Mid-Fidelity Wireframes
To create a version of components, and features are clearly differentiated from each other on different 'viewports' - mobile, and device and a responsive design is one that gracefully displays on many viewports. I changed my site reference continued to reference my mentors suggested column and gutter for desktop, tablet, and mobile, then resizing and reorganizing the elements to the different viewpoints. I really thought I was killing it.
TASK 1
Emilia has attended games before but has had trouble hearing the announcer and with the new app she wants to keep up with live game announcements
TASK 2
Emilia enjoys purchasing t-shirts at games and during covid wants to still be able to purchase merch and see if a team support a current social justice cause
TASK 3
Emilia loves to keep up with rankings of teams and wants to see stat info about different teams
TASK 4
Since covid has been around Emilia still wants to stay updated with the virtual games being held and set an alert when it comes on
By moving forward, I’ve taken into consideration the results from my usability testing and revised the following as far as my insight goes.
• Change the way users get to Announcer Feed by their input and possibly from competitions
Affinity Map
Remember I thought I was killing it. No one did the flow I built out. (Back to the drawing board) After my testing I built out my affinity map to reflect my findings and uncover insights, prioritize, and rank the user testing feedback to make improvements for design recommendations. I went through my Usability Test Findings and grouped them based on common themes to discover patterns. View Map
Brand Logo and Style Tile
I had the freedom to make the Roller Derby as best as I saw fit. To have a general idea of the aesthetics of the brand. I referred back to my mood board on Pinterest. For the logo, I sketched out some ideas based on my pulls and determined the one would be best as for the brand, the typography, I picked out the font based on my mood board and googled the best pairing for it.
Tested, then refined, then tested again
(Test)
Testing my prototype helped me see the hiccups before really finalizing my product.
What I Learned from this Project
This project was a pleasant surprise to finding people to interview, my own break through of feeling uncomfortable, reaching out to strangers. Who were actually so happy and excited to help, talk about something they are so passionate about.
Testing constantly do it
Just because it makes sense to me doesn’t mean everyone has my though process. So I would like to get people to go through task seeing the app flows seamlessly.
Building the muscle
After this project, I want to strength my weak points of where I felt things fell through the cracks.