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 our first design system and used our new tech stack to build a strong foundation for future pages and shape the 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 whole 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 team hadn't touched the product detail pages (PDPs) 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. This 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 keep users engaged longer and help them feel confident in their purchases by giving complete product information.
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 them on merchant sites.
“No One Responds to Issues”
People used the comment section to report problems, but many complaints received no reply.
Turning User Pain Points Into Design Opportunities
Dated → Modern
We aimed to build a modern, mobile-friendly, and accessible interface to lower bounce rates and establish Brad’s Deals as a trusted marketplace for users.
Insufficient → Detailed
We wanted to create PDPs that would give users the details they need to make informed purchasing decisions before leaving the site.
Unresolved → Trustworthy
We wanted to create 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 a design system 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 used 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 current 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 wanted for a long time to help solve issues they experienced. We 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
We now show 24 related deals from various categories. 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. It helps users compare products, encourages them to return, and re-engages past shoppers.
New Saved Icon
New Saved Items Page
Introducing New Merchant Opportunities
We added customizable deal feeds that merchants can buy to show their products in ways that match their strategy. This addition 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 lets users quickly flag common problems through a simple modal. Paired with a Slack integration, reports are instantly sent to the customer success team. This sped up response times and removed the need for editors to check comments by hand.
Before
After
Legacy comment section
New report an issue flow
Prioritizing UX Over Ads to Drive Revenue Growth
To lower revenue risk, we introduced the MVP featuring third-party ads, similar to our previous site. Post-launch testing showed that a sticky footer ad on mobile blocked the CTA. This caused a clear drop in clicks.
We ultimately decided to eliminate third-party ads completely. This not only made the user experience better, but it also boosted revenue and proved that a cleaner, more trustworthy design could outperform 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 for the first time in our company’s history. This ensured that users had a consistent and familiar experience, regardless of how they accessed the site.
I worked closely with the native apps team to adapt components for different screen sizes and addressed patterns specific to each operating system.
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 pulled 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 Real User Feedback
To test prototypes, we recruited a small focus group of Brad’s Deals power users.
User Feedback Highlights:
Users generally found the prototypes easy to navigate and gave positive feedback. They praised the expanded product information, image galleries, 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 sticky CTAs, ad placements, and CTA color. This helped us create a more polished final product.
We used early results to refine the deals algorithm. We fixed bugs and slowly expanded to 50% of users, then 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 future site-wide redesigns
Expanded merchant opportunities by allowing partners to customize deal placements and showcase their products better
Faster development with a consistent 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 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 Redesign:
Users Browsed Related Deals for 4X 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 gave shoppers a fuller product view and increased engagement, with two-thirds viewing additional images.
Scrolling Was Reduced by Over 50%
We made browsing faster and simpler by removing ads, using a grid, and adding 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 move faster and avoid overthinking decisions that ultimately didn’t matter.
