TK

Designing the First Experience for Meta Glasses

Bringing Meta’s new visual identity into a launch-ready onboarding experience.

Role
Product Designer
Timeline
2-month launch sprint
Team
2 Product Designers · 1 Design Manager · 1 Content Designer · 1 Creative Lead · 1 Program Manager · Cross-functional partners across Engineering and an External Creative Agency
Related public release
Meta Glasses

Context

Meta Glasses marked Meta’s first own-brand wearable, raising the bar for the first-time experience. Rather than treating onboarding as a setup flow, we set out to create an experience that felt closer to a fashion campaign than traditional consumer electronics.

Working alongside another product designer, I partnered with Creative, Content Design, Engineering, and an external creative agency to translate that vision into a polished, shippable product experience. My primary focus was ensuring the premium visual language carried consistently across the Meta AI Tour, Optional Setup, Troubleshooting, and product implementation details.

Setting the Quality Bar

Onboarding begins in a cinematic Theater Mode that builds anticipation before revealing the product. Premium motion, product-first renders, and a restrained interface transform pairing into the opening chapter of owning the glasses.

Pairing is where onboarding becomes most complex, requiring support for numerous hardware states, recovery paths, and edge cases. Drawing on my experience shipping onboarding across 4 previous displayless AI glasses launches, I partnered with another product designer, Creative, Motion Design, Engineering, and Hardware UX to ensure every interaction remained visually cohesive while accurately reflecting real device behavior.

We extended the launch’s visual language beyond the happy path so that even moments of friction felt clear, trustworthy, and consistent.

Theater Mode Pairing (Happy Path)
Pairing screens
Representative troubleshooting and recovery flows covering key hardware states and edge cases.

Designing One Continuous Experience

Rather than treating onboarding as a collection of disconnected screens, we designed it as one continuous story. Firmware updates flowed naturally into the product reveal, followed by the Product Tour, Meta AI Tour, and Optional Setup.

My responsibility was ensuring the experiences I owned carried that same visual rhythm forward, creating a seamless transition from product setup to feature discovery.

An AI-generated motion film reduces perceived firmware update time while maintaining momentum throughout onboarding
A SKU-specific interactive Product Tour teaches first-time users the fundamentals of their glasses.

Bringing the Vision Into Product

Within this broader experience, I focused on three areas that shaped the majority of the onboarding journey after pairing.

  • Reimagining the Meta AI Tour
  • Redesigning Optional Setup
  • Scaling the Visual System

Reimagining Meta AI

The original Meta AI Tour relied heavily on instructional text and static layouts.

I redesigned the experience to feel lighter, more conversational, and visually aligned with the refreshed Meta AI identity. Working closely with Content Design, I simplified the narrative, reduced content density, and introduced motion to create a more engaging learning experience.

Rather than interrupting onboarding, the tour became a natural continuation of the product story.

From dense instructional text to a lighter, more conversational Meta AI Tour.

Redesigning Optional Setup

Optional Setup introduces many of the product’s most valuable capabilities, but the previous experience felt dense and overwhelming.

I redesigned the experience around glanceable cards, clearer hierarchy, and lighter content, making feature discovery easier while preserving the premium visual language established throughout onboarding.

The new structure also created a flexible foundation for future features and onboarding experiments.

Optional Setup — before and after
From a dense list to glanceable, prioritized cards.

Scaling the Visual System

A launch isn’t successful if only designers understand it.

To make the new visual direction scalable, I partnered with the Design Systems team to build reusable components and implementation patterns that could be shared across onboarding.

I also created detailed design specifications highlighting the differences between the existing framework and the refreshed experience. Rather than asking Engineering to interpret hundreds of screens, we documented the exact changes, reusable patterns, and interaction behaviors needed to ship efficiently.

This work transformed a collection of designs into a production-ready system that was easier to implement, review, and extend for future devices.

Design specifications
A representative snapshot of the implementation documentation used to translate the visual refresh into reusable components, design specifications, and production-ready patterns.

Behind every polished experience is a team obsessed with getting the details right.

Final render