NetApp UI Standards
Raising the Bar for UI Quality at NetApp
In large, distributed enterprise software organizations it is difficult to maintain UI consistency and quality. Over time, enterprise software solutions tend to require integration of disparate apps with totally different patterns, visual style, and mental models. UI inconsistencies that might have once been ignorable are pushed into the spotlight. Eventually these UI inconsistencies start to frustrate users and significantly increase costs associated with design and development. This is especially true when the tools deal with such complex domains like enterprise storage.
At the time I was hired the design team was spending more than half 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. When the UX team worked on new designs, a lot of time was spent churning over how to approach simple UI elements, because different tools handled similar needs differently.
It was clear the time had come to not only standardize around common solutions to a UI library, but also to create UX guidelines and a 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 not-so-common UI challenges. I chose one high-profile product that had an agreeable release schedule to target for a complete UI refresh. Using that product as the starting point, I collaborated with the UX Design, Research, and UI Framework Team to redesign the UI around modern and consistent UX standards.
At the same time, I worked with the UI Framework Team to educate them on building a responsive framework using Twitter Bootstrap, and to evangelize this approach in the larger engineering organization. As part of the push to change, I built a simple internal standards documentation website using Twitter Bootstrap. This greatly helped convince the framework team that Twitter Bootstrap was a viable direction for them. (If a UX Designer with minimal development chops could build a responsive, functional site on his own using the framework, surely the seasoned development team could as well.)
SAMPLES OF THE FINAL RESPONSIVE SITE
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 User Experience Design. Most had never worked with a designer before. The UX Design team was very small and 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. The reality was that 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)
Once the site was published, I was pleased to find that dozens of individual product teams across the company rejoiced. My email was flooded with requests to help product teams refresh their products to the new UX standards.
At the time, the scheduled completion of the new UI Framework was many months away. Products that could wait and adopt the new framework would instantly improve the UX of their product. However, many teams wouldn't be able to use the framework, and I didn't want to miss the opportunity to encourage these teams to pursue quality in their UIs. To deal with this, 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.