Case Study

NetApp was in the process of building their new flash-storage product, FlashRay. They knew it represented a truly revolutionary leap in both technology and performance in the enterprise storage space and they wanted a user experience that would show this off. They wanted to break out of the typical enterprise UX and asked us to create a UX that would be modern, simple-to-use, and really show off the game-changing performance of their new product.

This was a complex project that required us to apply a comprehensive user-centered-design approach to the entire project.

Define the Guiding Principles

The very first thing we did was work with all of the key stakeholders to define a unifying guiding principle. This was a critical step that served to drive the high level design goals and keep both us and the client on the same page.

User Research, Personas, and User Stories

We observed and conducted interviews with target users of the FlashRay system. FlashRay is a new system, not yet on the market, so we focused on understanding where these users' needs were not being met, especially with respect to the practices and procedures for evaluating and implementing new systems.

We had the luxury of working off of personas that we had helped NetApp develop in previous projects. However, we still needed conduct user research to make sure these personas were still accurate and up-to-date. Based on this research, we updated the persona definitions that we would use to drive design decisions.

The combination of user research and persona development resulted in a list of prioritized use cases, presented in the form of user stories. These served as the basis for our designs as well as the usability testing we performed through the design process.

Conceptual design

The first part of our design work involved understanding the basic functionality of FlashRay and what it was trying to accomplish. We spent a lot of time whiteboarding our understanding of the system with the NetApp team and amongst our own design team. Early on, we established three major components to the FlashRay system: an Installer, a Dashboard, a Manager, and a Framework to hold it all together. <images of whiteboards, brainstorming, sketches>

Wireframing, iterative design, and usability testing

With the conceptual designs fleshed out for the major FlashRay components, we began wireframing UI designs. We employed a process of generating designs, reviewing them with the NetApp product team, and updating the designs based on the feedback. With each iteration, we would increase both the scope and depth of the designs. During the iterations, we also built non-functional, but partially dynamic, prototypes which we used for usability evaluations with target users. We ran two rounds of usability evaluations during the design phase which drove even further design changes.

Creating the visual design

Another significant component of our effort was to create a look and feel that projected a specific product personality. NetApp knew they had a special product and it was very important to them that people would get that impression as soon as they saw the product, before even using it. Parallel to the conceptual and wireframe design activities, we undertook a specific branding and visual design effort. This involved holding an internal branding workshop to identify the specific product traits and personality that the NetApp team wanted from the FlashRay project and then the creation of moodboards to reflect their vision and serve as a mechanism for feedback. Once the moodboard designs were settled, we begin creating specific UI and underwent an analogous iterative process of reviewing and updating designs with the product team.

We applied the visual design to the wireframe designs in time for the usability evaluations on the partially functioning prototypes which enabled us to subject the visual design to usability evaluation.

We created a fully designed user experience for NetApp FlashRay including information architecture, interaction design, and full visual design. We delivered this in the form of a comprehensive User Interface Specification and Style Guide.