Creating a flexible design system to support an ever-evolving product
Responding to a shift in market demands by implementing a strategic design system helped MoveSpring stay relevant and adaptable while driving the pivot from event-based revenue to annual subscriptions.
Something for everyone
MoveSpring’s mission is to help companies and organizations bring activity, wellness, and engagement to their employees through a fun, easy-to-use activity challenge platform.
No client is alike—some companies want to amp up the competition among coworkers while others want to provide an inclusive, educational approach to bring people together. MoveSpring offers something for everyone through highly-customizable challenges and a variety social and engagement features. But...it didn’t start out that way.
Learning from launching an MVP
Upon initial launch in 2018, MoveSpring had been designed to fit within developer-imposed constraints: each challenge had to contain exactly 3 challenge activity and engagement modes and each challenge preview was restricted to a tightly defined fixed pixel area. But, we were a new team working quickly to launch a minimum viable product and did what we had to to get it into the hands of our customers on a tight timeline. Then the fun started.
MoveSpring’s design at launch, circa early 2018 😳 — requirement of 3 challenge modes and restrictive, fixed containers to display data
The problem
A shift in client needs from one-time challenges to ongoing engagement
The majority of our initial clients were organizations hosting one-time challenges for events, trade-shows, and fundraisers. But soon after launching, there was an increased demand for ongoing challenges, more robust wellness programs, and social features to connect users.
What clients wanted:
Flexible challenge structure
The ability to run a program with a single activity challenge or to go all out and incorporate several activity challenges, content, custom tracking, and more.Social interaction
Increased visibility of other users’ activity throughout the app. More ways to communicate with one another and foster friendly competition and a sense of community.Ongoing engagement
Engagement options for users between challenge programs. More features and content available to users independent from challenges. Allow users to create their own mini-challenges.
The solution
A strategic design system to support flexibility, scalability, and efficiency
To respond to market demand, increase our feature set, and pull ahead of competitors, we needed to rethink the design to break away from tight constraints and provide customers with an expandable, flexible platform and to pave the way for the efficient creation and introduction of new features in an ever-shifting market.
The solution was clear: create a flexible design system. Here’s how it came together:
Define styles & create component libraries
I started with the building blocks: defining colors, typography, icons, and design styles to align with our brand. Then I built a library of standalone, reusable components that would be incorporated across the entire user experience: buttons, forms, comments, charts, progress bars, avatars, labels, toggles, and more.
Creating visual patterns helped to create consistency and familiarity for users while also accelerating and streamlining the design and development process.
Establish UI patterns with an underlying modular approach
Building from the base components, I created larger elements that would be used repeatedly throughout all features: challenge cards, leaderboard cards, content cards, navigation elements, overlays, modals, and more.
While creating our card-based components, I made sure they would adapt and be responsive to fit any type of information. I created a future-proof modular system so challenges, content, and features could be customized and added over time with ease.
Focus on product strategy and design new features efficiently
Having a strong design system in place provided the design team with components, constraints, patterns, and guiding principles that allowed us to focus on product solutions to increase engagement and move toward a platform that would convert more clients to annual subscriptions.
Even as a very small design team, we were able to design features quickly, knowing we had a system in place where everything would fit just right.
The result
An infinitely customizable wellness platform that can be configured to meet the needs of any client
And…happy clients
“We love all the different challenge modes available in MoveSpring. From Journey to Streak, Target and Group Challenges, we are kept on our toes (literally) through each unique mode.”
— Admin at a mid-sized government organization
“There is a significant amount of customization that is available, making it a great choice for those who want more than a basic step challenge.”
— Ciera G, admin at a mid-sized company
“I found the flexibility of the platform to be useful when adminstering a 150+ person Step Challenge. Having 3 different types of competitions kept the step challenge open to all, not just for the folks that had the most steps.”
— Will S, admin at an 1,000+ employee enterprise