CHALLENGE
To create storyboards, wireframes and prototypes from extremely complicated technical requirements visualizing how our customers would provision a new environment built from scratch using App Orchestration that tells the story to the non-technical users.
MY ROLE
As the sole UX designer on App Orchestration, it was my job to understand the requirements and design wireframes, prototypes and the visual design for the tool. I worked with Project Management, Engineering, Quality Assurance, User Researchers and Users to make this possible.
KEY REQUIREMENTS
Manage
Manage desktop and application delivery to customers on a global scale
Automate
Automated processes that reduce complexity and save time
Unify
Ability to perform all tasks from one place (one console)
Deliver
Provide subscription based delivery of desktops and applications
DELIVERABLES
As the lead user experience designer working on App Orchestration, It was my responsibility to take the technical specs from the development team and create a solution through design. Part of my deliverables were wireframes and prototypes. In addition to those, I also designed a UI Spec for the development team and anyone else who needed access to the design data.
PRODUCT FLOW HEAT MAP
The following info-graphics illustrate new work-flows planned for delivery in the App Orchestration release. Heat map overlay indicates areas of confusion or UI complexity identified during design phase.
FIRST TIME USE OF APP ORCHESTRATION
The original spec designed by engineering stated that the user needed to complete a 34 page wizard to launch the tool. Through research, learning, design and iteration, I was able to show the team that such effort wasn’t needed. I designed a solution that enabled the user to complete a 4 page wizard and then launch the tool. Once the tool was launched we used ux patterns such as tours and visual cues to help the user to complete their configuration. This was a much cleaner approach that was a success.
ARCHITECTURE DIAGRAM
This visual depiction of the App Orchestration architecture details the relationships between various components at a high level. This diagram was created so users can acquaint themselves with App Orchestration and begin preparing the necessary components for their deployment.
INTERNAL WIZARDS
Wizards are the most commonly used pattern throughout App Orchestration. Every new property requires the user run through the wizard to set it up. During this project I was working with a visual designer. I needed her to provide me the specs for the design so I could give them to the development team. I annotated the wireframes so she would know exactly what was needed.
DISPLAYING ADDITIONAL DETAILS
There were often times where it was imperative to show extensive amounts of detail for a property. To reduce visual overload, I implemented a interaction pattern called progressive disclosure.
Progressive disclosure is an interaction design technique that sequences information and actions across several screens in order to reduce feelings of overwhelm for the user (Spillers 2004).
SEARCH INTERACTION EXAMPLE
In it’s conception, App Orchestration was created, designed and developed by some brilliant engineers and architects as a prototype of what they believed the business needed. The business bought in, but my role didn’t come into play for nearly 18 months after it’s conception. Needless to say, the user experience was poor. The one element that was most needed was search. App Orchestration holds a lot data and needed a way for users to find it. Once the business realized the brilliance behind this concept and bought in, they wanted to release it to market immediately. It was 18 months before UX was invited to the table. A lot of things “couldn’t be changed” and now with the urgency to release it, there was little room to add “nice to haves”.
Search default view
On click: The last 5 search terms will be auto displayed
On click: Once 1 character is entered into search box that does not match characters in the 5 items last searched group, they will dissappear (unless one or more are “favorited
On focus: items that are “favorited” or regularly searched will appear at top of the list (functions similarly to pinning and sticky items) items can be favorited by clicking the star to the right of the item, items can be un-favorited by click the star again (yellow star = favorited, whitish/gray star = not favorited item)
On focus: search result will appear upon 2 letters being entered into search box. Letters entered in search box will result in those letters highlighted in search results
20 results will be displayed. If more then 20 results are returned, there will be a vertical scrollbar to scroll through the results
On hover: hovered item populates search box
On lost focus: when the user clicks enter or clicks on the hovered item, the search results will disappear, the hovered item will populate into the search box and the table data will be reduced to only show items that match the text in the search box
On re-entry of search box, if field was populated in that session, when the user clicks on the search box, the search will begin where it was last left off.
Clicking the “x” will clear the search box and reset the table data back to its original state
