WFTDA
UX/UI Design, Research, Branding, Wireframing, Prototyping
Background
WFTDA is a membership organization for women’s flat track roller derby. I chose this project because it stood out to me the most. I used to play flat track roller derby and it has become a sport that I really love.
WFTDA needs an app designed so that they can reach a larger audience and gain more awareness for the sport.
They want a spectators app so users can:
Learn more about the rules of roller derby
Have the ability to see
RSVP
Share event information
Learn information about different teams and the ability to follow those teams on socials
Branding.
Goals
The goals for this project were to
Understand WFTDA spectators objectives.
Would an app help them learn more about the sport?
Would they like to be able to follow the teams and save events?
Understand WFTDA business goals.
Would they benefit from a spectators app?
Do they want to reach a larger audience?
I also wanted to make a responsive app that could help them gain more followers and have a larger crowd at events, showcase information and rules on the sport, showcase local events they can RSVP to and share to social media, showcase information on the teams and allow users to follow those teams.
The Problem
WFTDA wants to raise more awareness for the sport of roller derby and needs a spectators app to help users understand and follow along with the game. Users don’t have a space to learn the rules of the game, learn about and follow teams, find and RSVP to events, as well as read recaps to past games.
I wanted to make sure they could find all of the information in one space, as well as easy to find so that they weren’t digging through posts online to find what they are looking for as well as raise more awareness for the sport.
My Impact
For this project, I was able to incorporate research data from competitive and secondary research as well as sending out a survey to interview participants to understand their needs. I was able to add features to this existing product to allow users and well as employees have an easier booking experience.
Design Process
Interview Questions
I sent out a survey to four users aged between 21-55. I wanted to understand their experience with roller derby and what they would like to learn about or would need in an app.
I asked questions about:
Their experience with attending roller derby
What they would like to learn about the sport
If there was any features that might make their experience better.
Competitive Research
I did competitive research to get ideas of what other sites/apps were offering as well as what they were missing. Majority of these sites were similar sporting apps, but not a lot of these apps offered description of rules, which was the biggest need of the app.
Affinity Mapping
Affinity mapping helped me to understand the issues that my users experienced when they watch roller derby.
I was able to see that most users had similar problems when it came to game play, following teams, and viewing events.
It helped me to create my task flows easily and know where my focus needed to be for my key screens.
Sitemap
When creating my Sitemap, I used my interview findings to plan out the pages the app would need to give the users the information they want.
I showcased a profile page where users could:
Manage their account and what teams/events they follow
An events page that has Future and past games, live streaming, and stats.
I also have a collaboration page for users who want to learn how to get involved in the sport or donate to the association. Collaboration ended up being a nice to have feature, so when designing, I designed a space for it, but not an actual screen.
The other two pages would be for users to find teams they want to learn more about or follow as well as an about page to learn about the rules of the game and how to contact the association.
Feature Roadmap
When choosing which features were needed or nice to have, I followed what my users wanted.
Majority of users wanted and needed:
A way to view gameplay and understand rules easily while watching the event
Learn about and follow different teams on the app and socials
See events easily and RSVP to them.
The users liked the idea of live streaming for events and a way to find out how to join the sport, but those weren’t the main priority.
User/Task Flows
After conducting user interviews, I reviewed my research and decided what key screens I’d focus my user flows and task flows on.
Flow #1: View and RSVP to an event.
Flow #2: Find ways to collaborate with WFTDA and find what positions a user can do within the sport and join a team.
Flow #3: Find teams and follow them on the app/social media.
Originally when creating the flows, I did a flow for collaboration instead of viewing the rules of the game because to view the rules was just a simple one to two steps. I didn’t end up doing a collaboration screen, but still showcased it in the app so a user could access it easily.
User Personas
I created one user persona based off of the users I interviewed. I chose a variety of participants to make this product as inclusive as possible.
I showcased a user that has somewhat of an idea of the sport, but wants to learn more. This user, like majority of my participants, wants to be able to:
Read the rules while watching the game to better follow along
Viewing and RSVPing to events
Following teams on the app and socials to follow along with them as well as learn more about the teams and players
Find ways to collaborate with the sport to get involved if they chose to.
When creating wireframes, I started to take some ideas from competing apps and sites such as Event Brite, ESPN, TheScore, and Instagram.
I noticed things I liked and disliked about each as far as event pages and finding rules of the game and incorporated some designs that I did like into my own.
Wireframes
UI Kit
Creating my style tile, I wanted to focus on my key words
Bold
Community
Feminine
I wanted to keep the design feminine with the pinks and purples. Adding in some elements from my design kit, such as stars, made the design feel more on brand with roller derby because it added that bold feature while also showcasing the use of stars in the players helmet covers.
High Fidelity Prototyping
While creating the final wireframes before prototyping, we went through about 5 edits to finalize every detail. In the end, it made a big difference and made prototyping and testing much easier.
The style changed a bit throughout the process. Most changes ended up being size fixing, incorporating more stars in the design, and making the designs line up more with what other sporting apps look like.
Usability Testing
During user testing of the prototype, there were only a small amount of issues to fix. We spent a lot of time defining the wireframes, so there wasn’t a lot of feedback to change. I had to fix the scrolling of the bottom navigation and edit some of the flows from screen to screen because I left a couple out.
Users liked the color palette, the way they could easily find information on game play and teams, and the ability to follow teams on social media as well as the app.
Conclusion
Overall, I learned that spending time defining the high fidelity wireframes made the prototyping and testing a lot easier in the end. I also learned a lot about focusing on designing for the user and making sure as much as the product is pleasing to look at, it’s also accessible to everyone. I had never designed a sports app before, so it was a new challenge to design it a specific way.