Note: At time of writing the application is still in development so images will be blurred.
UI/UX Lead
The Clock Tree Architect is an Angular Web Application designed for the electrical engineer to formulate an optimized clock tree solution based on their system requirements.
Bring the project from conceptualization to final UI as a functional prototype for sign-off and development.
Early in the discovery phase of the project, two issues became apparent to me:
I realized these were the two main areas I needed to focus on addressing in the solution.
Simplifying the User Interface does not mean loss of functionality. The goal was to keep the depth of functionality we had in the product but present it in a way that was intuitive and easy to use. I proposed to solve for this by layering interactions and presenting only the most relevant inputs at any given time.
In order to do this, we needed to:
Above screen is the first iteration that isolated only the actions needed for the user to progress to their final goal.
The mockup above makes the additional specifications accessible only on demand by the user, reducing visual complexity in the UI
In order to create a better User Experience and successfully drive higher user retention, I needed to address the two problems above that prevented the user from visualizing the journey to their final outcome.
I began with the steppers approach as it was the most overt way to visually guide the user from one step to another. The weakness of this approach was that the final action, was out of view.
Next, I tested out the wizard layout approach. This isolated each step on the screen. The disadvantage was that the other steps were hidden in other screens, preventing new users from creating a mental model for the application.
This was the final approach that we decided on. It succeeded in:
This particular challenge centered around finalizing the UI for how a customer associates applying modifiers to each grouping. The problem was that the customer had no information on predicting how adding each modifier would affect their end solution. We also needed a way to visually show which modifier belonged to which group and give the customer the ability to remove and modify them.
To solve this issue I came up with a main action button that offered a checklist to select multiple modifiers that could be applied to each grouping. They could be dismissed with a standard close icon, as well as contain an input depending on the type of modification. I also convinced the engineering team to provide another descriptor for each modifier as some terms may not be understood by every end-user.
At the end of the project, we had built a fully interactive prototype that encompassed all key user interactions and functional requirements and received a final sign-off from my Product Owner and all the various stakeholders involved (Business analysts and Electrical Engineers). The development is currently in progress for the Angular Web Application.