Building EntriVerse: A Journey Towards Consistency and Efficiency
Arun Sajeev 5 min read · Feb 22, 2024
Introduction
Entri App stands as a beacon of vernacular learning in India, empowering millions with the skills and knowledge necessary for career advancement. With courses ranging from Spoken English to competitive exam preparation, Entri is dedicated to bridging the gap between aspirations and achievements.
We embarked on a transformative journey to create EntriVerse, our comprehensive design system aimed at enhancing user experience and streamlining development processes.
The Team
EntriVerse wouldn't have come to fruition without the collective effort of our talented team. I had the privilege of working alongside Niyas, Priyanka, Sahil, Nizar, and Anu, whose dedication and creativity were instrumental in bringing our vision to life.
Problem
Our journey began with a critical evaluation of our existing design landscape. We identified a lack of dark mode functionality and inconsistencies stemming from designers working in silos, each adhering to their unique style.
These challenges hindered user experience and impeded our ability to scale effectively.
Success Metrics
We established time saved by designers using EntriVerse components and tokens as a key success metric. This metric provided tangible evidence of the system's impact on our workflow efficiency.
Process Overview
Step 1: Audit and Evaluation
Our journey towards creating EntriVerse began with a comprehensive audit of the Entri app's existing design assets. This involved scrutinizing every screen, component, and color scheme within our Figma files.
Through this audit, we gained a holistic understanding of our design landscape, identifying areas for improvement and optimization.
One significant challenge we uncovered during this phase was the lack of accessibility in our color palette. Our primary color #59A1C9 failed to meet WCAG accessibility standards, reflecting a broader issue with color contrast ratios across the app.
This realization underscored the importance of not only addressing immediate design inconsistencies but also prioritizing accessibility and inclusivity in our design decisions.
Step 2: Color Palette Refinement
Armed with insights from our audit, we embarked on refining our color palette to align with accessibility standards and enhance visual coherence.
We meticulously crafted color ramps for both primary, secondary & neutral colors, ensuring optimal contrast ratios and readability across various interface elements.
Figma variables played a crucial role in this process, allowing us to create and manage color tokens efficiently.
By leveraging Figma's variable feature, we established a scalable system for color management, enabling seamless updates and consistency maintenance throughout the design process.
Step 3: Design Token Definition
With our color palette finalized, we turned our attention to defining design tokens that would serve as the foundation of EntriVerse.
Design tokens serve as the foundational elements of a unified design system, encapsulating values for colors, typography, spacing, and other essential components.
We categorized design tokens into three distinct types.
Global Tokens
Global tokens are like building blocks for our design system. They're the consistent values we use everywhere, from colors to spacing.
They make sure everything looks and feels the same across our designs.
Reference Tokens
Reference AKA Alias tokens provide more intuitive names for design values, enhancing clarity and accessibility for designers collaborating across different projects.
By establishing meaningful aliases for key design elements, we fostered a shared understanding and streamlined communication within our team.
Component Tokens
Component-level tokens offer granular control over specific design elements, such as buttons, cards, and form fields.
By defining reusable styles and properties for these components, we ensured consistency and efficiency in our design workflow.
We made 2 modes to map light and dark colors with the tokens. By setting up all the tokens, we could easily switch to dark mode for our screens.
Figma's variables helped us manage these tokens, making it easier to keep our designs consistent and adaptable for different projects.
Outcome / Metrics
The implementation of EntriVerse yielded tangible outcomes.
- Increased design delivery speed
- Reduced development time
These improvements underscored the system's efficacy in enhancing productivity and collaboration.
Key Learnings
Our work with EntriVerse showed us that a design system isn't fixed — it's always changing to fit new needs.
By understanding this, we were able to make our design process more flexible and resilient.
Because many designers are involved, we made a change log page to keep track of all the updates to the design system.
Conclusion
In conclusion, EntriVerse stands as a testament to our commitment to excellence and innovation.
By harnessing the power of design systems, we have not only transformed the Entri app's user experience but also laid the foundation for future growth and success.
EntriVerse exemplifies our unwavering dedication to empowering learners and shaping the future of education.
As we continue to evolve and innovate, Entri remains steadfast in its mission to make learning accessible, engaging, and impactful for all.