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.
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?
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
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.
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.
Prototypes - First Iteration
These are some of the screens that I designed that we used during the second round of user interviews.
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?
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