Digital Wayfinding
In this project, we were asked by a major retailer to design a digital solution for product wayfinding for their NYC flagship store. The store itself is 12 floors, has 6 restaurants, and 1,000 of designers, customers can shop for. Working in a team, we generated mockups, did observational studies, usability tests, and visual designs, all the while working closely with our client to ensure success. From there we monitored KPIs through GTM and Google Analytics to monitor usage and user value.
Project overview
In this project, we were asked by a major retailer to design a digital solution for product wayfinding for their NYC flagship store. The store itself is 12 floors, has 6 restaurants, and 1,000 of designers, customers can shop for. Working in a team, we generated mockups, did observational studies, usability tests, and visual designs, all the while working closely with our client to ensure success. From there we monitored KPIs through GTM and Google Analytics to monitor usage and user value.
process
Overview
Background
A major retailer recruitered my company to introduce a digital touchpoint in their user’s wayfinding needs. This was focused to their flagship store in New York City. The store itself houses 6 restaurants, 12 floors, and 1,000s of designers.
In this project, I was a UX/UI Designer and my key deliverables of focus were: UI Flow, UX Research and Findings, Wireframes, Illustrations, and the overall UI styling of the application. I worked with two other designers but was the main design resource on this project.
Painpoints
The current product wayfinding was denoted to paper pamphlets that the store’s resources would hand off as a user entered the building. Not effective and hard to manage financially (from a resource perspective) and easy to miss (if you were near a busy entry point on the floor)
Technology
The medium of the digital touch point was a 7 foot tall kiosk. These kiosks existed in our client’s current building and we deemed it a way to keep cost down and it would stand out in points of needs
The kiosks are touch screen, fully interactive. There were 13 of them. Each of which we determined would be best place where our research dictates users need the most help in finding their products.
Stakeholder Conversations
From stakeholder conversations, we knew the value of the retailer was focusing on the products. From their brand colors and website UI, we knew they wanted their designers to be the cornerstone in terms of letting them create visual interest.
We also learned about current painpoints throughout the stores. Users would come in for a restaurant or a particular designer, they wouldn’t known where to go. The layout of the store is orchestrated to be department specific which then breaks into subdepartments. It becomes harder when users want to search by particular designers though (as they can be located throughout multiple parts of the store or could be set up in a
With that, we knew our color palette would be pretty limited in addition, which ended up being an obstacle towards the visual design phase.
Observational Studies
My design manager and I went to New York City during a stakeholder review and spent two hours doing observational studies.
Our strategy was focused on three things:
Ethnography - Putting on our user’s caps and trying to experience the level of wayfinding and its current obstacles
Customer Observations and Journeys - Selecting a few customers and understand their patterns and behaviors.
- What do user tend to search for?
- How do they want to search?
- What non-product specific wayfinding do they need?
- Customer Entrances and Traffic Analysis - Where is the most traffic and when do users need a wayfinding solution (as soon as they walk in, or entrance of different floors, etc)
Findings
Shopping Behavior
Users tends to shop for product in three ways:
- By Departments (and then subdepartment)
- By Designer
- By Floor
In addition, we realized users want to utilize services
- Restaurants
- Buy Online Pick Up In Store
- Registry
Observation and Ethnography Results
The overall structure of the store, I found to be almost mazeline, it’s not build to easily see across the floor, but more so pitted with different walls for designers and other departments. (It felt like a store within a store)
I realized quickly a few issues:
- Escalators and Elevators - We’re nearly impossible to find. When descending one, the other escalator was on the other side of the level. It was hard to navigate.
- Departments and Subdepartments - It was hard to figure out what department users were standing in especially when coming off an escalator or an elevator.
From observations, I noticed some other patterns that I took note of:
- Users would reference their paper directory, find what floor they are going in, and then appear lost as soon as they got to the floor.
- Traffic tend to halt going in the store on the main level as well as getting off different floors (Mainly for users to orient themselves)
- Restaurants - For this flagship, restaurants were a huge focal point.
- Events - After talking to a few users, events seemed like a key question as well, especially during the holidays. User want to test out new products at this store or see demos
Task Flow and Wireframes
With that, we decided to let users find their products by designer, level, and departments. With these: we took into consideration of:
- Level - How do we show visually where users are currently and where they wanted to go?
- Designers - How do we make sure the UI is intuitive but also fast when searching for a designer in the 1,000’s of designers listed (Trust me they were 1,000s I managed the content list!)
- Departments - How do we show the category and then the subcategory in a list view.
- All Wayfinding - When showing a map, how do we allow users to browse sections and highlight different content on the map where it’s easy to use but also not overly complicated.
User Experience Focuses and Testing
We used guerilla testing to test the wireframe and wireframe prototype throughout our office building. In addition: we used methods to test accessibility and height issues.
We received a kiosk to use in the office for development. From there, we projected the wireframe prototype and had participants go through 4 tasks (one for store services, and three for the product wayfinding methods (level, categories, and sub category)
With accessibility: we recruited shorter participants who can’t reach the UI fully and did testing procedures on wheel bound users to ensure the UI was reachable for those who can’t reach up to the top of the screen.
deliverables
.jpg)
Visual Design and Feedback
All three designers of the project were tasked with ideating the wireframes. Each designer had a specific aspect to dial in on that served to the retailer’s brand:
- Location - The flagship is in a building from the 1920’s. Is there value highlighting the 20’s hotel esthetic that would make this UI accessible
- Limited Color Palette - Another approach was respecting the brands use of color (mainly neutral tones and black and whites) Letting the products speak for themselves.
- On Trend - One design research latest of design trends of designs with animations, floating labels, and other aspects to promote the brand going forward in the future.
As expected, a bit of each of the iteration was used in the final design
- 20’s style influenced the header text
- Limited Color Palette - Reflect the color choices deemed on by the client and brand. It made the content stand out rather than being “too fancy”
- On Trend - The establishment of animation and high level of interaction design would entice and delight users.
Development, Release, and KPI Measuring
With the pilot release, Analytics and event tracking were implemented (strategy built by me) that focused on:
- Usefulness - We included a modal prompting user to say if it was useful
- Usage and Location - As the monitors were located near high traffic points through the store, monitor and understand which ones get the most utilization
- Wayfinding Patterns - Determine what users are searching for the most or top designers to serve as ways to promote content.
Future Enhancements
Three major features were implemented with this client (while I led conversations and product management for each)
They were:
Translations - We noticed high levels of international guest coming into the store. We created translations for 10 different languages. This included refactoring UI formatting for longer labels, right to left text, and even icon considerations based on cultures.
Animated Wayfinding - We realized users needed directions rather than a forced position kiosks. We created wayfinding with our level assets (that I created and orchestrated to the POC of the development) We also gave user the ability to get text based directions and an image of the map and where they were navigating to.
Admin - The client needs an active retainer with our team (which I managed) to deal with new events, new designers, and department changes. This led to issues as the client’s need a less manual way to do so.
This led to an admin portal that I architected, designed, and managed the development of.
.jpg)
