UX Design and Strategy

NetApp UX Standards

UX standards and framework for enterprise storage web apps, 9 months

NetApp UX Standards

 

Opportunity

In large, distributed enterprise software organizations it is difficult to maintain UI consistency and quality. Solutions require integrating disparate apps with different patterns, visual styles, and mental models. UI inconsistencies that might have once been ignorable are pushed into the spotlight. These UI inconsistencies frustrate users and significantly increase costs associated with design and development.

When I started at NetApp, the design team was spending more than 50% of their time filing and responding to UI bugs. The development teams were using a legacy framework that had become very difficult to work with. Even the smallest UI tweaks could take days as designers churned over which patterns to use.

 
 

My Role

• Led UX Standards initiative for UX team of 13 designers in California, Massachusetts, and India

• Documented, designed, and trained designers and developers on design standards and new responsive UI framework built on Twitter Bootstrap

• Designed, authored, and built internal website for standards documentation

• Led UX Standards compliance, providing reports and working with dev teams to ensure quality outcomes

 
 

Approach

The team needed a standardized UI library as well as UX guidelines and modern UI framework. Over the course of several months I led the UX Standards initiative, working with different development teams & designers across the engineering organization to identify common and critical UI challenges. Using a single high-profile product as a starting point, I collaborated with the UX Design, Research, and UI Framework Team to redesign the UI around modern and consistent UX standards.

 
 

Updated UI Framework

There was resistance from the UI dev team to update to a modern UI framework. They were used to working with the legacy system, and weren't familiar with modern responsive frameworks. At the time, Twitter Bootstrap was one of the more accessible frameworks. I worked with and taught the dev  how to use the framework for design and development, and I built the internal standards documentation website with Twitter Bootstrap to prove it could be done. 

 

standards Website Samples

 
1.png
2.png
 

Designing For the Audience

The target audience were mostly back-end developers with substantial technical knowledge about the workings of enterprise storage, but with very little knowledge of what constituted good UI or UX Design. The UX Design team was stretched thin, so most UI development work was being done without a designer involved at all.

This meant the UX standards documentation had to be completely self-explanatory. In many cases the UX Design Standards would serve as a substitute for an actual designer. Certainly not ideal, but a reality nonetheless. To this end I had to be excessively thorough in the documentation, including details about:

  • Every required or optional element that could potentially make up a component, page, or section
  • All the interaction behaviors of UI components, including transitions & animations
  • Usage considerations - when and how to use a component, and more important how and when not to use a component.
  • Content writing considerations and rules
  • Implementation specifications including how to deal with responsive layouts
  • Keyboard and accessibility instructions

 

SAMPLE OF A FULL COMPONENT DOCUMENTATION PAGE (long scroll)

 
 

Impact

Once the site was published, my email was flooded with requests to help product teams refresh their products to the new UX standards. Products that could adopt the new framework would instantly improve the UX of their product. 

However, for time and technical reasons many teams wouldn't be able to use the framework. Since I didn't want to miss the opportunity to encourage these teams to pursue quality in their UIs, I created a scoring system where I evaluated each product's UI against the standards and gave them a rating and "Standards Compliance" report.

In such a highly technical and dev-centric culture this approach was warmly received. It wasn't exactly a glamorous UX Design task, but it was effective. This approach ensured that dev teams had a clear measurable of current quality vs. expectations, and gave them specific instructions about how to fix issues.

In a distributed environment with too few designers and a UI framework team light on resources, we were still able to claim a number of wins:

  • The UX Designers spent significantly less time filing UI bug tickets and worrying about inconsistencies, and were able to focus on higher-level improvements to the products.
  • The UI Framework Team was able to quickly build a robust & scalable UI Framework, as the UX Standards gave them a complete blueprint for what was needed and how it should behave.
  • Dozens of individual product dev teams were able to measurably improve their product's UX and make it consistent with other NetApp products, despite not having a design partner available to them.