Vantage Web
Digitized work instructions for easy viewing from manufacturing work stations.
Role — Product Design Lead
Timeline — 3 weeks
Platform — Web App
Team —Design Manager, Product Designer (me), Visual Designer, 3 Product Managers, 2 Product Owners
Background
Goal
Revamp the Web Viewer to support new step media types and match the feel of our other content delivery platforms.
Motivation
One of the main methods for viewing work instructions in factory settings today is on desktop computers stationed at work stations. As a business, it’s important that we can robustly support mobile and web platforms. However, the experience for playing back (aka reading) work instructions on the Web platform had not been optimized for Web - in fact, the existing experience built into the Vuforia Editor was a port from a design for an android app.
The Web “Preview” experience as it was when the project started.
I worked with the lead designer and PM from the original Web Viewer to gather requirements on what wasn’t working with the experience:
Users couldn’t tell that multiple media were attached to a step - this was only indicated by a single small icon that got easily lost in the shuffle.
The UI had been optimized for the scale of a mobile device and did not make use of the extended real estate and scale of a web platform.
The app did not match the designs of the latest mobile designs, so the different Playback platforms spoke different visual languages.
Because this Web Viewer was the only way an author could 'Preview' their authored work instructions, the outdated visuals meant the author was not getting an accurate idea of what an end-user would see on their device.
What does success look like?
This project was fueled by a product need to robustly support new media types, including 3D CAD assets and step confirmations.
We needed to update the Web Viewer (Preview and Playback) to support two new features that were added to step cards.
As a design team, we also wanted to:
Use this project to make updates to parts of the Web Viewer that had tested poorly with users
Update the Web Viewer visual language to look like part of the family with the last mobile designs.
The latest mobile designs for viewing Augmented Reality work instructions made by my team member Steve. This was the experience I was trying to match on Web.
Final Design
Key Features
Always-present Step List gives a birds-eye view
Given the larger real estate available on web, I landed on a solution that made the step list (which is hidden behind a menu on mobile) visible at all times. This gave users a high level overview of their progress and a better idea of what was coming next (with the step text snippet).
3D CAD is just another asset
Desktop Augmented Reality is not a good experience so we decided to treat the 3D CAD as an asset (just like images and videos). I explored how much the user needed to manipulate the AR at any given moment, and touched base with a few end-users to get their input. By the end, we understood that the value of 3D was to give a high-level overview of where a step takes place, so in most cases the thumbnail or enlarged thumbnail would be sufficient.
Cross-platform consistency
Because of time constraints we also chose to closely match the UX flow of the mobile app but modified the iconography, layout, and scale to match the web platform. We also used shared components from the Editor design system as much as possible.
A side by side view of 1) The Vuforia Editor, 2) Web Playback (this project), and 3) Mobile Playback. You can see reused components, palette, and controls from the editor on the left as well as the same layout as mobile on the right (with the addition of the always-on step list).
Process
To kickoff the project I gathered requirements from 3 different PMs and two different design teams. I also met with Tech leads early on to get a pulse on the viability of our early ideas. I then set up and ran a workshop with the three design teams whose previous work had influenced this project and got feedback on 5 different solution ideas I had generated after gathering requirements. This helped me bring along all the stakeholders in the design process.
Crowdsource highest priority problems
Collecting background information and biggest concerns from a variety of stakeholders. I also used this to set context for the workshop and get the right type of feedback on my first batch of ideas.
Generate options
In an afternoon, I created several distinct approaches to how we could update the Web experience. I grouped them into categories and this is what I brought into the design workshop I set up for the following day.
Narrow down ideas as a group
I set up categories to help call out what didn’t make sense or raised a red flag (red), what was exciting (green), and what fueled “Yes, and…” inspiration (purple). You can see all the great feedback the team left on this board.
This workshop was super fruitful! My personal favorite going into the meeting was Option A (on the far left), it felt the most “web-native” to me as it took advantage of a “doc-like” layout and was easily navigable via vertical scroll.
I was pleasantly surprised when that was the least favored idea - the beauty of collaboration! We strategized together and agreed on a direction that felt closer to mobile, because we recognized that (for the time being) this Web Viewer needed to work both as a full ‘Playback’ option for frontline workers as well as a ‘Preview’ option for authors. If this experience varied too much from the mobile experience it could mislead the author.
Iterate on the visual look to be web-native and match the intent of mobile app
A work in progress shot of how I adapted the step list UI from iOS tablet (left) to the web step list (right).
An end to end wireframe flow, including native browser warnings to warn about potential data loss. I collaborated closely with the Design and Product folks who worked on the mobile equivalent so we could align on the intent and context behind the various decisions they’d made - and mirror them when appropriate.
Results
This project was a success in that it proposed a first path forward to support 3D and step confirmations in Web Playback. It also proved to be a successful collaboration with a large number of cross-functional team members.
After this design sprint we realized that we needed someone who could devote their full time to this project given that it needed to stay abreast with any changes made on the mobile and tablet platforms. A few weeks later someone joined the team to do exactly that and I was glad to hear how well of a foundation was laid with the principles I developed during this initial work.
It continues to be a challenge to identify when it makes sense to deviate from the pattern established on the mobile platforms versus maintain consistency. To address this we’ve continued to hone into what aspects make web most effective for frontline workers, including future considerations like embed-ability.
*A note on collaboration: I lead the UX and interaction design for this project. When I’d received a sign off on the end-to-end UX flow from all the stakeholders, I created high-fidelity UI mockups to communicate a starting off point for my teammate (a visual designer). He then took those ideas and ran with them while I started the early stages for another project. When he finished we worked together to create the final spec that was ready for dev.