Vedantu Design System: Scaling Edtech with 40% faster rollouts

Background

This case study captures how we built the Vedantu Design System to streamline processes, enhance learning experiences, and support scalable growth.

My Role

I was part of the engagement pod that worked on bringing free users onto our platform and increase retention rate. I juggled between working on feature designs and leading the team of 2 designers in building the design system.

Design Advocate: My role in the design system team was to gain support and buy-in from stakeholders and ensuring there was communication within the design team. Also, driving the implementation of design system.

Our team was doing all it could to stay on top of monthly deliverables, and our capacity was maxed. Hiring dedicated designers to do the job was not an option and hence we had to make time by taking on fewer deliverables each month.

Visual Design: So I began by determining the best way to build a component library that the design team would contribute to easily. Once this was done we shifted our focus on building the design system.

We sat with the front end development to walkthrough this project and understand various challenges. The design system began as a series of components and guidelines grouped in to specific categories. With a defined structure and information hierarchy, we were able to start UX documentation together. 

Design System Management and Documentation: Creating and maintaining clear standards and guidelines to help people understand how to use the system.

Tools 

Figma: Where we designed all component and pattern libraries and built prototypes to demonstrate interactive elements.

Storybook: Where we housed all of our documentation and usage guidelines.

Challenge

As Vedantu expanded its offerings in live learning and test preparation for JEE, NEET, and school curriculums, it experienced a growing number of stylistic issues which highlighted consistency concerns. Colours and fonts were not well defined and the way we handled components differed from page to page. Rapid product iterations, inconsistent UI patterns, and a growing need for accessibility in education platforms underscored the necessity of a design system.

This case study captures how we built the Vedantu Design System to streamline processes, enhance learning experiences, and support scalable growth.

Goals

1. Consistency: Create a unified design language across platforms.
2. Scalability: Facilitate rapid feature development and design handoff.
3. Inclusivity: Ensure the platform is accessible to students of varying needs and backgrounds.
4. Engagement: Support interactive learning experiences with visually engaging and intuitive interfaces.

Results

The Vedantu Design System had a transformative impact on our design and development workflow:

• Adoption Rate: Within six months of its introduction, the Vedantu Design System was adopted by over 90% of developers and designers in our organisation.
• Faster Rollouts: Re-usable components and design patterns reduced the design to implementation by 40%, improving our product development cycle.
• Consistency: The design system's guidelines and reusable components ensured a consistent user experience across all our products, enhancing our brand's visual identity.
• User Satisfaction: The consistent look and improved usability led to high appreciation by our students.
• Reduction in Redundancy: The new Design System reduced redundancy in our design process, saving up to 40% in time and resources.
• Speed of Onboarding: The new Design System led to the reduction of onboarding time for new designers and developers by 60%.

Getting Started

Interface Inventory

To begin systematising the interface, a teammate and I conducted an audit of designs that were being built or the ones that were already rolled out from mobile and web platform.

The purpose of this was to collect a visual inventory that documents inconsistencies and defines the essential design patterns and elements. This information was the basis for determining components and patterns.

Market Research

After analysing our interface inventory, we looked externally at other design systems. We explored established design systems, such as IBM’s Carbon and Atlassian, Skyscanner's Backpack, to learn from their approach and structure. With the oversight of our design team, we thoughtfully defined the three main parts of our design system: Foundations, Components, and Page Templates.

Accessibility

As one of our core design principles, accessibility was top of mind from the start. We built this system to meet and exceed the accessibility standards outlined in the Web Content Accessibility Guidelines (WCAG). During our internal review sessions, the design system was pressure tested for Level AA and AAA compliance. Areas we focused on specifically included colour contrast ratios, input feedback, and content accessibility. 

Structure

Foundations

Foundations were the system basics, they consisted of brand-specific visual elements such as:

• Colour

• Typography

• Spacing

• Grid Systems

• Icons

• Elevation/Shadows

Aligning on and adhering to Foundations enabled teams to achieve visual coherence and seamlessness across the board.

Components

We worked on UI elements (buttons, form fields, etc.) based on our findings. Then worked on the UI elements which could come to use in the future projects based on our team's inputs.

Each component had thorough documentation, specifying interactive states, minimum and maximum content, additional breakpoints, tab stops, and more.

Documentation

After defining and designing the Foundations, Components, and Page Templates, our next challenge was to ensure our system included proper documentation and governance around brand implementation.

We created and maintained documentation resources in Storybook, working closely with our team to ensure we met their specific needs. The documentation included:

• Our Design principles

• Quick start guides

• Component usage and guidelines

We rolled out the system incrementally, starting with the most frequently used components to maximise impact.

A snippet of how we wrote our guidelines for component libraries. We followed the same structure for all other components.

Evangelization, Feedback, and Iteration

One of my primary responsibilities was socialising the design system with different stakeholders and teams. It was important to articulate the design system benefits in various contexts and provide team-specific resources to improve their workflows and processes.

For example: When presenting to leadership, I focused on demonstrating and quantifying the cost of inefficiencies and how implementing a design system would enable us to meet business goals faster and lower costs.

Additionally, my teammate and I held feedback sessions with pod specific teams who had first-hand experience using the components to build websites-to assess which elements were working and which needed improvement.

We also worked closely with our development partners to implement changes to evolve and improve upon the system.

My goal was to anticipate the needs of various teams and provide resources that show how the design system can alleviate their specific pain points.

Key Takeaways

Being flexible: While the design system improved workflows, initial adoption was challenging and teams needed training to fully utilise the system.

Design systems are a living, breathing thing: They require a dedicated team actively involved in their growth and maintenance. Getting buy-in from cross-functional teams and driving system adoption are worthwhile challenges.

Collaboration is key: To evolve the design system, it is critical to connect with fellow members of the design team and understand the changes required to improve the system.

Conclusion

The Vedantu Design System not only streamlined internal processes but also transformed the learning experience for students and teachers alike.

By prioritizing consistency, scalability, and inclusivity, we built a system that supported Vedantu’s mission of making quality education accessible to all. It continues to evolve, driving engagement and innovation in online education.