The problem

1. Customers already had two reference points

   • Internet providers each organize billing, plans, devices, and support in their own way.

   • Amazon already provides orders, payments, and account details within its own Your Account page.

   • Amazon Leo's account pages needed a structure that felt familiar from both, while making clear what belonged to Amazon Leo.

2. Flows needed review before build

   • Static Figma screens could not show how screens behaved together in a navigable customer journey.

3. The experience had to hold up across conditions

   • Review needed to account for responsive breakpoints, offer status, locales, and accessibility settings.

Existing reference points: internet-provider account pages and Amazon's Your Account

Project approach

I worked with UX Research and stakeholders on a structured card sort to define the content hierarchy, then iterated the skeleton of each flow through wireframe reviews before committing to a final visual direction.

Alongside the card sort, I drew on an existing benchmark of these account pages.

Internet service provider pages commonly led with account details, followed by billing, plan and device management, and support. Amazon's structure clarified which settings Amazon Leo should own and which should stay with the customer's Amazon account. Together, these grounded the hierarchy in patterns customers already know.

Design exploration

I designed four core scenarios, from wireframes to initial screen designs, for engineering handoff:

1. Expert installation rescheduling before service activation from the Order details page.

2. First monthly billing-statement review.

3. Plan management, including plan upgrade or downgrade.

4. Service cancellation.

As the initial screens moved into visual design, I raised an inconsistency across the website.

Content about the service, plan features, and promotions was designed by an external agency under the marketing team. As a result, the landing pages and account pages had drifted apart in their design system and visual theme.

To close that gap, I used the component patterns from the landing-page content as a reference and organized them into a shared system that included the account pages. The system defined content sections through color, elevation, and typography. Sections alternate between white, off-white, and dark surfaces. Cards group related content one level above the surface, use design-system elevation instead of outlines, and never sit on top of other cards.

I applied these rules to the account pages and used them to finalize the visual design through multiple iterations.

A working prototype as a design-review tool

After confirming the screen direction, I used AI-assisted coding to build a navigable prototype from the actual design system components, tokens, and fonts, rather than recreating them in a prototyping tool. It combines a scenario picker, a responsive viewport, and runtime controls, so reviewers can switch among locales, offer status where applicable, responsive breakpoints, and accessibility settings.
I defined the scenarios, states, and review controls, and used AI to handle the implementation, so the prototype was built from the same components the product uses.