top of page

Making Online Shopping a Breeze



January - May 2022


Web Designer, Animation


Innovative Design at USC

Breeze is a universal online shopping extension that allows users to checkout from their

favorite stores in one place with one click. Working with a team of three at Innovative Design,

we designed a one-page website for Breeze that would effectively serve as the

main converting platform to download the extension from the Chrome Store.



Breeze is a Chrome extension that allows users to checkout from multiple e-commerce sites in one place

with one click. They are looking for a clean, sleek, and fun one-page website that can:

     1. Effectively communicate and excite users about the unique features of Breeze and how it works
     2. Serve as the
main converting platform to download Breeze from the Chrome Store with

         multiple points of conversion throughout the page

     3. Be accessible to all users, using the principles of accessible design


Target Users

Breeze aims to be accessible to all online shoppers and has defined the following customer personas:

The Leisure Shopper

Breeze's "save for later" function

is perfect for those who love to virtual window shop without

actually purchasing.

The Shopaholic

Say goodbye to endless cluttered tabs! Breeze helps online shopping enthusiasts save time and

checkout from multiple stores

at lighting speed.

The Busy Mom

For someone who is always busy, time is money. Breeze allows users to see all previous orders and tracking codes, so no more digging through thousands of emails to find out when orders will arrive.

Competitive Analysis

Our team analyzed sites of various e-commerce extensions to determine features to include/exclude,

and to effectively tell the brand story while delivering a unique yet accessible user experience.

Here are a few of the competitors that we analyzed:


Here is what we discovered and chose to apply to Breeze: 

We were inspired by the clear call to action buttons and the engaging animations on the Carrot site.


We decided to steer away from the addition of distracting elements, whether that is the use of borders (Carrot)

or too many unnecessary tabs (Honey), keeping only the most essential functions for easy navigation.

The end goal would be a webpage that informs visitors about Breeze and its features, and converts them to download the extension.


Low-Fidelity Wireframes

Following extensive research, my team and I began the design process by first creating low fidelity drafts.

I was responsible for the header section and the animation that would go on it.


The client had already defined the site content and structure, which included "What is Breeze," "How it works," customer testimonies, retail partnerships and multiple call to action buttons throughout the page.


Mid-Fidelity Drafts

We moved ahead with mid-fidelity versions of the webpage, addressing additional client requests

and needs as they came up, including changes in copywriting, the addition and removal of functions/buttons,

as well as finalizing a visual design system for Breeze.


Design System

Before proceeding to the high-fidelity draft, we adapted the

existing design guide into a more consistent and accessibility-centered visual system.

Design System.png

Final Deliverables

The final webpage, complete with stylized visuals, animations and responsiveness, was built out on Wix.


Custom animation

As part of the header section, I created an animation to help visualize how the Breeze extension

would allow users to conveniently checkout across multiple online stores in one go.


Points of Conversion

In creating a webpage that would serve as the main converting platform for Breeze,

multiple call to action buttons were used throughout the page, including in the sticky header,

to direct users to the waitlist and ultimately, to the Chrome Store after the product is finalized. 

Design System
Final Deliverables
Key Takeaways

Key Takeaways

Designing for Accessibility and Inclusion

In crafting a product navigable for all,

our team kept in mind the importance of accessible design principles regarding color, spacing and typography when developing

the visual design system.


The end product was one that accommodated users of and beyond our target personas, particularly those who struggle with poor vision. 

Working with Clients

Working with clients meant that additional requests and feedback arose from time to time.

I learned that presenting concepts to clients early and often in the process was crucial in making sure that we addressed their needs while, more importantly, being clear and transparent in communicating the limitations we have as designers and of our designs.

Teamwork is everything!

I am grateful for my talented teammates (Ashley, Erina and Romir), as we constantly bounced ideas

off of each other and inspired one another with our unique, individual sets of skills and insights.

We were a team that worked hard and played hard!

Here are some moments captured from our work-and-cafe hopping sessions!


Other Projects



A senior-friendly mobile app making long-distance caregiving one touch away

Aroma Tea House

Reimagining a classic yet modern visual identity for a premium tea leaf brand

bottom of page