This portfolio is to showcase my work as a Sr. design system designer at the Google Assistant team. I built the first Nest Hub design guidelines and led a team to build component and pattern libraries, and worked with developers to create a reusable code library (MUI).
Team
Google Assistant
Role
Senior Design System Designer
Product
Nest Hub, Nest Hub Max, JBL Link View
Time
2 Years
Design System
Design guidelines are how we communicate with our stakeholders to understand our design system
I was in charge of creating and managing all Nest Hub design guidelines. It helps our partners understand how Nest Hub works, including typography, grid system, headers, buttons, iconography, and voice control reactions.
Typography
Nest Hub has a wide range of font sizes because there are two ways to interact with the device
When users are far away from the device, they can trigger the device by voice. Then, the device will show the result in bigger font sizes. On the other hand, if users interact with the device by tapping on the screen, the results will show in smaller font sizes in order to provide more information for the users.
Grid System
The grid system can be used for ambient, home view, and full-screen activity views
Applying a grid system can make the design look tidy and consistent across all features. We created a grid system that can be applied to three important states of Nest Hub: ambient, home view, and full-screen activity.
Margin 44dp Gutter 24dp 12 Columns Basic Unit 4dp
Color
Nest Hub adopts the color system from Google Material Design, but Nest Hub still keeps its own brand identity
The Google ecosystem is integrated into Nest Hub, like Maps, Photos, Calendar, News, and Youtube, in order to provide a similar Google aesthetic and user experience. Although Nest Hub uses the Google Material Design color system, it nonetheless maintains its unique brand identity by changing the color theme and giving colors meaning.
Color Pallet
Color Theme
Text Color
Product Features
During the two years I worked on Nest Hub, I helped with several features ex: Sports Results, Daily Routine, Image Search…etc
It was really rewarding to work on features that required consulting and collaborating with other internal teams and third-party companies like Spotify and Netflix.
Sports and Leagues
With Google Nest, you can stay up-to-date on your favorite sports, teams and games using your voice.
"Hey Google, what was the score of the Warriors game?"
Supported Sports
Baseball
MLB, Korea Baseball Organization (KBO), Nippon Professional Baseball
Basketball
NBA, WNBA, NCAA Men's Division
Football (American)
NFL, NCAA Division I FBS football
Football (Canada)
Canadian Football League
Hockey
NHL, Kontinental Hockey League
Cricket
International Cricket Council, Indian Premier League
Soccer
Global leagues and tournaments
Functions
Get the score for a game
Get how a team’s doing
Get information about team's standing in a league
Get the next game for a team or tournament
Get the schedule of a team or league
Get if team won or lost
Get league standings
Components System
The Nest Hub design templates were created for our partners, including the product teams, outside businesses, and the marketing team
All the components of the Nest Hub design templates were built with specific appearance styles, so the designers can create their new user flows by just replacing or adjusting the contents.
Need a new design flow?
Just override it!
All elements of the Nest Hub pattern library are connected to the system font, iconography, and colors. The templates are built with many system components. When new designs are developed from the templates I created, the designs can be used as specs for developers directly.
Templates Examples
System Icons
To reflect Nest Hub's brand identity and aesthetic, our team decided to create a new set of light stroke icons
When we started to design Nest Hub, Google Material Design didn’t have an outlined icons set yet. Our team made the decision to develop a new set of light stroke icons to represent Nest Hub's identity and design.
System Icon Design Principles
Stroke Terminal:
Rounded
Corner:
3 dp, 6 dp
Clearance Area:
2 times icon size
Size:
48x48 dp
Stroke Weight:
3 dp
Padding:
2 dp
The 200+ icons I created are now also used by other teams like Google Pixel, Google Home APP, and Google Health
Marketing Office Hour
Weekly sync with our marketing team
The marketing team is key to announcing our new features to the market. For a new product like Nest Hub, the design constantly evolves, so the marketing team needs to sync with the latest design version. Therefore, I spent time with the Nest Hub marketing team for an entire day every week to update each design change, answer all design-related questions, and review the ads before they are released.
Product Releasing Celebration Party at Best Buy in Mountain View, CA
More Projects…
Zillow - Premier Agent
TChat - Reminder App
Amazon - Shipping Label
Uber Internship