In 2018, my team at Grow partnered with Google’s Retail team to create the global in-store demo for their flagship smartphone, the Pixel 3 and 3XL.
The Pixel 3 is stunning, inspiring, and easy to use — so we gave it an in-store demo to match. Our demo showcased the phone’s newest features through a self-guided tour created entirely with content shot on the phone itself. The demo allowed customers to easily advance from learning about a feature to trying it, showing first-time Pixel users how easy it is to make the switch.
We then localized the demo experience for 11 markets around the world to support the products’ global release.
Contributions
Tools
Teammates
To create an effective demo, we needed to understand the mindset and environment customers would be in when using it. We surfaced insights from Google’s existing audience research and conducted mystery shop tests in Best Buy and Verizon stores across the U.S. to learn more.
The retail demo experience is the make or break moment for customers. When they’re in retail, they aren’t browsing – they’re investigating.
Finding 1
Customers come to retail with 1-2 phones in mind.* They’re there to experience the phones first-hand, evaluating whether they live up to hype and reviews.
Finding 2
The demo plays a critical role in converting sales. 47% of shoppers would not buy a smartphone without trying the device in-store.*
* Retail Demo Device Primer. Google Analytics. January 2018.
The retail environment is not a friendly place for customers to experience the Pixel. Based on 10 mystery shops at Best Buy and Verizon stores in PA, NJ, VA and CA, we discovered several tensions.
Tension 1
Big players dominate.
Large signage and backlit displays designated Apple and Samsung's territories – each of which housed multiple smartphone options. In comparison, each store had only one or two Pixel 2’s on display with minimal or no signage.
Tension 2
RSA’s aren’t always helpful.
Pixel information communicated by the Retail Sales Associates (RSA) varied widely; at best, it was incomplete – often it was incorrect. When a shopper was interested in a Pixel, the RSA often steered the conversation away from Pixel to a different phone.
Tension 3
IRL is hard to deliver in-store.
In retail environments, the demo phones are tethered down and often don’t have Internet connectivity. This limits what customers can try for themselves, especially with Google’s most impressive features like its camera and Google Assistant.
Knowing that the demo experience is the make or break moment for smartphone customers, we broke the experience down into 4 steps to understand what people are seeing, thinking, and feeling at each step.
When demo phones are on standby, an “Attract Loop” plays on repeat. The Pixel 2 Attract Loop was a series of Google-colored dots that rolled across the screen in a seemingly random pattern. While the animation was really “Google-y” and playful, it didn’t give a compelling reason to interact with the phone.
More than just a screen saver, the Attract Loop can introduce customers to the Pixel’s unique features before they even touch the phone. The Attract Loop is an opportunity to pique customers’ interest, inviting them to learn more by engaging with the phone itself.
Once customers break the Attract Loop, they are brought to the “Info Layer,” where customers can learn about the phone’s features in-depth. The Pixel 2 demo showcased the features – with a heavy emphasis on the camera, in the context of a desert road trip; while the content was wanderlust-inducing, it felt disconnected from how people would use the phone day-to-day.
Within the Info Layer, let’s show people what Pixel can do in real life. We can overcome the limitations of the retail environment by sharing relatable, yet aspirational stories of how people use Pixel 3 out in the real world.
Beyond the Info Layer, the Pixel 2 demo lacked a clear path for customers to get to “Free Play” mode, where the actual phone experience lived. While customers could always press an “X” button at the top of the demo to get to Free Play, there was a missed opportunity to connect the features they saw in the Info Layer to the features they could experience in Free Play.
From the Info Layer, let’s guide customers to the features they can actually experience in-store and show them how to navigate on Pixel.
Free Play is where people really get to experience the phone for themself; they can try out the Camera (and take an unflattering under-the-chin selfie), see what apps are compatible, and more. While Free Play is a space to explore, it’s also a space where people reported feeling lost – especially if they are unfamiliar with how to use the Pixel UI.
Though the steps are linear, the actual user experience is self-directed and fluid. To ensure customers can discover freely without getting lost, let’s help them easily shift between the demo and Free Play – giving them clear pathways within, out of, and back into the demo.
With an understanding of our customers’ mindset, environment, and the demo experience, we developed a feature strategy to inform which features to highlight – and when & where to highlight them – in the Pixel 3 demo. Audience and retail insights informed our strategy’s 3 pillars:
Pillar 1
Pixel 3 empowers our audience to live better. Let’s prove it.
Pixel’s core customers are drawn to tech by emotional connection rather than technical advantage. This means they don’t necessarily care about processing power, but they do care about having tech that connects them to the people and information they need. We can prove that Pixel provides this by highlighting features that proactively improve our customers’ lives.
Pillar 2
Our audience needs to be inspired. Let’s make it magic.
From practical to novel, let’s give customers a few magical things to talk about. We can highlight the features that provide those “oh, wow!” moments our core customers are craving to share with friends & family.
Pillar 3
Switching is terrifying. Let’s ease the fear.
Google audience research pinpointed iOS users as 55% of potential Pixel 3 customers.† Winning over iOS users is our biggest (and toughest) job because switching operating systems isn’t just about changing your phone – it’s a disruption to your ecosystem. We can ease the fear by addressesing common misconceptions about switching.
† Project Flip. Google. Q4 2017, Q1 2018.
We worked with Google to identify and group the Pixel 3’s key features. With then mapped each feature to our strategy pillars, laying the groundwork for our demo content.
With our feature strategy solidified, we explored the design of the demo experience itself. We explored user flows and demo structures with a set of navigation & design principles at the forefront.
Principle 1
Start shallow, then go deep.
Don’t overwhelm customers. Provide a clear, succinct set of options to start, then give them the option to dive deeper.
Principle 2
Lightly guide actions.
Make sure customers can dive deeper without getting lost. Provide cues to help them advance to the next content.
Principle 3
Put the user in control.
Customers should never feel trapped. Provide a navigation system that enables customers to explore the full demo experience without friction.
Principle 1
Provide focus.
Use typography, color, and imagery strategically to guide customers and help them focus on what’s most important.
Principle 2
Design for everyone.
Use of typography and color supports industry standards for accessibility.
Principle 3
Build from white.
Simplicity is key to Google – so our designs should feel clean, crisp, and clear. Add only what’s necessary.
We simultaneously explored user flows, component structures, and style moodboards – proposing design solutions in 3 concepts.
A selfie with 10 people in it and no selfie stick? Translating a menu using the camera? Did you just say ‘Goodnight Google’? Pixel is full of magic moments. Ones you have to see to believe.
Walking up to the phone, you’ll see a series of quick videos featuring people doing unexpected things with Pixel. From translating menus in real-time to fitting the whole family in video call, the videos will highlight Pixel's magic, inviting you to tap to learn more.
When people tap on the Attract Loop, we’ll pay it off with compelling demonstrations of those features. On the Feature Menu, you can choose from the 4 feature groups to learn more. Let's explore the Google Assistant feature group...
“Try” moments give you an opportunity to learn how to use a feature, then see the magic for yourself. In this case, tapping the “Try Google Lens” button from the screen above brings you to a Lens tutorial video. At the end of the tutorial, you'll be redirected to Google Photos in Freeplay, where you’ll see a curated album of Lens-able photos.
When you enter Freeplay, a chathead ensures you have a clear path back to the demo. You can move the chathead around – and even drag it to the trash if you no longer need it. And if you do return to the demo app, we’ll guide your journey by suggesting the next feature group for you to explore.
Most demos make you tap, swipe, and dig several times before you finally get to a feature – and those are the very things you came all the way to the store to see. Why are we hiding the good stuff deep inside the demo?
As you approach the phone, you’ll see a rotating series of video cards highlighting Pixel 3’s most compelling features. Each bite-sized video educates you on the feature. When you interact with the phone, the full-screen video scales down to a card, revealing the full Info Layer.
People show up to the store excited about getting a new phone. They pick up a phone and… are usually met with an underwhelming brochureware. What if there was such a unique way to experience the demo that you just had to try?
As you approach the phone sitting on the display, it greets you with an animated welcome. You’re prompted to squeeze the phone – leaning into Pixel 3's unique capability – and say the voice command to launch the demo. Alternatively, you can tap the prompt below.
After saying the command or tapping, you’ll be brought to the Feature Menu where you can choose from 4 feature groups to learn about.
Let’s see what happens if you choose the Camera… A video begins that shows off the key features from three perspectives. Seeing the action, the UI of the feature, and the amazing final result.
At the end of the video about camera features, you’re given the opportunity to try it yourself in freeplay or continue on to the next feature.
In a work session with 3 Google stakeholders, we discussed the strengths and opportunities in each demo concept, and unearthed new technical and feature limitations. Here’s what we learned:
Learning 1
People don’t want to be overwhelmed with options.
What resonated
The menu in Concept 1 provided very clear, actionable options.
What fell flat
The menu in Concept 2 gave users far too many options and ways to navigate the content, leaving people feeling lost.
✅ Concept 1 Menu
❌ Concept 2 Menu
Learning 2
People don’t want to watch an ad – they want information.
What resonated
The short video format in Concept 2 enables greater feature recall.
What fell flat
The sequenced live action videos in the Attract Loop in Concept 1, Attract Loop in Concept 2, and the Feature Videos in Concept 3 all felt like ads.
✅ Concept 2 Videos
❌ Concept 3 Videos
Learning 3
We need to simplify the Attract Loop for Retail Mode.
What resonated
The tone in Concept 3 felt on brand: friendly, approachable, and helpful.
What fell flat
Though our client appreciated our out-of-the-box thinking, we could not technically “hack” the squeeze feature as proposed in Concept 3. Additionally, to prevent screenburn, elements could not stay stationary.
✅ Concept 3 Tone
❌ Concept 3 Mechanism
Learning 4
We need flexible UI containers.
What resonated
Content containers like the feature pages in Concept 1 and Concept 2 allow us to easily change content.
What fell flat
Relying solely on live action footage, like the Feature Videos in Concept 3, make us too dependent on what we’ll capture in a single shoot.
✅ Concept 1 Features
❌ Concept 3 Videos
Our learnings informed the next iteration of the demo. We combined the strongest components from each concept into 1 design system. Here are the key designs from the Info Layer:
Intro Text Animation
Menu
Feature Video
Feature Video (cont.)
UI Video
UI Video - Actions
We ensured that our design system worked with the shape of both the Pixel 3 and 3XL, which includes a top notch.
We ensured that our design system worked with the shape of both the Pixel 3 and 3XL, which includes a top notch.
Intro Copy
The benefit-driven headline makes a promise to the user & tees-up the video.
End Copy
This tactical description provide more detailed context for the feature they just saw.
Intro Copy
End Copy
In our user flow, we defined the clear navigation pathways throughout the app and from strengthened the positioning of each feature group from a birds-eye view.
To visually align all the 2018 retail demos, Google decided to take the Attract Loop exploration in-house. Thankfully, our work didn’t go to waste – our client shared our concepts & prototypes to the internal Attract Loop team as best-in-class examples.
We start on the 4 Google dots dancing around an off-white background. One-by-one, dots break away from the group, leading into the next scene where the dot creates new shapes of its own. When that scene is complete, the main color returns as a dot into the Google dot arrangement.
Each scene is color-coded according to the feature group. Google Dots can start as flat shapes. Diving into each group, we can bring more life into these scenes with outlined shapes, glows, and dimensionality.
It was great working with you and receiving your thoughtful notes. It was really nice to have the GIFs and the time stamps. I know that takes time to do, so I wanted to tell you it was appreciated!”– Chris Lee, Animator
Prototype 1
Prototype 2
With the user flow and design system solidified, we defined the content that would live in our demo. Keeping our audience top of mind, we crafted relatable, yet aspirational stories of how people use Pixel 3 out in the real world.
The Concept
Pixel 3 is more than just a phone, it’s a catalyst for living your best life. Our core customers want tech that enhances the things that are important to them.
We brought the Catalyst concept to life through the stories of 3 interconnected characters (and 1 adorable pup).
Sophia
Darren
Camille
Kip
These spanned the 4 feature groups, with unique scenarios in each story highlighting the benefits of individual features.
Story 1
Sophia & Camille take Kip hiking. This story showcases how the Pixel 3 enables Sophia to capture and save new memories.
Story 2
Sophia & Darren use Google Assistant and Lens to find answers throughout their day, then use Sunshine to wind down at night.
Story 3
Sophia prepares for a full day of work and play, with the help of Dreamliner and a long-lasting battery.
Story 4
Camille finally makes the switch to Pixel 3. This story shows how easy it is to transfer everything you love, then get right back to enjoying life.
To ensure all parties were aligned on the shots we needed to capture, we storyboarded each feature – defining what would be live action, and what would live in the UI.
“Alternate Moments” Storyboard
We worked with photographer Jules Davies and production company HOOK to capture the stories over a 2-day shoot in Los Angeles. To prove what Pixel’s camera could do, we shot all content directly on Pixel 3’s.
On set, I served as the creative lead – working closely with Jules to style our talent and sets, ensuring we captured each shot we needed.
Following the shoot, it came time to put all the content together. The content lived in 4 formats:
Menu
Feature Video
Feature UI
Freeplay
We localized the demo experience for 11 markets, supporting the global retail launch of both the Pixel 3 and Pixel 3 XL. Each market had unique copy, imagery, and video requirements. Our unique approach to a centralized build and approval process helped ensure a flawless rollout across all regions.
German
Spanish
Japanese
The success of this demo has led to 4 new Retail Demo projects with the Pixel team, and 2 additional projects with other Google retail teams.
Over the 4 months my team & I took the internal site from strategy to shoot to launch, we learned several valuable lessons that strengthened the way we work with one another, our vendors, and our clients.
Takeaway 1
We worked with 4 vendors to help execute the project on time & on budget. Writing and collectively reviewing scopes and production plans ensured that every partner was aligned on goals, responsibilities, and expectations.
Links for learning
Takeaway 2
Our design system ensured we have a framework for our content. This streamlined the workflow and saved our butts when the final UI rolled in 1-week before the demo was due for delivery 😅
Links for learning
Takeaway 3
Throughout our creative exploration, we created clickable prototypes in InVision to test user flows & design choices internally & with Google’s test groups. This process enabled us to iterate quickly and efficiently.
Links for learning
If you’d like to learn more about this project or about the subsequent retail projects, I’d love to hear from you. I’d be happy to share how this work has evolved, and how we can work together to evolve your projects.
You can reach me by email at janice.jamye.pang@gmail.com 💌
