Shaping Exoverify's scalable design system, integrated across multiple products
Design System
Design Strategy
Web Design
Overview
We designed a modern & scalable design system for Exoverify, incorporating brand colors, fonts, styles, icons, and more. This elevated the system's visual aesthetics while enhancing user-friendliness and functionality across Exotel's product suites.
My Role
Given the responsibility, I initiated the creation of a comprehensive design system library for the emerging Exoverify platform. Simultaneously working on the platform, I proactively designed a new system from the ground up, serving as a foundation for efficiently designing other suite products while ensuring consistency across the entire product line through careful attention to detail.
Team
1 UX Lead, 1 UX Designer
Timeline
Februaury 2022 - April 2022
Short brief about Exoverify
Exotel, a prominent player in global communication, launched Exoverify, a dynamic sub-brand dedicated to providing cost-effective and efficient authentication for apps and digital platforms. Through services like nOTP, SMS OTP, and Voice OTP, Exoverify assists businesses in verifying
consumers and screening out unverified users.
Creating a design system more coherent
The success of any project relies heavily on fostering positive relationships with different teams. While technical requirements are important in a design system, the crucial element lies in adoption. Without adoption, the system serves little purpose. Therefore, it's imperative to establish an environment
where individuals feel comfortable expressing their needs and concerns, and where active listening is valued.
Even while building design system, we followed a principle
To create and build this design system from ground up, we adopted Atomic Design principles.
Why this approach?
We selected this approach for its adaptability, emphasis on user validation and efficiency in development.
Atomic Design for scalability & adaptability
This method allowed us to ensure UI consistency across Exoverify’s products while facilitating rapid development and future growth.
Broke down the UI into atoms, molecules, and organisms, creating a modular design language that supports easy adaptation and iteration.
We have significantly focussed on creating the design tokens such as design component, including colors, typography and more. This process was crucial for streamlining the design to dev handoff, creating a shared language between designers and developers.
Colors
Our color palette is designed for vibrancy, creating contrast to draw attention to specific page elements. Consistency is maintained throughout the entire application, providing a unified and cohesive product feel.
Typography
Text serves as the primary means through which people visualise content and accomplish their tasks. Consequently, we have formulated a typographic landscape that employs system fonts for all standard typefaces.
Components
These types of components are vital for user interfaces, enabling actions, navigation, and content organization, enhancing overall user interaction and control.
Icon Library
Icons serve as a visual depiction of commands, files, devices, directories, or common actions, contributing visual context to enhance usability.
Input Elements
Input elements enable users to interact with and input content and data. These types of elements are used mainly in forms, filters, etc.
Tables
This component in UI design presents data in a structured grid, offering an organized and efficient means of displaying and interacting with information.
Navigations
Navigation offers intuitive pathways for users to explore and access different sections, enhancing overall ease of interaction and user experience.
Achievements
We adhered to a sequential approach in developing the design system, encompassing the following steps:
Created and released the initial version of the product’s component library.
Componentized key elements, providing other designers and developers with a library to enhance productivity.
The implemented design system contributed to improved product consistency and performance.
Learnings & Takeaways
Creating and managing design systems at scale.
Acquired knowledge on establishing a design system, its components, customizable elements, disseminating the library, and supporting fellow designers in its implementation.Balancing pace and perfection.
Given the project’s rapid pace, it was essential to find a harmonious balance between meeting tight deadlines and addressing critical details.Receiving feedback and iterating.
Regularly collaborating with the design team, developers, and stakeholders to gather feedback on constraints and requirements, facilitating iterative adjustments and revisions for building the design system.