Proactive Data Insights Application
MY ROLE:
UX/UI Designer
MY TEAM:
Jr. UX Designer (x1)
Product Owner (x3)
Project Manager (x1)
Solutions Architect (x2)
Full Stack Developer (x4)
UI Developers (x4)
Problem statement
NetApp My AutoSupport was a tool that allowed customers, partners and NetApp storage administrators to see performance and capacity data of a NetApp hardware through telemetry reports, called "AutoSupports".
The dashboard was comprised of logs, performance graphs and capacity details, and generally proved difficult to consume and was almost impossible to discern if any actions were needed for immediate concerns. Only Storage Administrators could use it seamlessly, because they were meticulously trained to use the tables and tools to extract data that was deemed important for an action.
How can more users use "My AutoSupport" for important decisions, like software contract renewals, capacity additions or performance risk remediations?
Step 1
Heuristic Evaluation
-
The desktop tool was too vast, with over 1000 pages, a hidden navigation (more pages were available as you clicked down the hierarchy of clusters, systems, volumes, etc.).
-
The visual interface looked nothing like the NetApp website in 2017 (when I started on the project). A brand gap was affecting the reliability of the web app.
-
The long tables, the Excel-like data sheets and clunky tabs offered no scale for future capabilities or simple summaries of issues.
-
Information was too scattered.
-
Product imagery looked extremely different to what was visible on NetApp Hardware Universe or Interop Matrix sites.
Step 2
Objectives
Refresh the information architecture of My AutoSupport / Active IQ
-
Reduce the hidden navigation gaps.
-
Improve the visibility of hierarchical relationships between storage objects.
-
Establish a grouping mechanism that helped summarize insights at each hierarchical object level.
Offer a sleeker, light-weight experience for mobile users
-
Define top tasks to be accomplished by mobile-first users.
-
Identify use-cases when a mobile view of telemetry data is more useful than a desktop, full-fledged, detailed experience.
-
Offer task workflows (request report, set favorite, etc.) for interactive richness.
Prepare the tool for scalability and reporting
-
Build a scalable model of the app (no restrictive menus, actions, etc.)
-
Offer a flexible hotspot for latest releases.
-
Make reporting a main task of the new My AutoSupport/Active IQ dashboard.
Personas
After the introductory studies, I was able to distinguish the major user personas who would be able to accomplish a successful support based on telemetry data.
UX Process for a quasi-Waterfall Dev Cycle
My ramp for 0-1 product MVP release was 12 weeks from the day I joined the team. A regular dev cycle in NetApp was a waterfall model across 6 months — 24 week sprints, so I had to rely heavily on my rapid prototyping skills to gather qualitative feedback for iteration cycles.
Effectively, I spent 6 weeks on research, low-fidelity prototyping, prototype testing, and high-fidelity wireframing, before I was joined by the development team from RapidBiz Apps, a third-party engineering organization. The next 6 weeks was spent refining the new mobile design guidelines, fixing interaction gaps that were discovered through beta testing, and documenting the new visual language, iconography and journeys to scale up into a web app.
Research & discovery
Understand NetApp, the ecosystem of digital support products/services within, and the significance of My AutoSupport — identify users, goals, opportunities and existing feedback.
Requirements gathering
Stakeholder and user discussion to identify the major pain points:
-
The website was too large and each page was a new table with too any columns, or 50 graphs that was hard to derive insights from.
-
Only storage admins could understand the value of information presented.
-
Customers and partners avoided looking at the tool because of the information clutter and not knowing where to go for a specific insight.
Ideation, design & prototyping
Sketch out an ideal user journey to start with. Group elements into logical categories / menu items and test the happy path with the new information architecture.
Design the "happy path" user journeys and then expand into error scenario presentation. Prototype and test with stakeholders and beta testing customers to identify interaction gaps, language improvements and corner use-cases.
Iterations & Development
Iterate new high-fidelity wireframes based on the qualitative testing with the prototypes.
Share technical specs to developers and review each phase of development, test for interface issues and report for quick dev fixes.
Testing & Post-Launch support
Test MVP staging product to ensure adherence to ideal user journeys that tested well. Identify areas to scale the experience, opportunities to enhance individual services and plan for incremental development.
Document the new visual standards based on the mobile app, and work on translating it for responsive behavior.
The new information architecure
NetApp collected telemetry data from legacy (ONTAP) and acquired (Solidfire HCI) products. Each product line actually had a software support site wwhere users could see a subset of AutoSupport information, so it was apparent that users needed to look at My AutoSupport to get a bigger picture.
The mobile application was structured to offer that big-picture view with simple, but logical groups of information.
Simplified IA for multiple products (defining a secondary experience for HCI products with the ONTAP experience
Unified Login experience for all users
In-built support instead of re-directing users to support.netapp.com
Low-fidelity wireframes
I created the initial mobile wireframes in Adobe XD to quickly block out the significant interfaces in the journey.
 Login page for all users |  Landing page post-login for customers |  List of sites in a customer profile |
|---|---|---|
 Site summary screen |  Cluster list within a site |  Cluster summary screen |
 List of nodes in a cluster |  Node summary |  Efficiency details |
 Efficiency summary alternate |  App menu |
High-Fidelity Screens
The high-fidelity screens became extremely modular and sleek, reducing the colorful line graphics to simple, repeatable card structures that could easily scale for new user journeys that needed to added in the future.
Beta/Prototype testing feedback
"This is an awesome application providing all required information on your finger tips."
"This is awesome. I am able to see the cluster status on my handheld.
"This would be a great tool if it was able to auto rotate and fit natively on a larger iPad screen rather than being just a port from the iPhone display size."
The final product
A simple walk-through of the application as released in May 2017.