Omar Younis
Work About Resume
Pebble
Pebble · 2013–2014 Archive

Designing the first mainstream smartwatch

As an early leader in wearables, Pebble got a huge amount of feedback from a passionate community of early adopters. We wanted to add a lot of functionality, refresh the visual brand, and rebuild onboarding to a much higher standard of usability. As the first UX designer at Pebble, I led those efforts.

The companion mobile app had been designed entirely by engineers, so we started over. First we sketched the screens we knew the experience needed, then worked out the content and hierarchy, and then the interactions and flows between screens, including moments like downloading an app onto your watch. We treated iOS and Android as separate but related projects.

RoleFirst UX designer
SurfacesiOS, Android, watch, web, developer tools
OutcomeCompany later acquired by Fitbit
What I shipped
Companion app Redesigned from scratch across iOS and Android, then packaged as a UI kit for development handoff.
App store The first app store ever built for a wearable device.
Developer web Submitting and updating apps, tracking approval states, plus a template letting developers preview how their listing would appear.
Watch UI Standardized interaction patterns, redesigned notifications and the music player, and the first draft of UI guidelines for the developer community.
Early design artifacts
Content layout

The first version of the companion app had been designed entirely by engineers, so we started the redesign by sketching layouts of the screens we knew the experience needed.

Once we were past the requirements conversations and knew how many screens we wanted, we took a more detailed pass at what each screen would contain, including the supporting navigational elements.

Sketched screen layouts
Sketched screen layouts
Content layout and hierarchy
Content layout and hierarchy
Companion app, high fidelity, iOS and Android
Companion app, high fidelity, iOS and Android
Watch UI patterns and guidelines
Watch UI patterns and guidelines
App store
App store
UI kit
Handoff

Once the high-fidelity decisions were settled, we built a UI kit to carry them into development. It held the components, states and measurements that engineers would otherwise have had to guess from a mockup.

UI kit
UI kit: components and states
UI kit: applied screens
UI kit: applied screens
App submission portal
Web products

Developers needed a way to submit new apps, update them, track their approval states, and more. We also provided a UI template to help them visualize how and where their apps and related content would get displayed in our store.

Submission is the moment a developer finds out what the store expects from them, so we stated every asset requirement inline, right at the field that needs it: icon sizes, banner counts, screenshot dimensions and character limits. The preview shows the exact places those assets will appear.

App submission portal: create new app
Submission form: type, category, required assets
App submission portal: materials pack and app detail card
Materials pack and the app detail card it feeds
Takeaway

Most of the people using the store and the watch guidelines were developers we would never meet, so the UI guidelines and the store template mattered as much as the app itself. We also sat down with partners like Uber and eBay to help them imagine what their own Pebble apps could be.

← All work Next: Exabeam →
Click anywhere or press Esc to close