Unified, Multi-Lingual Design System for 25mn+ Readers across Platforms (Android, iOS & Web)
Context
Pratilipi is India's largest platform for publishing various forms of long form reading content, including single part stories, multi-part stories, poems, essays in 11 Indian regional languages & english. Pratilipi's primary product platform is Android, having 25 million MAU, while web and iOS usage is minimal.
Problems
Heavy reliance on outdated design files
Lack of maintenance and updates on these files
Substantial design debt
Significant disparities and inconsistencies across platforms
Handoff issues with engineers
Longer time required for design and development
Not able to keep up with the rapid pace of business
Not able to deliver consistent and meaningful experiences across platforms & languages
Goal
While creating Version 1 of our design system, these were the goals we set:
Establish and maintain a single source of truth by creating robust components, guidelines, and a unified visual language across platforms to reduce discussion and speed up UI development.
Meet faster timelines for design and development to align with business requirements and facilitate quicker market launches.
Enhance collaboration among all stakeholders by providing a shared set of composable tokens, components & consistent UX/UI patterns.
Design and build faster while maintaining a high product quality bar and ensuring accessible, cohesive, and high-quality customer experiences.
Enable UI reuse across different products and workflows by designing a system that inspires usertrust through consistent, scalable interfaces.
Approach
We've reinterpreted Brad Frost's five-stage model into a concise design framework: Atoms, Elements, Components, Widgets, and Screens. Starting from fundamental atoms, we assemble elements, evolve into dynamic widgets and ultimately crafting user screens. With a component-based architecture, it emphasizes composable & extensible system.
Impact after implementing v1
30%
Reduction in the design time
22%
Reduction in Development time
Contribution
I led the design system team.
From design side, me & 2 more designers contributed. While various engineers from Android, iOS, and Web made their contributions on different timelines within their respective platforms.
Responsiblities
Secured buy-in from the teams
Collaborate frequently with product designers, engineers, product & QA to ensure a cohesive design language.
As a design lead of our design system, I owned process and execution for over 40+ Figma components across web and mobile.
Managed component release program which includes task tracking in JIRA, triage of incoming spikes for component variants, and release communication to our design system group.
Maintained our component backlog.
Operationalized the process of designing, documenting, and releasing components.
Defining & designing robust, easy to use, reusable components, patterns, flows.
Maintained component & style libraries in figma.Developed comprehensive guidelines and detailed design specifications, based on Material Design (Android/ Jetpack compose), Human Computer Interface (iOS/Swift), Material Web guidelines.
Naming
Pratilipi is India's largest reading & writing platform revolutionising India's storytelling landscape. We named our design system 'SPINE'. Why?
The spine of a book not only provides structural support and connects covers but also serves as a printable area for artwork and information. Similarly, a design system acts as the backbone, uniting design, development, business requirements, and user needs. It functions as a frame, ensuring cohesion and integration.
Implementation
Initially, our plan was to commence development with Android (since it has the highest number of user) & subsequently extend to other platforms. However, driven by business requirements, we executed iOS, followed by the Web, and finally circled back to Android.
Through careful consideration, we intentionally avoided server-side rendering due to it's complexities and bandwidth requirements. Instead, we crafted a UI kit, components, and code systems tailored for each of the three platforms, ensuring maintenance.
Our process commenced with a comprehensive audit of our UI, allowing us to refine tokens and establish a cohesive, unified language. Subsequently, we crafted themed components optimized for both light and dark modes, defined patterns and widgets, and culminated in the redesign of screens.
When designing the Android platform, we prioritized high-impact components for initial development, strategically shifting focus to other relatively less critical components thereafter.
Establishing a Unified
Visual Language
Color
We commenced with the color audit, reducing the original 190 unique colors to a streamlined palette of 60 unique colors. Within this palette, 9 unique colors are consistently used 85% of the time in both light & dark mode. The remaining colors are reserved for illustration, marketing, and brand purposes.
Upon the introduction of Variables in Figma, we transitioned our visual tokens directly within Figma itself. Here's an example of Andriod color tokens are defined for light & dark mode -
Typography
We audited our typography, streamlining from 16 type sizes and 4 weights to just 9 type sizes (4 most commonly used) and 2 weights (regular and bold). Here's our fundamental typography tokens, which adapted contextually for 3 different platforms.
*We considered switching from Noto Sans to Anek Sans for a more expressive feel. However, we decided against it due to language scaling issues, as only Noto Sans adequately supports our language requirements.
Icon
Our Icon kit originally had various weights, fills, and a mix of rounded and outlined styles. To simplify, we unified it into a single style Material Symbols with a consistent weight of 300.
We defined other atomic units, which included establishing a spatial system following 4pt gridline, different grid structure for different screen sizes, border radius & shadow values.
We intentionally scoped out copy, illustrations & motion design for the first version.
Component Design &
Platform specific designs
Component Design
We've designed 40+ components for entire system. Some are universal, while others are tailored to specific platforms. For certain actions, we use native components, keeping things natural and smooth.
Every component undergoes a thorough criterion process before moving on to language test cases. Multilingual testing is a crucial factor, involving assessments in different languages to refine the component until we are satisfied. Once this is achieved, we proceed to create detailed documentation.
Here's an example one of our most used component, 'Content_Card' (Android). We've first created a master component, and from there, we generate different variants to suit various contexts.
VIDEO
VIDEO
English
Bengali
Tamil
Malayalam
Hindi
Gujarati
Kannada
Telegu
Oriya
Marathi
Component Multi lingual Test cases
The Beauty
Deepali Tiwari
148K+
4.9
333 parts
2 Seasons
সৌন্দর্য
দীপালি তিওয়ারি
148K
4.9
333 অংশ
2 ঋতু
அழகு
தீபாலி திவாரி
148K
4.9
333 பாகங்கள்
2 பருவங
ସ beauty ନ୍ଦର୍ଯ୍ୟ
ଦୀପାଲି ତିୱାରୀ |
148K
4.9
333 ଆନୁଷଙ୍ଗିକ |
2 asons ତୁ
സൗന്ദര്യം
ദീപാലി തിവാരി
148K
4.9
333 ആക്സസറികൾ
2 സീസ
खूबसूरत
दीपाली तिवारी
148K
4.9
333 भाग
2 ऋतुएँ
सुंदर
दीपाली तिवारी
148K
4.9
333 भाग
2 हंगाम
સુંદરતા
દીપાલી તિવારી
148K
4.9
333 એસેસરીઝ
2 સિઝન
ಸೌಂದರ್ಯ
ದೀಪಾಲಿ ತಿವಾರಿ
148K
4.9
333 ಪರಿಕರಗಳು
2 ಋತುಗಳು
అందం
దీపాలి తివారీ
148K
4.9
333 ఉపకరణాలు
2 సీజన్లు
Example Component documentation for 'Library_Card' (Android) -
iOS
We began the iOS app project with the intention of building it from scratch. We took the time to consider each component from a first principles perspective. Leveraging our previous experience with Android, we redefined a new visual style for our app. We adopted a design system approach from the outset, rather than simply reapplying existing designs. While implementing this approach, we encountered a few learning curves specific to the platform.
We managed to design the new app within a quick five-week design phase. We tailored interactions specifically for the iOS platform.
Web
Another oppurtunity arose to implement our design system.
To boost user acquisition from web to app, we were tasked with revamping selected flows in our web platform. We seized the opportunity to integrate the fresh look.
The web version received a makeover, incorporating new components with updated visual styles.
Following the implementation, we observed 6.7% increase in website-to-app conversions and a 5.3% increase in reader activation.
Android
In the end, we approached Android in careful and deliberate manner.
To tackle existing design debt, we prioritized high-impact screens initially, gradually extending changes to other screens while concurrently crafting and integrating guidelines into the system. We made rollout plans alongside product features, taking a multi-year approach. To ensure continuous progress, we allocated 10% of each sprint's development resources to the design system.
In terms of implementation, our technical teams prioritized code refactoring as the initial step, followed by UI adjustments. This sequential approach enabled us to meticulously track the impact of each modification on product metrics, thereby reinforcing the rationale behind our decisions.
The Spine Design System has provided Pratilipi with a simple, stable, and scalable foundation. The journey is ongoing, and we are committed to continuous iteration.
Learnings
A design system is not a design project. It is an infrastructure project built for efficient product development.
When you are building a design system for the first time in an organization, advocacy is more important than anything.
When an organization want to invests in a design system, timing is essential.
A design system is indispensable for scaling product development.
Make the scope for a design system based on your organization's requirements, context, and constraints. Don't create a generic scope.
A design system is never finished.
©️COPYRight 2024