Luay Alali

Let’s start with some context

One day, I was trying to find my way through the mall by using the navigational diagram near the entrance. I realized everyone, including myself, who tried to use the diagram left confused and unsure. It did not have a clear indicator of where we were in the mall, which direction we were facing, nor were the stores clearly labelled. Instead, we had to utilize an index of a list of stores on the side and reference it with a code of sort on the map.

So I asked myself, “How can I improve this experience?”

And stating the assumptions

Consumers have a difficult experience with wayfinding within shipping centers and retail spaces.
Retail and shopping centers are looking for ways to optimize interactions between their space and the consumers.
Consumers have a difficult time identifying navigational clues.
Consumers prefer to touch and try a product before buying.

Interviewing individuals that were regular shoppers gave me insights into their motivations and behaviours. I wanted to hear them describe to me their experiences within a mall.

What is the ask?

"How might we engage users with purposeful interactions within a navigational tool in order to ease their wayfinding experience?"

Meet Amanda, a 29 year old nurse with a busy life.

Pain Points

Navigation diagrams
Crowds
Lack of clear retail floor

Motivation

Quality products
Touching and feeling products

Behaviour

Speeds through retail space
Compares online prices to retail prices

It was clear to me now the opportunity for intervention was surrounding indoor wayfinding and specifically in regards to offering an accessible wayfinding experience.

After finding the opportunity of intervention, I felt it was the appropriate time to think of a possible solution: thus I created a hypothesis

I believe a mobile wayfinding application that can accurately detect the user’s location and therefore give appropriate, real-time navigation would improve the shopping experience for humans within mall spaces.

Key results that will validate my hypothesis are:

Shoppers perceive their experiences within mall spaces as comfortable and straightforward.
Users report their wayfinding is easier post-application use.

However, with my suggested solution, there are some technological constraints:

The solution is highly dependent on specialized indoor navigation systems that would be needed as the suggested solution requires accurately detecting the user’s location and the stores within the mall.

UWB(Ultra Wide Band)
Bluetooth(Beacons)
UHF RFID
Wi-Fi

To gain a better understanding of the problem space, I conducted 2 rounds of usability testing with 5 participants per round

What I assumed to be true of my users:
Users have experience with using wayfinding applications, such as Google Maps. Users understand their size when it comes to clothing specifically with major brands. "

Scenario I introduced to them:
Amanda arrives at Metropolis mall in Metrotown, BC, Canada. She realizes she has actually downloaded a wayfinding application in the past, however she has never used it past creating an account. She now wants to use the application to find her way to her favorite retail store Lululemon.

After the first iteration of my wireframes, I conducted a usability test on it, and here is what I found:

I realized that I had moved out of scope by adding an option to buy a promotional item in the store information sheet. This caused confusion with users and complicated the task flow presented.
Therefore, with my second iteration, I decided to focus less on selling promotional items and more on optimizing the navigational aspect of the information sheet.

After my second round of usability testing, it became apparent to me that I had no way to salvage the option to buy an item. I had to focus on the navigational aspect of the application.

I choose the compass as the name because it is a simple, common tool we have used for thousands of years to help find our way through all sorts of journeys.

It's also independent of external factors that may cause misdirection. For example, in the outdoors, the elements can cause directional confusion. In indoor spaces, factors such as crowds, lighting, and poor signage can cause confusion. In both situations, a compass works regardless of these factors.

I created a mood board to help me visualize the brand feel.

Post name selection, I decided to create a mood board to further discover and understand the visual identity I intended to represent. I intentionally embarked on this step prior to the logo and wordmark creation as I wanted the wordmark and logo to represent the established identity.

Invision Moodboard

I extracted colours from the images within the mood board.

This allowed me to take a colour-focused look into my mood board sans the distraction of the other elements that make up an image.

Why Bangla MN for the Wordmark?

The cap height and X-height of Bangla MN are close in height. I wanted the descender height to be short because I thought this choice would de-emphasize the “-pass” part of the brand name, and emphasize the word as a whole.

Why Roboto for the rest of the application?

Roboto is flexible; you can alter letter-spacing without it looking too altered or the letters looking abnormally far apart.
Roboto comes with many weights, making it legible even with changing size, and altering the weight of the font does not necessarily change the feel of the font.
Roboto is also an Android system font, and because the Compass prototype was created for Android, it is fitting.

The quick brown fox jumped over the lazy dog.

Google Maps was a big inspiration for me. As they are the most successful mapping application, they have established maturity in their design. Out of all the navigation applications, Google Maps was the easiest to understand relative to the amount of information delivered.

UI Inspiration Board

In the high-fidelity iteration of the application, I ensured the diagrams were exact replicas of Metrotown’s Metropolis mall. The diagrams were rendered as scalable vector graphics to provide scalability and freedom to manipulate point of view for the user.

What did I learn?

I enjoy the design process.

Design is more complex than just a pretty UI, it takes reearch and many rounds of testing and iterations to land on a usable application.

I now appreciate and understand the research aspect of UX design.

Initially I was afraid of the research aspect of design, however I now understand the steps necessary to formulate a complete research plan and execution.

I don’t have all the answers, and it’s ok.

Who does?

What's next?

Multiple fitting room bookings.

The ability to book multiple fitting rooms would greatly enhance the usability of Compass.

Dark theme for application.

Following current trends a dark theme would be easier on the eyes and save energy.

Accessibility considerations.

Not all users are equally capable, Compass should work for everyone.

Multiple store iternary creation.

Users don’t just navigate to one store but to multiple one’s. Compass should be able to create route involving more than just one store.

Compass

Wayfinding simplified.