Confidential information has been obfuscated or omitted and the views here do not necessarily reflect those of VMware.
Role: Visual & UX Design, Research
Tools: Sketch, Zeplin
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.
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.
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.
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
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?
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.