AppGrooves
Maximizing Clicks and Conversions: Revamping the Shopping Experience
In the competitive cashback and coupon industry, providing users with a seamless way to compare and redeem deals is essential for driving engagement and conversions. AppGrooves, a startup aiming to compete with established players like Rakuten, introduced a deal comparison feature to help users easily find and redeem offers across various brands and categories.
This feature was built to allow users to easily compare deal offerings across multiple shopping categories, helping them find the best discounts and save money.
Date
Role
UX Researcher
About the Project
June 2020 to August 2020
Stakeholders
CEO, Marketing Manager, Engineering Manager, Product Designer, UI Designer
Methodology
Remote Moderated Usability Testing
Introduction
The AppGrooves Deal Comparison feature had low redemption rates, with early versions performing far below the 50% business goal. The challenge was to redesign the feature to improve usability and drive higher engagement and redemption rates.
Problem Statement
Research Approach
Each week, the design team deployed a new version of the deal comparison page, and I conducted moderated usability tests to gather qualitative feedback on the design. We tracked deal redemption rates for one week, using both user insights and performance metrics to inform design improvements.
01
What is the Deal Comparison Feature?
The Deal Comparison feature allows users to browse and compare deals across various shopping categories. Users start by selecting a shopping category, such as Home Essentials, and can then view all the brands offering deals within that category. This simplifies the process of finding and redeeming discounts, providing a seamless experience for users to maximize savings.
To the right, you can see images of the Home Essentials category, showcasing how users can explore deals for everyday items.
02
Key Findings & Insights
Version 1
While 70% of participants found the information easy to process and predicted the function of the “Copy” and “Redeem Now” buttons accurately, they were surprised to be redirected to the app store without prior notice.
Additionally, 60% of participants felt the page was overwhelming, with too many elements pushing the coupons down, which caused confusion when users first entered the page.
Click “Copy” to copy the coupon code.
A “Redeem Now” button appears, which the user clicks to proceed to the app store.
8.23%
Redemption Rate
Version 2
Click “GET DEAL” to expand the deal card.
View instructions and confirm the code was copied.
2.25%
Redemption Rate
Although 90% of participants liked the extra information provided after expanding the deal, and 70% found the layout familiar and easy to navigate, there were issues with clutter at the top of the page, leading to confusion.
Additionally, 70% of participants were skeptical about clicking the app store badge, citing a lack of trust in where it would lead them.
Version 3
Click “Get Deal” to expand the card.
View instructions and copy the code. Click the app store badge to proceed.
6.06%
Redemption Rate
Most participants (80%) found the deal information well-organized and easy to understand, while 70% appreciated the intuitive redemption process.
However, trust issues persisted, with 70% of users hesitant to click on the app store badge. Additionally, 50% of participants felt that the three-click process was too lengthy, which hindered the overall experience.
Version 4
22.85%
Redemption Rate
Users (70%) found the deal information clear and appreciated the one-click redemption process, which was viewed as a significant improvement.
However, 80% were still hesitant to click the “Open App” button or app store badge, and the unfamiliar layout, combined with long deal cards, made it challenging for users to compare multiple deals without scrolling.
Click the “Open App” button or app store badge to redeem the deal.
Optionally, view the “How to Redeem” instructions, if needed.
Version 5
Click “Copy” to copy the coupon code.
Choose between clicking “Open In-App” or the app store badge.
37.41%
Redemption Rate
Participants (60%) liked the ability to compare multiple deals at once and found the information well-organized, while 70% found the design easier to process.
However, similar to previous versions, 60% still expressed distrust toward the “Open App” button and app store badge.
03
Recommendations
After five iterations of testing and refining the deal comparison feature, several key learnings emerged. Despite improvements, none of the previous versions met the 50% click-through rate that the business was aiming for. Based on usability testing and user insights, I developed recommendations focused on simplifying the user flow, reducing friction in the redemption process, and addressing user trust issues.
Shifting Beyond Card-Based Design
After gathering sufficient data from versions 2, 3, and 4, it became clear that the card-based designs, with an average deal redemption rate of 10.4%, were not effective. Despite incremental improvements, these designs remained far below the 50% goal.
The primary issue identified through user testing was that the redemption process involved too many steps, with versions requiring multiple clicks to complete a deal. Additionally, the app store badge and “Open App” button acted as speed breakers, creating uncertainty for users and reducing trust in the flow.
Version 2
2.25%
Redemption Rate
Version 3
6.06%
Redemption Rate
Version 4
22.85%
Redemption Rate
10.4%
Average Redemption Rate for Versions 2, 3, and 4
Building User Personas to Inform Design
After conducting five rounds of usability testing, I developed a user persona to help guide the design of Version 6. This persona was based on the data and insights gathered over several weeks, reflecting the core needs, pain points, and preferences of our users.
Needs
Simplicity and Speed: Users want a quick, easy process for redeeming deals with minimal clicks. They prefer a one- or two-click journey to complete the redemption without unnecessary steps.
Clear and Concise Information: Users need clear, digestible information about deals without overwhelming content. They want to understand the offer at a glance, without needing to scroll or navigate multiple elements.
Trustworthy and Transparent Flow: Users need to feel confident in the redemption process, with a clear understanding of where they will be taken after clicking buttons like “Open App” or the app store badge.
Pain Points
Too Many Clicks to Redeem: In the card-based designs, users found the process too cumbersome, with multiple steps required to redeem a deal. This slowed down the experience and caused frustration.
Speed Breakers in the Flow: The “Open App” button and app store badge created hesitation among users, as they were unsure where they would be redirected. This lack of transparency broke the flow and caused users to abandon the process.
Overwhelming Design: Excessive content at the top of the page, including paragraphs and multiple elements, pushed deals down, making them hard to find. Users were confused when they entered the page, expecting to see deals upfront.
Optimizing the Layout for User Efficiency
Based on the usability testing and user insights, I developed a set of layout suggestions aimed at improving the user experience and increasing deal redemptions. The goal was to simplify the design, reduce distractions, and eliminate unnecessary steps in the redemption process.
Remove the Intro Paragraph
Users frequently expressed confusion upon entering the page due to excessive content at the top. By removing the introductory paragraph, we prioritized visibility of the coupons, ensuring users see the deals immediately, aligning with their expectations.
Eliminate the Speedbreaker
Feedback indicated hesitation and lack of trust in the “Open App” button and app store badge. To simplify the user flow, I recommended replacing these with a single, descriptive CTA that copies the code and redirects the user, reducing friction and improving transparency.
Make Instructions Optional
Participants found the redemption instructions more of a “nice-to-have” than a necessity. By keeping these steps optional, users who are already familiar with the process can redeem deals with fewer clicks, creating a faster, more seamless experience.
Achieving Success Through Iteration
04
After incorporating key insights and recommendations from previous iterations, we developed a final design that successfully addressed user pain points and streamlined the redemption process.
62.06%
Redemption Rate
In the final design, redemption instructions are optional, with users able to click on the “How to Redeem” button if needed.
The CTA, labeled “Copy to Redeem-In App,” clearly explains what will happen next, removing the ambiguity that caused hesitation in previous versions.
Instead of the problematic app store badge and “Open App” button, we implemented a redirect method, automatically taking users to the app or app store based on their setup, streamlining the entire process.
Reflecting on Key Learnings
05
One of the most important takeaways from this project was the value of iterative design. Each version of the deal comparison feature, though not perfect, provided crucial insights that informed the next step. This iterative process allowed us to continuously improve the user experience based on real feedback, which was key to achieving the final, successful design.
Additionally, having the time to conduct thorough research was essential. The ability to test, analyze, and refine each iteration ensured that we were addressing user pain points effectively and making informed decisions. Without the space for research, we would have missed the key insights that ultimately drove the success of the project.