intro

The Problem

Roller Derby operates as a non-profit organization, and as a result they heavily rely on volunteers, referees, and organizers. Resources and venues are scarce and dwindling, and scheduling conflicts often arise due to unstandardized communication and workflows. To schedule a bout, that is a game, organizers must go back and forth between facebook groups, messages, and the google doc schedule.

How might we...

Encourage Roller Derby to grow by first addressing the organizations scattered communication, especially concerning setting up scrimmages, bouts, and tournaments?

My Tasks

Conducted Interviews
Conducted interviews with key stakeholders.

Bout Creation Experience
Ideated on the best experience for creating a bout to match user mental model through sketching, role playing, and user testing.

User Testing
Designed and conducted user tests to best improve the app as we developed it.

User Interface
Designed the Pick Your Team, Select Your Volunteers, and Summary screens. Edited remaining screens to be cohesive.

Prototyping
Used Proto.io to prototype interactions such as button presses and transitions between screens.

research

User Journey

We were able to learn about the unstandardized communication and workflows through ethnographic research. During beginner’s practice for the Mainland Misfits league my team members joined the skaters while I stayed on the sidelines to observe and interview their League of Directors, Emerald Oz.

During this interview it became clear to me how hard it is to organize bouts when each one needs around 15 volunteers to function. This issue also arose when we later interviewed the team as a group to understand their needs and pains. Their passion for the sport could not be understated, but there was also a sense of frustration from scheduling conflicts getting in the way of playing.

Persona Creation

To best address the needs of the Roller Derby community, we designed a persona based on our research and interviews to be a reminder of who we are designing for.

It can be easy to get lost in designing and forget the “who” and “why”, but our persona of the Encumbered Director helped keep us on track.

Brand Analysis

To begin we did a simple brand analysis on Roller Derby based on Marty Neumier’s the Brand Gap. This was to keep the brand needs and behaviours in mind while moving forward.

We found their major values to be: Expressive, Supportive, Underground, and Devoted. Together these all cultivate the image of empowering yourself and your community.

early designs

Sketching

We each created sketches of low fidelity wireframes to explore how we might best address this issue, and chose the second one to further pursue: a modular system for a lateral mental model.

We chose this over a linear or simplified natural language system because it matched the mental model that most Directors of Operations seem to have. Planning a bout is a messy process as nothing is set in stone. Thus our system had to be flexible to accomodate for constant changes or last minute sign-ups.

Wireframes and Initial Design Issues

We then began working on the wireframes. One of our early struggles was finding a balance between having all the important information displayed without overwhelming the user with said information.

Also, as we were creating the first digital wireframes, we realized that the needs of the organizers (director of operations, coaches, etc.) were different than the players and volunteers. At first we thought having two apps, one for organizers and another for players and volunteers, would solve this problem. However during user testing we realized this would only separate and confuse members.

User Testing

To best move forward we conducted think-aloud user testing on our prototype with four users. During testing I would introduce the participants to Roller Derby, and give them core tasks to complete. I would ensure my phrasing of the tasks wouldn’t bias their attempted solution, and gave them space to complete the tasks on their own terms.

Overall it was a mixed success. The workflows and tasks were clear and executable by all of our users with minimal errors or roadblocks; all issues discovered never prevented the user from completing the task and were minimally frustrating.

The main issues that arose were as a result of the missing sister app that was proposed, actual logistics of booking a venue, and potential error prevention — especially concerning double-booking or venue hours/events not being properly listed in venue details. There were also some fairly impactful issues with calls-to-action on the Venue, Volunteers, and Summary screens, with them going largely unnoticed.

final designs

Our goal was to balance the punk side of Roller Derby and the professional nature of an organizational app.

We did this by incorporating the pink branding of the WFTDA (Women’s Flat Track Derby Association), the connotatively punk Courier New font, and being inspired by retro labels with their slightly rough aesthetic.

Home Page

To simplify and condense the bout information we decided to contain them within elevated boxes which displayed all the important information at a glance. Using a white background, slimmer icons, and giving each element more breathing room also improved the readability of all the information.

Instead of having two apps, one for organizers and another for players and volunteers, we decided to include an option where the user can declare themselves as an organizer by connecting their Facebook account. If they are the admin of their league Facebook page it unlocks the organizer features of the app.

Bout Creation Experience

Organizer Homepage

To start off creating an event, a normally monotonous task, we designed a fun and bouncy menu expansion to help get the user in a joyful mood.

There are multiple event types organizers would need to schedule, each with different needs. We focused on designing the bout scheduling process, but the other events would follow a similar path.

Pick a Venue

The user first choses a venue from a map of all the possible ones in the area. After selecting a venue, they can chose the date, and start and end time. They can also check all the important details of the venue.

To continue bringing joy throughout the create a bout process, I designed the “Go To Teams” button to sink into their shadow when pressed. This quickly conveys that the user did successfully press the button in an enjoyable way.

Pick Your Team

The user is first presented with a list of cards representing the teams in their league, which I designed. Each league has around five teams.

After they select their team it automatically scrolls over to the “All Leagues” tab so they can efficiently choose who they will be playing against.

Select Your Volunteers

Because the user has their Facebook account connected they can select people they are friends with to invite as volunteers, so I designed a window to pop-up with this information.

Once a volunteer is selected a pending icon of three dots in yellow is placed next to their name. This is so the user can keep track of who is pending, accepted, and declined in the future.

I made sure to use the word “select” to assure they are not sending the person an invite at this moment.

Summary

Here the user can confirm all the decisions they have made thus far. I used the pending icon here so the user knows what is still to be confirmed.

I designed the “Save Bout” button to slide up after a few seconds to make this important call to action more noticeable.

After saving the bout the user is told that their team and volunteer invites will now be sent, and they are assured that if anything changes they will be notified.

Reflection

I found the interviews we conducted, especially with Emerald Oz, a truly invaluable part of the design process that allowed us to focus in on the needs and pains of the Roller Derby community so we could better address them.

This was the first time I extensively used a prototyping tool (Proto.io) and by dedicating my time with it early on I was able gain a high proficiency with it by the end of the project. I feel confident that I could apply this to any other prototyping tool and quickly learn them.

Our constant process of redesigning and improving the interface to best suit the needs of our users also gave me a lot of practice in looking at the problem in new ways to find the best solution for it.

Overall I thoroughly enjoyed the process of designing this app.

<- back to home