ARWay
Transforming Spaces with Augmented Reality Mapping
Goal
- Simplifying Augmented Reality Content Placement in ARWay’s Studio Suite
Role & Timeline
Senior UX Designer, 1 month
Tools
- Figma
- Spline
The Challenge
Product Placements
ARWay’s platform helps businesses create interactive maps for spaces like malls, museums, and retail venues, enhancing user experiences through AR content. However, users were facing challenges when trying to place AR content like 3D content, videos and audio on large maps within the Studio Suite. The primary pain point was the difficulty in navigating through expansive maps and zooming in and out efficiently, leading to a time-consuming and frustrating user experience.
The Approach
To address this, I focused on understanding the pain points of the Studio Suite’s primary users — the content creators responsible for importing and placing AR content on maps.
Through research and feedback gathered from users, I uncovered these key insights:
- User Struggle: Users had a hard time navigating and zooming through large, detailed maps as well as moving and navigating through the placed items.
- User Persona: My target persona was the Studio Suite content creators, whose efficiency was affected by the cumbersome navigation process.
3D Products Research
From our user strories I was able to research ideas to solve our edit and navigational issues
3D Figma Interactions with Spline
Designing 3D interfaces for ARway in a 2D environment like Figma presents unique challenges. To streamline the process and bring my ideas to life, I used Spline to export GIFs that showcased triggered interactions. This allowed me to easily integrate and present these dynamic elements within my Figma prototypes.
Spline Animations
First I needed to create the 3D gif animations in spline (map rotation) to export as gifs and place them into the figma to be seen when triggered
Figma Ideation
Gif would be triggered on drag and after a few seconds of play it would jump to a static image (same as the last animated frame)
Figma Prototype
Finally I was able to show the interactions in a Figma prototype to clearly showcase the desired interaction
Collaboration and Testing
Collaboration
I worked closely with the design director, engineers, and the project manager to bring the design to life. Throughout the process, I showcased wireframes and prototypes, iterating based on their feedback to refine the design. This collaboration ensured that the final solution was technically feasible and aligned with the overall product vision.
Implemented Solutions
Navigator Tool
The Navigator tool displays a thumbnail of the entire canvas, allowing users to zoom in and out quickly and pan around by dragging a red box representing the visible area. This tool streamlines navigation, especially when working on large maps.
Target Zoom
Double-clicking an item in the layers menu smoothly zooms and centers the main camera on the selected object, bringing it into clear focus. This intuitive action enhances the editing experience, making precise adjustments effortless.
Object Editing
A small floating panel below each object provides users with full control, enabling them to select, move, rotate, and scale the item. It also offers access to an edit panel for adjusting various settings, enhancing control and customization.