.png){kind=small}
Design System
Mohan Vamsee Gunthati
Product Designer
​
Problem Statement
Joined for a Customer System Department to build an Application with Overview Dashboard and other inner pages to create and monitor Data Models for Data Scientists. When I joined and tried to initiate the designing, I realized that there is no design system and guidelines to build the application. Hence to make it more versatile and reusable components across the organization, I have got opportunity to initiate and build complete design system end to end. Due to inconsistency of components on various applications within same organization, the look and feel, is very dierent and wanted to bring same consistency across all the products that were existing
Responsibilities
I was part of a cross-functional team that had weekly meetings to sync about this initiative and my duties varied from research, denition, UI design, Documentation. I have to co ordinate with various level of users to nd out the appropriate guidelines from the brand and make sure to follow the same, especially accessibility.
Challenges
Inconsistent Design
Lack of Design Guidelines
No Code & Design Re-Use
Iterations
Benets by Creating Design System
Consistent Design
Single source of truth •
Less UI bugs
Accessibility is built-in!
WCAG Compliant
Faster time to market
Reduced design iterations • Ship applications faster !
Highly Customizable
Modular Design • Congurable
.png){kind=small}
Ability to Scale and
Grow Faster
Scale up with demand • Faster iterations
Common Design Language
Consistent look and feel
​Increased Reusability
Scale up with demand • Faster iterations
Iterative Design
Build • Learn • Adjust
The Process
The process followed when solving this problem consisted of 3 phases
Research
We learned the common standards that represent a successful design system.
Definition
We defined the elements structure and guide of use.
.png)
Design
We designed the components and created an organized library.
Research
To better understand the dierent problems in the product, I have conducted interviews with people from dierent departments (Front end developers, Product Managers, Engineering managers, Marketing manager).
After these initial interviews, it was discovered that we need to:
-
Identify all the design issues in our product
-
Learn the common standard and principles of a successful design system, to suit the client's internal applications.
Visual Analysis
Started by auditing our product on dierent platforms; i.e, we listed out all instances of particular components (Buttons, dropdowns, input elds, etc) on the dierent pages and ows. Besides, we interviewed a couple of front-end developers and designers to understand their main goals and pain points to implement the same and understanding any technology constraints.
Inconsistency
Product had many inconsistencies, be it in colors, components, guidelines, accessibility etc., which can have detrimental eects on the overall experience & the brand image.
Redundancy
For designers, not having a library of components means you’ll have to do repetitive design work to create product screens. This also applies to the implementation, since developers would have to spend more time and eort to create new components.
Rigidness
In-existence of a buttons’ hierarchy nor a clear structure for the dierent states of the components used across platforms.
Part of our company’s values is being user-centered. For that, we attended a weekly meeting to discuss and stay updated with the user feedbacks that come through dierent sources.
Definition
To learn the proper approach for the denition of the structure and guidelines of the components, we set up a team of designers and engineers. Our high-level objective was to have a set of elements that could coherently co-exist within a larger system, which is why we adopted the Atomic Design methodology.
Building the structure
For our application of the Atomic Design approach, we used Notion to list out the entire components that are used on our platforms in a table and organized them into an initial structure of atoms, molecules, and organisms.
We started with atoms, the smallest units, that will be the foundation for our design system; namely typography, colors & spacing.
.png)
.png)
.png)
Design
Creating Components
For the creation part, we made sure that each of our components is:
Accessible
For that, we needed to evaluate the text and background color combination based on the WCAG recommended ratios. High color contrast helps users who are partially or completely color-blind see differences between certain colors. It creates a strong visual hierarchy and improves usability for everyone. More than that, we are using a caps style for characters on CTAs as well as comfortable character spacing to enhance accessibility. Also tested voice-over features, to make sure each component is accessible complain
Intuitive
To have an intuitive experience, we are following the adaptive design approach. This means that our components are platform-friendly. For example, the drop-down component is made especially for the desktop and mobile platforms.
Aesthetic
Stepping up UI is a must according to Jakob’s law, since the websites and applications our users use frequently have a modern visual look. i,e. clean and minimal design, rounded corners, vibrant colors, smooth shadows etc.
Core Design Principles
Color Palette
Accessible compliant color system with primary, secondary, and support colors
Typography
Typographic scale for all the information presented on the screen
Layout
Responsive grid system with utilities to create complex layouts
Sample Buttons Template
_edited.jpg)
Impact
Working on design system has been very challenging, but it has brought about many positive benets for the client on dierent levels.
Development
This simplied the life of developers. Speaking one language with the design team when discussing implementations. Focus on the feature not the low-level UI primitives (color & space values, small components, interactions, states, etc).
Design
Having a ready-to-use library of components made creating high-delity interfaces a straightforward task by bringing designing interfaces from days to a couple of hours.
Experimentation
The design system allowed us to quickly build prototypes, test more ideas than before, quickly evaluate our hypotheses, and even create more variations to A/B test.
For the user
​The points mentioned above are all related to internal aspects of the company, whereas the sought impact can be seen in the improvement of our user experience. Of course, this impact was accompanied by other initiatives and the amazing collective eorts of the dierent departments
Reflections
The process of solving this issue has been a major learning ground. Also this initiative spread wide across organization and lead to utilize the same design system to utilize for many applications across organizations. In fact this design system, eventually engaged with more designers, technical writers, and formed a portal to get the look and feel of all the working components to understand how components react and behave while interactions.
Here are a few of the challenges:
-
Limitation of time and resources. ​
​
-
Considering the bilingual property of our components since our product is available in 2 languages.
​
-
Getting everybody on the same page and working together as a unit. Coordination between designers, developers, and other stakeholders.