Skip to case study
Cody Shanley

Agency dashboard

Delivered front end · Sample data

My role
Design Engineer
Project status
Delivered front end

Opal provides virtual cards and credit for advertising. As Design Engineer, I turned an agency-dashboard brief into a working front end: a client directory, account pages, card controls, and a documented component system.

Starting from the product brief and existing brand assets, I owned the information hierarchy, interaction design, visual design, and React front end.

Agency ad spending

Agencies may fund several clients’ advertising on one business card, then separate the charges for invoicing. Opal gives each client or advertising platform its own virtual cards and spending limits.

Client cards and spending limits

I designed the dashboard around that separation, keeping the client, card, and transaction context clear as agency staff moved between tasks.

Pending client invitations

I placed pending invitations above active clients so unfinished setup stayed visible. A separate section suited the small queue in the brief without adding another tab.

Layout comparisons reconstructed for this case study.

Chosen direction

Clients

Pending · 3
Northwind Co.Waiting on response · invited 1 day ago
ResendWithdraw
Lumen LabsReviewing application · invited 4 days ago
Withdraw
Pinecone StudioWaiting on response · invited 8 days ago
ResendWithdraw
CompanyCredit limitAvailableCards
Rocket Rides7 cards$800,000.00$520,363.007

Card details drawer

I used a drawer to keep the client account visible while someone inspected a card or changed its settings. A separate page would lose that context, while an expanded row would shift the cards below it. The drawer keeps the layout stable but temporarily blocks other account actions.

Card details
Spend for Facebook•••• 5283
Monthly limit$60,000
Spent$52,000
Freeze cardView transactions

Keeping card information consistent

A card change appears consistently in its list and detail drawer. Opening its transactions carries the selected card into the filter, letting agency staff trace spending without finding the card again.

Visual design

Opal’s supplied card artwork was already colorful. I kept the surrounding interface quiet and used depth to distinguish controls: raised actions, inset inputs, and translucent detail panels. Building those treatments into shared components kept the same visual cues across account pages.

Reusable components and documentation

I built shared controls and documented their states and usage so the team could extend the dashboard consistently. Separating reusable interactions from card-specific content made those patterns usable across account pages.

I used AI coding tools for much of the React implementation, directed the interaction and visual decisions, and reviewed the working app. The catalogue below expands the documentation delivered with the front end.

OpalDS/components

Drawer

Right-side panel
Usage
<Drawer open={open}
  onOpenChange={setOpen}
  ariaLabel="Card details">
  <CardDetails card={card} />
</Drawer>
src/components/ui/drawer.tsx

Delivered front end

I delivered the connected front end and component documentation using sample data. Backend integration and validation with agency staff remained the next steps.

Component library

Try the controls, open a drawer, or inspect a pattern. These are the components from the working app, with their states and usage examples.

Loading the component library…

All work