Verizon
Interaction Design System

Client: Verizon
Role: Lead Designer
Contribution: Design System, Motion Graphic, Interaction Design

Developing the future-state vision for Amazon Wallet+, an AI-driven platform that elevates Amazon Pay from a payment utility to a holistic financial and shopping companion. The primary goal was to unify on and off Amazon shopping experience, along with financial management support to drive maximum customer value and strengthen Amazon's ecosystem.

Problem

There is an overwhelming amount of information on the website. On top of that, poor navigation and unclear hierarchy make users find it really hard to find specific information. As a result, users tend to leave the site in a short time and have a very low click-through rate

Goals

  • Increase user retention and user engagement

  • Increase brand awareness by adapting the existing brand system to animations

Screenshot of a webpage with a header menu including 'Overview', 'Service Support Model', 'Public Sector Support', 'Resources', 'Events', 'Let's connect'. The page features sections about Verizon Response Team support, technology updates, TV options, and their features, with financial and contact information displayed.

Old website design

How I solve the problem

Internally, it served as a shared reference to align design, product, and engineering on interaction principles, while externally it supported user testing by allowing us to validate how motion improved comprehension, engagement, and overall click-through behavior within the Brand 3.0 experience.

To address the site’s information overload and navigation challenges, I created a motion library for key interactions to bring clarity, consistency, and alignment across teams. The library defined how micro-animations and interaction patterns signal hierarchy, guide attention, and provide visual cues for navigation, helping users find information more intuitively.

The image is a blank white page with no visible objects or details.
A grayscale webpage layout with three brochure-like sections in the center, encased in rectangular boxes, and a sidebar on the right with lines and rectangles resembling text and bullet points.
A blurred diagram with squares and arrows indicating a flow or process, with placeholder text above and below.
A blurred webpage layout with three grey rectangles near the top, a small red line underneath, and a large light grey rectangle below, with navigation links or buttons in the middle.
A blank white image with no objects or details.
Blank wireframe webpage with navigation bar, search bar, and multiple placeholder sections for content or images.
The image shows a blank, white mobile phone screen.
A website layout with three placeholder image thumbnails, a circular red button, and four horizontal lines of text on a background split between dark gray on the left and light gray on the right.
A webpage with the heading 'Committed to the mission,' supporting first responders and emphasizing Verizon as America's #1 network in public safety, featuring articles about Verizon's community efforts.

Example of vertical carousel

A digital graphic showcasing benefits of 5G technology with icons and text highlighting faster and safer connectivity compared to public Wi-Fi, on a black background.

Example of horizontal carousel

Text on black background reading: "Big ideas, big network power. 5G empowers creators for the next big discoveries at Verizon 5G Innovation Hubs."

Example of text parallax effect

By introducing motion such as parallax effects and visual storytelling, the experience guides users through content with clarity and intention. Micro-animations highlight key moments, progressively reveal information, and create a natural flow that reinforces hierarchy and the brand narrative—making the experience more engaging and memorable.

A website promotion for Verizon Business Mastercard featuring a white credit card with a red checkmark and bold black text that reads 'At work for your business.'

Example of objects revealing on scroll

Verizon rewards program webpage showing that 3% of rewards are earned on Verizon devices and services, 2% on gas and office supplies, and 1% on everything else.

Example of interactive objects

Storytelling

Infographic that explains complex technology

Diagram explaining how Verizon's on-site 5G network works, showing connection from enterprise data centers through private IP internet to public cloud, then to customer premises with application devices, 5G cell, and AWS outposts, including details about off-premises connectivity, on-site 5G network, end devices, and AWS outposts.

Impact

As a result, the motion library improved consistency and clarity across the experience, strengthening internal alignment and accelerating iteration during user testing. Usability tests showed clearer navigation paths, with task completion improving by ~25% and time spent on key pages increasing by ~20%. The added interaction cues also contributed to higher engagement, helping reduce early drop-off and reinforcing a more cohesive and distinctive Brand 3.0 experience.