Gurwinder Virk
UX/UI Designer

SPC Chrome Extension

Never forget to save money on your favourite brands again!

Project Overview

Problem

How might we prevent SPC users from forgetting to use their membership to get discounts when shopping online?

Solution

Deliver a Chrome extension that will remind them to activate the discounts they're entitled to when shopping with their favourite brands online.

My Role: UX/UI Designer

  • Conduct research interviews with potential users

  • Collaborate with Marketing and Product to define the flow of the extension

  • Come up with initial sketches, wireframes, and prototypes

  • Conduct usability testings with users

  • Revise and deliver final prototypes to Product

  • Assist Product throughout the development process

  • Monitor the extension's performance post-launch.

Project Duration: 3 months.

Tools Used: Sketch, Zeplin.

Research

Primary Research

Interviews

During the research phase of this project, we conducted user interviews in order to get a better understanding of how our users shop online and what's their comfort level with browser extensions.

Some of the questions we asked included:

  • What's you primary web browser?

  • Do you know how to install a browser extension?

  • Do you prefer shopping on desktop or mobile?

  • What would you expect from an SPC Extension?

100% of the users interviewed said that they use chrome as their main browser, and 50% of them prefer to shop on desktop over mobile

Secondary Research

Similar products in market

We downloaded and analyzed the main extensions with similar features from our competitors to identify their strengths and weakness, as well as opportunities for us to provide something unique to our users. The two products we reviewed in particular were:

  • Honey

  • Rakuten

Ideation

Extension Icon

Default State (Left): this is how the extension looks when there are no available discounts on a particular website

Active State (Middle): this is how the extension looks when a user lands on a partner website. The red colour was chosen as it was proven with previous research being the most effective at grabbing users' attention.

Final State (Right): this is how the extension looks when a discount has been activated by a user during a session on a partner website. This state was created to give peace of mind to the user, so that they can shop knowing that their SPC membership will be automatically used at checkout.

SPC Chrome Extension
SPC Chrome Extension

Wireframes

After analyzing the insights coming from the research phase, I started working on initial wireframes to share with the team, in order to align on the direction that we wanted to take this product towards.

SPC Chrome Extension

Prototypes - First Iteration

These are some of the screens that I designed that we used during the second round of user interviews.

Testing

After completing the initial prototype we put it in front of our users to gather additional feedback.

Some of the things we wanted to test include:

  • Use of certain words (i.e. Activate vs Redeem)

  • Button styles

  • What should unavailable offers look like?

  • Should in-store and online offers be separated?

  • Does the flow of information make sense?

  • Do users intuitively know what steps to take to redeem an offer?

Implementation

After analyzing users' feedback we decided to make some tweaks to the prototype and once we were confident of being in a good place we exported the designs to Zeplin, so that the Product team could start working on it.

At that point, my role was mostly to provide support to developers while also making sure that the final product was being built exactly like the prototype.

Here's the overall look of the SPC Chrome Extension:

Final Considerations

Building a browser extension was definitely a unique experience and definitely something that not every designer gets to work on.

I had to face all sort of challenges for this project, from trying to figure out simple (but important) design things such as acceptable font sizes, size of the extension window, and what format to submit the icon in, to more complex things like what questions to ask users, and how to make the whole redemption process as smooth as possible.

The main reason for this challenge comes from the lack of reference points in the market. There are a few similar extensions out there but our business has some other very important characteristics that we had to keep in mind while working on this, such as the presence of In-Store and SPC+ offers.

Overall I'm very satisfied with how it turned out and we're consistently monitoring the performance of the product to see what can be improved in future iterations.

If you'd like to try it out for yourself here's the link to install it:

https://chrome.google.com/webstore/detail/spc-student-deals/lbmedplpeggindlnaomcjahdlpmalcpm

Nice to meet you!
Let's get to know each other and work together