Aug 1, 2023
Deep dive into my work process
With NinjaKit, Coding Ninjas is stepping up its game. We're using smart colours that make sense in every situation, easy-to-read fonts that work on any device, and tools that make our marketing shine. It's all about making things accessible for everyone, making sure our brand looks the same everywhere, and keeping things simple and efficient.
We're tackling design problems head-on and making sure that everything looks great and works well. This means a better experience for our users and a smoother process for our team.
In short, NinjaKit is all about bringing our digital world together in a way that's easy to use, looks great, and gets the job done right.
Background
Coding Ninjas is an Ed-tech company based in Gurugram that offers coding courses and programming bootcamps to students and professionals.
Purpose
This case study focuses on the design system called the Ninja Kit that was developed to maintain design consistency and improve efficiency in the development process.
Objectives
Create a unified visual language and design patterns for Coding Ninjas' digital products.
Streamline the design and development process by providing reusable components and guidelines.
Enhance the user experience by ensuring consistent and intuitive interactions across different platforms.
Benefits
Consistent Branding: The Ninja Kit ensures that all Coding Ninjas' digital products have a consistent and recognizable brand identity.
Efficient Development: By providing pre-designed components and guidelines, the Ninja Kit reduces the time and effort required for designing and developing new features.
Improved User Experience: The Ninja Kit promotes consistent interactions and user interface elements, resulting in a more intuitive and user-friendly experience.
Design System File
Background information
The project involves the development of a design system for Coding Ninjas, an Ed-tech company based in Gurugram. The design system will provide a consistent and cohesive visual language for all the company's digital products and platforms.
My role
As design system manager, my role is to provide an overview of the design system project, including its objectives, key components, and benefits. I will be also discuss the process of creating the design system and its impact on the company's brand and user experience.
Visual Design: Designing and fine-tuning interface elements to optimize the user experience.
Design System Management and Documentation: Creating and maintaining clear standards and guidelines to help people understand how to use the system.
Design System Advocate: Consistently collecting feedback and providing resources that enable system adoption for teams across the organization.
That changed users’ behaviour
By making the design system a single source of truth for the builders — designers and developers — we made a positive impact on how end users interact with Coding Ninja's platform:
Increased product consistency & reliability: we improved the consistency and predictability of our predictive insights products, by increasing the coverage of the design system for the products from 30% to 80%.
Reduced customer confusion: we received 23% less complaints related to confusion with the product. These were based on feedback review sessions between the design team, the Head of Product and the CTO.
Higher customer’s perceived value: within 6 months of the design system’s adoption, the customer’s perceived value of the product grew by 20% through the products’ consistent and high-quality user experience.
Increased customer satisfaction: by providing a more consistent and cohesive user experience, our customer satisfaction metrics grew by 10%.
And implemented these business goals
Overall, the introduction of a design system at Coding Ninjas has been a success since its implementation in November 2022, resulting in improved user experiences and greater efficiency between the design, engineering and sales teams.
Increased usage of design system components: the number of pages & features that use design system components grew from 9% to 78%.
Shorter design and development time: it takes 37% less time to design and develop new features, since it is now it easier for teams to use and implement pre-designed system components.
Increased team collaboration: the level of collaboration between design and development teams grew by 25% in the first 6 months since they had a shared set of tools and guidelines for them to use.
Reduced design inconsistencies: the number of design inconsistencies reported by users or identified during QA testing decreased by 50% in the first six months within adaption.
Increase in product design consistency: the consistency of designs across different products has grown by 50% within the first 6 months since all designers have access to the design system, and it’s elements are inherited across all product design files.
How I did it
Research & Definition
To begin, we conducted research to spot the main goals and pain points that our products’ internal stakeholders (designers, developers, product managers, marketing managers etc.) experienced. This is what we found:
“I keep redesigning pages that have the same elements because they all look different,” — a Product Designer
“I can’t re-use a component from another project, since they don’t have a similar structure,” — a Front End Engineer
“Our products have many inconsistencies in colours, fonts, components, guidelines…, which is creating detrimental effects on the overall user experience & the brand image,” — a Senior Tech Officer
After this, we identified common design patterns and elements across our products. This included creating a UI inventory of our main interface components. We then used this information to create a priority list for our design system MVP.
The MVP list of elements to be included in the design system
This audit activity helped us identify inconsistencies in our design assets and highlighted the need for a more systematic approach to documenting, communicating, and maintaining our design system.
With whom I collaborated with
I collaborated with a cross-functional team to create the design system. The team included the following members:
Product Managers: They provided insights into the business goals and objectives of the design system.
Developers: They ensured that the design system was easily implementable and consistent with the company’s technology stack.
Researchers: They conducted user research to understand the needs and pain points of our target audience, and used this information to inform the design decisions.
Other designers: They ensured that the design system aligned with the company’s branding guidelines and visual identity, and provided feedback and suggestions to improve the design system.
Collaborating with a cross-functional team allowed us to create a design system that met the needs of all stakeholders and provided a consistent and cohesive user experience for our customers.
Special Thanks to
I would like to extend my heartfelt gratitude to Komal Rajput and Shashwat Bahl for their invaluable contributions throughout the journey of building our design system. Their dedication and feedbacks have been pivotal in shaping its success.