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 service 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
Senior Designer
UX Designer
QA Designer * 1
Developers * 3
Timeline
Nov 2019 - Feb 2020
ASK
How to implement a user-centric interface for the DA platform to enhance drive security & manage AI predictive insights for target users?
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
2. Home Users
3. Small-Medium Business
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, ensuring consistency, scalability, and a seamless user experience throughout the entire interface.
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 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.
REFLECTION
Designing with real data & design atomicity
The project helped me grow as a designer & as a professional with some mistakes, learnings & reflections. I
Looking back, the key takeaways include the importance of:
​
-
Designing with real data early in the process.
-
Collaboration with developers to ensure smooth handoffs and iterations.
-
Ensuring the system is accessible.
