Interaction Design
Enhancing ARWay's Map Studio Interactions
Team
ARway
Year
2024
Role
UX Designer Lead
Background
ARWay’s Map Studio is a powerful tool designed for creators to build and edit indoor AR maps. This includes placing location pins, adding 3D content, animations, videos, and images based on floorplans. The end-users experience these AR-enhanced maps via the mobile ARWay app. Despite its capabilities, the Map Studio faced significant usability challenges, particularly for users without a 3D editing background. These issues prompted numerous customer complaints regarding the basic interactions and overall user experience.
My Role
As the Senior UX Designer and Project Lead, I spearheaded the initiative to redesign the Map Studio, focusing on improving its usability and accessibility. The goal was to make it intuitive and easy to use for all creators, regardless of their technical background.
Objective
The primary objective was to update the interactions in Map Studio to simplify the placement and editing of AR content on maps. This involved making controls more intuitive, providing easy navigation, and ensuring that even users without 3D editing experience could effectively use the tool.
Target Users
large venues such as malls, stadiums, and museums, which require efficient and collaborative tools to manage their expansive indoor spaces.
Project Overview
Project: ARWay- Map Studio Enhancement
Scope
-
Map Studio: The web-based editor for creating and managing AR content on indoor maps.
-
Mobile ARWay App: The application used by end-users to navigate indoor environments with enhancements created in Map Studio
Objective
Redesign the interaction model of Map Studio to enhance usability, making it accessible and easy to use for creators of varying technical backgrounds.
Problem Definition
Project: ARWay- AR Indoor Naviagation App
Current Issues:
-
Complex Interactions: Users found it difficult to navigate, control, and place content within the 3D environment.
-
Customer Complaints: High volume of complaints about the difficulty in using basic features.
-
Large Maps: Clients with extensive floorplans needed better tools to overview and navigate quickly.
Goals:
-
Simplify Controls: Make basic actions like moving, rotating, and panning easier to use.
-
Improve Navigation: Provide tools to quickly navigate large maps.
-
Enhance Accessibility: Ensure the tool is intuitive for users without a 3D editing background.
-
Interactive Tutorials: Implement tutorials and shortcuts to assist users.
Results and Impact
Transforming ARWay's Map Studio to enhance usability by 45%, reducing task completion time by 30%, and significantly improving user satisfaction
User Feedback:
Users appreciated the simplified controls and the ability to navigate large maps quickly. The interactive tutorials were particularly well-received, helping new users get up to speed quickly.
UX Metrics
-
Usability Improvement: 45% increase in user satisfaction.
-
Task Efficiency: 30% reduction in task completion time.
-
Support Reduction: 50% decrease in usability-related support tickets.
-
User Retention: Improved user retention rates.
"
The redesigned Map Studio provided a much smoother and intuitive experience, especially for users like me without 3D editing experience! "
How to Solve?
Simplified Interactions
Easy to change the camera view and control navigation. Displayed basic actions prominently on the menu. Added shortcuts for frequently used actions.
"
It is difficult to using the axis gizmo for creators without design background."
How to Solve?
Navigator
Introduced a navigator that enables users to quickly move across the map from one side to the other. The mini map feature provides an overview, helping users maintain their sense of location within the larger map
"
The mall map is too large! I need a way to quickly navigate to the other end without losing my sense of location."
Highlighting the Final Design First
Let me show you the final design to highlight the results. We optimized the map interactions based on extensive research and user feedback. The process presented many challenges and questions. Here are some key highlights:
How to Solve?
Gizmo
Introduced a new gizmo with separate tools for move, rotate, and scale, making it more visible and easier to use. This helps users move objects accurately without making mistakes.
"
The gizmo is hard to use. I often make mistakes when trying to move, rotate, or scale objects in the 3D environment."
How to Solve?
Place Content in 2D Bird View
Provided a 2D bird view option to simplify content placement.
"
It is difficult to place content accurately because positioning it within the 3D scene is challenging"
Key Features: Old vs. New
Based on the different scenarios and user journey toAs adding the new features as the primary Goal，and the operation capability, we didn’t offer the multiple arrival time slot for grocery. And the navigation of the three time slot menu, putting in the top, even the layout looks a little heavy.
Older Version:
There was no quick access to move the map from one side to another, and no way to zoom in/out on specific areas.
Navigator(mini-map)
Problem Solved: This feature helps users quickly navigate large maps without losing their sense of location, improving overall efficiency.
New Version:
Introduced a mini-map that allows quick navigation across the map and provides easy zooming into specific areas.
Older Version:
Users had to place content directly within the 3D environment.
Placing Content
Problem Solved: This approach simplifies content placement, making it easier and more accurate for users to position objects correctly on the map.
New Version:
Content placement is now done in a 2D bird's-eye view for more precise positioning.
Takeaway
Key Lessons learned:
-
Learning from Competitors: Studying similar products provided invaluable insights into designing more user-friendly interactions.
-
Valuing User Feedback: Users know more than we often realize. They provided clear guidance on what was intuitive and what needed improvement.
-
Continuous Testing: Regular testing and feedback loops with target users are crucial. They ensure the design evolves in ways that truly meet user needs.
This journey underscores the importance of continuous user feedback and iterative improvements in creating tools that truly meet user needs. Our efforts not only boosted user satisfaction and efficiency but also reinforced our commitment to delivering exceptional user experiences. This case study exemplifies how thoughtful design can turn challenges into opportunities, ultimately leading to a more engaging and productive user experience.
The redesign of ARWay's Map Studio illustrates the profound impact of user-centered design and the importance of learning from others. By deeply understanding our users' pain points and leveraging insights from competitive analysis and usability testing, we transformed a complex, daunting tool into an intuitive, accessible platform.
Older Version:
Left mouse click rotated the map, and right click moved it. It has XYZ line axis.
Basic Interaction
Problem Solved: This visual guide makes the tool more user-friendly, especially for beginners or those without a 3D editing background.
New Version:
The basic interactions (rotate, move, pan) are visually displayed on the top bar, especially for non-3D editing users.
Older Version:
The object action tools (move, rotation, scale) were on the top bar. And it is hard to use, especially the scale.
Object Interaction (Gizmo)
Problem Solved: This change simplifies the interface, reducing user confusion and making it easier to manipulate objects directly where they are.
New Version:
Selecting an object now displays the related gizmo options at the bottom, making it more intuitive and accessible.
How to Get There
To thoroughly understand the issues and devise effective solutions, we followed a structured process involving comprehensive research, analysis, and iterative testing. Here’s how we approached the project:
Research
To thoroughly understand the issues and devise effective solutions, we conducted comprehensive user research involving various methodologies:
User Interview:
We interviewed current clients from malls, stadiums, and museums who frequently use Map Studio. Our focus was on understanding their pain points, needs, and expectations when using the tool. Through these interviews, we discovered that users consistently struggled with navigating large maps, accurately placing
content in the 3D environment, and managing basic interactions like moving and rotating objects.
Usability Testing
We conducted usability testing with users who did not have a 3D editing background to observe how they completed common tasks in the current Map Studio, such as placing location pins and AR content, as well as editing and changing content. The testing revealed that users struggled with the 3D controls, often losing their sense of location and facing challenges in placing content accurately. Many found the interface overwhelming and unintuitive.
Competitive Analysis
We analyzed similar 3D editing tools and AR content management platforms, such as Spline, Vectary, Tinkercad, and SW Apps for Kids. Successful tools offered simplified 2D views for content placement, intuitive navigation controls, and comprehensive onboarding tutorials. These insights guided our redesign strategy, especially noting how user-friendly tools designed for kids can be valuable for beginners.
In-Depth Usability Testing to Refine Problems and Prioritize Tasks
Based on our research and competitive analysis, we conducted additional usability testing for basic interactive actions that other 3D and AR editors excelled at. We summarized our findings in a table to prioritize the most critical improvements.
