Pixel 3 with Alternate Moments UI video on screen. Pixel 3 set atop a landscape photo matching the landscape in the UI video. Pixel 3 with Alternate Moments UI video on screen. Pixel 3 set atop a landscape photo matching the landscape in the UI video. Pixel 3 with Alternate Moments UI video on screen. Pixel 3 set atop a landscape photo matching the landscape in the UI video.

Delivering the helpfulness of Google in retail

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.

Learn about our demo in 50 seconds  ↬

Contributions

  • Content Strategy
  • UX Design
  • Visual Design
  • Motion Design
  • Art Direction
  • Client Comms

Tools

  • Sketch
  • InVision
  • AfterEffects

Teammates

  • Barry Harbour
  • Meg Linen
  • Eric Lohman
  • Todd Lower
  • Neill McIvor
  • Luiz Sordi

Meeting customers where they are

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.

Our Audience’s Mindset

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.

Our Audience’s Environment

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.

Unpacking the demo experience

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.

Step 1 of 4 Step 1 of 4 Step 1 of 4

Attract

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.

Recommendation

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.

Step 2 of 4 Step 2 of 4 Step 2 of 4

Learn

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.

Recommendation

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.

Step 3 of 4 Step 3 of 4 Step 3 of 4

Try

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.

Recommendation

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.

Step 4 of 4 Step 4 of 4 Step 4 of 4

Explore

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.

Recommendation

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.

Developing the feature strategy

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.

From strategy to content

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.

Feature Strategy diagram mapping each feature to one or more strategy pillars

Defining the demo design

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.

Navigation principles

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.

Design principles

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.

Exploring design concepts

We simultaneously explored user flows, component structures, and style moodboards – proposing design solutions in 3 concepts.

Concept 1: Magic Moments

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.

Attract

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.

A group of 7 friends taking a selfie
A woman using her phone to photograph a brochure with several language
Augmented reality characters flying around a ticket station

Learn

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...

Menu with 4 feature groups
Intro to Google Assistant feature group with a CTA to 'Swipe left to explore'
First feature in the Google Assistant group with a CTA to 'Try Google Lens'

Try

“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.

Intro to Google Lens Tutorial
Instructions to 'Tap on a photo' in Google Photos
Instructions to 'Tap on Lens' when a photo is selected
Outro to Google Lens Tutorial that takes you to Google Photos

Explore

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.

Google Photos with a prominent 'Back to demo' button
Homescreen with a prominent 'Back to demo' button
Demo Menu with the Camera feature group highlighted

Concept 2: Seeing is Believing

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.

Augmented reality character riding on a skateboard with the headline 'Add fun to live scenes with AR Stickers'
Menu with cards for each feature and a CTA to 'Swipe up to learn more' about the highlighted feature
Detail page for select feature
Menu with a Assistant card highlighted
Menu with a Battery card highlighted
Menu with a Switching card highlighted

Concept 3: Squeeze Me

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?

Attract

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.

Pixel greeting
Instructions to 'Squeeze the phone and say, 'Tell me about the Pixel in 20 seconds''
Instructions with pulsing squeeze marks

Learn

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.

Video of a concert crowd
Video zooms in someone recording the concert on their phone, with the singers' faces highlighted on the phone
Resulting photo with the headline 'Alternate Moments captures smiles, not blinks.

Try

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.

CTA to 'View photos taken on Pixel' with alt option to keep watching for the next video
Start of the Assistant video, with a woman scanning a multi-language brochure with her phone
CTA to 'Try Google Lens' with alt option to keep watching for the next video

Evaluating the concepts

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 1 Menu with 4 feature group buttons

❌ Concept 2 Menu

Concept 2 Menu with feature card carousel

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 2 feature page with video, feature description, and CTA

❌ Concept 3 Videos

Concept 3 video featuring the resulting Alternate Moments photo

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 Attract Loop greeting

❌ Concept 3 Mechanism

Concept 3 Attract Loop squeeze mechanism with pulsing squeeze marks

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 1 feature card with 'Try Google Lens' CTA

❌ Concept 3 Videos

Concept 3 video featuring the resulting Alternate Moments photo

Designing a flexible design system

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

Intro text animation that bridges the Attract Loop and Menu, grounding viewers in the demo

Menu

Menu with 4 feature group buttons and a 'More reasons to join #teampixel' text link

Feature Video

The first feature video for the 'Take brilliant photos' group, with a headline 'Say goodbye to closed eyes with Alternate Moments'

Feature Video (cont.)

Feature video continues playing

UI Video

UI video aniamtes in, showing the resulting photo

UI Video - Actions

Action CTAs animate in at the end of the UI video, with a 'Replay' button atop the video, and a 'Swipe to proceed' CTA at the bottom of the screen

2 devices, 1 system

We ensured that our design system worked with the shape of both the Pixel 3 and 3XL, which includes a top notch.

Menu on Pixel 3XL
Feature Video on Pixel 3XL
UI Video on Pixel 3XL

A system for copy

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

Intro Copy on Feature Video

End Copy

End Copy on UI Video card

A refined user flow

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.

Diagram of final user flow

Remembering the Attract Loop

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.

Concept

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.

Moodboards

Four Google dots dance around the screen
A white dot moves along a dotted grid on a blue background
Blue dot returns to the dancing dots
Dots create a sunrise formation on a yellow background

Prototypes

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

Crafting the content

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

Catalyst (noun): Something which incites activity.

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.

The Cast

We brought the Catalyst concept to life through the stories of 3 interconnected characters (and 1 adorable pup).

Sophia

Actress who played Sophia; woman with curly brown hair and green eyes

Darren

Actor who played Darren; man with short, curly black hair and brown eyes

Camille

Actress who played Camille; woman with long, straight black hair and brown eyes

Kip

Dog who played Kip; a white bull terrier

The Stories

These spanned the 4 feature groups, with unique scenarios in each story highlighting the benefits of individual features.

Story 1

Take brilliant photos

Sophia & Camille take Kip hiking. This story showcases how the Pixel 3 enables Sophia to capture and save new memories.

Story 2

Make your day smarter

Sophia & Darren use Google Assistant and Lens to find answers throughout their day, then use Sunshine to wind down at night.

Story 3

Worry-free battery

Sophia prepares for a full day of work and play, with the help of Dreamliner and a long-lasting battery.

Story 4

Switch in 10

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.

The Storyboards

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

Sketched storyboard with 5 panels showing the feature video and UI video sequence of the Alternate Moments feature

The Shoot

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.

Grid of photos from the photoshoot

Bringing it all together

Following the shoot, it came time to put all the content together. The content lived in 4 formats:

Menu

Final Menu design with photos from the photoshoot

Feature Video

Final Feature Video design with video footage from the photoshoot

Feature UI

Final Feature UI Video design with photos from the photoshoot

Freeplay

Photo of Camille from the photoshoot in Google Photos, with the 'Back to demo' button floating atop the photo

Localizing the demo

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

Menu in German

Spanish

UI Video in Spanish

Japanese

UI Video in Japanese

Looking forward & reflecting back

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

Shared vision = shared success.

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

Solid system = solid fallback.

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

Quick prototypes = quick wins.

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

Reach Out

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  💌