Google Firebase wanted a dynamic and engaging revamp for key pages on their site to help provide clarity around the platform and it’s capabilities, while showcasing it’s versatility through illustrated use cases.

Role —

I worked with a small team to redesign the three main pages of Google Firebase’s marketing site. I helped design the themeboard the client selected and the initial homepage layout, but my focus was primarily on the layout of the usecases page and creating the final illustrations used throughout the site.

Url —

firebase.google.com

Year —

2017

Stylistic Updates

The themeboard that was chosen stuck to Google brand guidelines but had a few twists. The different sections of content were presented on large white cards with restrained copy and straight-forward layouts making the page scanable for developers and approachable for marketers (their two user groups). We introduced a new take on the Firebase illustrations that were informative yet fun and focused on lighting and layering.

Original Design

Selected Themeboard

Ilustrations

I iterated and worked closely with the Firebase team to create illustrations for each of their complex use cases. I subtlely implemented Google’s shadow and texture requirements with the playfullness found in Firebase’s initial illustrations. I contianed scenes to floating circles, refinied the color palette, and utilized opacity and shading to add depth and focal points.

Let users share photos with friends

Optimize ads based on user behavior

Process third-party payments without a server

Roll out new features to specific users

Smaller Versions

Many of the illustrations needed to exist in multiple locations. I decided to create simpler versions of the illustrations to live in the secondary locations that could be scaled much smaller and still communicate the core message.

Build & Test - Full Illustration

Build & Test - Simplified Illustration

Use Cases

I created the layout of the use cases page to adapt to three different variations of use cases: (1) those with text, illustration, and a branded case study, (2) text and illustration, and (3) with text only. Each needed to explain the overall purpose of the use case and show the Firebase products used. To keep the page scanable on mobile, each case is collapsed into a drawer that can be expanded to reveal the rest of the content.