Case study: Navigating shopping malls with augmented reality

Grishma Vartak
Bootcamp
Published in
8 min readOct 19, 2020

--

Challenge / story

Navigating from place to place is a daily activity for all. Usually, we lookout for signage to help us reach our destination. But what happens is most of the times we spend a lot of time looking for the signages.

Let’s consider the example of a shopping complex. Consider you are going to a mall for the first time in a new city or even maybe your city mall. While each mall does have a map on each floor, there’s a huge array of information on it and takes quite a bit of time for us to absorb the information and finally figure out the route we need to take to reach a particular shop. Once we do reach and wish to go to another desired shop we have to go to the map once again and repeat the entire process or if you like exploring like I do, you’d just roam around until you find your desired store.

Role : UX Researcher, UI/UX Designer.

Duration : 50 hours

Tools : Adobe Illustrator, Adobe Photoshop and Adobe XD

Discovery

Market Research

Market research was one of the methods that was adopted to stress the importance of proper navigation in malls. It makes shoppers easier and faster to find stores that interest them. Reduces the number of customers who leave the mall without making a purchase only because they couldn’t find the store in time. Makes it easier to to find your friend or family member who is also in the same mall and you wish to meet them. Enhances customer experience and mall loyalty. Enhanced shopping experience leads to more customers which in turn attract more retail stores and increased revenue for the mall. Makes shopping easier for specially-abled people. Helps shoppers exit a mall quickly and easily if / when an emergency happens.

User Research

To collect qualitative insights about users’ goals, needs, frustrations and motivations, I conducted telephonic user interviews with 20 users’ ranging from the age group 18 to 50.

Takeaway

After conducting interviews, I summarised my findings as follows:

Pain points:

Every user found it hard to find a store.

15 out of 20 people had to memorise where the stores they wanted to visit were so that they don’t have to go back every time where the floor map was located.

17 out of 20 people found it hard to find the person they were meeting in the mall.

14 out of 20 couldn’t find the desired section, changing rooms and cashier counters in many stores of the mall.

18 out of 20 people did not like going into crowded stores in the mall.

User needs:

To be able to find out the store location they want to go in the mall.

Navigate all the stores and mall effortlessly and efficiently.

Define

The information that I collected during user interviews was branched out into two personas and journey maps to understand users’ need, experiences, behaviours and goals.

Personas

Persona 1 : Peter
Persona 1 : Peter
Persona 2 : Diana
Persona 2 : Diana

User Journey map

Peter’s journey map
Peter’s Journey Map
Diana’s journey map
Diana’s Journey map

How people currently navigate inside malls

To tackle the navigation problem, malls have floor maps of all floors on each floor at the main entrance of the mall. Some of these maps are interactive, you can search for a specific store and they will show you where that store is in the mall. Malls also have one information desk on each floor to guide you whenever necessary. They also use signages to direct you towards restrooms, drinking water and emergency exits.

The goal of my solution

The goal of my solutions is to help Peter Parker and Wonder woman navigate effortlessly and efficiently through the mall. Hence eliminating their frustrations and enhancing their experience.

My solution

FindMyWay

Findmyway is a mobile application which helps users navigate through shopping malls. It uses Augmented reality as a medium to help users navigate. The app also shows you towards your seats if you have a movie/event planned for the day. It is aimed towards reducing as much contact with others as possible and keeping up with social distancing amidst the covid-19 pandemic.

Why AR?

AR presents a new way to interact with people and hence completely enhance their experience in the process. It blends the lines between the physical and digital world.

Amidst Covid scenario, AR tech would help increase user engagement while maintaining social distancing.

Information architecture

After brainstorming on features and taking into account user stories, I came up with the information architecture for the app to show how they would fit in the mobile app.

Information architecture
Information architecture

Taskflow

Let’s see how our user personas would interact with the app.

Taskflow daigram
task flows

Wireframes

That was a lot of thinking and research there, Phew! Now onto some visual work! Before going all in I created some low-fi prototypes. Traditional pen & paper to the rescue!

Wireframes

Final Screens

After all the research, brainstorming and wireframing process it was finally time to digitalise the finalised versions.

Home screen

This is the screen where user lands once he’s opened the app. The user can know his/her current location in respect of the shopping mall. Users also have easy access to any event details they have planned for the day. For eg: if you have a movie plan at a thater in the mall, your ticktes will show up here. You just have to click on the card and you will get the detailed info about your movie. Users can also know about various offers / sales currently going on in the mall.

Search

Once the user clicks onnthe search icon, they’ll be given a list of store categories in the mall. Users can either explore stores in a category by clicking on it or just search for any store they like.

Search

Getting to your favourite store

After finalising the store you want to visit, the app shows more detailed information about it. You can know how crowded it is at the moment, current offers going on and get an intercative guidance to help you reach the store hence making your navigation process more easier. If your device doesn’t support AR in the virtual guide mode then you will have the option to switch to interactive map.

AR at the store

Now you’re finally at the store you want to shop from. You select your clothes and wish to go to the trail room. But, where is it though? Where is the trail room! At this point the user only has to open the app, click on virtual guide and Voila! you will definetly find the trial rooms in no time :)

Finding your seat and friends

So the friend with whom you have made your movie plan with reached a bit earlier and decided they’ll just do some window shopping. You’ve just arrived at this completely new shopping place and are overwhelmed by the size of it. You get anxious about finding your friend and making it to the movie hall just in time for your movie. This is when the app comes in handy. You just have to click on the card under your plans and it’ll give you all the details. It will also show you where exactly you friend is in the mall ( just in case you feel like surprising them by appering suddenly). Once you and your friend finally reach the movie hall, the app will also guide you till your seats. You can also find your seats even if it’s dark in the hall and the movie’s already started.

PS: You can suggest people coming in late for the movie to download this app so they don’t have to flash phone lights to look for their seats while everyone’s trying to enjoy the movie.

Conclusion

My takeaway

We spend most of our time navigating from place to place, working on a problem related to it and finding a solution such that nothing else in the process is compromised was very challenging and fun at the same time. Making a difference even at such a basic level affects the overall shopping experience greatly.

I also wanted to challenge myself further by completing the project in as little time as I could and keep the UI design as simple as I can.

Next steps

In-depth user analysis and design testing need to be conducted to refine and validate the solution.

Making this app accessible to disabled people.

Branding and Logo of the app.

Thank you so much for checking out my first UX Case study on medium!

I got inspired to write this case study from Rohith M S’s case study on facilitating airport navigation through augmented reality & Nikhil’s case study on Uber pickup.

Let me know if you liked my case study by giving as many claps as you want! They’ll definitely keep me motivated to write more :)

If you have any feedback or suggestions feel free to connect with me on LinkedIn or email me at grishh.v19@gmail.com.

You can checkout more of my design work on my website.

--

--