Want to run, but don’t know where to begin? Traction, a running app developed by Drexel University’s User Experience and Interaction Design (UXID) students, is designed for aspiring runners who need the right tools to go from zero to running.
The Problem: How to Make People “Want to Want to Run?”
Many people view running as a way to improve themselves and get exercise, but lack the knowledge and resources to run properly. The Traction team aimed to address this by creating an empathetic approach to running that helps beginners learn how to start.
Filling a Market Gap
The team noticed a market gap in running applications geared towards recreational running. Existing apps are often geared towards experienced runners, with detailed statistics and tracking that beginners wouldn’t know how to use. Traction bridges this gap by providing the necessary tools and knowledge for beginners.
Key Features and Design
Traction focuses on addressing the issues that beginner runners face and keeping them engaged with the habit of running long-term.
Research-Driven Design
The team conducted extensive research, including competitive analysis, surveys, and interviews, to understand the needs of beginner runners.
- Competitive Analysis: Identified strengths and weaknesses of existing running apps, and core user flows.
- Surveys & Interviews: Revealed that new runners are overwhelmed by existing apps and lack information on how to run.
User Personas
The team created two user personas to represent their target audience:
- Wants to be Health-Focused: Lacks knowledge and experience, wants to improve physical fitness.
- The Stress Buster: Wants to establish a better work/life balance and use running as an emotional outlet.
Visual Design
The app features a purple-focused color palette with orange accents, as well as Fugaz One as a display font and Poppins as a body font, capturing the empathetic and cheerful aspects of the app.
Key User Flows
- Before Run: Change widgets, read guidance, check awards and records.
- During Run: See current stats and get feedback according to running plan.
- After Run: See experience gained, achieve awards, guided cool-down exercises, rate run experience.
Technology
The team used Figma for wireframing, the Figma Dev feature to translate wireframes into code, Svelte as a framework for the coded prototype, and Vercel for web hosting.
Success and Lessons Learned
The Traction team successfully built a working coded prototype that builds off of research, while also being clean, enjoyable, and fun to use. This project highlights their ability to pivot and rethink their approach while creating something creative and needed in the running app industry.