Overview - A leading multinational bank (2023)
A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared library and visual consistency across different pages and platforms.
Design System
My Role
We worked on creating a consistent design system by working closely with a design lead and developers to turn designs into reusable products, using Figma as the primary design tool. My primary role was as a User experience designer.
Team
Mallika Mujgule, Sparsh Roy, Dhiren Rao, Vidushi Verma and Mayank Barolia
Software
Figma and Notion
UX Methodologies and Techniques
Specific components of UX research
UI design
QA of implementation
Style Guide
Pattern library
UI Inventory
UX Audit
The challenge
Every time we started a new project or a new phase of the project, we had to start from scratch. This would require creating a fresh component library each time. This meant that we were developing the same components again, with the look changing each time to fit functionality.
We needed to recreate old components.
Collect all previous use cases and develop use cases for each component.
Recreate old components
Gather all old use cases and create use cases for each component
The Benefits
It provides one spot to see components, patterns, and styles.
Recent modifications to the same projects may be redesigned and managed at scale using the design system.
The ability to swiftly recreate designs using pre-made components and parts.
Design resources can be used to focus on complicated challenges and answers rather than simply altering visual appeal. This maintains visual and functional consistency throughout the project and designs.
Reduces lost design or development time due to miscommunications.
Reducing the necessity of reinventing the wheel and reducing inconsistencies.
The style guide consisted of
In-page annotations (how we document and layout each component within the library)
Branding (colors, typography (Web & Mobile, Logos)
Spacing guidelines
Layout grids
Icon pack
Border radius guidelines
These style guides are incorporated into the component library as well, to provide relevant guidance in context.
The entire team worked together to create a component list that included the common components utilized in the projects as well as any new components that may be required in the future. Creating this library required a great deal of effort and resources.
The component library consists of:
Component name:
A specific and unique UI component name, to avoid miscommunication between designers and developers. This needed to be clear so that the components would work as they were supposed to without error.
State changes:
Recommended defaults and the subsequent changes in appearance.
Note making:
Page annotations and descriptions to understand what component you were looking at.
Each component would have variants, and each variant has nomenclature, so when it came to publishing the components, it made it easy to understand the state changes and what you could turn off and on to get the desired component to work efficiently and effectively.