How we found a compelling design language & rolled out across our 10+ unique intent products
In 5 years, cult has grown from helping users work out in a group to a holistic fitness platform that caters to many unique user intents like meditation, getting help with mental wellbeing & nutrition, & working out from anywhere, anytime. We were facing the challenge of designing at scale while staying aligned to our brand.
The Heartache of Designing at scale
We found ourselves solving the same interface problems again & again in silos. This led to inconsistent interface elements which increased our ship-to-market time unnecessarily. Furthermore, our perfection-seeking design eye itched to see ubiquitous design inefficiencies like cognitive overload, clutter, loud visual breaks & more. We were realising what Invision aptly puts as the ‘heartache of designing at scale.’
The Genesis
Our users love the workout experience at cult centres. They distinctly remember the black facade with a big & bold cult logo present at the entrance of every cult centre. Furthermore, the fun vibe & energy while working out at cult centres is memorable to many of our users. We wanted to capture the same feeling & mood in our visual language for our digital product.
Align & Reset
We ran a retrospective 1-day Retrium workshop with all key product, design, creative & tech folks which allowed us to systematically share and discuss critical problems & appreciate our wins as a group. As a group, we realised that the ‘itch’ for pixel perfection was common across the EPD (Engineering, Product & Design) teams at Cult & we all wanted to find a more conviction-striking & brand-aligned visual language.
“Before people can begin something new, they have to end what used to be and unlearn the old way “ — William Bridges
With greater clarity & alignment, we unloaded the old baggage, detach from the legacy practices & start with a fresh mind, a blue sky.
Our Design Principles
We started by defining a clear set of design principles that reflected & emphasized our brand personality & captured our product aspirations.
- Bold. Energetic. Immersive.
Cult is all about being bold & energetic & hence, our product should embody values that reflect high energy, dynamic imagery, bold typography, ample negative space and immersive motion. - Intent-Driven.
We strive to be hyper-intentional with our product decisions (concepts, UI, journey flows, styles, artefacts) while keeping the user intent as our north star. - Simply Efficient.
We endeavour to master our creative urge to unnecessarily reinvent the wheel just to be different while leveraging what design patterns users already know & love to keep things simple & efficient. - Break the Mould.
We believe strict rules cripple good ideas. We proactively identify opportunities to innovate & leverage our creativity to find new & better ways of thinking & doing things such that we don’t elevate the learning curve unnecessarily.
Exploration Time
Armed with our principles, we started with visual explorations.
Moodboarding —
We deep-dived on 10+ cherrypicked top global fitness applications & identified design patterns & decisions that stood out while collecting them for our moodboard.
We dabbled in many popular trends like neumorphism, flat design style & glassmorphism and tested quick & dirty video prototypes with our colleagues & friends. We observed that dark-themed explorations received a lot of encouragement perhaps because most of our users strongly relate our brand to the dark walls of our centres adorned by bold & immersive typography. After a lot of back & forths of experimenting & combining different styles together & iterating, we arrived at a style that got the strong indisputable trend of repeated positive feedback from our friends & colleagues. This cemented our conviction in this style.
Enter Aurora, Our Visual Language
Aurora is inspired by the delightful northern lights and flaunts an active (dynamic) interface created by the synergy of our brand colours gracefully moving in the background. Aurora’s iconic dynamic background reduces visual monotony while reinforcing our brand value of being active & energetic.
Active Background makes negative space an asset
The dynamic background is the most iconic feature of the aurora visual language that shows the beauty & grace of the other-worldly northern lights. This ‘Active’ background not only reinforces the cult’s brand value of being active but also elevates the sense of delight.
Won’t a dynamic Background will be distracting?
We spend hours of iteration on the motion of the aurora background to arrive at motion values that were just right. Not too distracting nor too invisible.
Glass Material Design
We felt that containers & other opaque surfaces on the active background were visually suffocating to the eyes & killed the fun mood that we intended to evoke in our users. Hence, glassmorphic surfaces & containers help us in leveraging the airy feel of the active aurora in the background.
Motion for function, not just delight
Aurora sees motion as a tool to uplift function while using it as a lever to add delight. While a work-in-progress feature, motion in aurora can be used to retain context during the transition between pages or other elements. It also helps in driving attention & increasing the impact of the intended interface elements.
Mission Accomplished? Not so Fast.
We found a compelling visual language but it means nothing unless it’s scaled across the 10+ app products in the cult ecosystem which were still running a legacy design language.
How might we seamlessly scale the aurora design language across cult mobile product?
Answer: Design System.
Enter Aurora Design System
We realised a need for a common place to document all the style guides & components in design to translate into code. That is where the design system came out as an organic solution.
A Design System is a meaningful bundle of well-documented pattern libraries where an ecosystem of inter-connected patterns, guidelines and shared practices live.
How did we start creating components for our visual language?
Atomic Design to the rescue. Atomic design is a framework, pioneered by Brad Frost, for creating systems of components with the principle of modularity at heart. Adopting the atomic design framework helped us to seamlessly scale Aurora across the cult universe. We started with translating 10+ high-impact screens into the aurora language, & then carefully dissected them into meaningful reusable entities — Atoms, Molecules, Organisms & Pages.
Seamless Transition to Figma:
During this time, we pre-dominantly used Sketch & were partially exploring Figma. But with design system over the horizon, we realised the power of creating one in figma & it seamlessly ushered the entire design team into the using figma.
Atomic design categorised these entities as:
Sub-Atomic Particles
Sub-atoms are a bundle of visual & brand design decisions all documented in one place. These foundational elements form the brand & visual style guide which informs the product look & feel. This was primarily a documentation step for us as we already had fleshed out Aurora.
Atoms
Atoms are the smallest meaningful units of the interface which cannot be further broken down without loss of meaning.
Molecules
Molecules are meaningful groups of atoms, informed by the sub-atoms, which when strategically repeated create an organism.
Organisms
Organisms are complex components made from atoms & molecules which repeated form an interface.
Templates
Templates consist mostly of groups of organisms stitched together to form pages.
Changing Tech to Create Aurora
The cult app was built on industry-standard React Native technology which wasn’t built to use blurs repeatedly in the interface. Hence the first proof-of-concept with beautiful glassmorphic containers & active aurora background surfaced many critical performance issues, especially in Android devices. Hence the awesome tech team at cult explored Flutter & created a proof-of-concept powered by Flutter. The tech tested both the prototypes extensively. After months of testing, discussions & many back & forths, our tech team decided to shift to Flutter and we started building our component library in Flutter.
Conclusion
What started as a visual language discovery ended up being an extensive system living across design & tech. After a year of aggressive execution, endless user studies, A/B experimentation, and countless tech quality checks along with incremental iterations & usability tweaks, we rolled out aurora to the users.
Today, we have a cohesive design system with a shared design language & code which enables our tech team to ship consistent experiences faster. We also realised that it freed up our designer’s mental bandwidth from vanity pixel pushing to focus on deeper product problems. Access to documented Interaction & interface patterns has also made internal product reviews more productive & efficient as they are able to primarily focus on concept & logic.
Credits:
Shreeya Malpani, Raunaq Shah, Yash Tambe, Uttam Soni, Neelam Gulrajini, Ankit Gupta, Lights Out Team, Amandeep Singh, Ayusch Jain, Sivakumar & many others in the design and engineering teams.
More from
Engineering
category
