Derby Star
Responsibilities
Research and analysis, outline user flow, create wireframes,
branding and style guidelines, visual asset production,
interface design, usability testing
Background
As a concept project, the Women’s Flat Track Derby Association (WFTDA) needs an easy way for spectators to be able to learn more about flat track roller derby, and discover leagues and games. The WFTDA has a existing website, and there are several roller derby apps that focus on only one feature such as a penalty timer or a rule guide. But they want to design a mobile app for fans to be able to become fully involved in understanding and following the fast-growing and exciting sport.
Goals
Create a mobile app designed to inform and connect fans to the sport of roller derby. The app should include task flows that allow users to login with social media, learn the game rules, follow derby leagues and share game details on social networks, and discover WFTDA sponsorship opportunities. A logo and branding style guidelines need to be designed specifically for the mobile app.
Process
Research the market and identify user needs
Define high priority features and information architecture
Design the user journey
Ideate wireframe layouts
Create a logo and style guidelines
Test and finalize the product prototype
Secondary Research & Competitive Analysis
Basic information was compiled about the sport of flat track roller derby and trends in the industry of sport apps.
The strengths and weaknesses of direct competitors in the field of roller derby web and mobile apps were explored, as well as indirect competitors including apps that cater to a wider range of sports.
Survey Research and Synthesis
A survey was created using Google Forms, with questions intended to understand the goals, frustrations, and past successes of participants in becoming interested in, learning about, and sharing a new sport. An affinity map was organized based on patterns in the participant responses, and the groupings of participants with similar experiences and goals formed the basis of the persona Katy Lee.
Katy’s goals, motivations, and frustrations were considered to estimate her feelings throughout several user tasks, which were mapped in an emotional journey, providing opportunities to improve her experience.
Defining Feature Priorities and Information Architecture
A feature roadmap was used to organize app features into a hierarchy of priorities. Then a card sorting study was conducted for participants to sort top priority content and features, providing a clear path for the information architecture in the site map.
The User Journey
Several task flows were laid out to accomplish various user goals. The user flow was designed by compiling the task flows, creating branches for additional MVP features, and adding annotations on Katy’s experience throughout the journey.
Mockup Ideation and Mid-Fidelity Wireframes
Multiple ideations for key screen templates were explored through rough layout sketches. The top concepts were then clarified in more coherent low-fidelity mockup drawings, and then used as reference for creating mid-fidelity wireframes in Figma. Decisions on displaying the different types of sport-related data resulted in more detailed visual hierarchies.
Mid-Fidelity Prototype Usability Test
The mid-fidelity wireframes were converted to an interactive prototype, and a usability test plan was created with Maze Design to test five tasks from the user flow.
The results from the usability test were organized into a spreadsheet that categorized each participant’s activity and answers as successes or challenges. Opportunities to alleviate participant pain points were also noted in the findings.
Branding and the UI Kit
Brand keywords and the popular aesthetics of the roller derby community characterized the logo design and branding of the app. Custom visual assets and component states were then added to the style guidelines to create a UI Kit.
High-Fidelity Wireframes and Additional Testing
The mid-fidelity wireframes were updated with the style guidelines and solutions from testing, and the design fine-tuned for consistency and aesthetics.
The high-fidelity wireframes were connected into an updated prototype for another usability test. The resulting participant observations were placed on a feedback grid, revealing patterns of success as well as additional opportunities for improvement.
Final Wireframes and Prototype
Solutions discovered in the feedback grid were applied to the high-fidelity wireframes and prototype, for a more polished, user-focused design.