MoveSpring | 2020
B2B2C SaaS
Product Design
UI Design
Mobile
Project at a glance
ROLE
Lead Designer
TEAM
Head of Product Design, Engineering, Illustrator
TIMELINE
~4-6 weeks
Impact
Virtual Race became MoveSpring’s most popular, profitable challenge mode
Unlocked new business from charities and non-profits looking to host virtual fundraising walks & races
Created an upsell opportunity for existing clients with custom maps & milestones
Growing race map library helped convert one-time clients to annual subscribers
Led to the delivery of 3 more features within 6 months: Group Virtual Race, Team Virtual Race, and a Custom Racetrack Creator for admins
Opportunity
The pandemic highlighted a need for virtual events and social connection in a time of isolation
MoveSpring brings fun and approachable activity challenges to companies and organizations. The product encourages simple, consistent movement among a largely sedentary workforce, while boosting company culture and morale through a sense of community. But when the pandemic hit, corporate clients were looking for new ways to engage their employees.
At the same time, fundraising leads were climbing. With in-person events cancelled indefinitely, charities and non-profits needed new ways to generate revenue and keep bringing people together. The team saw a chance to fill that gap by bringing virtual races to everyone.
Problem
How do we translate an in-person race into an engaging mobile experience?
We set out to bring the best parts of an in-person race to the MoveSpring app. After we interviewed dozens of 5k participants and seasoned marathon runners, I identified three recurring themes that drive race participation.
Competition & reward
Energy & social connection
Location & theme
I then got to work, translating those themes into a digital experience.
Sometimes there’s nothing better than some quick sketches
Approach
Move quickly without sacrificing quality or delight
Time to delivery was essential in this work. Nobody knew how the pandemic would play out but we saw a massive opportunity to win new customers if we got something to market quickly.
We already had a similar, yet outdated, challenge mode that tracks users across a map: Journey mode. However, Journey hadn’t been touched in years. It wasn’t utilizing our most recent leaderboard components and didn’t have the engaging social features that we needed. But it was a great starting point and this was the perfect opportunity to rethink that feature and address any UI/UX debt that Journey mode was adding to the app.
I started sketching out ways we might bring those core three themes that were identified in our research to life in our app. By building on our existing patterns and design system, I was able to design and ship this feature quickly, without sacrificing quality.
Solution
Virtual Race Mode: Bringing the energy and excitement of an in-person race to the MoveSpring app
In virtual race mode, as users move in real life, they progress through a horizontal-scrolling illustrated map. By combining this new, gamified racetrack experience with a redesigned leaderboard, we were able to provide a digital space for races to continue on.
Let’s break down some of the details and decisions that made this come to life.
Motivating users with leaderboard badges, multiple ways to win with various activity metrics, and milestones along the way
How we got there, part 1
Building in a sense of reward & motivation
Keeping people engaged and moving toward an activity goal through a digital platform is harder than moving one foot in front of another during a real life 5k. I focused on three ways to rebuild that motivation digitally.
Finisher medals & fun completion states
I refined our existing leaderboard components, adding badges to recognize all finishers and incorporating the coveted 1st, 2nd, and 3rd place medals for top winners. You bet there’s some confetti along the way as well. With no crowd at the finish line, I prioritized small moments of delight on the screen.Multiple ways to win
In-person races last a few hours; virtual races can run for weeks. Adding a secondary way to win through metrics like overall distance, steps, or active minutes was an added way to help people stay motivated to keep moving even after crossing the first finish line.Milestones along the way
Milestones solve two problems at once. For participants, unlocking small wins along the route keeps motivation high over a long race. For clients, milestones became a place to upload custom content, videos, or prizes, tying the race directly into their broader wellness programs.
Brand new completion overlay, quick-access profile overlay, and in-app chat all help foster a sense of connection
How we got there, part 2
Creating a sense of energy & social connection
As we heard from our research calls, there’s nothing quite like the energy of an in person race. To capture the things people care about in person right within our platform, I focused on a few new variations of our overlay component to emphasize connection and community.
Multiple ways to track stats & progress
Social proof helps motivate others. I introduced a completion overlay component so participants can see how many people have reached each milestone and how long it took them to reach it, highlighting friends at the top of the list.Quick-access profile summaries
I also introduced profile overlays. By tapping on a profile image anywhere in the app, a user gets a quick glimpse at another participant’s activity and profile info with CTAs to add a friend or direct message a friend to send motivation along the way.Supportive community chat
Our existing group chat feature gave participants a place to cheer each other on and share photos of their own personal milestones and wins.
A glimpse at some of MoveSpring’s themed maps
How we got there, part 3
Themed & customizable maps to give a sense of place
To bring a sense of place to our virtual races, we worked with our illustrator to create a library of over 20 map options. These maps give users something fun to explore as they move towards the finish line. The growing library of maps also provides clients easy click-and-pick programming with a variety of different themes to build upon.
Upsell opportunities were almost too obvious here. We let clients pay a premium to customize their entire map and and milestones; a great option to create a branded race experience.
Map theme selection in the MoveSpring Admin Center
How it all came together on the mobile app, from challenge dashboard to milestones and leaderboards
Small UI details and moments of delight
The result
A customizable virtual race experience for companies, charities, and non-profits
We set out to create virtual race to fill a gap in the market and provide a digital space for races to continue on in the pandemic. But we didn’t expect how quickly this new feature would take off.
Companies running virtual race challenges found users more engaged than ever. Our expanding library of maps and customization options provided incentive for companies running one-time events to convert to annual subscriptions.
Charities and non-profits found a way to continue generating revenue when the pandemic put a temporary end to in-person races. Hosting fundraising walks and runs on the MoveSpring platform continues to bring value through its unique way of supporting worldwide participation, encouraging ongoing engagement, and including sponsorship opportunities within the virtual race environment.
❤️
...and a little customer love...
Kathleen C.
Admin at an 1,000+ employee enterprise
Jessica F.
Admin at an 1,000+ employee enterprise