UX/UI Design
Mall navigation with Augmented Reality
COMPANY
WayPoint (XPHERA)
ROLE
UX/UI Designer
EXPERTISE
Mobile Application
YEAR
2024
Project description
WayPoint is an innovative mobile application designed to transform navigation and store searches using augmented reality (AR) technology. With an interactive AR guide, users enjoy a stress-free experience finding stores and routes within a mall. Simply point your phone at the space, and let WayPoint lead the way!
Role & Responsibilities
As a UX/UI Designer, I worked alongside a fellow designer to research and understand users' needs and frustrations. Through video interviews with potential users, I gathered valuable insights that guided our ideation and design process. I created a new UI style and custom components specifically for the mobile app, ensuring a cohesive and user-friendly experience.
Timeline
It took approximately 1.5 months to complete the first round of the design.
Process
For this project, I utilized the Double Diamonds process. This approach helps me think logically, empathize with users, and find proper solutions.
Discover
Background
Navigating a shopping mall for the first time can be quite challenging, don’t you think? I remember my experience at the Dubai Mall, which is one of the largest malls in the world. It was incredibly crowded and filled with numerous stores. Although there was a directory guide available, it wasn't very helpful—people often lined up in front of it, making it difficult to remember how to get from point A to point B.
After my initial visit, I returned several more times, feeling confident that I could easily find the stores I wanted to visit. However, I was mistaken. I ended up getting lost in that vast space and couldn’t locate the store I was interested in checking out.
Survey
I created and distributed a Google Forms survey to gather quantitative data from a diverse group of mall shoppers. Targeting participants aged 20 to 50, with an equal gender distribution, the survey collected insights from 24 individuals. These quantitative results offered a clearer understanding of shoppers’ experiences and challenges when visiting malls.
Key findings from the survey:
About 60% of the participants have lost in a mall
About 20% think it’s not easy to find stores that they want to go
About 42% show an interest in an AR direction
Interview
Based on the survey insights, I conducted one-on-one interviews to uncover detailed stories and personal experiences from participants, aiming to understand their perspectives and compare them to my own. I summarized their feedback, focusing on identifying recurring pain points and frustrations in their mall navigation experiences.
Research findings
😞 Pain points:
Difficulty Finding Stores:
Shoppers often struggle to locate specific stores, particularly in large or complex malls.Ineffective Maps:
Physical or digital maps are sometimes unclear or hard to interpret.Getting Lost:
Many shoppers report losing time wandering around, especially if signs are inconsistent or not visible.Searching for Amenities:
Locating restrooms, food courts, or ATMs can be time-consuming without proper guidance.Limited Use of Current Solutions:
Shoppers use Google Maps or mall directories but find them unsuitable for indoor navigation.Stressful Visits:
Shoppers feel stressed when they cannot quickly find what they need.
💚 User’s needs:
Clear Directions:
A need for precise, step-by-step directions to stores, amenities, or parking spots.Interactive Maps:
Visuals that simplify navigation and reduce confusion.Quick Search:
Ability to quickly find stores, services, or promotions without wandering aimlessly.Stress-Free Visits:
Tools to reduce frustration, such as easily accessible store directories and intuitive interfaces.
Define
User persona
Based on the research findings, I developed a user persona, Sarah, to represent and embody the insights gained. This persona helps bring the research to life and guides design decisions by reflecting real user needs and behaviors.
Problem
Many mall shoppers struggle with navigation, spending unnecessary time searching for stores and amenities, leading to frustration and a poor shopping experience. How might we design an intuitive and efficient wayfinding solution that helps users easily locate their desired destinations within a mall, enhancing their overall experience?
Proposed approach
To enhance mall navigation, we hypothesize that integrating an augmented reality (AR) wayfinding feature into a mobile app will help users efficiently locate stores and amenities. By providing real-time, interactive visual cues and directions, the app will reduce confusion and improve overall user satisfaction. The app could feature store search capabilities, personalized recommendations, and adaptive route planning, making it easier for users to navigate the mall in a stress-free manner.
But why AR?
Using AR (Augmented Reality) for navigation in a mall offers several unique benefits that can directly address the pain points identified in your research. Here’s why AR is a great solution:
Real-time, Interactive Experience:
AR provides users with dynamic, on-screen visuals that guide them in real time, overlaying directions directly onto their view of the environment. This eliminates confusion and the need to rely on static maps or text-based directions, making navigation more intuitive and engaging.
Enhancing Spatial Awareness:
AR enhances spatial understanding by showing users exactly where to go, helping them visualize their surroundings and orient themselves more easily in unfamiliar environments. For shoppers in a large mall, this is particularly valuable.
And, it’s cool to use!
Develop
User flow
Based on Sarah’s story, I made a potential flow on how she can interact with the application.
Wireframe
I began sketching visual concepts as black-and-white wireframes, focusing on designing three key user experiences. First, I outlined the onboarding process to help users get started with the application. Next, I designed the home screen, where users can begin their journey by searching for specific destinations or exploring additional information. Finally, I developed the AR navigation feature to guide users effortlessly to their desired stores.
The logo represents the letter 'W' for WayPoint, designed to resemble a map, reinforcing the concept of navigation and direction.
Design (High-fidelity)
I chose a bright color palette to evoke the feeling of cutting-edge technology and augmented reality, complemented by a darker contrasting color to make the neon tones pop. After finalizing the colors and other visual assets, I applied them to the wireframes to complete the overall visual design. This marked the first draft of the high-fidelity design and the accompanying style guide.
Design feedback and iterations
I shared my initial draft with other designers to gather feedback. After collaborative discussions on potential improvements, I implemented the suggested changes.
Final design
Based on the feedback, I updated several items:
Integrated an 'AR' menu into the navigation bar for seamless access.
Enhanced visual elements, like coupons and cards, to improve accessibility.
Simplified floating information on the AR screen to enhance navigation visibility.
Presenting the Final Screens of WayPoint!
Conclusion
After my experience at XPHERA, I felt inspired to explore how augmented reality can further enhance everyday life. While this was a personal project, I drew heavily from the knowledge and insights gained during my time at XPHERA. I engaged with several individuals to understand their challenges at malls and identify ways to elevate their shopping experience. This project allowed me to creatively explore new ideas and apply my visual design skills in a context distinct from my professional work.
Next steps
Expand the concept to other environments, such as street-side restaurants or locating businesses.
Address safety concerns by designing solutions that minimize risks when using a phone while navigating walkways.
Improve accessibility by integrating voice commands for a more inclusive experience.