DA Design Systems | UX Design Portfolio

AI-Powered Alerts

Drive Health Status

Predict Drive Failures

Data-Driven Insights

PROJECT OVERVIEW

Design System for AI Powered Drive Analyzer

DA Drive Analyzer is an AI-powered Saas that monitors storage drive health, predicts potential issues, and alerts users to impending failures. Starting as a beginner, I quickly took ownership of the design process, from crafting individual components to handing off final screens to developers. I designed 12 essential components across two design phases & provided implementation support to dev team, reducing queries by 15%.

Role

Design System
Interaction Design
Accessibility Checks

Team Members

UX Lead

UX Designer (me)

Developers * 3

Timeline

Nov 2019 - Feb 2020

ASK

How might we implement intuitive navigation for the DA platform that empowers users to efficiently explore large datasets, organize information, and compare metrics?

Business Goals

1. Enhance Reliability
2. User Adoption
3. Expand Market Reach

User Needs

1. Predictive Alerts
2. Actionable Insights
3. Ease of Use

Target Users

1. IT Administrators
3. Enterprise

Success Metrics

1. Adoption rate
2. Task completion rate

IMPACT

Shipped 20+ screens

1. Partnered with developers during implementation, ensuring seamless integration of design elements and reducing post-launch issues by 15%.

2. Created 12 components implemented across 20+ screens, that streamlined navigation, maintained consistency & enabled efficient user interactions throughout the dashboard.

Process

UX Lead

UX Designer

Developer Team

Identify Use Cases

Map out use cases & identify needed components

Design Components

Design and prototype components

Feedback

Get feedback from senior designers & design more components

Handoff

Design documentation & Implementation support to dev team

Business Needs

Understand product goals through stakeholder interviews &scope doc

UX Lead

UX Designer

UX Lead

UX Designer

IDENTIFYING USE CASES

Recogonizing the need for components

We start by understanding the business offerings and user needs, then outline the essential components for the platform. It was an insight from our conversations with our client & some users, that users want detailed drill-downs for each drive in their NAS systems.

User Goals

1. Efficient navigation through large data sets

2. Organize data to quickly find relevant information

3. Compare different metrics at a glance

4. Select multiple options simultaneously

5. Enable/disable specific settings

6. Need direct access to detailed views.

7. Overview of health metrics

Components Phase 1

1. Nested Navigation

2. Sort

3. Table

4. Checkbox

5. Toggle Button

6. Hyperlinks

7. Stacked Bar Graph

DESIGN

Laying down the foundation

The next step was getting started on an ever-developing set of components, guided by the Atomic Design approach.

Atoms

Molecules

Organisims

Learning to build components the hard way

One of the most important lessons I learned early on was the value of designing with real data. Initially, my designs fell short because I didn’t account for edge cases, leading to unforeseen issues. Through close collaboration with the head of product and senior designers, I quickly realized that using real content from the start is essential for creating more accurate, effective designs. This approach helps ensure that the final product can handle all scenarios, even the unexpected ones.

Before

After

Identifying various use cases & defining details

Carefully defining anatomy, sizing, and alignment - ensured our design was robust and adaptable to various scenarios. For instance, in developing the tree navigation bar, I meticulously specified its alignment and nested structure.

Spacing & Alignment

Anatomy

When designing, it’s crucial to consider potential edge cases to ensure the UI performs well under all conditions. Here are a few scenarios we accounted for

What if the there are >6 systems ?

What if the drive slot is empty ?

What if drive is loading ?

.....+7 scenarios

Use Cases

Building More Components

As the project progressed into its second phase, requirements became increasingly complex. To address these evolving needs, I developed five additional components to cover all use cases: AI Prediction Graph, AI Prediction Drive Health Card, Alert Stats Table, Alert Notifications Card, Faulty Drives Card. Examples of some of these components are shown below

Smooth Handoff to Visual Design Team

We designed 20+ screens using these components, covering multiple use cases. After documenting them as wireflows, they were handed off to the visual design team for pixel-perfect refinement. I collaborated with the development team to ensure accurate implementation, resulting in a 15% reduction in post-launch queries.