The Coho DataStream
Modernizing data management

The management of enterprise-level data storage is a highly technical, granular and multi-layered service. And yet Coho Data wanted their web app to be simple, smart, and intuitive. Challenge... noted.
Web app, tablet app

View it

Agency Direct client
UI art direction + design (research, visual concept, style guides, layout, typography, iconography, interaction + animation samples) 

Andrew Warfield (Coho CTO) // Michael Welsman-Dinelle, Alex Bradley (developers)

Coho say what?
The product

From 2011-2017, Coho Data provided “big data” enterprise storage solutions. Its mission: bring the efficiency and flexibility of the public cloud (think Dropbox) into the big leagues of on-premise data centres (IBM, EMC), where performance and control are crucial.

Coho sought to eliminate much of the technical / hardware know-how that customers had traditionally needed, and in turn provide:

  • the invisibility of cloud-based services, where provisioning, management and optimization are largely handled for the user, behind-the-scenes
  • simple plug-and-play deployment
  • easy modular scale-out — buy what you need when you need it — rather than risky forecasting and big upfront investments in hardware

Swimming upstream
My role

My challenge was to design the software UI for a highly technical service, yet have it reflect Coho’s user experience promises: simplicity, intuition, and a degree of “don’t worry; we’ve got this.”  

But not so fast. The web app also needed to provide access to a granular behind-the-scenes level, for those times when, say, a distant hiccup in a single virtual machine was wreaking havoc on disk performance.

In a nutshell, show ease of use with power under the hood.

As such, each design sprint required a new round of education on my part — can read requests go to both flash and disk drives? what type of switch has a QSFP+ port? — so I could design for the user’s needs, expectations and ignorances.

How you doin'?
The Dashboard

The Dashboard summarizes how the storage is performing at a high level, right now, and ideally communicates: “hands off, don’t worry about the small stuff, but do keep an eye on this.” On a good day, this is as deep as the user should need to go.

Video — various states of the Dashboard’s status area

Colour coding and large graphics communicate clearly. Any major problems are made obvious immediately, and users can focus in on the root cause (e.g. the virtual machines responsible) quickly.

Video — data reduction drill-down

As an example of a drill-down feature, a later iteration of the Dashboard allowed customers to break down the tiers of their data reduction performance.

Purring along
Notification streams

The Action and Activity streams are displayed by default on all of the UI’s screens (when viewport size permits), and for the most part they notify the customer on what the system is doing automatically for them. Action items, a unique set of “live” issues, are the highest priority, and occasionally require user involvement.

Pop the lid
Activity stream detail

The Activity stream provides a complete history of the system. Revealing the power under the hood, customers can expand the stream to view more detail, while search and filter features fine-tune the breadth of the stream.

Video - accessing the expanded activity stream

Get in touch
Tablet layout + Usage screen

While the initial design and build of the app focused solely on large viewports, two years into the project we developed a tablet-specific layout, where the Action and Activity streams were hidden by default.

Video — tablet breakpoint on the Usage screen

The Usage screen highlights one of Coho Data’s strengths — offering modular service-based charging — in contrast to the traditional riskiness of performance estimates and upfront costs. Customers could easily break down usage by department and bill accordingly.

Rack and stack
Hardware screen

Through a virtual mockup of their storage rack, Coho customers can quickly identify and locate failing, or struggling, real-world hardware.

Hardware screen gallery — select a thumbnail to view as a slideshow

Safety in numbers
Snapshots + replication

The scheduling and management of virtual machine duplication (cloning), state capturing (snapshots) and  backups (replication) required a multi-layered UI.

Various Snapshots + Replication screen layouts

Off the charts
Workoads screen

With the Workloads screen, customers can plot the performance of individual virtual machines (workloads) or their entire cluster, across several different metrics, to compare and hone in on poor performers.

What a setting
Configuration screens

The system configuration screens had very unique content one to the next, and required a third level of navigation to structure properly.

Baby one more time

Over the course of the project, we iterated through hundreds of icons for various screens and the main navigation.

Some of the final and in-progress icons generated for the Coho Data software UI

We’ve got rhythm
Grid structure

Structure and consistency were maintained from screen to screen with a 12-column grid and vertical rhythm. Seems basic, but in the world of data storage software, this was novel stuff ;)

Slideshow — grid overlays

We go way back
Early design iterations

Below is a collection of early Dashboard design explorations, as we worked through colour weighting, contrast, typography, scale, and more.