heroAlter x Camera
heroGoogle Fonts
heroLighthouse
heroTopeka App
heroBookmark
heroWallpaper
heroSuperellipse
heroAlter
heroTraces Report
heroMAX
heroGrid Study
heroNumerical Compositions
heroOrigami Study
heroLeaf
heroDot Series
heroBoundary
heroSun
heroAnimated Blob
heroPoster
heroAlphabet
heroNumerical
heroPattern
heroMatrix
heroChelsea Illustrated
heroThe Search Operators
heroText Experiment
heroInvisible Light

Lighthouse

I lead the visual design refresh, and product design for Google Chrome's core developer tools: Lighthouse & Lighthouse CI in 2019. Lighthouse analyzes web apps and web pages, collecting modern performance metrics and insights on developer best practices. To improve performance overtime effectively, Lighthouse CI automates running Lighthouse for every commit, viewing the changes, and preventing regressions.

Lightouse

Lightouse

Lightouse

Lightouse

Lightouse

Lightouse

Lightouse

Lightouse

Lightouse

I've also created motion graphics in html and css. The first one is an animated SVG for loading state, morphing between the shapes and colors associated with levels of performances: excellent(green/circle), good(orange/square) and poor(red/triangle). The other explores the dynamics of score change in Lighthouse CI.
To promote Lighthouse at the Chrome Developer Summit in 2019, I designed a series of Risograph posters featuring the brand colors and graphics for display and take-away.

Lightouse

003 002