Web Application Integration
Web Application Integration
Overview
Overview
As a UX Designer at Smart Twigs, a tech consulting company that partners with clients to continuously evolve their technology and adapt to changing business needs, I led the redesign of Redeemer — a Chrome extension and web experience that helps users earn cash back and rewards while shopping online.
Redeemer was brought to us by a husband-and-wife team after a frustrating experience with a previous design agency. The original extension was cluttered, difficult to navigate, and failed to provide a seamless shopping experience, leading to user frustration and decreased trust.
As a UX Designer at Smart Twigs, a tech consulting company that partners with clients to continuously evolve their technology and adapt to changing business needs, I led the redesign of Redeemer — a Chrome extension and web experience that helps users earn cash back and rewards while shopping online.
Redeemer was brought to us by a husband-and-wife team after a frustrating experience with a previous design agency. The original extension was cluttered, difficult to navigate, and failed to provide a seamless shopping experience, leading to user frustration and decreased trust.
Role & Timeline
UX UI Designer, User Research, Prototyping & Testing
July 2024 - December 2024
Role & Timeline
UX UI Designer, User Research, Prototyping & Testing
July 2024 - December 2024
My Team
Product managers
Graphic designer
Lead Designer
Front/Back-end Developers
System Engineer
My Team
Product managers
Graphic designer
Lead Designer
Front/Back-end Developers
System Engineer
Background
Background
Client: A husband-and-wife team passionate about helping online shoppers maximize their savings. They had reached out to us after they were dissatisfied with the work of a previous team.
The Product: Redeemer Chrome extension helps online shoppers maximize their savings in three powerful ways:
Cash Back: We automatically offer cash back on purchases through affiliate partnerships.
Smart Credit Card Recommendations: Based on the purchase and the user's cards, we suggest the best one to use for maximum rewards.
Coupon Codes: We apply the best available coupons at checkout.
Goal: Redesign the Redeemer Chrome extension to improve usability, increase user engagement, and establish a more modern, trustworthy foundation. This initiative was driven by high uninstall rates, major user drop-offs, and client concerns over retention and reliability. The redesign also aimed to be launch-ready by Black Friday (November 28, 2024) to support the peak online shopping season spanning Cyber Monday and Christmas.
Client: A husband-and-wife team passionate about helping online shoppers maximize their savings. They had reached out to us after they were dissatisfied with the work of a previous team.
The Product: Redeemer Chrome extension helps online shoppers maximize their savings in three powerful ways:
Cash Back: We automatically offer cash back on purchases through affiliate partnerships.
Smart Credit Card Recommendations: Based on the purchase and the user's cards, we suggest the best one to use for maximum rewards.
Coupon Codes: We apply the best available coupons at checkout.
Goal: Redesign the Redeemer Chrome extension to improve usability, increase user engagement, and establish a more modern, trustworthy foundation. This initiative was driven by high uninstall rates, major user drop-offs, and client concerns over retention and reliability. The redesign also aimed to be launch-ready by Black Friday (November 28, 2024) to support the peak online shopping season spanning Cyber Monday and Christmas.
Discovery & Audit (Is this Redesign Warranted?)
Discovery & Audit (Is this Redesign Warranted?)
User flow analysis
User flow analysis
I conducted a User Flow Analysis to familiarize myself with Redeemer's existing structure and functionality. The goal was to map out each step users take when interacting with the extension to identify friction points, inefficiencies, and opportunities for improvement. This deep dive allowed me to visualize the extension's current state, uncover areas of user confusion, and highlight critical moments where users were dropping off or struggling to complete key tasks.
I conducted a User Flow Analysis to familiarize myself with Redeemer's existing structure and functionality. The goal was to map out each step users take when interacting with the extension to identify friction points, inefficiencies, and opportunities for improvement. This deep dive allowed me to visualize the extension's current state, uncover areas of user confusion, and highlight critical moments where users were dropping off or struggling to complete key tasks.
Flow made in Figma commented on Procreate (Click image to enlarge)
Flow made in Figma commented on Procreate (hover image to enlarge)
Stakeholder interviews
To gain a deeper understanding of both business goals and user pain points, I conducted stakeholder interviews with the Redeemer founders, along with a review of recently recorded user interviews. These conversations provided valuable insights into the client’s frustrations with the previous design, their vision for the product, and the critical pain points experienced by real users.
To gain a deeper understanding of both business goals and user pain points, I conducted stakeholder interviews with the Redeemer founders, along with a review of recently recorded user interviews. These conversations provided valuable insights into the client’s frustrations with the previous design, their vision for the product, and the critical pain points experienced by real users.
User Feedback & Past Research
User Feedback & Past Research
To gain a comprehensive understanding of user pain points, we analyzed user reviews from the Chrome Web Store alongside past research provided by the client, including user surveys and usability studies conducted by the previous team.
Survey data further confirmed these issues, revealing confusion around navigation, difficulties with account-related actions, and distrust in the extension's reliability. These findings reinforced our initial audits and validated the need for a streamlined, user-focused redesign.
To gain a comprehensive understanding of user pain points, we analyzed user reviews from the Chrome Web Store alongside past research provided by the client, including user surveys and usability studies conducted by the previous team.
Survey data further confirmed these issues, revealing confusion around navigation, difficulties with account-related actions, and distrust in the extension's reliability. These findings reinforced our initial audits and validated the need for a streamlined, user-focused redesign.
Heuristic Analysis
Heuristic Analysis
To evaluate Redeemer's user experience, our team conducted a Heuristic Analysis and examined Mixpanel data. The heuristic analysis uncovered cluttered menus, hidden key actions, and confusing navigation paths that disrupted user flow.
Mixpanel data further validated these findings:
High Drop-off Rates during cashback redemption indicated user friction.
Underused Wallet and Account Features suggested poor discoverability.
Short Session Durations and disorganized click paths pointed to navigation struggles.
These insights confirmed the need for a more intuitive, user-focused design to eliminate confusion and improve usability.
To evaluate Redeemer's user experience, our team conducted a Heuristic Analysis and examined Mixpanel data. The heuristic analysis uncovered cluttered menus, hidden key actions, and confusing navigation paths that disrupted user flow.
Mixpanel data further validated these findings:
High Drop-off Rates during cashback redemption indicated user friction.
Underused Wallet and Account Features suggested poor discoverability.
Short Session Durations and disorganized click paths pointed to navigation struggles.
These insights confirmed the need for a more intuitive, user-focused design to eliminate confusion and improve usability.
Screen shot of Mixpanel analytics
Competitive Analysis
Competitive Analysis
We conducted a Competitive Analysis of popular money-saving extensions like Honey, Rakuten, and Capital One Shopping to understand UX best practices and feature prioritization. These extensions leverage clean interfaces and clear navigation, separating shopping tools from account management for smoother user experiences.
We also examined the role of Chrome extensions as quick-access tools that enhance browsing without disruption—emphasizing speed, simplicity, and seamless integration. These insights guided our approach to streamline Redeemer’s design and improve usability.
We conducted a Competitive Analysis of popular money-saving extensions like Honey, Rakuten, and Capital One Shopping to understand UX best practices and feature prioritization. These extensions leverage clean interfaces and clear navigation, separating shopping tools from account management for smoother user experiences.
We also examined the role of Chrome extensions as quick-access tools that enhance browsing without disruption—emphasizing speed, simplicity, and seamless integration. These insights guided our approach to streamline Redeemer’s design and improve usability.
List of competitors analyzed
Key Takeaways
Key Takeaways
Our discovery and auditing process surfaced clear opportunities for improvement:
Overcrowded Interface: Redeemer's all-in-one design created clutter and confusion, making core features hard to access.
Poor Navigation & Discoverability: Users struggled to locate important features like cashback redemption and card management, resulting in high drop-off rates.
Underutilized Features: Mixpanel data revealed low engagement with wallet and account tools, signaling poor discoverability.
Competitive Disadvantage: Competitors like Honey and Rakuten showcased cleaner, more intuitive interfaces that separated browsing from account management.
Performance Issues: Housing all features within the Chrome extension led to slow load times and lag, especially during account-related tasks—impacting user experience and retention.
Our discovery and auditing process surfaced clear opportunities for improvement:
Overcrowded Interface: Redeemer's all-in-one design created clutter and confusion, making core features hard to access.
Poor Navigation & Discoverability: Users struggled to locate important features like cashback redemption and card management, resulting in high drop-off rates.
Underutilized Features: Mixpanel data revealed low engagement with wallet and account tools, signaling poor discoverability.
Competitive Disadvantage: Competitors like Honey and Rakuten showcased cleaner, more intuitive interfaces that separated browsing from account management.
Performance Issues: Housing all features within the Chrome extension led to slow load times and lag, especially during account-related tasks—impacting user experience and retention.
The Solution
The Solution
We introduced a dedicated web app for account-focused interactions such as transaction history, sign-up/login, and cashback redemption. This strategic separation decluttered the Chrome extension, optimized performance, and enhanced scalability—resulting in a more intuitive and engaging user experience.
We introduced a dedicated web app for account-focused interactions such as transaction history, sign-up/login, and cashback redemption. This strategic separation decluttered the Chrome extension, optimized performance, and enhanced scalability—resulting in a more intuitive and engaging user experience.
The Problem
The Problem
Redeemer's original design packed all features into a single Chrome extension, leading to a cluttered interface, user confusion, and noticeable performance issues.
Redeemer's original design packed all features into a single Chrome extension, leading to a cluttered interface, user confusion, and noticeable performance issues.
Design
Design
I began the design phase by mapping out an updated user flow, highlighting which features would stay in the Chrome extension—like cashback activation and coupon application—and which would move to the new web app (e.g., transaction history, account management). This clear separation aimed to streamline navigation, reduce clutter, and enhance performance.
I began the design phase by mapping out an updated user flow, highlighting which features would stay in the Chrome extension—like cashback activation and coupon application—and which would move to the new web app (e.g., transaction history, account management). This clear separation aimed to streamline navigation, reduce clutter, and enhance performance.
Updated flow (Hover image to Zoom)
🎥 Original Add Credit Card/Wallet
🎥 Original Add Credit Card/Wallet
Screen recording of Current Wallet/Add Card – Before Redesign
Problems
Problems
Performance Lag: Actions like saving a new card or accessing wallet details are noticeably slow, contributing to user frustration.
Confusing Navigation: Users struggle to find where to add or manage cards due to poor visual hierarchy and inconsistent labeling.
Too Many Steps: Having to select bank before selecting card created an extra step in adding card to a users wallet. (Aided performance issues since helped filter back end data)
Performance Lag: Actions like saving a new card or accessing wallet details are noticeably slow, contributing to user frustration.
Confusing Navigation: Users struggle to find where to add or manage cards due to poor visual hierarchy and inconsistent labeling.
Too Many Steps: Having to select bank before selecting card created an extra step in adding card to a users wallet. (Aided performance issues since helped filter back end data)
Sketching
I began the design process by sketching the Add Card and Wallet feature to quickly explore different layout and interaction ideas. Sketching is essential in UX because it allows for rapid iteration, helping identify potential issues and refine concepts before committing to more detailed designs. This low-fidelity approach saved time, facilitated early testing, and ensured the final design would be intuitive and user-friendly.
I began the design process by sketching the Add Card and Wallet feature to quickly explore different layout and interaction ideas. Sketching is essential in UX because it allows for rapid iteration, helping identify potential issues and refine concepts before committing to more detailed designs. This low-fidelity approach saved time, facilitated early testing, and ensured the final design would be intuitive and user-friendly.
Scan of sketches of notebook regarding Add card/ Wallet
Low-fidelity wireframes
Low-fidelity wireframes
I began the design process by sketching the Add Card and Wallet feature to quickly explore different layout and interaction ideas. Sketching is essential in UX because it allows for rapid iteration, helping identify potential issues and refine concepts before committing to more detailed designs. This low-fidelity approach saved time, facilitated early testing, and ensured the final design would be intuitive and user-friendly.
I began the design process by sketching the Add Card and Wallet feature to quickly explore different layout and interaction ideas. Sketching is essential in UX because it allows for rapid iteration, helping identify potential issues and refine concepts before committing to more detailed designs. This low-fidelity approach saved time, facilitated early testing, and ensured the final design would be intuitive and user-friendly.
Screenshot of a low-fidelity wireframe
🎥 High-Fidelity/Prototype
🎥 High-Fidelity/Prototype
I began the design process by sketching the Add Card and Wallet feature to quickly explore different layout and interaction ideas. Sketching is essential in UX because it allows for rapid iteration, helping identify potential issues and refine concepts before committing to more detailed designs. This low-fidelity approach saved time, facilitated early testing, and ensured the final design would be intuitive and user-friendly.
I began the design process by sketching the Add Card and Wallet feature to quickly explore different layout and interaction ideas. Sketching is essential in UX because it allows for rapid iteration, helping identify potential issues and refine concepts before committing to more detailed designs. This low-fidelity approach saved time, facilitated early testing, and ensured the final design would be intuitive and user-friendly.
High-fidelity prototype of add card/wallet page
🎥 Alt Case: Unrecognized Inputs
🎥 Alt Case: Unrecognized Inputs
During past user testing and through user reviews, a critical flaw was uncovered: users frequently experienced an infinite loading screen when searching for a card with ambiguous input. This not only led to frustration but also disrupted the overall experience, contributing to drop-offs during the add card process.
During past user testing and through user reviews, a critical flaw was uncovered: users frequently experienced an infinite loading screen when searching for a card with ambiguous input. This not only led to frustration but also disrupted the overall experience, contributing to drop-offs during the add card process.
Screen Recording of the infinite loading due to unrecognized inputs.
To address this, I implemented a clearer error state to alert users when a card is not found, preventing indefinite loading. Additionally, I introduced a new feature that allows users to submit a request if their card isn't in our database—creating a feedback loop for continuous product improvement and enhancing user trust.
To address this, I implemented a clearer error state to alert users when a card is not found, preventing indefinite loading. Additionally, I introduced a new feature that allows users to submit a request if their card isn't in our database—creating a feedback loop for continuous product improvement and enhancing user trust.
Low fidelity screenshots of when searching unrecognized inputs
To address this, I implemented a clearer error state to alert users when a card is not found, preventing indefinite loading. Additionally, I introduced a new feature that allows users to submit a request if their card isn't in our database—creating a feedback loop for continuous product improvement and enhancing user trust.
To address this, I implemented a clearer error state to alert users when a card is not found, preventing indefinite loading. Additionally, I introduced a new feature that allows users to submit a request if their card isn't in our database—creating a feedback loop for continuous product improvement and enhancing user trust.
High-fidelity prototype of unrecognized input
Redeeming Cash Back
Redeeming Cash Back
Screenshot of current cashback redemption process – Before Redesign
Identified Problems:
Cramped Interface: The small window made multi-step processes like viewing balance and confirming transactions cluttered and confusing.
Security Concerns: Users felt uneasy handling financial data within an extension.
Performance Limitations: Slow load times and failed attempts were common.
Identified Problems:
Cramped Interface: The small window made multi-step processes like viewing balance and confirming transactions cluttered and confusing.
Security Concerns: Users felt uneasy handling financial data within an extension.
Performance Limitations: Slow load times and failed attempts were common.
Sketches & Low fidelity wireframes
To address the identified challenges and align with the business goal of allowing users to easily view available cashback for PayPal redemption and track pending cashback.
Sketches & Low fidelity wireframes
To address the identified challenges and align with the business goal of allowing users to easily view available cashback for PayPal redemption and track pending cashback.
Sketch and a low fidelity wireframe of "Redeem" page
🎥 High Fidelity Prototype
To address the identified challenges and align with the business goal of allowing users to easily view available cashback for PayPal redemption and track pending cashback.
🎥 High Fidelity Prototype
To address the identified challenges and align with the business goal of allowing users to easily view available cashback for PayPal redemption and track pending cashback.
High fidelity prototype for the cash back redeem page
Transaction History
Transaction History
The original Transaction History in Redeemer displayed a wide range of details—cashback, coupons, credit card rewards, total savings.
Our engineers noted that incorporating all the original features into the web app would require additional development time, which did not align with our current project timeline. As a team, we decided the best course of action was to prioritize tracking cashback in the Transaction History, ensuring a streamlined and focused user experience for the initial launch.
The original Transaction History in Redeemer displayed a wide range of details—cashback, coupons, credit card rewards, total savings.
Our engineers noted that incorporating all the original features into the web app would require additional development time, which did not align with our current project timeline. As a team, we decided the best course of action was to prioritize tracking cashback in the Transaction History, ensuring a streamlined and focused user experience for the initial launch.
Sketches & Low fidelity Wireframes
Sketches & Low fidelity Wireframes
Screen shot of current transaction history – Before Redesign
Low fidelity wireframes from transaction history
🎥 High Fidelity Prototype
Building on the low-fidelity wireframes, I developed high-fidelity designs centered around a single, clear objective: enabling users to easily track their cashback. These mockups emphasized clarity, straightforward navigation, and real-time status updates, ensuring users could quickly access the information that mattered most.
🎥 High Fidelity Prototype
Building on the low-fidelity wireframes, I developed high-fidelity designs centered around a single, clear objective: enabling users to easily track their cashback. These mockups emphasized clarity, straightforward navigation, and real-time status updates, ensuring users could quickly access the information that mattered most.
High Fidelity fidelity wireframes from transaction history
Validating the Design
Validating the Design
To validate the redesign and uncover usability issues, we conducted usability testing focusing on two user groups: new users (who had never used Redeemer) and current users (to assess the full web app + extension experience).
View the usability test plan
Conducted moderated usability tests with 6 online shoppers via Zoom. 3 who were familiar with the Redeemer Chrome Extension and 3 that have never used it.
To validate the redesign and uncover usability issues, we conducted usability testing focusing on two user groups: new users (who had never used Redeemer) and current users (to assess the full web app + extension experience).
View the usability test plan
Conducted moderated usability tests with 6 online shoppers via Zoom. 3 who were familiar with the Redeemer Chrome Extension and 3 that have never used it.
Tasks for usability testing
Tasks for usability testing
Activate all money saving features Redeemer provides while online shopping (help user familiarize themselves with ext. as well).
Add the Chase Sapphire Preferred card into wallet.
Remove the Chase Sapphire Preferred Card and Add the Chase Sapphire Reserved Card.
Request a credit card that does not exist in Redeemer’s data base of credit cards.
Locate the transaction history page and find cash back state of a specific purchase.
Redeem the cashback through the extension.
Activate all money saving features Redeemer provides while online shopping (help user familiarize themselves with ext. as well).
Add the Chase Sapphire Preferred card into wallet.
Remove the Chase Sapphire Preferred Card and Add the Chase Sapphire Reserved Card.
Request a credit card that does not exist in Redeemer’s data base of credit cards.
Locate the transaction history page and find cash back state of a specific purchase.
Redeem the cashback through the extension.
Results
Results
User testing confirmed that the redesigned experience was intuitive and aligned with user expectations.
6/6 participants completed core tasks—activating cashback, redeeming rewards, and navigating the web dashboard—without friction.
Minor improvements were noted, but no major usability issues emerged, suggesting the design was well-calibrated to user needs.
2 Redeemer users and 1 non-Redeemer used that we tested stated that they would not know that there was additional features unless discovering it upon the web app.
User testing confirmed that the redesigned experience was intuitive and aligned with user expectations.
6/6 participants completed core tasks—activating cashback, redeeming rewards, and navigating the web dashboard—without friction.
Minor improvements were noted, but no major usability issues emerged, suggesting the design was well-calibrated to user needs.
2 Redeemer users and 1 non-Redeemer used that we tested stated that they would not know that there was additional features unless discovering it upon the web app.
Iterating based on usability test results
Iterating based on usability test results
Following usability testing and feedback sessions, several key changes were made to refine the user experience:
Removed Extension Task Bar
Since core features were migrated to the web app, the extension no longer needed a full task bar. This helped reduce clutter and focused the interface on immediate, actionable interactions.Optimized Extension Layout
With fewer features, the extension's screen size was reduced to improve spacing and visual balance, making it more compact and intuitive.Improved Feature Discoverability
Some users expressed concern about not knowing additional features existed outside the extension. To address this, we replaced the “Log out” option with a Settings icon that links directly to the web app. While all users are eventually guided to the web app through regular use, this update added an extra pathway for exploration without introducing friction.
Following usability testing and feedback sessions, several key changes were made to refine the user experience:
Removed Extension Task Bar
Since core features were migrated to the web app, the extension no longer needed a full task bar. This helped reduce clutter and focused the interface on immediate, actionable interactions.Optimized Extension Layout
With fewer features, the extension's screen size was reduced to improve spacing and visual balance, making it more compact and intuitive.Improved Feature Discoverability
Some users expressed concern about not knowing additional features existed outside the extension. To address this, we replaced the “Log out” option with a Settings icon that links directly to the web app. While all users are eventually guided to the web app through regular use, this update added an extra pathway for exploration without introducing friction.
Before and after clicking the profile icon on the extension.
🎥 The Final Prototype
🎥 The Final Prototype
Finished protoype
The Impact
The redesigned Redeemer experience successfully launched ahead of the holiday shopping season, aligning with our strategic goal to maximize savings and user engagement during peak periods like Black Friday and Christmas.
🚀 Key Outcomes:
$2M+ in user savings from November through December — a direct result of smoother cashback activation, improved usability, and better coupon application.
300% increase in user growth, fueled by a more trustworthy and conversion-focused onboarding experience.
High client satisfaction, with the founders expressing confidence in the new direction and appreciation for the alignment between user needs and product vision.
The Impact
The redesigned Redeemer experience successfully launched ahead of the holiday shopping season, aligning with our strategic goal to maximize savings and user engagement during peak periods like Black Friday and Christmas.
🚀 Key Outcomes:
$2M+ in user savings from November through December — a direct result of smoother cashback activation, improved usability, and better coupon application.
300% increase in user growth, fueled by a more trustworthy and conversion-focused onboarding experience.
High client satisfaction, with the founders expressing confidence in the new direction and appreciation for the alignment between user needs and product vision.
Reflections and learning
Balancing UX with Business Goals
Working closely with a passionate founding team was a valuable learning experience. It taught me that the best UX solution doesn’t always align with business goals or stakeholder preferences.
This project reminded me that great UX isn’t just about ideal flows — it’s about collaboration, compromise, and designing solutions that work for both users and the business.
Designing for the Long Run
This project also taught me to look beyond immediate needs and ask,
“How will this design scale in 6 months? A year?”
It’s easy to solve for what's urgent, but lasting design requires thinking about future growth, features, and edge cases.
Rather than quick fixes, I focused on building a foundation that could evolve — ensuring the UX system could adapt as Redeemer’s user base and capabilities expand.
Reflections and learning
Balancing UX with Business Goals
Working closely with a passionate founding team was a valuable learning experience. It taught me that the best UX solution doesn’t always align with business goals or stakeholder preferences.
This project reminded me that great UX isn’t just about ideal flows — it’s about collaboration, compromise, and designing solutions that work for both users and the business.
Designing for the Long Run
This project also taught me to look beyond immediate needs and ask,
“How will this design scale in 6 months? A year?”
It’s easy to solve for what's urgent, but lasting design requires thinking about future growth, features, and edge cases.
Rather than quick fixes, I focused on building a foundation that could evolve — ensuring the UX system could adapt as Redeemer’s user base and capabilities expand.