# Asurion

Principal product designer · ’17 – ’20

[Visit Asurion](https://www.asurion.com)

I spent three and a half years at Asurion, working on getting broken phones fixed without having to ship them away. The idea was that someone could come to your house within a few hours and fix your phone there. I started with the Same Unit Repair program, then worked on the nationwide rollout, the field app, and eventually the design system and rebrand across our products.

## Getting someone to your door

The first version of Same Unit Repair was a gig economy approach to phone repair. Think Uber plus Geek Squad. We had to figure out how to recruit people, train them, source what they needed, and manage a nationwide network of contractors repairing phones and other devices.

The app for those contractors planned their day: a route of repairs with the miles, hours and payout, nearby jobs to claim, and pickups of replacement screens.

![The first Same Unit Repair app for contractors: a day's route of stops around Chicago with miles, hours and payout, a screen repair's details, a chat with a customer, a nearby job to claim, and an inventory pickup of replacement screens](https://www.tomjohn.design/images/content/asurion/same-unit-repair-app.webp)

That eventually grew into the same program for Asurion employees across the country. I learned how to break phones and how to fix them, and designed the app people used out in the field. There was a lot more to figure out than the screens: we were building the capability to get someone to a customer's house with what they needed to do the repair, instead of sending the device back to a repair facility and making the customer wait.

The pilot was super successful. To my knowledge, it became one of the most successful program rollouts in Asurion's history. We rolled it out nationwide, with hundreds of forward stocking locations, hundreds of employees, and hundreds of thousands of devices being repaired.

In June 2019, [I also wrote about our nationwide launch for Verizon customers](https://x.com/tomjohndesign/status/1144606561601499137): if you broke or lost your phone, we could deliver a replacement with an Asurion expert to help you set it up and answer questions, in as little as an hour. That was replacement delivery and setup, alongside the repair work.

![Announcement of the Verizon replacement-phone delivery and setup service](https://www.tomjohn.design/images/content/asurion/1144606561601499137-1.jpg)

## Making the field app in Webflow

I designed the entire field app in Webflow to get around constraints in our software stack. Our developers were maxed out working on the backend and systems integrations, and I could work on the front end, make changes, and refine the experience quickly while we were launching.

This wasn't just a prototype. By [November 2019, when I shared this recording](https://x.com/tomjohndesign/status/1199027657473712128), the internal app for Asurion Experts had logged close to 200,000 sessions.

![A recording of the Asurion Experts field app I built in Webflow](https://www.tomjohn.design/videos/asurion/1199027657473712128-1.mp4)

The Webflow UI ran in a webview inside a React Native app, which gave us access to the camera. We didn't use Webflow for authentication or validation, and the job list used Vue. We used custom attributes to put dynamic data into the interface, then did something a little strange for state management: we recorded user events, hid the page while it loaded, and replayed those events to bring the app back to its current state.

It was a huge team effort. Webflow wasn't meant to be used this way, and I had to figure out new ways to use its interactions. But it let me keep changing the front end while the developers worked on the systems behind it. I then worked on rebuilding the whole thing in React Native; we were already gradually rolling out the refactored version when I posted the thread.

I shared some other Webflow experiments in that thread too: [an enterprise app with a Windows-style interface and documentation](http://agentexperience.webflow.io/), [a node-based rules engine concept](http://workflow-dots-3.webflow.io/), [a prototype for splitting and moving shifts](http://splitshift.webflow.io/), and [mobile design-system and single-view concepts](http://mobile-patterns.webflow.io/). Those were concepts and prototypes, separate from the field app that was already in use.

## Getting parts to the experts

Getting someone to a customer's house with what they needed also meant getting the parts to them. The experts collected parts in person, and the part scanner was designed to check each one off their pick-up list. This flow planned the hand-off: a store employee verified the expert's ID, scanned each part and the box it went into so the two matched, and certified the hand-off once the expert had scanned the parts in.

![The part scanner, lining up the QR code on a Galaxy S9 screen's label above a pick-up list of parts](https://www.tomjohn.design/images/content/asurion/part-scanner.webp)
![The part scanner checking a box's label, then its shipping label](https://www.tomjohn.design/images/content/asurion/pretty-box-scanner.webp)
![A pickup from a forward stocking location shown as a job, with a note that the scanner, not a map of a place the expert visits every day, should come first](https://www.tomjohn.design/images/content/asurion/fsl-pickup.webp)

![The parts hand-off across the store employee, the expert and the system: log in, verify the expert, grab stock, make kits by scanning each part and box, then hand them off and certify the expert's completion](https://www.tomjohn.design/images/content/asurion/part-flow.webp)

## Concept work for asurion.com

I also worked on the asurion.com customer experience and did a lot of concept work for it.

![A My ecosystem page for a Verizon customer: 16 devices, 3 members and $3,345 of protected tech, with the home's internet, phone and smart home providers](https://www.tomjohn.design/images/content/asurion/my-ecosystem.webp)
![A living room's eight devices, each with the services it runs](https://www.tomjohn.design/images/content/asurion/living-room.webp)
![A concept for a device page: expert suggestions, what's covered and what it costs, claims, and account details](https://www.tomjohn.design/images/content/asurion/hub-device-page.webp)
![A device page for AirPods Pro with its manufacturer warranty status](https://www.tomjohn.design/images/content/asurion/device-warranty.webp)
![Adding devices by what you watch Netflix on, then picking which TV it is](https://www.tomjohn.design/images/content/asurion/verify-device-netflix.webp)
![Adding a TV by brand, room and size, as a perk of Total Mobile Protection](https://www.tomjohn.design/images/content/asurion/verify-device.webp)
![Service pages for AT&T, Sprint and Verizon plans, unbranded Asurion Home+, and a security advisor](https://www.tomjohn.design/images/content/asurion/service-pages.webp)

## The rebrand and design system

When Asurion changed its logo and moved to purple, I led the rebrand work for product, figuring out how the new brand would work across our interfaces. I led the product design system initiative across Asurion as well.

![The field app in purple: a queue of Verizon, Sam's Club and AT&T jobs on a map of Nashville, a job's details, and its customer](https://www.tomjohn.design/images/content/asurion/field-app-jobs.webp)
![A board of the field app's components: footers, rows, task rows, carrier shortcuts, map pins, and tasks like checklists, photo uploads, barcode scans and signatures](https://www.tomjohn.design/images/content/asurion/field-app-design-system.webp)
![The whole field app mapped out, from the job queue through navigating, barcode scans, signatures, drop-off checklists and setup help](https://www.tomjohn.design/images/content/asurion/field-app-flows.webp)

At our first really global design summit in June 2019, [@codefashioned and I unveiled the alpha of our Figma and web component pattern library](https://x.com/tomjohndesign/status/1144606570870956033) to more than 100 designers. It was an alpha, with a new brand and a lot of people who needed to work with it.

![Asurion's global design summit in June 2019](https://www.tomjohn.design/images/content/asurion/1144606570870956033-1.jpg)
![The design summit where we introduced our pattern library alpha](https://www.tomjohn.design/images/content/asurion/1144606570870956033-2.jpg)

I led procurement of Figma, Retool, Airtable, and Notion during my time there. The Figma adoption became a bigger thing than just changing what the designers used. I was seeing developers, product managers, marketers, and even vice presidents looking at the same files. But finding work across teams was still hard. I wrote about that in [Figma's killer feature hasn't even been built yet](https://www.tomjohn.design/content/figmas-killer-feature): there was all this useful information in the files, and you still had to know where to look or who to ask.

## The office on 2nd Avenue

The building in my scene is the old Asurion office on 2nd Avenue in downtown Nashville. That's the office I worked out of during my time there.

## Work and media

- [The first Same Unit Repair app for contractors: a day's route of stops around Chicago with miles, hours and payout, a screen repair's details, a chat with a customer, a nearby job to claim, and an inventory pickup of replacement screens](https://www.tomjohn.design/images/content/asurion/same-unit-repair-app.webp)
- [Announcement of the Verizon replacement-phone delivery and setup service](https://www.tomjohn.design/images/content/asurion/1144606561601499137-1.jpg)
- [A recording of the Asurion Experts field app I built in Webflow](https://www.tomjohn.design/videos/asurion/1199027657473712128-1.mp4)
- [The part scanner, lining up the QR code on a Galaxy S9 screen's label above a pick-up list of parts](https://www.tomjohn.design/images/content/asurion/part-scanner.webp)
- [The part scanner checking a box's label, then its shipping label](https://www.tomjohn.design/images/content/asurion/pretty-box-scanner.webp)
- [A pickup from a forward stocking location shown as a job, with a note that the scanner, not a map of a place the expert visits every day, should come first](https://www.tomjohn.design/images/content/asurion/fsl-pickup.webp)
- [The parts hand-off across the store employee, the expert and the system: log in, verify the expert, grab stock, make kits by scanning each part and box, then hand them off and certify the expert's completion](https://www.tomjohn.design/images/content/asurion/part-flow.webp)
- [A My ecosystem page for a Verizon customer: 16 devices, 3 members and $3,345 of protected tech, with the home's internet, phone and smart home providers](https://www.tomjohn.design/images/content/asurion/my-ecosystem.webp)
- [A living room's eight devices, each with the services it runs](https://www.tomjohn.design/images/content/asurion/living-room.webp)
- [A concept for a device page: expert suggestions, what's covered and what it costs, claims, and account details](https://www.tomjohn.design/images/content/asurion/hub-device-page.webp)
- [A device page for AirPods Pro with its manufacturer warranty status](https://www.tomjohn.design/images/content/asurion/device-warranty.webp)
- [Adding devices by what you watch Netflix on, then picking which TV it is](https://www.tomjohn.design/images/content/asurion/verify-device-netflix.webp)
- [Adding a TV by brand, room and size, as a perk of Total Mobile Protection](https://www.tomjohn.design/images/content/asurion/verify-device.webp)
- [Service pages for AT&T, Sprint and Verizon plans, unbranded Asurion Home+, and a security advisor](https://www.tomjohn.design/images/content/asurion/service-pages.webp)
- [The field app in purple: a queue of Verizon, Sam's Club and AT&T jobs on a map of Nashville, a job's details, and its customer](https://www.tomjohn.design/images/content/asurion/field-app-jobs.webp)
- [A board of the field app's components: footers, rows, task rows, carrier shortcuts, map pins, and tasks like checklists, photo uploads, barcode scans and signatures](https://www.tomjohn.design/images/content/asurion/field-app-design-system.webp)
- [The whole field app mapped out, from the job queue through navigating, barcode scans, signatures, drop-off checklists and setup help](https://www.tomjohn.design/images/content/asurion/field-app-flows.webp)
- [Asurion's global design summit in June 2019](https://www.tomjohn.design/images/content/asurion/1144606570870956033-1.jpg)
- [The design summit where we introduced our pattern library alpha](https://www.tomjohn.design/images/content/asurion/1144606570870956033-2.jpg)