Enterprise Navigation & Tools Redesign
2015–2017
How do you build a flexible navigation while the content is still being finalized? This question has been consuming a large part of EMC UI Service’s time from mid-2015 until now.
Below are the findings, exploration and final designs explorations I lead for EMC’s Data Protection division.
The deeper into the design process we got, the more a couple of our major nav paradigms started showing their age and breaking under the weight of our demanding new feature-sets. We identified three major gaps between our usability goals and the patterns we were using.
- Primary Nav — We wrestled with multiple unknowns across two different architectures. The one thing we were sure of was that whatever footprint the apps had then, they were going to balloon over the next two years of planned development. The traditional two level “drawer” system we had was already maxed out in available space in one project, and bumping up against the outer limits in the other.
- Secondary Nav — Part of the nav problem. It was a fixed width column that took up as much as a quarter the browser view at some resolutions. These were effective before responsive design became a necessity.
- Action Palette — A stationary fixed palette floating separate of the page. It worked well enough in a previous iteration of Backup & Replication Management (BRM 1.0), but wasn’t fitting well with the asks we were getting almost daily from PM.
Research & Inventories
We started with research and an inventory of the features we had documented as well as the data and actions previous apps were manipulating. We used these to set baselines around expected complexity, as well as establish worst case scenarios.
Comparative analysis between our app and others consumer and enterprise applications helped get buy-in across teams as we purposefully moved away from a file browser “Tree” style display for most of the views.
We settled on the concept of the Omni-[blank] for each component, with an eye on the design pattern-matching you see across Microsoft Office and Adobe’s offerings; while each program was different, they follow a design pattern that takes each diverse toolset and normalizes them for easy adoption across a diverse user-base.
Omni-Nav
With the robustness of each feature approaching “mini-app” levels of complexity, we arrived at a Start Menu framework that we started calling the Omni-Nav.
Deep search became critical as we integrated more utility app features to help Admins manage their Product Installations. Hot-keys and prompts were incorporated to speed up our SP “Power-User” Personas day-to-day navigation.
Omni-Toolbar
Our approach to refactoring the task-bar was gingerly at first; we were reconfiguring an established patterns our organization was comfortable with, even though it wasn’t a fit for our features any longer.
We landed on a combination of an Omni-Toolbar and an Inline Task Menu for actions being performed on the line-item themselves. By localizing the controls to each item, we ensured clarity for Admins using the products as they manipulating Plans, Assets, LUNs, Groups, Tags, Users, Roles or Tenants over their day-to-day
Secondary Navigation and Contextual Scroll
An impromptu meeting with a front-end collaborator helped firm up the mechanics of how the individual tab and Omni-tools would work on desktop and mobile. With just a week left for research, we opted for a quick-and-dirty test; taking the worst navigation problem existing in the app at the time and building a prototype and interactive test in CodePen.
Watching a solution fall out of nowhere and hold up to some unexpected, brutal stress-tests was a fun way to close out EMC’s Design-2015 department.
End Results
We’re still reaping the rewards of a thorough design process around our navigation and utility exploration. As we head into the design planning phase of V2, we’re finding very few navigational patterns that don’t fit neatly into our proven design patterns. We’ve partnered with a separate UX Researchers organization within EMC to verify our results in broader contexts. Their initial reviews of our work indicate they’re “light years ahead” of what was previously available.
We’re not done yet. As we continue to test V1 of both projects, we’ll continue to refine these examples. 2016 looks to be another great year for solving difficult problems and making people’s lives better.
