Vuforia Instruct
A workforce productivity tool for creating step-by-step augmented reality work instructions.
Role — Lead Product Designer
Timeline — 2 months from concept to MVP | Vuforia Instruct shipped in Spring of 2021
Platform — Web App
Team — Design Manager, Product Designer (me), Visual Designer, PM, PO
Background
Motivation
The Vuforia Editor allows frontline workers to create work instructions for manufacturing processes. Before this project authors were limited to using 2D assets: photos, videos, and text to author content.
This project stemmed from a strategic push to get CAD (3D) capabilities into the Editor so that workers could leverage existing CAD data to create robust Augmented reality experiences for product-centric work instructions.
Goal
One of our main challenges was successfully keeping the simplicity of the existing Editor while supporting a whole new powerful workflow which unlocked a new use case: creating work instructions for Quality Inspection scenarios.
Final Design
1. New Step Layout
I pushed to have responsive step card designs with components that stack cleanly in a narrow state and only stretch up to a maximum size. I wanted to build in suggestions for not only easy authoring but high quality authoring; starting by removing huge text fields which we found encouraged verbose and confusing work instructions.
During our customer Beta program we heard from one customer that the “new Editor” was even simpler than the old Editor - despite that fact that it had a whole new offering’s worth of features added to it.
We credit this praise to the fact that we also took it upon ourselves to address certain issues that had plagued the Editor for almost a year - these included things like creating modern step cards that followed best practices for responsive web design.
An example of what how the original design was not responsive to when the ‘procedure editing panel’ was wide or narrow. On hi-res displays the step cards could stretch as wide as the full width of the screen and in condensed views the content overflowed and relied on horizontal scrolling.
2. Step Templates
Similar to how other apps like Typeform or Powerpoint create question or slide templates, we wanted to streamline authoring around needs that were specific to our customer’s Industrial Manufacturing use-cases.
3. 3D Editor
The 3d models load into a view next to the step panels - which we called the “3D Editor”. To simplify authoring and minimize complexity the 3D model only shows the 3D marker (the teal arrow) for the step that is currently selected.
I also proposed adding categories to the step cards to help clarify the value and purpose of adding a CAD model to a procedure. With 3D CAD, an author could clearly show where a step takes place and then describe what the task is through text and media.
To be successful we integrated 3D CAD capabilities into a product that beforehand had only supported 2D content: text, images, and videos. We needed to do so in a way that was familiar to CAD experts and welcoming to non-CAD experts.
We drew inspiration from the OnShape product, a web-based CAD tool, and worked with their team to incorporate some of their best practices in our 3D editor.
A principle I developed early on this project (based on user research) and advocated for throughout is that the authors (the users of the Editor software) did not need to be AR experts to be able to write AR-based work instructions. As part of this effort we strived to avoid the term "Augmented Reality" and instead explained the goal in terms of "physical vs digital objects", "3D", and "CAD".
4. Condensed Asset Browsing
To give more screen real estate to the 3D viewer panel, I added a single column view to the Asset browsing library. Previously it occupied at least 1/3 of the screen width at its minimum width.
Process
This project started with very little scope definition and a laundry list of requirements from a variety of stakeholders.
Part of my work was to quickly consolidate those requirements into several proposals for direction. These early proposals fueled conversations with Product that helped everyone debate concretely around timeline and strategy, and eventually created a much more focused and scoped output for our MVP.
For the early stages of this project I made sure all the end to end flows were low-fidelity grayscales so I could keep the conversation at a high level and postpone the details for the later stages of the project.
I drew inspiration from PowerPoint, Typeform, Google Forms, and Notion to create step "templates" to support different media types that users may need. The goal was to give the Author greater control over content which also allowed us to better understand the authoring intent and create a more tailored Content delivery experience.
On the 3D side, we intentionally pattern-matched the experience to OnShape (a PTC CAD solution), so that the 3D Viewer could be familiar to those users.
Many 3D tools, whether they’re CAD tools (Solidworks, Creo, Onshape) or 3D modeling tools (Maya, Blender), typically don’t expose simple controls like rotate, drag, or zoom.
I advocated that we add in extra hand-holding and exposed these controls as buttons, for users who were new to these tools, instead of keeping them hidden behind keyboard and mouse shortcuts.
Left: Mockup of toolbar with future-looking controls. Right: Final design for current scope of toolbar.
An extreme but possible scenario was where a user had many panels open at once: the asset library, 3D viewer, step editor, a 3D viewer, and the versions and history panel.
Previous to this project a lot of the designs in the Editor had been "eyeballed" during the implementation phase - part of this effort was a big push to get designs implemented to spec.
With all of the new features, screen real estate became extra critical. We took a lot of care to create responsive designs and we wanted that to come through in the final product.
The Editor with all the possible panels open (wip in production).
Results
On an individual note, I received great feedback for the work on this project:
“I have been completely blown away by the concepts Luisa produced for the [3D Editor] project. These concepts have plagued PTC for over a year, and no one has been able to successfully deconstruct and solve these problems.”
At a team and process level, this was the first project after a large re-org so it was also a success in terms of relationship-building and trust; we started with a gnarly scope and were able to come out the other side with a clean and simple design - that met our business requirements (early steps towards a CAD integration) and user requirements (a simple interface to create AR work instructions without CAD or AR knowledge).
We already know a lot of things we want to change, test, and improve moving forward. There were several areas where we had to make assumptions and move forward based on a limited amount of research and a tight timeline. Despite that, this interface has led to praise from the sales team and our early Beta customers for unlocking AR-authoring capabilities to non-AR-experts in a simple straightforward manner. It was a success in getting something shipped quickly and efficiently so we could learn more from it in the hands of customers.