Overview
Microsoft wanted a tablet based kiosk for recommending its smartphones in its own brick and mortar stores, mall popups, and big box retail locations. To create a great recommendation experience, I researched and designed an app that wove together the paths of store visitors and the store associates who helped them.
Role
I was UX Director at Wire Stone and responsible for all research, wireframing & prototyping.
Provided direction to senior visual designer, with oversight from Executive Creative Director.
Presented to Microsoft and reviewed work with Executive CD, VP of Research, and VP of Client Services.
Project Details
Tablet app for Surface Pro.
Planned location was in Microsoft Stores, mall kiosks and Best Buys.
Part of a major Windows Phone marketing campaign following Microsoft's acquisition of Nokia.
Process
1) Discovery & Research
2) Content Strategy
3) UX Design
4) Continuity through Visual Design
5) Looking Back
1) Discovery & Research
Tracing winding customer journeys.
Customer journey mapping was my major activity during discovery & research, consolidating the inputs that would go into separate personas, flows, funnels, and strategic framework documents. The output was a set of 3 journeys that established key touchpoints and interactions to support during design and established a storyline shaping presentations and limiting scope creep.
Two dimensions of customer behavior shaped the journeys and design.
My research identified two key differentiators among customers who would be interacting with this kiosk. When were they considering a purchase? And did they want to talk to a store associate?
Were they considering buying (and when)?
Purchase intent ranged from wanting to see what Windows Phones were all about, to needing to replace a broken or lost buy a device right now. Supporting this range was important. At one end, it was about embracing a brand value of encouraging exploration and learning, and at the other, it was about supporting sales. The outcome was creation of recommendation categories to align with visitor intents across this spectrum.
Did they want to talk with a store associate?
Interaction preference ranged from wanting to talk to someone immediately, to preferring to browse independently. The outcome of this insight was that when a store associate was involved, this kiosk would often be an interaction point, and it would need to support this encounter.
This understanding of customers came from a combination of my own research and existing resources.
I based the three journeys I produced on a combination of existing information and my own research.
My own research activities:
Secret shopping at the Microsoft store & mobile carriers. I even bought phones.
Store associate interviews over two days.
Competitive analysis of how phones were organized and presented.
Something I really wanted: Direct access to customers, but several layers of bureaucracy and sensitivity to circumventing those put this out of reach.
The most valuable existing insights:
Store closing notes, a trove of data about how visitors were thinking of, interacting with, and asking about Windows Phones.
Data-backed best practices for Microsoft Store customer encounters, as used by store associates.
Brand guidelines & messaging framework to ensure consistent communication.
Demographic data of purchasers.
Survey results from store visitors.
2) Content Strategy
Creating Engaging Categories.
Content strategy needed to solve two problems:
What collection of phone categories would best appeal to customers, given the range of possible needs and interests? This would need to take into account the devices available at the time as well as those that would be added to inventory.
I developed an initial set of categories based on customer interests, use cases, and competitive analysis, and then validated these against estimated level of interest and number of devices available for each.
How could phone specs be standardized to enable easy understanding, comparison, and definition of categories? Terms and definitions used for specs tended to differ between manufacturers and even product lines.
I surveyed data from manufacturer and reseller listings, then consolidated this into a single spreadsheet with straightforward names for each feature. These specs were then used in the definitions for phone categories.
3) UX Design
Solving complex needs with simple templates.
UX thinking was a different perspective for this client, who had been expecting something similar to a catalog of bespoke pages showcasing devices and platform features. The context of the customer journeys established the value of a templated approach that made for easy comparisons and an interface that required minimal learning.
Like-for-like comparisons were the core experience.
The traditional advertising experience can make phone comparison challenging for several reasons. Since comparison was a core feature of the kiosk, I worked to address these needs without forgoing the value of including beautiful images and polished copy describing benefits.
Smartphones look similar, particularly without the context of size so I required that all images be at the same scale to prevent a mini from looking like an XL.
Essential features such as camera resolution, storage, and battery life are invisible to the eye so I create a system for visually representing these features.
Highlighted product information isn't consistent between manufacturers or even product lines so I established a common set of terms and specs by reviewing and compiling information from manufacturers and retailers.
Recommendation categories spoke to customer interests.
The final design offered customers 9 categories of phones that they could browse in the comparison experience - for example new, gaming, media, or global travel, plus additional options for carrier and contract type. These categories were developed from conversations with store representatives and competitive review; defined with specific criteria to facilitate easy updates; and were validated to contain at least 3 devices.
Store associates could create comparisons on the fly.
The customer journeys established that store associates would need a way to quickly navigate to a specific device or create a custom set of devices for comparison. I gave them a powerful sortable, filterable list they could use to quickly select several devices to show to a customer.
Informal testing ensured usability.
There was no dedicated budget for usability testing. I worked to get a lot of informal feedback by asking colleagues to perform quick tasks using an InVision prototype. As I worked, I also spent time literally poking my screen from arm's length to make sure buttons were appropriately sized, or even did so while chatting with someone next to me so I could simulate a split attention scenario.
4) Continuity
Supporting Visual Design.
I provided substantial direction to the senior visual designer working on this project. This collaboration brought more balance and hierarchy to the design, reducing the visual weight of the lists of handsets by carrier & contract type.
Mockup of the app on a Surface Pro with 16:9 screen aspect ratio, where the horizontal scroll worked well. More recent Surface tablets use a 3:2 aspect ratio, which would require some rethinking of the layout.
5) Looking Back.
Cell phone stores need experiences like this kiosk. When I’ve visited one, it has invariably felt empty, with a handful of maybe-working devices on display, and a substantial wait to talk to an associate. An engaging self-directed experience could help to fill this gap. In approaching this project today, I would approach a number of things differently:
Smartphone product lines are more complex now.
At the time I’m writing this, Samsung lists 28 model families on its site, and Best Buy has 459 cell phone product listings. These headache-inducing numbers represent an opportunity for some good UX design solutions that would benefit a lot of individuals, retailers, and carriers.
In comparison, this kiosk needed to accommodate a maximum of 32 items because of the limited number of devices running Windows Phone and minimal options for things like storage capacity.
RIP Metro.
Metro heavily influenced the interface for this kiosk, but design systems have made major improvements by adding richer interactions, and better techniques for establishing priority, hierarchy, and layering. Basing the UI on Material 3 would make sense, for today’s Android-dominated market, as would the adoption of more dynamic screens using the scroll animation styles that are now common.
What are the best image types for representing categories?
What is the best way to visually communicate a category such as games? Is it an icon, an image of a device running a game, or a picture of a person playing a game on the device? And how well can customers differentiate a series of categories represented by icons, images of devices, or people using those devices? These were open questions during the design of this kiosk, but ones I couldn't research and address because it was so deeply embedded in Microsoft's branding and identity.
New tools are enabling better process.
Finally, taking on a similar project today, I’d look forward to process improvements. Dedicated testing and lack of direct access to customers were two things I had to work around. But the big thing I’d appreciate is the benefit of prototyping as part of the design process, in particular, because it greatly simplifies communication and presentation.
More Case Studies
