CASE STUDY, UX/UI

sHelfadz invoice portal

The application shelfAdz Invoice is a billing and tag ordering application built for Vestcom International, part of Avery Dennison.

ROLE:

UX DESIGNER

CLIENT:

Vestcom International, Inc./Avery Dennison

YEAR:

2025

DELIVERABLES:

Wireframes, Landing page, Modular Table

shelfAdz Invoice is a billing and tag ordering experience I designed for Vestcom International, part of Avery Dennison, building on Project StoreLink

It gives partnered retailers a direct way to order tags and review billable estimates for every campaign, replacing an older process built mostly around Excel and manual entry. At its center is a modular, fully customizable pricing and scheduling system built around an infinite track for quantity and week counts, along with tailored views for retailers, administrators, and internal Vestcom users. Because the interface reused components from StoreLink’s Central Library design system, I was able to spend most of my time solving the configuration problem rather than building a new visual language from scratch.

Product Logo

1. The Challenge

The application it replaced depended heavily on Excel. Billing information arrived by request, typically after a Vestcom team member reviewed a document a retailer or user had emailed in, then entered the numbers into the portal manually. That handoff between email, spreadsheet, and portal introduced delay and room for error at every step, and it offered no real record of past requests or a clear way to track what stage a submission was in.

A few requirements shaped most of the design decisions on this project:

2. The Solution

Reusing the components and atoms from StoreLink’s Central Library design system meant the visual language for shelfAdz Invoice was already in place, which was a nice head start. It let most of the design effort go toward the configuration logic itself rather than color, type, or layout foundations.

Solution Breakdown (click to expand)

Modular Building

For pricing, users can fully configure quantity amounts using the infinite track, and the same mechanic controls how many weeks a request stays active. Since the system needed to stay fully customizable, an addition button sits next to the current track on either side, so a retailer or administrator can extend the range in either direction as needed. To keep the experience from becoming confusing, users must set a configuration on these tracks before they can move on to the next step.

With so much information on a single screen, a dropdown caret was added so sections can be minimized when they are not in use. A deactivation toggle sits at the edge of each section too, so if a particular product type does not apply to a given request, it can simply be turned off rather than left cluttering the form.
Working Within an Existing Design System

Because shelfAdz Invoice shared its design foundation with Project StoreLink, the interface reads as one consistent product rather than a separate tool bolted onto the platform. That consistency also freed up time. Instead of defining new colors, type styles, or components from the ground up, the focus stayed on solving how a genuinely complex configuration problem could feel simple to use.

3. REFLECTION

The part of this project I am proudest of is the modular setup itself. Retailers can fully customize their prices, their campaign timing, and their pricing terms, whether that means working from a standard quote or entering fully custom numbers. Given how much variation exists across retailer agreements, that flexibility was the whole point of the redesign, and getting it to feel workable rather than overwhelming was the real win.

Up Next → StoreLink™ by Vestcom

Like what you see? LET'S MAKE
THE NEXT ONE

I’m open to enterprise UX, design systems, and launch work. Tell me what you’re building.

GET IN TOUCH

CASE STUDY, UX/UI

sHelfadz invoice portal

shelfAdz Invoice is a billing and tag ordering experience I designed for Vestcom International, part of Avery Dennison, building on Project StoreLink

Product Logo

1. The Challenge

Challenge Breakdown (click to expand)

Challenge 1

Challenge 2

Challenge 3

Challenge 4

Challenge 5

Challenge 6

2. The Solution

Solution Breakdown (click to expand)

3. REFLECTION

Up Next → StoreLink™ by Vestcom

Like what you see? LET'S MAKE THE NEXT ONE

Like what you see? LET'S MAKE
THE NEXT ONE