Component Library V3

Providence is component library that empowers teams to deliver products faster

New design trends, accessibility standards, and interaction patterns demanded component adaptations. To optimize user experiences, we focused on performance and accessibility. Our expanding product suite required additional components, while developer feedback highlighted areas for improvement. Addressing these factors transformed the component library into a more robust and versatile tool for our design and development teams.

Industries

Financial Services
Fintech

Services

Standard Visual Language
Multi-device and Inclusive
Web Components

Platforms

Responsive Web
Angular, Vue
Ember or HTML

Timeline

6 months

My Role

  • Established a foundational set of reusable UI elements (buttons, inputs, logos, etc.) with WCAG 2.1 standards for accessibility.
  • Created adaptable components to accommodate different screen sizes, platforms, and user interactions from V2.
  • with evolving design trends and user needs.

Team

  • Chitranshi (me) – UX Designer, India
  • Little Ken – Senior UX Designer, Ireland
  • Laura – UX Vice President, US
  • L Sai Mahidhar - Developer, India
  • Chris - Developer, US

CHALLENGES

Based on Enterprise requirements
  1. Inconsistent Design Patterns:
    • Existing components lacked a unified design language.
    • Inconsistent usage and styling across products.
  2. Poor Accessibility:
    • Components didn't meet accessibility standards.
    • Users with disabilities faced barriers in using our products.
  3. Technical Debt:
    • Outdated code and inefficient development processes.
    • Difficulty in maintaining and updating components.
  4. Lack of Governance:
    • No clear ownership or decision-making process.
    • Components were created and updated without a unified vision.

PROPOSED SOLUTION

  1. Establish a Unified Design Language:
    • Develop a clear design system and guidelines.
    • Ensure consistency across components and products.
  2. Implement Accessibility Standards:
    • Conduct accessibility audits and implement best practices.
    • Ensure components meet WCAG 2.1 standards.
  3. Refactor and Modernize Code:
    • Update components to use modern web technologies.
    • Improve performance, scalability, and maintainability.
  4. Define Governance and Ownership:
    • Establish clear roles, responsibilities.
    • Ensure ongoing maintenance and updates.

RESEARCH GOALS

Conducting Design Library Research Survey

As I embarked on this design library project, I knew it was crucial to understand the needs, pain points, and goals of our team members and stakeholders.

Empathize

Conducting User interviews to define scope

By speaking directly with the people who would be using the design library, I was able to gather rich, qualitative insights that would inform my design decisions and ensure that the final product met their needs.

Synthesize insights

JOURNEY MAPPING

The User's Path: Mapping the User Jounrey to a Better Design Library

By mapping this journey, I aimed to identify the pain points, inefficiencies, and areas of frustration that our users faced. I wanted to understand where they struggled, where they felt lost, and where they wished for a better experience. By taking the time to create a journey map, I gained a deeper empathy for our users.

IDEATION WORKSHOP

I organized an ideation workshop - to bring together designers, developers, and stakeholders in a collaborative and dynamic environment.
The workshop allowed us to think outside the box, build upon each other's ideas, and create a shared understanding of what our ideal design library could look like. Through this collaborative process, we were able to distill our ideas into actionable concepts that would ultimately shape the design library's future."

DESIGN AND DEVELOP

Consistency, Cohesion, and Clarity: Design Principles

Establishing clear design principles was a crucial step in creating our design library, as it ensured that our design decisions were guided by a shared set of values and goals.

VISUAL COMPONENTS

Redefining components: Icons, Typography, and More

By speaking directly with the people who would be using the design library, I was able to gather rich, qualitative insights that would inform my design decisions and ensure that the final product met their needs.

ACCESSIBILITY

Accessible Design Library: Creating a Barrier-Free Experience

By creating these archetypes, I aimed to ensure that our designs were accessible to everyone, regardless of their abilities or disabilities. I wanted to empower our designers and developers to create products that were not only visually appealing but also usable by the widest range of users possible.

WCAG

Integrating WCAG into Our Design Process

By embracing WCAG guidelines, I learned to design with empathy and understanding, recognizing that accessibility is a fundamental human right. Through this journey, I discovered that inclusive design isn't just about checking boxes, but about crafting experiences that empower and uplift everyone.

USABILITY

Build and Test Components: Collaboration with developers

Furthermore, I established a rigorous testing process, which included peer review, usability testing, and cross-browser testing, to guarantee that our components worked seamlessly across different environments.

PUBLISHING

Integrating Components: Design and Code

Established clear guidelines for implementation, making it easy for teams to integrate the components into their work. By taking the time to thoroughly integrate our components into the library.

LAUNCH AND ACHIEVEMENTS

  1. Launch the Upgraded Component Library:
    • Deployed the new component library to production.
    • Ensured seamless integration with existing products and systems.
  2. Conduct Post-Launch Review:
    • Gathered feedback from stakeholders and users.
    • Identified areas for further improvement and iteration.
  1. Establish Ongoing Maintenance:
    • Scheduled regular updates and maintenance.
    • Ensured the component library remains aligned with evolving design systems and technological advancements.
  2. Measure Success:
    • Tracked KPIs and measure the component library's impact.
    • Refined and iterate the component library based on data-driven insights.

“Big props to the design team for creating a library - you've made our product shine!”

The design library has been instrumental in ensuring design consistency across our products, led to a significant improvement in user satisfaction. The library's flexibility and scalability have also enabled us to quickly adapt to changing product requirements.

Soumya Raj

Product Owner

“You're the unsung hero of our design team - thanks for pouring your heart into this library!”

The design library is a testament to our team's commitment to excellence and user-centered design. It's a valuable resource that will continue to elevate our design standards and enhance our product's overall user experience.

Laura M

Vice President

“Your tireless efforts on this library have been the driving force behind its excellence - thank you!”

The new design library is a game-changer for our team, providing a unified design language and streamlining our design process. Kudos to Chitranshi, the UX designer, for her tireless efforts in bringing this vision to life!

Ken

Design Director

“Thanks for making my job easier, design team - this library is a total lifesaver!”

The design library has significantly improved our development workflow, making it easier to implement consistent and accessible designs. The clear documentation and reusable components have saved us countless hours of development time.

Harsha

Senior Developer

Thank you for making it to the end!
Next Case Study