The Problem
People struggle to fully optimize their credit card benefits and fail to maximize their savings on purchases
How might we help users track and apply their existing credit card benefits so that they can save more money on online purchases?
Final Designs Preview
Designs you can “cow-nt” on to help you save more on purchases!
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
Why Design?
Locating the Design Problem to determine the direction of our design prompt
Our team was tasked with designing a product related to “a website for optimizing purchases and saving money through a user’s existing credit card and bank account benefits”. We agreed that this statement was quite broad and we needed to narrow down which direction we wanted to go.
To help better inform how to re-frame our design prompt, we decided to first conduct user research & interviews to gain a better understanding of how people are currently interacting with their credit card and bank account benefits as well as to pinpoint any pain points they might be experiencing with saving money while shopping.
User Research & Interviews
Understanding how & why people use their credit cards for shopping
To narrow down the types of users and data we wanted to gather through user interviews, secondary research was first gathered on what kinds of benefits credit cards commonly offer and what kinds of card benefit management tools currently exist. Interviews were structured to learn more about the following:
Our User Interviews also gave us more insight into how credit card owners usually make online purchases while trying to save money. These purchase process-related insights were consolidated into a User Journey Map to help our team better visualize credit card users’ actions, thoughts, and emotions during the entire journey of making an online purchase.
Why Design? Revisited
Main Insights from User Research
“X marks the spot!”: Pinpointing the Design Problem & focusing the design frame
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.
In response, we decided to narrow our design framing to focus on providing a way for credit card users to tap into their existing credit card benefits more frequently:
Organizing Design Goals
Designing goals to ensure users’ pain points are relieved
With our user research and journey mapping, we could better visualize the common pain points users face while tapping into their cashback benefits. To target these pain points, 4 design goals were brainstormed below. These design goals will shape the design & functionalities of our proposed solution.
Drafting & Ideating Solutions
Shaping our solution into an effective & reliable shopping companion
Modeling Task Flow & Analysis
Connecting our design solution to users’ purchase journey flow
We wanted to make sure the whole team and any additional stakeholders who join the project later on could easily visualize how our design solution integrates into the user journey flow. So we created a Task Flow model to highlight how and where in the purchase journey flow users would interact with our website and web tool while shopping online.
Wireframes
Bringing our ideas to life, wireframe by wireframe!
The Task Flow helped put our team on the same page about how the user will interact with our design solution. Using our 4 design goals as a basis for design & content requirements, we then created wireframes for the main user flow of using our website & web extension tool to search & apply cashback offers while making an online purchase.
Iterations with User Testing
Testing & 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 on our 1st iteration hi-fi prototype 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.
1. Distinctly identify user’s selected vs. not-selected offers to minimize user errors
“Wait, why are all these grayed-out? It says these are available offers, but I can’t see them?”
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 user’s selected offer so that the distinction remains clear
2. Add CTA buttons to nudge & guide users to the main task flow
“I don’t know where I should go to look at offers?”
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 towards looking at available cashback offers
3. Re-design and re-color the pop-up and sidebar to minimize obtrusion
“I almost clicked out immediately because I thought this was another annoying pop-up ad!”
Problem: Users’ impressions of the pop-up and sidebar browser extensions 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
CIS Logo & Branding
“Why a ‘CashCow’?” The story behind the reliable “cash(back) cow-nting” shopping companion!
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’.
Final Designs & Solution Overview
Designs you can “cow-nt” on to help you save more on purchases!
1. Check all your credit cards benefits & rewards from one place
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
2. Find offers you care about from the brands you love faster
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
3. We’ll remind you about offers to save money at any site’s checkout
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
Next Steps & Impacts
Attentive, but never annoying: Plans to further perfect our shopping companion
As much as I would have loved to continue designing CashCow into a full-fledged product, due to time constraints, we were not able to launch CashCow and see its real impacts on users.
However, if CashCow were to continue ‘zooming’ on, my next steps would include:
Takeaways
“Seeing is believing”: Upgrading my visualization & visual creativity skills
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!
Thank you for reading!
Psst! Want to get a sweet treat and chat?
Reach me at: cm.chelseamai@gmail.com