Astro (VMware)

Introduction

Role: Interaction Designer, UX Architect, Strategist

Tools: Sketch, Zeplin, Axure

I have omitted and obfuscated confidential information on this page to comply with my non-disclosure agreement, and the content does not necessarily reflect the views of VMware.

The Premise

The End User Computing unit at VMware has a variety of products under its purview including administrator consoles such as AirWatch, Horizon 7, and Horizon Enzo. Most of these consoles run on separate design systems and UI frameworks such as MVC2, MVC4 and ATK (angular). 

One of EUC's goals is to move towards a unified console called Workspace ONE combining the functionalities and use cases for all its console to provides a seamless user experience.

This means that we need a Design System and UI Framework flexible to support all our use cases.

Goals of the Project

The Design system would involve us going through every single pattern in all the consoles, understand the current use cases and also the future use cases. As such, we had multiple small goals to achieve:

1. Define the types of patterns for the future
2. Build a backlog of UI components to be updated
3. Recommendations for projects that need components before they're developed

Atomic Design Model

We used Brad Frost's Atomic Design Model to break our old consoles down into their basic components, which could be reused throughout the new console.

These components could be combined into more complex components, depending on their purpose.

For the EUC consoles, after much back and forth, we decided on three levels of components:

• Elements: UI elements which are the building blocks of the system (ex. Label, Date Picker, Heading, etc)
• Controls: Groups of elements serving a distinct purpose (ex. Message Banner comprising icons, header and text)
• Templates: Layouts of pages comprising controls (ex. Wizard with levels and content area)

Elements and Controls

Over the next several months, I worked with the Visual Designer on the project on the interaction design and visual updates to the UI elements and controls.

Flexibility for use cases

Since we had multiple pattern libraries, we had to check for unique use cases amongst all of them and see where these elements would be used.

These elements had to be flexible enough to be used within a variety of use cases.

Usage Rules

We laid out rules for when an element or control should be used, how it should be used and also interactions for each component.

Since this document was for both the designers consuming the elements in their designs and the developers building the library, we had two target audiences.

Template

Once we had a comprehensive list of elements and controls, it was time to consolidate our layouts.

For each template, I created an architecture diagram based on when and where it is used. I identified possible element and control in the layout, and provided multiple examples.

After that, I worked with the Visual Designer to finalize each template.

Interaction Patterns

Currently, I'm working on documenting Interaction Patterns for our Design System. This includes:

• Workflows for commonly used tasks
• Aspects of communication such as Help, Wait times, Error Handling and Feedback
• Information Architecture and Navigation: where things are now and where they will be in the future on the console

Closing Thoughts

Astro is an ongoing project and I have worked on it for almost a year. 

Working on this project has been exciting, challenging, and sometimes frustrating. There are so many moving pieces that we have to be constantly vigilant for anything that could disrupt the effort. This project involves close collaboration with several development teams and several technologies, and it has been amazing how everyone is coming together and coordinating their efforts!

This project is helping me learn how to shuffle priorities based on the need of the hour and quickly identify whatever needs to be done as soon as possible. At the end of the day, the pattern library supports our products and anything that needs to ship to users takes precedence.