SPC, Chrome Extension

Role

Lead Designer

Key Contributions

Research, Design

Key Partners

Data Science, Product Marketing, Engineering

Saving money matters to students, but remembering to open a specific app every time they shop is unrealistic. As a result, they unknowingly miss out on discounts and rewards that would help their budget stretch further.

How might we make savings effortless so users benefit without changing their shopping habits?

Solution

We introduced a browser extension that automatically surfaces relevant discount opportunities at the moment users shop online. This removed the need to remember the app entirely, making savings a built-in part of their normal browsing behavior.

Impact

The extension drove strong adoption with more than 2,000 installs shortly after launch. It lifted commission revenue by increasing the percentage of eligible purchases activated. Users reported higher confidence they were always getting the best available deal, improving product perception and loyalty.

01

Understand & Research

During user interviews for a different initiative, a recurring behavior stood out. Many students admitted they forget to activate their SPC benefits when they shop, which results in lost discounts for them and lost partner commissions for us. This surfaced a more immediate opportunity than the original problem we were exploring.

To validate and size the issue, I assisted the team in conducting targeted follow-up research through interviews and behavioural surveys.

Key insights:

Users forget to use SPC nearly half of the times they shop, both online and in-store.
Every participant identified Google Chrome as their primary browser for online shopping.
Half of users shop on their laptops more often than on their phones.

These insights confirmed a clear gap and revealed a promising channel to intervene directly within their existing shopping habits.

02

Ideation

With validated insights in place, I translated our direction into early concepts to align the team on how we could intervene directly in users’ browsing flow.

Designing for a Chrome extension required establishing a foundation, since common design tools do not provide standard templates. I conducted a competitive audit of top-performing savings extensions to understand patterns in window sizing, trigger behaviours, content density, and typography. This allowed me to define a scalable design system tailored for browser constraints and user expectations.

From there, I explored multiple wireframe approaches focused on:

Minimizing friction during the checkout flow

Ensuring discount activation is visible but never disruptive

Communicating savings value instantly

These initial concepts helped us rapidly converge on a direction that delivered savings at the moment of need rather than relying on user memory.

Scope of Work

The goal was to design and ship a Chrome Extension that simplifies how SPC members discover and redeem student discounts while shopping online. This tool needed to provide immediate value during checkout, as well as expand brand discovery beyond the SPC app or website.

Key Requirements:

Support fast and intuitive discount redemption while a user is browsing

Clear states for discount status
- Default (brand not partnered with SPC)
- Available (SPC compatible site, discount available)
- Redeemed (discount already applied)
Seamless SPC account integration

Transparency across discount types (online vs in-store)

03

Prototyping & Testing

Objectives & Methodology

Once the initial interactive prototype was ready, we conducted usability testing sessions with SPC members to validate core interaction patterns and uncover friction points. These tests helped us ensure the extension felt helpful rather than interruptive.

We focused our validation on four key questions:

How should unavailable offers be presented so users understand why they cannot redeem them?
Should in-store only and online offers be displayed separately or grouped?
Does the information hierarchy guide users toward the right action quickly?
Can users understand the full redemption flow without explanation?

We ran remote usability tests using clickable prototypes and simulated checkout scenarios on partnered retailer websites. Participants were asked to explore, redeem discounts, and vocalize their thought process.

Key Learnings

Unavailable offers needed a more subtle visual hierarchy, otherwise users felt misled or confused.
Separating online and in-store offers improved clarity, especially on retailers with multiple discount types.
Users expected the most relevant offer first. Surfacing online redemption at the top reduced cognitive load.
A tooltip and success confirmation pattern improved confidence after a redemption.

These insights directly informed UI refinements before engineering handoff and allowed us to avoid costly pivots later in development.

04

Development

Once we incorporated usability insights and finalized the interaction patterns, I delivered the annotated designs to engineering via Zeplin. This included component specs, icon states, and edge case behavior for different types of offers.

Throughout development, I partnered closely with the DevOps team to ensure the build matched the intended UX. My responsibilities included:

Reviewing builds in staging and flagging implementation gaps.
Providing clear rationale for design decisions when feasibility questions arose.
Adjusting UI details to account for technical constraints in the browser environment.
Ensuring accessibility considerations (contrast, focus states) were preserved.

This hands-on collaboration helped us maintain alignment and avoid deviations that could impact clarity or usability.