NetApp UI Standards
Raising the Bar for UI Quality at NetApp
In large, distributed enterprise software organizations it is difficult to maintain consistency and quality in the UI. Over time, enterprise software solutions tend to become more and more integrated. 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. 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 that 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 lead the UX Standards Initiative, working with different development teams & designers across the engineering organization to identify common and not-so-common UI challenges. I identified one specific high-profile product that had an agreeable release schedule to target for 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.
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 of how things worked was that The UX Design Standards, in many cases, would act 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 the component
- All the interaction behaviors of the component, including transitions & animations
- Usage considerations - when and how to use the component, and more important how and when not to use the 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, dozens of individual product teams across the company rejoiced. My email was flooded with requests to help product teams refresh their products to these new updated 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 the 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 very warmly received. It wasn't exactly a glamorous UX Design task, but it was effective. This approach ensured that dev teams had clear measurable of current quality vs. expectations, and gave them specific instructions about how to fix issues.
In a distributed environment where there weren't many designers, and the UI framework team had little resources, we were 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.