Increasing a digital fitness platform's user base by making it mobile.
Led redesign of a desktop-only fitness site into a fully responsive and brand-aligned platform. Increased user base (+30%) with high retention rate (85%) within three months of launch.
UX/UI
Brand design
Responsive design
Design system
CMS
Information architecture
Challenge
Rebuild the platform from the ground up
Complex technical features undermined smoothness. Lack of a design system and brand image infringed on UI.
As the lead designer, I aimed to bridge the gap between Michael's product vision and the user's full experience on the platform.
Key Opportunities
Context
Boxing as a (personalized) science
When Michael Olajide, a former pro boxer, launched System of Silk, he envisioned an online platform where users could build personalized workout playlists and experience boxing as a science.
Solution
Prioritizing a Mobile-First Handoff
Market research showed users primarily use their mobile devices when working out. Most competitors didn't even have desktop versions. So I framed my design process around creating a familiar mobile experience.
I organized the content.
With two distinct ways to browse content, tabs offered a clear and scalable navigation pattern. Because each tab houses the same content architecture, they help distinguish these experiences in a logical way.
Bookmarking a 100% Prescription Program.
Adding a workout to a custom playlist.
I familiarized customization.
Considering Jakob’s Law of familiarity, it would benefit all stakeholders to leverage existing mental models. Inspired by YouTube and Spotify's seamless playlist building, I used bookmark icons and interactive modals to make the process simple and intuitive.
Our engineers found that utilizing Vimeo as API was cost-efficient and client-friendly (as opposed to using CMS). This enabled us to design interactive playlist pages that store data reflect content changes.
Editing a custom playlist.
Browse page on mobile
I made it easier to watch.
Of all video platforms that were considered, 100% had clear indicators of visibility of system status. Users must always be informed about what is going on, and this design gives them control.
Next Steps
Preparing for what's next
Want to dive a bit deeper?
Responsive Redesign
Designing an all-around experience
As shown in Product, bringing System of Silk to mobile was essential to making the product accessible. Translating the native-app feeling of the new site continued through desktop and tablet.
Slide to see before/after Browse.
Slide to see before/after Playlist Queue.
Slide to see before/after Video Player.
Iterate, iterate, iterate
Maybe starting with the marketing site wasn't the best approach…
Looking back, tackling the marketing site last would have been smoother, having known the exact features and functionalities to highlight.
Originally, users were presented this tutorial pop-up after every log in. It wastes about 30 seconds on the first log-in, and then about 5 seconds every time after.
Original tutorial (pop up) users would see after every log in.
Redesign of The Workout page (marketing site) includes tutorial section.
Designing the product tutorial into the marketing site not only removes an unnecessary step after log-in, but it reduces support tickets and enables users to preview the product before purchasing.
Building a Design System
Highlights of the design system
