Christine.
thumb2.jpg

Westfield Wayfinding

  Research  Visual & UX Design

Malls are often a confusing- and sometimes frustrating- space to navigate. A few centres, particularly Westfield San Francisco, had a history of complaints regarding how the physical space was extremely confusing to navigate. Westfield was looking to enhance the usability and visual design of their maps to improve mall-goers' experience in the physical mall. 

Design Director : Amir Bahadori; UX/VisD: Christine Liao; UX: Saad Ansari  

Wayfinding isn't just signage. It's a system.

Wayfinding isn't just signage. It's a system.

 

As a small team, we were tasked with creating a mapping system that would touch web, mobile, and directory. The goal was not only to address the main painpoint expressed by our users - to find a store - but also to lay down a foundational ecosystem for location-based data. Setting up this wayfinding system laid the path to be able to integrate things like favorites, account creation, and concierge service to tie into a physical location to the mall, which helps us not only guide users to their destinations, but also optimize and curate their own shopping experiences. 

Old and New

Old and New

 

  "I was just at the SF Mall this morning... and had an experience that made me feel like it was 1990. I was trying to locate a particular store (now closed) and couldn't find a physical map so I thought I'd check the web. Surely Westfield makes it easy to find stores online. Uh, not really."

- an email to our support team, 2014.

I worked to redesign the visual look & feel of the maps. Above shows revisions of the map colors, iconography, labels, and interaction- we included streets and parking, and must crucially, a map search. 

Color

Color

 

There were over 20 different iterations of colors for the maps, and here are the last four. We kept the overall palette to cool hues, with the exception of stores - something we wanted to feel earthy and grounded. Though this would later change, the hallways were dark, to stand out against the muted palette of the rest of the map, to make them appear almost like streets against the stores ("buildings").

How do People Read a Map?

How do People Read a Map?

 

A big part of this redesign was understanding how people read, remember and understand maps. We brought in several mall goers (those who visited the mall at least once a month) to draw the San Francisco Centre from memory. We found people called out very particular things: food, escalators, and department stores. As people drew, we observed that they first drew the mall boundary, then started from the street entrance, then outlined hallways- we took this and created a map that included streets, a prominently colored hallway, and made sure that department stores were always labeled.

Designing for Search on a Map

 

We talked to around 40 users over the course of the year to learn about how they planned their trips to the mall. Very rarely did users utilize the map to look for broader searches such as "shoes" or "dresses", and most were looking for a particular store or brand. We had to address the issue of how to surface multiple stores (Sunglass Hut) in one centre, or what happens when a store has multiple floors (Bloomingdales). I focused on creating a singular result oriented search; users must choose a result before being drawn to a location, rather than being inundated with multiple map markers.

Governance & Making a Styleguide

Governance & Making a Styleguide

 

As the mapping project grew and grew, implementation grew more and more complex. With each platform came different implementations and different inconsistencies. To address these issues I took the time to create a source of truth - an official mapping style guide. This living guide documents behaviors and styling for maps, including labels, tooltips, floor controls, inline labeling, zoom behaviors, and selected states. With the help of our other designers and engineers, we created an internal, dynamic website to house this style guide.