DataCore: Design Solutions
It was finally time to build interactive prototypes. The new UI has a lot of different pages, so I will focus on a small number here.
Interactive wireframes and helping observability
To focus everyone on the information and flow and not how “pretty” the proposed screens were, we started with wireframe prototypes without color, icons, or fonts. These wireframes would be easier to iterate on than final visuals, making me and the team more time efficient.
Again using UXPin as the prototyping tool, we built an application frame that worked across pages, including navigation, scoping, and user components. We built wireframe components for buttons, tables, etc., for easy re-use in future wireframes.
Figure 1 shows an initial wireframe for the DataCore Web Console dashboard, addressing the need to see the status of the system at a glance. I explained to the extended team that the goal of this dashboard was for Ian to know at the beginning of the day if he had something he had to do immediately or whether he could go get a cup of coffee first. The information spans “hierarchy” levels.
Figure 1: first iteration wireframe
The high-level sections of the information architecture are present here. “Manage Host Capacity” and “Manage Physical Storage” are sub-sections of “Prepare and Provide Storage”. Using the concept of Progressive Disclosure, each section has an element that takes you deeper into the interface. For instance, clicking “02 Offline” would present the information about physical storage showing the problematic storage at the top.
Simplifying actions and user testing
We found some optimizations that seemed obvious. We confirmed them by presenting wireframes to customers to get their feedback. We wrote testing scripts and made new wireframe versions to go along with the script while still allowing the testers to go “off script”.
One flow we tested was around providing virtual storage. In the existing console, this meant first a “create virtual storage” action followed by a separately-invoked “give the storage to a destination” action. The prototype we tested addressed two questions we wanted to confirm:
Can we choose some smart defaults without alarming the users?
Does chaining the two actions into one flow benefit the users?
Testing showed the answer was “Yes” to both. The most amusing comment we got from customers when they saw how easy it was to prepare and provide storage was a delighted, “This is ‘Create Virtual Disk” for dummies!”
Visuals: navigation and dashboard
After wireframe iterations were complete, we moved to high-fidelity visuals, creating a Style Guide in the process. Below, see the navigation bar.
Figure 2: Navigation, expanded
Figure 3: Navigation, collapsed
After we released the DataCore Web Console, we got feedback from customers about the effectiveness of the “Track Storage Infrastructure” dashboard. Users were delighted to log in, see all green, and then immediately log out. While this means that other pages were not used, they didn’t need to be used, so we let Ian do their other duties and not get bogged down dealing with storage.
Figure 4: Track Storage Infrastructure
Improved data protection
From the interface in Figure 4, Ian can see problems involved with protecting the data in their virtual storage. For more details, they click Manage and are presented with data organized by the destination of the virtual storage. From this new summary screen (see Figure 5), Ian can see all information about data protection in one place. Ian can see what is or is not configured on any virtual storage, configure it on multiple objects at once if he chooses, and finally recover the data, should the need arise, via the action menu on the right of the table rows.
Figure 5: Data Protection Services
This concludes the process and design of a subset of the new and released consoles for DataCore SANsymphony. You can learn more about what DataCore Insight Services became by viewing the DIS Guided Tour. What we learned from this effort will be used in future sprints and initiatives.