Virtual Apps and Collections

My Role: Interaction Designer Team: UX Lead, Visual Designer, Content Writer Tools: Axure, Zeplin, JIRA Deliverables: Flow Chart, Wireframes, Prototype, UX Review Document

Project Background

Workspace ONE is an integrated digital workspace platform, where IT admins can manage “Any Device, Any App”. Virtual Apps is an important piece in Workspace ONE in terms of completing the “Any App” story within the Unified Endpoint Management (UEM) console.

Goals

Challenges

Understanding the problem

We had several meetings with PMs and the engineers to understand typical admin flows and their pain points.

Flow chart

I created a flow chart to propose new workflows aiming at addressing some of admins’ frustrations. This helped PMs and engineering understand not just the flow, but also the scope the project.

Flowchart

UX Estimates

UX estimate is a very powerful tool for UX, PM and engineering to align with scope and expectations. I assisted the UX Lead with estimating how much time it would take to finish all interaction designs. We divided the work into 5 phases based on the flow chart.

Sketches

Sketches

A notebook sketch on 4 concepts of editing a virtual app.

Table

I created a table to show flows of creating 5 types of virtual app collections.

Wireframes

Wireframe 1

Wireframe 2

Wireframe 3

Admins dislike going through a wizard when editing an object. It took me some time to persuade the engineering team to implement the feature in a way that would make admins’ lives easier – in-line editing on the detail view, instead of taking admins back to the creation wizard.

Annotation

In Axure, I used the Note feature to capture annotations for interactive components. I used side notes to capture questions and comments for the page.

Error Handling

“Try to catch them all.” I created a shared spreadsheet with the rest of the team to align with error states. Engineers especially appreciate this effort. Here is an example of a row in the error handling matrix:

Error Handling

I understood server-side errors with the help of engineering. I worked with the Content Writer and the Technical Writer to make sure we tell admins what have gone wrong, as well as how to recover from it.

High-Fidelity Visuals (Done by Visual Designer)

I worked closely with the Visual Designer and brainstormed with her on some of the visual layouts. I reviewed mockups and provided feedback to her by leaving comments on Zeplin.

List View Virtual Apps list view.

Source Type Select the Source Type page.

Review Build UX

To maintain the design integrity, I asked engineers for credentials to see the build when it is ready. I set up a meeting to review the build with the Visual Designer - comparing the build UIs with mockups, while doublechecking the content on the UI. I created a UX Review document to point out differences between the build and the design. I shared the UX review document with engineering and PM. Here is a page in the UX Review document:

Review Build UX

To keep track of our feedback, I worked with engineers to create corresponding bugs in JIRA. Also, I prioritized all bugs, so that engineers can focus on fixing the important ones first.

Impacts

The project is well-received. We heard a lot of positive feedback from our customers, telling us this feature is so much easier to use. On the business side, it completed the “Any App” story within the Workspace ONE UEM console.