SketchUp - Augmented Reality UI
UX / UI Design for SketchUp's Hololense viewer. Helping forge the path in AR design.
About this Project
From June to August I worked for SketchUp on the Mobile / XR team to help them design and further develop their UI / UX on multiple devices. My focus became solely on the redesign of their viewer application for the upcoming Microsoft Hololens 2. The Hololens 2 allows users to see and iteract with holograms by using their bare hands. The goal was to update the current interface to something that would not only visually be more appealing, but would be intuitive enough for any user to manipulate and interact with the holographic interface.
Research
To start out, we looked at other VR, AR, and MR applications to see how they were designing their interfaces and user interactions and to see how we might be able to improve upon their techniques or create entirely new ones. There were general themes of curved interfaces, but everything was still all in 2D even though AR and MR exist in a 3D space.
We dissected the current interface for the SketchUp Viewer app that was made for the Hololens 1 which only allows the user to interact with holograms in a single way. The designs were 2D and did not match Trimble's (SketchUp's parent company) branding and was not similar to any other SketchUp application.
Prototyping
From Miro, to paper, to Sketch.
The SketchUp desktop and web applications have many tools for designing and viewing 3D objects, so the Viewer for the Hololens needed to be scaled down to just the core features that are included in the viewer application on other devices. The user needed to preform a few essential actions; view models, rotate and scale them, enter immersive mode, collaborate with others, and manipulate the interfaces.
After multiple iterations, there were a few core UI / UX elements that we chose to use:
- Grab Bar: Gives the user a place to grab an interface panel and move it around the room
- 3D Buttons: When hovering and pressing a button, a 3D box is projected above it and then moved inwards as the user "pushes" it in
- Transparent Interface: To keep the illusion of holograms, we went with a semi-transparent interface that the user can still see the room through
Final Results
