Jump To Section
CashCow
The "Cash(back) Cow-nting" Website & Extension
Maximize credit card cashback savings with the reliable shopping companion, CashCow!
Impact Goals:
Help users compare all their cashback benefits from one platform
Notify users about applicable offers when shopping on websites
Quickly search, filter, & save cashback offers users care most about
My Role:
Product Design
User Research
CIS & Visual Branding
Usability Testing & Iteration
Tools:
Figma, FigJam, Miro
Adobe Illustrator
Adobe Photoshop
Team:
2 UX/UI Designers (Me)
2 UX Researchers
Timeline:
Course Project
3 months (Sep 2024 - Nov 2024)
Design Overview
Designs you can “cow-nt” on to help you save more on purchases!
CashCow is a website and companion browser extension tool that helps users track all their credit cards' cashback benefits and conveniently & easily apply the best deals to their cart at checkout while shopping from any website.
View, compare, and track all your credit card benefits from the convenience of one site
No more sifting through irrelevant offers! Quickly find and save offers you care about from the brands you love
A companion web extension tool that reminds you to apply your cashback offers to save money at checkout from any website
The Problem
People struggle to fully optimize their credit card benefits and fail to maximize their savings on purchases
People want to find the best deals to save the most money possible when making purchases
People often forget to check and/or apply their card benefits to save on their purchases
User Research
Understanding how & why people use their credit cards for shopping
To better understand the current credit card benefit space, we first gathered secondary research on what kinds of benefits are commonly offered and what benefit management tools currently exist. User interviews with 8 credit-card-owners were conducted to learn more about:
Users’ purchase and saving decision-making when making an online purchase
What credit card or account benefits they know of and/or currently utilize
Pain points users potentially face while trying to save money during shopping
Research Insights
To save money while shopping, users often compare multiple options to find the best deals
Users juggling multiple credit cards prefer having one place to view info about their cards
Users are most aware of & actively try to use cashback benefits compared to other card benefits
How might we inform users of existing credit card benefits and reliably apply them at checkout so that they can save money on online purchases more frequently?
Brainstorm & Ideation
Our Answer: A website for viewing cashback benefits + a web extension tool that applies cashback offers on any shopping website
From our user research, we found that credit card users are aware of using their cards’ benefits to save money but face various obstacles that prevent them from maximizing their usage. Some of these obstacles occur on the external shopping site when the user has started shopping or is planning to checkout, so our solution needed to be accessible from any shopping website in order to effectively address users' problem of forgetting to apply their cashback offers. Thus our solution became a combination of a website and its companion browser extension tool!
Our Design Goal:
Create a tool that enables users to more easily check their available cashback offers before and/or during online shopping, so that credit card users can tap into their existing credit card benefits more frequently.
Sketches & Wireframes
Using our design goal as a basis for design & content requirements, we created wireframes for how our website & web extension tool would look like when activated on an external shopping website. I prioritized making important information such as the amount of cashback savings and frequently-used interactions like the 'save' icon and the 'activate' button as large and contrasting elements that will stand out on the interface.
CIS & Brand Guidelines
To truly flesh out the feeling of a “companion” website and “partner” web extension tool, I led the task of designing logo & branding guidelines for our design solution. Our team wanted our final product to feel like a reliable shopping companion that will help users save money on purchases. With a list of common companion animals in my minds, I also brainstormed terms relating to shopping and e-commerce.
From a stroke of ingenuity, I thought of the name “CashCow”, which is a reference to our product’s goal of being a “cash(back) cow-nting” application and the business terminology for steady, long-earning products called ‘cash cows’.
User Testing & Feedback
Iterating prototypes to better realign with users’ expectations
Based on our paper wireframes, we proceeded to create mid-fi and hi-fi prototypes. We conducted user testing to gather feedback about whether users were able to complete their purchase task flow using our website and browser extension tool. We also wanted to pinpoint any new pain points users may encounter while using our product, so that we can further reiterate our designs.
Change 1: Browser extension tool
Identify user’s selected vs. not-selected offers to minimize user errors
Problem: Gray-ing out offers the user didn’t select created confusion about whether those offers were still available to be applied
Solution: Leave all offers ‘lit-up’ and instead highlight the users’ selected offer so that the distinction remains clear
Change 2: Website home page
Add CTA buttons to nudge & guide users to the main task flow
Problem: First-time users were unsure what they could do on CashCow and where to go to start their purchase task flow
Solution: Add CTA buttons to the landing page that attract users’ attention and nudges them to looking at available cashback offers
Change 3: Browser extension tool overlay
Re-design and re-color the pop-up and sidebar to minimize obtrusion
Problem: Users’ impressions of the browser extension tool overlay felt disruptive, “like an advertisement”, and “untrustworthy”
Solution: Swap for more brand imagery & allow users to minimize the pop-up to reduce visual clash and “ad-like” e-commerce impressions
Final Mockups
Home Page
User can view all credit card benefits & rewards from the convenience of one site
Compare cashback offers across all cards to find the best deal for you!
Helps user track their offers redemption history
Click to enlarge →
Offers Page
No more sifting through irrelevant offers! Filter and search through offers is faster than ever
Bookmark specific offers to be used later
Users can be notified when offers from their favorited brands are available
Click to enlarge →
Browser Extension Tool
Browser extension tool that notifies user of available offers when shopping on any website
User can check all offers for that brand to help inform decision-making while shopping
Reminds users to apply offers at checkout page
Click to enlarge →
Takeaways
Mapping, modeling, and more! Visualizing the user journey from head to toe — During the process of creating CashCow, I noticed that our team often received feedback that people weren’t understanding how our website and web extension tool were related to one another. I realized that creating visual models like the User Journey Map, Task Flow, and more can better communicate the interactions we envision between users and our design solutions. These models will also prove especialy helpful for explaining CashCow to others not familiar with our product, such as readers like yourself.
Lead the charge! My initiative in shaping CashCow’s brand identity — This is one of my first projects where I designed the product’s branding and CIS from scratch. Even though I have some background in the visual arts and design, I learned that CIS design is a whole different world of its own. Throughout the course of the project, I consulted with experienced brand designers and self-studied CIS literature to help guide my ideation process for CashCow’s CIS. I would love to have another opportunity to design branding and CIS for another product in the future to further grow these skills I’ve picked up while designing CashCow.
Thank you to my team members: Maanya, May, and Uraiba for working together with me to design and bring the vision of our reliable (and honestly, quite adorable) CashCow to life!