Overview
The Challenge
Street Parking, an online fitness community with over 30K members, needed a custom mobile app to provide a better digital experience for their customers. I designed a native mobile app experience that would increase visibility into additional programming (beyond the daily workouts) and reduce friction when logging results.
My Role
This was a passion project. As a passionate designer and an active member of the Street Parking community, I saw an opportunity to create a better user experience for all members. I performed user research and created all deliverables including low and high-fidelity designs and prototypes.
Define
I performed user research to discover user problems with Street Parking’s current setup. Based on information gathered from scouring their active Facebook community of over 30K members as well as talking to real users, I defined some key product requirements for a Street Parking Mobile App.
Challenges
Wodify Performance
Street Parking members currently use Wodify, a third-party app, to log their workouts. Wodify is built for CrossFit gyms to manage their memberships, post and log workouts. Some problems with Wodify include:
Excessive loading times, especially for Whiteboard/Leaderboard due to SP’s 30K+ members. (Could take over a minute, or sometimes even timeout entirely).
The app includes features and workflows that are irrelevant to Street Parking members, such as Class Schedule, My Appointments, and WodiFind.
No way to view and log many of Street Parking’s extra workouts.
Content Buried
Street Parking has an abundance of great content, for example Extra Programs, but even on the website that content is buried several clicks away.
Lack of Flexibility
Users can only log results for a workout on the date the workout was programmed, a frequent point of confusion and contention amongst Street Parking members (as evidenced by Facebook Group comments).
Design
I performed some competitive research of other fitness apps and workout-tracking apps to get a lay of the land and identify any best-practices. From there I quickly iterated through paper sketches into wireframes (Figma). I solicited design feedback from other product designers in my network.
Refine
Once I had solidified the architecture for the key screens, I moved to high-fidelity UI designs, creating a Figma prototype as I went. I utilized Figma mirror to get a sense of the app on an actual mobile device, and to solicit feedback from others.
Home Screen
Athletes want instant access to today’s workout as well as other key workouts for the week, and specific extra programs.
I iterated on this screen the most, focusing on information hierarchy both on the page overall, and within each individual workout card. Conversations with users informed my decision to include both a playable video thumbnail and a short written workout description on the workout card to cater to different user goals.
From a UI perspective, I initially started with something very similar to Street Parking’s existing designs, then iterated to balance existing branding with improved UX.
The Happy Path: Today’s Workout
I spent time thinking through several user flows, then chose to prototype the most common use-case: performing Today’s Workout and Logging Your Results. I made some fundamental changes to how the information is presented and included a built-in workout timer and automatic logging flow to improve the experience above the current Wodify option.
Impact
The Street Parking Mobile App will provide users with a more robust mobile experience, affording quicker access to daily workouts and extra programs, and ensuring they aren’t missing out on important content. Users will have a more streamlined workout logging experience through integrated timer and logging flows. Street Parking will have more control over the member experience and the content they want to surface to their users.
Metrics
We could expect to see an increase in workouts logged, as well as increases in interaction on the Leaderboard (likes/comments), and increased interaction in the Facebook Group due to in-app promotion.
Prototype
Full demo video here.
Reflection
This project was a really fun opportunity to flex my design muscles for a company and industry I’m super passionate about! This was a passion project, and as such many assumptions were made as to what the business and user goals are. I would have really liked to do more in-depth research, however due to their Facebook Group posting guidelines, I didn’t feel comfortable posting surveys or asking too many questions, and due to Covid I wasn’t able to connect with many people IRL. If Street Parking were to partner with me in this project, I would definitely survey users, do usability testing on my designs at various stages, and even shadow some users in real life as they go about their workouts.
I chose to impose some time constraints on this project, and revisiting the Street Parking branding was not something that made the cut. I wanted to focus on usability and interaction design here, and I think they have a pretty strong branding that seems to be working well for them right now. That said, gold is a bold colour which has a “fancy” feel that maybe pairs oddly with their “techie” font choices. It provided a fun challenge in terms of accessibility, ensuring proper contrast at all times.
Additional features that didn’t make it into this project due to time constraints include:
Onboarding flow to encourage new users to favourite/follow some additional workout programs
Logging a custom workout
Integrations with fitness trackers such as WHOOP, fitbit, etc.
I would have loved to work on this project with Street Parking, but it turns out they are actively working on developing their own mobile app already. I plan to approach them about any future collaboration opportunities.