Mitty portfolio-06.png

Astro

 

Astro (VMware)

Mitty portfolio-06.png

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

AirWatch's MVC4 framework

 Horizon's ATK 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:

  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.
 Initial wireframes about the architecture of the Banner control

Initial wireframes about the architecture of the Banner control

 Details about types of banners and when they could be used

Details about types of banners and when they could be used

 Final design of Feedback Banners

Final design of Feedback Banners

 Placement of a Persistent Banner

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

Interactions Patterns and Usage Guidelines for a Toggle Group

 Various states of a Form Input Element

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

Details about the Dialog template

 Example of a control within an Asset 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

Layout of a Wizard

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

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.