creating location-persistent augmented reality experiences
lead designer - interaction design, design system, visual design, rapid prototyping, user flows
As the lead designer on this project, I worked closely with developers and product managers to initially help redesign a mobile AR mapping app in 4 weeks. The improvements I made to the visual design and overall user experience helped launch the app into beta with hundreds of beta testers. As we continued to work on this app, over the course of 3 additional months, I helped design an AR navigation feature which has become the core functionality of the app. Deals with sporting venues, trade shows, and malls were worked on and ARway was successfully first launched to customers in Asia.
Indoor navigation remains a significant challenge for people in large, complex environments like malls, stadiums, and trade shows. Traditional navigation tools such as Google Maps lack the precision needed for indoor environments, leading to frustration when trying to locate amenities like restrooms or specific stores. This problem not only affects visitors but also reduces the operational effectiveness of these venues. ARway aims to solve this by implementing an augmented reality navigation system that provides accurate, turn-by-turn directions. In addition, ARway enhances the navigation experience by allowing the integration of multimedia elements such as audio files, videos, and images, which can be used for informative content, benefiting both visitors and venue operators. This provides an immersive platform to transform how individuals explore, navigate, and interact within their space.
The initial scope of this project was to give a visual uplift to the app. There were several developers working on this app and design was not a priority prior to me joining the team. This is what the app looked like before I worked on it:
Figure 1: The original ARitize Maps user interface. (Yes, the homepage was a gray screen)
Coming onto the project, it was clear that the app needed a visual uplift, however I needed to understand more about the app and the target audience. I had meetings with product managers and stakeholders to gather requirements and to determine what constraints were on the project.
time constraints
The app was being launched for beta in less than two months and I was originally given two weeks (eventually became four weeks) to redesign the app to allow for development time and QA testing.
team constraints
There were a total of four designers in the company and I was the only designer working with the ARitize Maps team. In addition, we didn’t have any researchers on the team so I took on research in addition to design.
Working within these constraints, I started researching other AR mapping apps. I knew there wasn’t much time to do research, so I conducted a competitive analysis of various different mapping apps like Apple/Google Maps and non-mapping related AR apps such as Adobe Aero. This helped my understanding of common problems that AR mapping applications have and informed my design decisions as I was working on this app.
Figure 2: Google Maps, Apple Maps, GuideBOT, Adobe Aero
Initial research focused on better understanding user’s needs related to creating AR experiences as well as exploring other indoor navigation solutions on the market. A competitive analysis was conducted to identify competitor's strengths and weaknesses to inform ARway's features and information structure.
1.
What other AR products exist focusing creating virtual experiences?
2.
How do people interact with existing products?
3.
What are the current pain points with existing products?
4.
Which features are essential to creating AR experiences?
Figure 3: Competitive Analysis
competitive analysis findings and a new design focus
We noticed many of the other apps that create immersive AR experiences were relying on physical beacons and sensors, wifi, or bluetooth. Furthermore, AR navigation for spaces such as museums, hotels, and malls were limited-non existent.
Based on the research conducted, we found that there was an opportunity to provide an indoor navigation system using ARway.
kicking off with a user-flow
To kick-off the design process, I created a user-flow to help generate ideas and establish which elements were necessary for each screen. Basic wireframes were then created for feedback.
Figure 4: Userflow
Since I was designing this from scratch, I developed a design system from the ground up, using Nextech AR's brand guidelines as a foundation. I organized the design system by creating separate pages for each section within the file. This approach ensured consistency throughout the design and was especially useful when handing off files to the development team. Figure 5 shows the main page of the design system, with a list of sections on the left side. Figure 6 provides a short sample of the contents within each section.
Figure 5: Design System Contents
Figure 6: Design System
creating some initial wireframes
I created initial wireframes of the homepage to get feedback on. This was a particularly important page to receive feedback on because the original homepage was an empty gray screen. Initially, these wireframes showed the user’s own maps in a list view, but this quickly changed because users who don’t create maps and guest users would have an empty home page. Further iterations included a dashboard, featured maps, and nearby maps to create a smoother experience when searching for a specific map to view.
Figure 7: Initial Wireframes
reworking the map creation experience
I also designed several iterations of the mapping experience. This was a complex problem to solve as there were several requirements to accurately map an environment: lighting conditions, mapping speed, capturing enough feature points, and many other factors. I researched different recording apps and found the panorama feature in cameras to be a strong design pattern, however it was difficult for development to implement it in a way where it accurately captured the environment.
Figure 8: Map Creation Iterations
adding AR content in the map
Once the map has been created, various types of content such as navigation, location pins, videos, and more can be added into the map for viewers to see. For example, an art gallery might enhance visitor experience by adding audio files that explain the displayed artwork. Drawing from the insights I gathered earlier from other AR apps, I designed the editor mode where the creator can add the content they want.
Figure 9: Editor and Adding Content
creating locations in the map
Location pins are one of the core features in the app because it allows visitors to be able to navigate through the space with turn-by-turn directions. When designing the location pins, it was important to keep into account whether or not it would be wheelchair-accessible. I prioritized this while designing and it can be seen below in Figure 9 with both possible states: walkable only or wheelchair accessible.
Figure 10: Creating Location Pins
navigating to a location in the directory
On the visitor side, I designed the directory which includes all the locations that have been created in the map. Each location can be navigated to either with turn-by-turn navigation or with a compass-style navigation where it will simply point at the direction the location is at.
Figure 11: Starting Navigation to a Location
ARway was received well by beta testers and there are deals with larger clients and malls being worked on. There are still several things I would want to improve on the app. I would like to conduct user tests with real users to receive direct feedback and iterate the design. Due to the time constraints, there was no time to recruit participants and run these studies during the project. The mapping process in particular could benefit greatly from user testing to see what works and what doesn’t work. Different users and scenarios could be tested to improve the overall experience of the app.
© 2024 william dang
made with ceremonial grade matcha and oat milk