How I Modernized a 20-Year-Old Shopping Experience and Increased Purchases by 18%
As the sole product designer, I led the full redesign of Brad’s Deals’ product detail pages. I aimed to provide a fresh, user-focused experience and tackle long-standing UX issues. This project launched the first design system and used our new tech stack to build a strong foundation for future pages and shape a full site redesign.
Before
After
Results
New Features Added
More deals saved
Time spent browsing
Increase in purchases
My Role as Lead Product Designer
I led the end-to-end UX process from user research to designing responsive web and native app experiences. I developed the first Figma design system for Brad’s Deals. I collaborated with developers and conducted QA to ensure the product was polished. I also worked with stakeholders to ensure the redesign launched smoothly across all platforms.
Platforms
Mobile Web
Desktop Web
iOS
Android
The Team
Product Designer (1)
Project Manager (1)
Developers (11)
Brad's Deals is an online affiliate marketing platform. A team of editors finds the best deals on the web. The company makes money when users click on affiliate links and buy from merchant sites.
The Challenge
Dated Pages and Low Conversion Rates
The product detail pages (PDPs) hadn’t been touched in over 20 years—and it showed. Shoppers went to Brad’s Deals to find discounts but they quickly jumped to merchant sites for product info, which led to high click-throughs but low conversion rates.
The Opportunity
Leverage New Tech to Create a Reliable Marketplace
After updating our tech stack and CMS, we gained the tools to refresh these pages and update the experience. We wanted to help users feel confident in their purchases by giving complete product information and keep users engaged longer.
Legacy Product Detail Pages
Translating Feedback Into Strategy
Key User Frustrations
“The pages look outdated”
Most complaints were about the visuals. Users noted too much scrolling, poor alignment, and empty spaces.
“There’s not enough information”
Users felt frustrated by the lack of product details and had to leave Brad’s Deals to find information on merchant sites.
“No one responds to issues”
Users used the comment section to report problems but their complaints often received no reply.
Turning User Pain Points Into Design Opportunities
Dated → Modern
Build a modern, mobile-friendly, and accessible interface to reduce bounce rate time and establish Brad’s Deals as a trusted marketplace for users.
Insufficient → Detailed
Create PDPs that give users the details they need to make informed purchasing decisions before leaving the site.
Unresolved → Trustworthy
Design a more reliable way for users to report problems and get them resolved.
How might we modernize PDPs to take full advantage of new CMS features and better meet shoppers' needs?
Laying the Visual Foundation for Scalable Design
Standardizing the UI with a New Figma Design System
Brad’s Deals had no existing design library in Figma. I created one that aligned with the development team’s Storybook library to keep visuals consistent across platforms. This system became the single source of truth for all new components, improved collaboration, and streamlined future designs.
Turning the new spacing levels into Figma tokens
Modernizing with Minimal Revenue Disruption
I took an iterative approach to implement changes to avoid disrupting revenue during the CMS transition. We didn't launch new features right away. Instead, we began by applying the updated design system styles to the legacy PDP layout.
I teamed up with developers to launch a responsive grid layout. We focused on mobile compatibility from the start. This was a low-risk way to modernize the UI while keeping editorial output and revenue stable.
An early iteration after implementing guides, spacing levels, and new font styles
Feature Additions That Benefited Users and Merchant Partners
Turning Browsers into Buyers
The new CMS allowed us to add features that users have requested for many years. I enhanced each PDP with richer images, detailed descriptions, and more related deals. As a result, shoppers stayed engaged longer and made better buying decisions.
10x The Images
An AI integration was added to automatically import 10 deal images. This change removes manual work for editors and offers users a clearer view of product features.
One Sale, Many Products
Editors can link multiple products to one sale instead of making separate PDPs for each item.
3x The Related Deals
24 related deals from various categories are now shown. This boosts relevance and encourages shopping across categories.
New Sort and Filter Options
Prices were extracted from headlines so users can browse and filter by price point.
Increasing Engagement by 87% on Expired Pages
Legacy PDPs for expired deals appeared inactive, even though they were still clickable. Users often assumed the page was a dead end.
I added an “expired” banner, changed the CTA to prompt users to check current pricing and availability, and included a feed of related active deals. These simple changes kept users exploring and led to an 87% lift in engagement.
Legacy expired PDP
New expired PDP
Boosting Saved Deals by 30% with a New Save Feature
The legacy experience only allowed saving from select pages. I launched a cross-platform “save” feature to help users compare products, encourage them to return, and re-engage past shoppers. Post-launch data showed 30% more deals saved compared to legacy PDPS.
New Saved Icon
New Saved Items Page
Introducing New Merchant Opportunities
We added customizable deal feeds that merchants can purchase to show their products in ways that match their strategy. This opened new revenue streams for Brad's Deals and gave partners more control over reaching potential buyers.
Deal feed dedicated to one merchant
Design Decisions That Built User Trust
Introducing Real-Time Issue Reporting
Users often left comments on the legacy PDPs to report issues like broken links, wrong prices, or out-of-stock items. Editors had to manually monitor the pages for comments, which often led to missed issues.
I replaced the comment section with a “Report an Issue” feature that allows users to quickly flag common problems through a simple modal. Reports are instantly sent to the customer success team through a Slack integration. This sped up response times and removed the need for editors to manually check comments.
Before
After
Legacy comment section
New report an issue flow
Prioritizing UX Over Ads to Drive Revenue Growth
To lower revenue risk, the MVP included third-party ads, similar to our legacy PDPs. Post-launch testing showed that a sticky footer ad on mobile blocked the CTA and caused a clear drop in clicks.
We ultimately decided to eliminate third-party ads completely. This improved the user experience, increased revenue, and proved that a cleaner, more trustworthy design can beat ad-driven strategies.
Launched PDPs with ad slots moved to the bottom
Achieving Cross-Platform Consistency for the First Time
I created a unified visual interface across all platforms to ensure that users had a consistent and familiar experience, regardless of how they accessed the site.
I worked closely with the native apps team to address patterns specific to each operating system and adapt components for different screen sizes.
Helping Shoppers with Price Transparency
I added MSRP and discount percentage next to the sale price to help shoppers quickly see the deal’s value.
I extracted the price from the headline and put it in its own field to help users compare products easily and filter by price.
Legacy PDP Headline and Price
New PDP Headline and Price
Launching Thoughtfully Through Testing, Segmentation, and Rapid Iteration
Validating New Designs With User Feedback
To test prototypes, we recruited a small focus group of Brad’s Deals power users.
Highlights:
Users generally found the prototypes easy to navigate and gave positive feedback. They praised the expanded product information, image gallery, and related deals feed.
Suggested Improvements:
Testing revealed one key oversight: users appreciated the editor name and timestamp from the legacy pages, which helped them keep track of new deals. We reintroduced these elements (without the editor’s photo or quote). Based on feedback, we also moved the coupon code closer to the CTA to streamline the purchase flow.
Early user testing showed that even small features can greatly affect loyalty and engagement. This reinforced the importance of validating assumptions before launch.
Legacy editor section
Scaling Gradually Through Iterative Rollouts
We launched the MVP to 20% of email users to monitor performance without overloading our engineering team.
I worked with the native apps team to run A/B tests for key elements like a sticky CTA, ad placements, and CTA color. This helped us create a more polished final product.
We used early results to refine the related deals algorithm. We fixed bugs and slowly expanded to 50% of users, and eventually 100%.
Green CTA
Sticky CTA
Third-party ads
Final Outcome: A Foundation for Future Growth
The Launched MVP
The new PDPs reflect years of behind-the-scenes work. This included switching from Ruby on Rails to Nuxt and upgrading to a flexible, customizable CMS. Launching the new PDPs unlocked a series of critical improvements:
Boosted shopper engagement and lowered bounce rates by providing detailed product info and simplifying decision-making
Created a flexible visual and technical framework that will help speed up the future site-wide redesign
Expanded merchant opportunities by allowing partners to customize deal placements and showcase their products better
Speedier development thanks to a design system that standardizes components for mobile, desktop, and native apps
Desktop MVP
Mobile MVP
Impact: 18% More Purchases with Less Traffic
By adding richer product information on the PDPs, users felt more confident making purchase decisions without leaving the site. As expected, this caused a drop in affiliate link clicks and raised concerns about how it might affect revenue.
However, in the first month after launch, data revealed that users who clicked through to the merchant were 18% more likely to make a purchase than before.
By prioritizing purchase confidence rather than click volume, we brought in fewer users but gained more qualified buyers. This led to higher conversion rates and increased value for both Brad’s Deals and our merchant partners.
More Wins From the New PDPs:
Users Browsed Related Deals for 3X Longer
We increased the recommended deals from 6 to 24 products. By personalizing these deals with users' browsing history, we helped them find more relevant deals and stay engaged longer.
67% of Users Clicked on the Second Product Image
Expanding the gallery to ten images increased engagement, with two-thirds viewing additional images, and gave shoppers a fuller product view.
Scrolling Was Reduced by Over 50%
Browsing was made faster and simpler by removing ads, using a grid, and incorporating global components.
Ongoing Tests and Future Enhancements
Enable deal sharing via text/social media
Add breadcrumbs and navigation aids
Continue A/B testing CTA text, color, and layout
Reflections From Leading a Company-Wide Redesign
My Lasting Impact: The Figma Design System
Building the Figma design system was my most valuable contribution. Although it wasn't in the original project scope, it helped cross-functional teams collaborate, sped up future design work, and laid the groundwork for a site-wide redesign.
Launch First, Then Iterate
Our cross-functional teams had never tackled a project of this scale before. We often got stuck debating minor features, which led to decision fatigue and delays. Once live, we were able to test real user behavior, pivot quickly, and stay focused on results. Looking back, I wish we had embraced an agile mindset sooner. It would have helped us avoid overthinking decisions that ultimately didn’t matter.
