Material Design for Enterprise apps

Peter Zalman
Enterprise UX
Published in
3 min readNov 23, 2016

Google's design system is starting to gain the traction. It is being recognised and widely adopted across different applications and services. However, there are not that many publicly available resources and examples of professional or enterprise apps using the design system.

As a part of recent CA Technologies hackathon, I did a small exploration design project to evaluate how Google Material Design can apply to existing APM Product line. As an obvious inspiration, I used Google's Analytics portfolio with apps like Firebase, Google Analytics or Tag Manager.

Objectives

Existing CA Technologies APM Product line UIs. The wiki documentation is present in the product overview because I consider documentation an integral part of the product UX.

At the beginning of the project, I defined project goals and objectives. I cannot make them public, but one of the project goals was to use existing and already released product features. I wanted to avoid confusion of considering alternate design system evaluation to be a product re-design attempt.

Re-design of the existing product with no user research involved is a controversial activity. But hey, this is a hackathon and everything is possible.

Scope

One of the core concepts that I was aiming to explore was, how the design system scale to multiple separated UIs. Historically, APM product line is distributed across different product UIs lacking common consistency. The biggest consistency gap is not in a common colour palette, icon set or component library. The biggest gap is the common navigation pattern between independent product bundles.

Initial top-level informational architecture.

Simple Navigation

Concept navigation is 4 level deep. The main top level acts as a Product bundle master switch. Primary navigation is represented in a form of Horizontal tabs that relate to the secondary Sidebar. Contextual navigation is very specific to the selected page and can have a completely different appearance and function — from Searchbox to Timeline control.

Simple Navigation overview.
Sidebar, contextually related to the Primary Navigation.

Responsive Design

One of the key aspects of Material Design is the underlying metaphor that enables designers to understand how the canvas adapts to different devices and screen-sizes. The initial evaluation is not perfect, but it serves as a solid proof that even complex Enterprise apps can be used on a tablet. Kind of.

Responsive design sample.

Prototype

APM Command Center in Material Design. Learn more about the product.
Metric browser sample.

Conclusions

It is refreshing for any designer working in the enterprise environment to take moment and work outside existing constraints to push the boundaries. I am not a big supporter of parallel design or vision project that never gets shipped. But one of the purposes of the hackathon is learning by doing, and I was able to achieve this goal.

As a part of the project, I studied Google Developers Material Design guidelines, and just that activity alone is leaving me with ton of inspiration that I will apply to my regular work stream.

Google Material Design proved to be very scalable design system that exceeds a simple pattern library. It is a viable and scalable system for product lines of any size and complexity.

--

--

Peter Zalman
Enterprise UX

I am crafting great ideas into working products and striving for balance between Design, Product and Engineering #UX. Views are my own.