Digital Directory

An interface for navigating in a mall using a screen or phone

Helped in a Team Project for a Client

Helped a team of product designers develop the experience and interface for a digital directory.
This directory is a point of navigation, replacing an old printed maps
for a touchscreen interface to allow users to search for stores, engage
with an interactive map, and discover deals and events.

Wayfinding isn't just getting from A to B

We designed the product to not only help users navigate,
but also encourage discovery in users' shopping trips.

A digital directory isn't a giant phone

No one on the team had ever worked on something like this before, and we had little precedent
to reference. We knew we had to understand the physicality of the interactions with a directory,
and so we designed for two formats, a portrait and landscape format, testing it with various users.
Designing for touch screen at such a large scale proved incredibly interesting and challenging- gestures
we take for granted on our phones suddenly become laborious and jarring. Certain UI elements were
missed because they were out of peripheral vision. 

Research

We set out to understand users' physical and emotional interactions with the directory.
We had users interact with the physical prototype, route to a store, then actually walk us there.

Here were our key findings:

1. Users were excited about deals & events -
they presented opportunities for a better shopping experience.

2. People preferred the small screen over the large screen;
they enjoyed the privacy of their interactions.

3. People loved the directory & search experience on small screen,
but were drawn to the device via the big screen.

4. Anchor points, such as department stores or escalators,
were extremely important in recalling directions. 

5. It was extremely important that the user be oriented in the correct way,
facing the same direction as the map, in order to even comprehend the directions at all.

Size matters

We discovered key insights into peoples' interactions on large screens- namely, users' gestures
scaled with screen size. However, having a larger screen real estate did not mean we had more
room to fit UI elements- rather, users could only focus on a certain field of view at a time.
Knowing this, the later iteration of the directory limited interactions to only
take up the middle third of the screen. 

The landscape orientation had similar implications as well. Users could only focus on certain areas
at a time; elements such as step by step and deals that lay inside the "UI zone" were unnoticed,
as they sat outside of the visible area. Overall, users performed tasks more successfully on the
landscape format and felt more comfortable using a screen of that size, prompting us to rethink the
dynamic of the large screen.

“What's On” Feature

In our research, visitors also expressed the desire to discover. San Francisco and our other flagships
were heavily tourist-based, and so we introduced a new feature that was outside of the original
scope of the project, yet we believed it would bring a lot of value, we called it "What's On".
What's On is an opportunity for users to discover events and sales happening in the centre,
where users can route to particular happenings across the mall.
We decided to treat What's On as a visual inspiration board, where users could be drawn to beautiful,
dynamic content and encouraged to continually engage with the directory each time they visit the mall. 

Challenges and business decisions

While in research most participants were most comfortable with the small screen, the business
prioritized the tall screen directories. I took this as an opportunity to incorporate the successes of
the small screen into the portrait format.

Functional zones

In the first iteration, the map took up the entire screen. During testing, users got dizzy and
overwhelmed when panning and zooming the map. Some stepped back to be able to see the entire
map, and in doing so, could not reach the screen. In the next version, I focused on breaking up the
UI into functional zones and combining the list directory with the map. 

Designing for a Mall that's also a Transit Hub

The final iteration of the directory was designed for our World Trade Center property.
Because WTC is also a transit hub, users were extremely time-poor and also had different 'top tasks' from
our other properties. After a round of prototyping and research, I designed the directory to be
optimized for three tasks: finding a bathroom, finding the train schedule, and searching for a store.
A user could achieve these tasks immediately through a "hot key" style navigation.