Astro (VMware)

Introduction
Astro is a project aimed at creating a design system for EUC at VMware to bring a consistent level of quality to the Workspace ONE console. By doing so, we want to address gaps in the framework and allow for updating the pattern library as per project requirements.
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).

AirWatch's MVC4 framework

Horizon's ATK framework
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:
- Define the types of patterns for the future
- Build a backlog of UI components to be updated
- 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.
Initial wireframes about the architecture of the Banner control

Details about types of banners and when they could be used

Final design of Feedback Banners
Placement of a Persistent Banner
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.
Interactions Patterns and Usage Guidelines for a Toggle Group
Various states of a Form Input Element
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.

Details about the Dialog template

Example of a control within an Asset template
After that, I worked with the Visual Designer to finalize each template.

Layout of a Wizard

Details for an Asset within a Wizard
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

Workflow for 'Adding an Asset'
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.