I worked with the Technical Demo Team at PTC to redesign multiple AR Demo experiences built for Demo Catalog. This is UI redesign I’ve done for one of the experiences, Pipe and Valves Replacement.
UX Research • UI Design •
PTC’s Technical Demo team creates demo catalog for our sales reps to showcase Vuforia View demos to potential customers. Using PTC’s product, Vuforia Studio, anyone can create the AR experience. However, because anyone with the program can create it, some of the demo experience was not designed well to showcase our product to its full extent.
The TDD team wanted to revamp some of the poorly designed experiences in their catalog.
The Pipe and Valve Replacement experience was designed to be used on iPhone. Its purpose is to instruct how to locate, analyze, and replace the valve causing the issue of the pipe. Each of the 4 steps shows the information and the 3D animation.
In current design, the information panel slides in from the right, which covers up almost 2/3 of the screen. Users could not see the 3D animation because of this.
To learn more about how the sales reps would interact with their iPhone using this demo, I conducted a research on how people hold phones on their hands. According to a research by Steven Hoober on how people hold their mobile phones, 49% people hold the phone with one hand, and amongst those, 67% of them use it with the right hand. And the green area is the most comfortable area in the screen clicking using your thumb.
To test this theory, I observed 3 of my colleagues using smartphones with their hand. 2 of the 3 held the phone with one hand and 1 held it cradled.
Even though this was just a demo the experience, it still needed a good experience since it was going to be used in front of potential customers. Based on the findings, I redesigned the UI to improve the experience of using this demo in one hand. I first sketched out the replacement of the UI and translated that into a quick mid-fidelity mockup to share with the demo team.
While keeping the color scheme of the old design, I replaced all the 2D elements at the bottom of the screen. The interaction buttons were placed at the bottom left for users to click with their right thumb. The information panel appears on the bottom right to make sure the 3D animation is visible. When I had some of the sales reps to test this prototype, they all loved the idea of having to toggle through the menu in one hand, while also being able to see everything.
Always communicate with your developer. Although I did hand over the CSS code of this design to the developer at the end, the process would have been smoother had we communicated from the beginning. If we were both on the same page there would have been less time spent trying to clarify the design decisions where the developer wasn't clear of.
Consider left-handed users and bigger screens. Although the main use case of this demo was on iPhone, I needed to consider how the UI placement would look when the demo was showcased on iPad. Also, I learned from some sales reps that it would have been nice to include an option to switch alignment of the buttons when using the phone with left hand.