Confidential information has been obfuscated or omitted and the views here do not necessarily reflect those of VMware.
Wizard Design
Role: Visual & UX Design, Research
Tools: Sketch, Zeplin
The Problem
The current wizard design has a flat hierarchy that places the wizard navigation and wizard content on the same level of importance. This design also limits how long wizard titles can be, the actionable area for button options, and limited delineation between content, wizard controls, and actions.

Example of the current Clarity wizard component.

The Solution
Propose a set of changes to the wizard component to re-organize the component hierarchy, create delineated header and footer areas, and maximize the data being shown by allowing the wizard navigation to expand and collapse. The expand/collapse functionality allows the content displayed to remain the focus for users.

Side by side comparison of design concepts to reorganize hierarchy of the wizard component and adding functionality to collapse the left navigation of the wizard steps.

As part of the process, I presented these design changes to fellow interaction and visual designers to gather feedback and make updates before presenting to the Clarity design team for contribution into the UI component library. After a final round of feedback with the Clarity framework designers these changes were approved and have been submitted for contribution to the UI framework Github so all consumers of the library can benefit from them. 
Password masking
The goal of this project was to create a standardized pattern for masking password input fields across the VMware AirWatch console. This pattern needed to account for various use-cases users encountered and include documentation for the pattern to be included in the console UI framework.​​​​​​​
Role: Visual & UX Design, Pattern Research
Tools: Sketch, Zeplin
The Problem
Password input fields automatically mask the values a user enters and requires users to confirm the password using the same automatic masking method. This is problematic as it does not allow users to see the entire password they are entering and has a high rate of error due. How do we provide for a better solution that allows users to see the entire password they are entering that avoids input error?

Previous design had a confirmation pattern, which had a high level of error since users could not see exactly what values they were entering.

The Solution
The solution utilizes a text button to allow users to unmask the values they are entering in order to better verify their password. This UI pattern streamlined how users enter and set passwords across the product and remains the standard as the product converts into the VMware Clarity UI framework.
These designs show how the password masking interaction displays and behaves across the various use-cases in the product.
The original design for this project was executed in a legacy MVC UI framework, since then we have began to convert to an Angular framework maintained by VMware called Clarity. This pattern has since then been updated to utilize the Clarity password masking conventions, which deviate slightly from the original design in that it uses an icon instead of a text label to display Show/Hide masking options. The rest of the functionality remains the same.

Example of updated masking icon using Clarity UI framework. The main update from the old design is replacing the text label with an eye icon to denote masking option.

Back to Top