Pattern Radio: Whale Songs
Interactive website design
2018 — 2019

Product/web design for a consumer-facing, interactive website that uses Google machine learning algorithms to classify 15,000 hours of National Oceanic & Atmospheric Administration whale song recordings.

A stripped-down version of this experience was shown as part of the XXII Triennale di Milano themed Broken Nature: Design Takes on Human Survival.

I was responsible for the interaction design of the site. While the visual design of the launched site is considerably more brutalist than what I designed below, the essential functionality still matches many of the interactions I initially designed here (even if many other features of the experience were also removed to scale back the scope of the project). Even with a reduced feature scope, my work on Pattern Radio: Whale Songs won a Best Navigation/Structure Webby for "best-possible user experience through superior navigation and site structure."

Landing page map view of discrete recordings positioned where the recordings were made: at various sites around the Hawaiian islands in the Pacific Ocean.

The red play head is draggable and used for navigation. The clock icon allows users to browse the recordings aligned by the time they were made (see below).

Viewing the recordings aligned by the time they were made. The small blue tags indicate points of interests and are meant to serve as starting points for user exploration.

Zooming into a recording (using the plus and minus buttons in the bottom right [a Google Maps convention]) reveals additional points of interest (see below).

Colored bands on the recordings communicate sound classifications made by the machine learning models. A persistent timeline along the bottom of the recording communicates the scale of the data being viewed.

The tuning icon in the bottom left lets users turn on and off different machine learning classifiers—adding or removing colored bands from the recording.

Zooming in more reveals even more information about the whale song recordings, including units of whale vocalization (sometimes referred to as "whale phonemes"). Insights from scientists are peppered throughout the recordings, providing even more areas for users to investigate.

This design was completed as part of a UI/UX sprint for what ultimately evolved into Pattern Radio: Whale Songs.

Sociotechnical.studio

COMING SOON

Sociotechnical Studio website
2021

Ginkgo Bioworks

NDA

Brand design & creative
2021 — Ongoing

Syntheticbiology.com

Synthetic biology microsite
2021

Grow Store

COMING SOON

First-ever biodesign store
2021 — Ongoing

Brand Studio

COMING SOON

Google Brand Studio portfolio
2020 — 2021

Year in Search

NDA

Google Trends web experience
2020

Airbnb Samara

NDA

Product & site design
2021

Fossil by Wild-Type
Interactive web poster
2020

Front view of marbled Fossil drive angled slightly to the right.

Fossil

Long-term file storage drive
2019 — 2020

Miu

Font family
2020

Google Trends

NDA

Google product redesign
2019 — 2020

Compton Cowboys

Google Trends editorial
2020

Soli Objects

NDA

Hardware Exploration
2019

Google COVID-19 Site
COVID-19 Information & Resources
2020

YouTube Learning Prize

NDA

Design for YouTube Learning Prize
2017 — 2018

Most Searched in History
Interactive campaign website
2019 — 2020

Year in Search
Interactive campaign website
2019

Year in Search
Additional interactive concepts
2019

Type I
Wild-Type Color
2017 — 2018

Type II & Type III
Wild-Type Color
2017 — 2018

Google Pixel 6 Website

NDA

Google hardware vision
2018 — 2019

Type IV
Wild-Type Solar
2017 — 2018

Pattern Radio: Whale Songs

Interactive website design
2018 — 2019

Type L
Wild-Type Landscape
2017 — 2018

Type T
Wild-Type Landscape
2017 — 2018

Type K
Wild-Type Landscape
2017 — 2018

Type S
Wild-Type Landscape
2017 — 2018

Paradiso Poster
Wild-Type poster
2020

Type M
Wild-Type Landscape
2017 — 2018

Type P

COMING SOON

Wild-Type Landscape
2020

Google About

NDA

Site design & vision
2019 — 2020

Wild-Type.Engineering
Wild-Type website
2017 — 2018

Are.na Design

COMING SOON

Are.na brand & UI exercise
2019

Chat Bot

NDA

A.I. training website
2018 — 2019

Google Search History

NDA

Concepts for a new Chrome feature
2019

Notable Women I
Google font, brand, website, apps
2017 — 2018

Notable Women II
iOS & Android apps
2017 — 2018

Lacquer
Google font, poster, type specimen, website
2019

Lacquer Specimen
Font specimen website
2019

Google Crabfood
Internal insight team brand & website
2017 — 2018

Google Crabfood Culture

NDA

Bi-weekly culture newsletter
2017 — 2018

Google Pixel 6

NDA

Google hardware vision
2018

Phone Mode
Power-saving light mode for Google Pixel 4
2019

Google Today

NDA

Google Trends vision
2019 — 2020

Palette.Live

Color palette website
2018

Design System

NDA

Helix consumer genetics
2017

Helix App

NDA

Helix iOS app design
2017

Shopping on Google

NDA

Google Shopping redesign
2018 — 2019

#Ad

NDA

Google experience visioning
2018

Google Design

NDA

Branding, products & posters
2017 — 2021

CreativeLab5.com
Google Creative Lab 5 website
2017 — 2018

Google Hardware

NDA

Various sketches & blueprints
2017 — 2019

Here Magazine

Location photography
2018 — 2019

On Hybrids

Thesis project, website
2016

Photography

COMING SOON

Film & digital photography
2016 — 2021

Top