Creating a Design System for an Enterprise Software Startup
Designing UI components for the main platform.
Overview
When I joined the Sprinklr team, it was in the early-stage startup. At this stage, many startups usually don’t have documented libraries for the main platform components. This becomes a big challenge for the company as well as the employees.
Everybody was trying to adopt the fast work culture and deliver solutions as soon as possible. The fast pace environment and need to deliver a new platform was causing neglect in the consistency and documentation of UI components.
Aim
The main aim of this project was to create a Design System where all the teams can go and have access to the regular patterns and building blocks of the entire platform.
This makes it easy for the design as well as engineering teams to implement and adopt the changes in the products.
Role
UX/UI Designer
Patterns, and component creation, Typography, Colors and interactions
Project Duration: 4 months
The Problem
There were many different patterns and components already implemented in the code. However, most of these components did not have any design and UX guidelines in place.
Engineers had to come up with their best ideas to build UI components or they just ask designers for a new component. This caused a lot of visual inconsistencies and user experience issues across the platform.
My role in this project
Team: 4 designers, 1 graphic designer, 1 lead engineer, product manager
For this project, I worked very closely with the front-end engineers, managers, and other 3 designers. We conducted a detailed platform study to analyze the existing patterns and use of components. Also addressed main pain points and created a plan to start building a common design library.
In the beginning, we started with the one-week marathon and then design sync meetings every week so everyone was on the same page. This helped us monitor progress and align our work to create components based on common decisions. Sync meetings improved the communication, transparency, and efficiency of the team’s workflows.
The opportunity to create & standardize design guidelines
Challenges…
Lack of consistency with our main components across the main platform.
Some modules looked as if they were part of different applications due to variations in similar patterns.
Long time to define the best UX practices and consistent UI across the platform.
Lack of clarity on design guidelines.
Difficult to change existing UI components where clients are already used to it.
Background study
Existing platform analysis: We already had some components, however, we analyzed all the components and UI patterns across the platform and made a list.
Scope: We divided the components into major categories and decided to focus on each one of those in phases.
Few UI components from the existing platform
Speaking the same language!
Colors and Text
We followed the Design Thinking process
Goals
Showcase a single underlying design system that unifies the user interaction patterns, user experience, look and feel across the platform.
To provide a design guidance
Build a bridge between designers and developers
Other UI Components
The Outcome
After four months of hard work and commitment, the team was able to build more than 200 UI components that brought consistency, cohesiveness, and transparency to the team’s dynamics. This increased collaboration and communication to implement design components into the front-end.
The clear documentation of inventory was made of all the UI components used in the platform that resulted in a reduction of front-end bug fixes.
Inventory helped to reduce the time developers have to implement components into the UI. It also increased the overall productivity of both the design and development teams. Overall, it resulted in consistency across the platform.
