Other people are watching this portfolio, reach out now! #darkpatterns

Google

About the project

Introducing voice-activated shopping with Google

I was contacted by Factor SF to help them design and prototype a landing page for the Google Express team. The main goal of that landing page was to drive trial of voice-activated shopping. We decided to do so by showing the stores that you can shop with your voice as well as some examples of conversations with the assistant and the 4 easy steps you need to be set up. 

Role

Design & Prototyping

Client

Factor SF & Google 

Date

December 2017

Landing page to drive trial of voice-activated shopping

01

Visual Identity

Respect Google brand and design system

We tried to innovate in terms of concept and animations but we needed to respect Google’s guidelines to make sure we were not breaking any of their design system’s rules.

Typography
Typography
Colors
#4286f5
#e95146
#f0cc00
#36c96f

Google Home by Google

02

Visual Design

The main visual challenge

The main challenge was to visually show that the landing page is only about the voice-activated shopping. This is why we took the decision to have those devices peaking on the side and the Google voice assistant logo centered in the middle to visually imply that it’s all about the assistant inside those devices.  

Header of the landing page

Visually representing the 4 steps to activate trial of voice-activated shopping

Slider showing that the Google assistant is available on all devices

03

Prototyping

Let’s make things move to help the concept

Being able to prototype is a huge benefit because it gives you new tools to empower your creativity. Here, I was playing with the idea of the 4 steps to shop being the four dots of the Google Assistant. Showing more store’s logo as you scroll down was also a way to show more stores without adding too much visual weight.  

Prototype of how the header reacts when the visitor is scrolling

Showing the slider in motion

04

What did I learn?

Being even more collaborative

When working remotely you need to be even more collaborative that you could be when working in the same office space than your client or coworkers. This allowed me to better understand the creative process I needed to follow in order to create meaningful work.   

Respect the design guidelines of a big brand

As a freelancer, I’m usually hired to also come up with a new visual identity. Here I needed to respect the guidelines and Google’s design system. 

Every details matter

When working for a big client, every details matter. The visual hierarchy between your elements, the smallest piece of copy, the order of things : everything needs to be thought through and clearly explained. 

Google Home Mini by Google

Jola Hyjek
Founding Partner & Executive Creative Director at FactorSF

I've had the pleasure to work with Robin. He was quick to get up to speed with project requirements. He was collaborative throughout the entire process, was able to share designs as motion prototypes. Robin's magic power is his ability to take a design challenge and find a simple and an elegant solution.

Design & Prototyping

Robin Noguier

Development & Copywriting

Let's work together!

"Hey Google, contact this design guy"

Hit me up at noguier.robin@gmail.com and let's embark on a wild creative journey!

Keep scrolling or click to go to my next project

Robin Noguier