Menu

Data security

Scaling with purpose : How a Design System Transformed Our Workflow

15 % drop in error and 20% increase in component usage in 6 months

Overview

Client

Aurva

When

Jan to April, 2024

Model

B2B- SaaS Website and Web App

Responsibility

UX Research, UI Audit, User Testing, Prototyping, Documentation

Key Deliverables :

UX Audit , User Flows, Wireframes & Prototypes, Style guide and tokenization Component Library, Design System Documentation

+20%

Component Usage

-15%

Drop off

Before images of the web app and Website

About Aurva

Aurva aims to equip organizations of all sizes with AI-driven data security solutions that are both seamless and swift. Recognizing that data breaches can occur unexpectedly, its mission is to ensure your security remains vigilant at all times. Aurva is dedicated to delivering solutions that effortlessly integrate with your current systems, offering you the peace of mind you need.

Target Audience

Direct Users

  1. Fintech companies - Bigger interprise with data security needs

Indirect Users

  1. Gaming companies - Payment processors for in-game purchases use Aurva for security, Cloud gaming services use Aurva to secure user data, Subscription platforms use Aurva to protect gamer information.

Challenges

Problem Statement

Aurva needed a scalable, efficient design system that could support its rapid expansion and growth across geographies and industries. The existing design framework was not optimized for the pace and scale of feature rollout required to meet the growing demands of the platform.

Business Goals: Enhance Aurva's scalability and efficiency with a design system for faster feature development, reduced redundancy, and improved collaboration, leading to higher user satisfaction.

My Role & Objectives

My Role and Objectives

As Product design intern at Aurva, my mission was to spearhead the transformation of their digital product experience and establish an end-to-end UX strategy to facilitate the company's rapid growth.

Process

To navigate the complexities of redesigning Aurva's website and establishing a robust design system, I adopted a strategy that merged the Lean UX design process with Atomic Design principles.

Why this approach?
This approach was selected for its adaptability, emphasis on user validation, and efficiency in development.

The rationale behind each:





  • Atomic Design for Scalability
    I implemented Atomic Design principles to construct a scalable and foundational design system.

    • Implemented Atomic Design principles to build a scalable design system.

    • Ensured UI consistency across Aurva's products, supporting rapid development and growth.

  • Lean UX Design Process
    Adopted the Lean UX cycle: exploring problems (Think), creating solutions (Make), and validating with users (Check).

    • Enabled quick testing, refinement, and alignment with user needs and business goals.

    • Maintained a lean design ecosystem by avoiding redundancy and ensuring each component's distinct purpose.

Why this approach?
This approach was selected for its adaptability, emphasis on user validation, and efficiency in development.

The rationale behind each:





  • Atomic Design for Scalability
    I implemented Atomic Design principles to construct a scalable and foundational design system.

    • Implemented Atomic Design principles to build a scalable design system.

    • Ensured UI consistency across Aurva's products, supporting rapid development and growth.

  • Lean UX Design Process
    Adopted the Lean UX cycle: exploring problems (Think), creating solutions (Make), and validating with users (Check).

    • Enabled quick testing, refinement, and alignment with user needs and business goals.

    • Maintained a lean design ecosystem by avoiding redundancy and ensuring each component's distinct purpose.

Lean UX design process tied with Atomic Design principles

Solution

The Aurva Design System

Color styles with accessibility considerations built in, space, grid and breakpoint systems, and typography constituted the Foundations.

Atoms : Buttons, input fields, toggles, switches were designed.

Molecules : Complex components like cards, dashboard widgets etc followed by organisms, templates and pages.

Foundation color tokens with accessibility first

Spacing based on an 8pt system

Typography

Buttons

Input area

Cards

Results & Impact

The redesign and implementation of a comprehensive design system yielded substantial improvements across several key areas:

User Experience Metrics

  1. Task Completion Rates: Increased efficiency in core workflows (example: Incident reporting flow time reduced by 30%).





  2. Time on Task: Decreased time spent navigating and understanding safety data (example: Dashboard insights comprehension improved by 25%).





  3. Error Reduction: Minimized user input errors and confusion, leading to higher data accuracy (example: Incorrect action tracking entries decreased by 70%).

Development Efficiency Gains

  1. Accelerated Development: The design system shortened design-to-code cycles by 20-30%, allowing for faster feature rollouts and iterations.





  2. Reduced Rework: Clear guidelines and well-defined components led to a 15-20% reduction in bugs and back-and-forth between design and development.





  3. Improved Collaboration: Streamlined workflows and increased shared understanding between teams fostered a smoother development environment, potentially boosting developer satisfaction by 10%.

Business Impact

  1. Supported Rapid Growth: The scalable UX and design system enabled SafetyConnect to onboard new clients efficiently and adapt to their needs, contributing to their growth trajectory.





  2. Enhanced Client Perception: Positive feedback from stakeholders indicates a more user-friendly and effective product, strengthening client relationships.



Conclusion & Learning

The implementation of a scalable design system, coupled with the overhaul of core user experiences, significantly improved user satisfaction, streamlined development processes, and positioned the company for accelerated growth.

My Learnings from this project that would be valuable for other similar design challenges include:

Prioritizing User-Centricity: A deep understanding of user needs and pain points guided the success of the redesign.




Strategic Design Systems: Investing in a well-structured design system is fundamental for scaling both design and development efforts efficiently.




Collaborative Approach: Strong communication and alignment between design and development teams were vital for maximizing the impact of the project.

The success atAurva's demonstrates the power of design to drive tangible improvements in user experience, operational efficiency, and ultimately, advance a company's mission within its industry.

Don't be shy say Hiii….

Click to send me email.

Build with ♥️ and Framer @2024 



All rights reserved

Don't be shy say Hiii….

Click to send me email.

Build with ♥️ and Framer @2024 



All rights reserved

Don't be shy say Hiii….

Click to send me email.

Build with ♥️ and Framer @2024 



All rights reserved