Asurion.com Redesign

The Challenge

Asurion’s shift from being a white‑labelled device protection provider for carriers like AT&T and Verizon to a direct‑to‑consumer brand required more than a new coat of paint. Customers were arriving at the site confused, often in a heightened emotional state, and simply needed to file a claim or find a repair location for a broken device. The existing marketing‑focused homepage did little to guide them. We needed to transform this entry point into a calm, trustworthy service experience that reduced friction, clarified the company’s identity, and helped users find the right path quickly.

My Role

As the Design Technologist / UX Engineer, I partnered with product designers and marketing engineering to define and deliver the global header and FixItBar—two key interventions we hoped would address the underlying pain points and user frustrations on the homepage. I collaborated with designers to refine flows and interaction patterns, wrote production‑ready React components with accessibility and performance at the forefront, and integrated patterns into AsurionUI, the internal design system. I also spearheaded iterative prototyping and A/B testing, ensuring design decisions were informed by real user behaviour.

Approach and Key Features

Global Header & Navigation

The global header had to serve multiple brands and products while giving first‑time visitors an immediate sense of trust. We designed a dual‑branded navigation bar that balanced Asurion’s identity with carrier references. The navigation used clear hierarchies, progressive disclosure, and generous spacing so stressed users could scan easily. From an engineering perspective, building the header from scratch in React allowed us to handle complex state, support keyboard navigation, and optimise for various screen sizes without relying on off‑the‑shelf components.

FixItBar: Guided Triage

The FixItBar acted as a decision engine embedded in the hero area. Instead of presenting all options at once, it progressively collected information about the user’s device, issue and carrier, routing them to the correct claim form or repair portal. It was designed to feel calm and predictable, with responsive states and accessible focus management. We packaged the FixItBar as a standalone React widget that could be injected into a CMS‑driven page, enabling A/B tests despite the platform’s usual focus on static content. Partnering with marketing engineering on these experiments not only refined the flow but also established a repeatable pattern for future collaboration.

Design System Contributions

Throughout the project, I contributed reusable patterns and components back into AsurionUI. This ensured future teams could leverage the same high‑fidelity components without reinventing them and kept design and engineering in sync as the brand evolved.

Results

• Reduced time to action: Users reached the correct claim or support path faster, thanks to clearer navigation and guided triage.
• Improved accessibility: All new components met WCAG AA standards and improved keyboard and screen reader experiences.
• Higher design fidelity: Production implementations matched design intent more closely, boosting stakeholder confidence.
• Reusable patterns: Header, navigation and FixItBar components were adopted across other Asurion properties, accelerating subsequent projects and reinforcing visual consistency.

Reflection

This project reinforced how critical it is to pair design intent with technical execution, especially in moments when users are stressed. By focusing on calm, predictable interactions and ensuring our components scaled from design through to production, we delivered an experience that built trust. It also underscored the value of cross‑functional partnership—working closely with design, product and marketing engineering enabled us to test hypotheses quickly, measure real outcomes, and build a foundation for continuous improvement.