I am the Unseen Guide

In-store Digital Beacon Experience
My Role
I was the lead CX designer responsible for delivering wireframes & documentation. The remaining core team consisted of an interaction designer, a junior designer, a CX researcher, a design manager, several product managers, a CX planner, a program manager, and two app developers.
Problem to Solve
The business problem to solve was to increase store traffic & conversion at a brick & mortar retailer by creating an in-store digital experience that leveraged beacon technology. I was given potential use cases, brief project history, and three weeks to deliver wireframes & documentation for an in-store digital experience utilizing beacons to deliver content to customers.
Bodystorming Exercise
Because beacons are a new technology that don’t have strongly identified design patterns, we first conducted a body-storming exercise, acting out the use cases in the store with our devices in order to identify which problem areas that would need particular attention. From this exercise, we hypothesized the following key findings that we would test in subsequent research.
Key Finding: Expecting users to download the app at the store might be unrealistic, considering the context of the store and the reliability of the wifi network
Proposed Solution: Ease the pain of app downloads with an email promo campaign and promote app downloads in dwell spaces in store
Key Finding: Traffic flow and visual density of the area will impact user interaction
Proposed Solution: The experience lends itself to specific product categories in the store where there was more space, and less visible noise from product packaging & signage.
Storyboards
With these findings, I drafted four storyboards, one to illustrate each use case, that tied back to our personas. These storyboards helped illustrate where additional signage would need to be added, what departments we could target, as well as, serving as a quick visual guide to get the project team on the same page before prototypes were completed.
Early Sketches

User Task Flow/Wireframe Hybrid

Offer User Task Flow Example
I created a user task flow for each use case that included edge case scenarios.
Wireframes
I created early wireframes for the 'happy path scenario' through the use cases, excluding edge cases.
Research
We advocated strongly for customer testing of early prototypes, which hadn’t been in the early schedule, and after much debate, received a four week window to conduct research, quite a large victory as this change needed sign-off at the executive level. The team began building the early prototypes, recruiting research participants, and developing a research plan.
Using Axure, we saved time by using just enough interaction & design for the prototype. We built the prototype to answer the following questions:
1. Identify if, under ideal technical circumstances, users are able to understand how to interact with a hover beacon experience
2. Uncover if users find the content of the four use cases valuable & envision themselves using it
3. Determine if most customers can readily download an app on their phone, and if they’d be willing to do it while shopping in a retail store.
Customer Insights
We synthesized the research into four main customer insights:
1. Convince people they need it!
2. People don’t read signage. They dive right in.
3. Seduce and delight customers by giving beacons a lovable personality.
4. Designing for delight requires pushing beyond the safe and expected.
Detailed Designs
Below are example screens from the UI mobile experience...
Alternative Store Mode Entry Points
If customer chooses not to enable Store Mode on breaking the Geo-Fence of the store, s/he can access it from the home screen. Onboarding is available via the help icon in the upper right corner.
Customer Engaging with the Beacon
The mobile device screen parallels what is happening on the custom beacon cover.
Help Notifications
I created different sets of help messaging for what needed to be enabled on the phone. These screens are conditional and shown only for specific edge cases.
Main Screens
Depending on which beacon a customer engages with, specific content will display such as an offer, a video or an augmented reality experience that embeds reviews of products onto a live image of the store.
Offer animating into Wallet
Once the customer taps 'Add to Wallet' button, the square lifts while the beacon screen slides down behind it. It then shrinks & moves into the wallet.
Augmented reality showing reviews for products
Reviews are available for specific items in bedding, electronics & home. The customer taps on the flag which animates to become larger and contain the entire review.
Beacon History
Beacon history can contain up to last 100 pieces of content... expiring offers show date below in red, while expired offers appear inactive in gray. Swipe left allows users to delete content.
Error Messaging and Pop-ups
Since the technology uses bluetooth and location services, the app prompts the user to enable those if s/he tries to engage in the experience with one or both turned off.

Other Projects

I am a Fair Marketplace
2012
WorldofGood.com Marketplace & Email Design
I am a Compass for Information
2015
Gensler Intranet Search
I am the Golden Trophy for Architecture
2014
GDEA Awards Submission Form
I am the Pulse of the City
2014
Poppy Seed iOS Mobile App
I am the Gift that Keeps Giving
2016
Customer Journey Map
I am Your Shopping Companion
2016
Mobile Next
I am the Epic Ski Story Retold
2012
Patagonia Common Threads + eBay
Back to Top