A Redesign Focused On Modernization and an Enhanced Shopping Experience
I single-handedly led the redesign of the product detail pages, which solved many problems that had manifested over the years. It aimed to modernize the site by introducing the company’s first design system and was built on top of a new web app tech stack. The PDPs were the first pages to adopt the new framework and helped influence the site’s future direction.
Role: Lead Product Designer
Ideation, user research, wireframing, prototyping, native app design, usability testing, design system implementation, review, QA
Platforms
Mobile Web
Desktop Web
iOS
Android
The Team
Product Designer (1)
Project Manager (1)
Developers (11)
Background
Brad's Deals is an online platform that helps shoppers discover the best deals from different stores. For the past 20 years, Brad’s Deals has focused on driving users to click on merchant affiliate links. The old product detail pages (PDPs) provided minimal information, encouraging users to leave the site for more details on the merchant’s website, thus generating revenue.
The Goal
While this strategy worked in the past, Brad’s Deals wanted to evolve into a more trustworthy marketplace. The goal was to create a stickier experience for users, offering comprehensive product details directly on the site and encouraging users to explore and engage within the platform before being redirected to merchant sites to make a purchase.
The Challenge
After completing a major tech stack overhaul and upgrading to a new content management system, the next step was to fully leverage the capabilities of the new platform. However, the outdated code of the legacy PDPs couldn’t support the new CMS features needed to enhance the user experience. A complete redesign was necessary to help Brad’s Deals become a more valuable marketplace to both users and merchant partners.
Legacy Product Detail Pages
Balancing User Feedback and Business Objectives
Common User Complaints
1. Dated
Users unanimously agreed the PDPs looked dated. The majority of complaints were visual: excessive scrolling, large empty space, and strange alignment.
2. Insufficient Information
Users felt they had to visit the merchant's site right away because there was not enough product information to make a buying decision.
3. Unresolved Issues
The comment section was used to report issues but users often didn’t get a response before the deal expired.
Opportunity
How might we modernize product detail pages to fully leverage the new CMS capabilities and provide greater value to shoppers?
What We Aimed to Achieve During the Redesign
Dated → Modern
The new PDPs should have a refreshed interface with global styling and expected e-commerce features. Mobile-first design should be prioritized since 77% of users access PDPs on mobile devices and accessibility guidelines should be followed.
Insufficient → Detailed
The new pages should seamlessly integrate desired new CMS features. More product information should be provided to increase engagement and reduce the time it takes for users to bounce to merchant sites.
Unresolved → Trustworthy
Reported problems should be addressed quickly to reduce user frustration and increase trust in our site.
Key Design Improvements for a Better Shopping Experience
The Backbone of the PDP Redesign: Brad’s Deals Design System
Brad's Deals had recently started using Figma and lacked an existing design library. I built a comprehensive design system that aligned with the development team's Storybook library. This established visual consistency across both the site and app for the first time in the company's history.
Leveraging a Delayed Timeline With Iterative Updates
Stakeholders worried that the editorial team's difficulties with the new CMS platform might lead to a drop in revenue. To ease the transition, I worked with developers to focus on refreshing the existing legacy PDPs rather than adding new features right away. We applied the new design system styles to legacy page mocks and implemented a responsive grid layout, ensuring editors could maintain their revenue goals while adapting to the new system.
An early iteration after implementing guides, spacing levels, and new font styles
Impacts of Integrating New CMS Features
Once we got the go-ahead, we began sunsetting legacy features and adding new features in the CMS and on the PDPs.
10x The Images
We eliminated all manual work for editors by adding an AI integration to automatically import deal images.
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 different categories are surfaced to improve relevance and encourage cross-category shopping.
New Sort and Filter Options
The new CMS separates price from the headline so shoppers can browse and filter by price point.
Quicker Responses to User Issues
BEFORE: The comment section was used for reporting problems such as broken coupons, out-of-stock items, and price changes. Editors had to check PDPs daily for comments, which often resulted in missed issues.
Legacy comment section
NOW: I designed a modal with common issues and an optional details field. A Slack integration was set up to quickly alert the customer success team and improve issue response time.
New report an issue flow
New Save Feature Increased Saved Deals by 30%
On the legacy site, users could only save products from certain pages, but we knew they wanted to save products from any page and device. The new saving experience on PDPs encouraged repeat visits and allowed users to compare products.
New Saved Icon
New Saved Items Page
Strategic Rollout: The Gradual Launch of the MVP
Gathered Insights through User Testing
To test prototypes, we recruited a small focus group of existing Brad’s Deals shoppers. Users generally found the prototypes easy to navigate. They expressed praise for the feature additions, especially the multiple images, the related deals section, and the added savings percentages. Several users suggested the coupon code be moved closer to the CTA, which was implemented in a later iteration.
However, using one prototype for both developers and users caused confusion, as it included error states for developer review. I learned the importance of creating distinct prototypes for user testing and developer feedback, with separate variants for error states.
Thoughtful Rollout Through Segmentation
We launched the MVP to 20% of email users, refined the related deals algorithm, and addressed bugs before expanding to 50% of users. This approach prevented overwhelming the engineering team and enabled quicker fixes. I partnered with the native apps team to conduct rapid tests and iterate based on real-time feedback, resulting in a more polished final product as we scaled to 100% of users.
Final Solution: A Modern Product Detail Page
The Launched MVP
The new PDPs mark the culmination of years of behind-the-scenes effort, including the transition from Ruby on Rails to Nuxt and the upgrade to a more flexible CMS. The new PDPs provide detailed product information to keep users engaged longer and decrease bounce rates. A uniform design speeds up development and provides consistent visuals across platforms. Customizable CMS features open up new opportunities for merchants to drive sales and showcase their products. As the foundation of the full site redesign, these PDPs pave the way for a more cohesive and efficient redesign.
Desktop MVP
Mobile MVP
Results After Launch
New Features Added
More deals saved
Time spent browsing
Increase in purchases
67% of Users Clicked on the Second Image
The new, larger gallery significantly boosted engagement. With 10x more images, customers now have a more complete view of product features, details, and quality, increasing purchase confidence.
Related Deals Engagement Increased From 8 to 33 Seconds
We expanded the recommended deals from 6 to 24 products and personalized recommendations based on browsing history to significantly boost the chance of users finding deals that match their interests.
30% Increase in Saved Deals
Enabling shoppers to save products from any page and on any device made it easier to revisit previously viewed deals and helped with purchase planning. This feature encouraged repeat visits and allowed users to compare products more easily.
Simplified Product Comparison
Extracting the price from the headline allows users to scan and compare products more easily and enables sorting and filtering by price across the site. Adding MSRP and discount percentages helped shoppers quickly identify the best deals.
Legacy PDP Headline and Price
New PDP Headline and Price
Customizable Merchant Opportunities
The new CMS supports multiple deal feeds below the related deals section, which allows merchants to purchase entire feeds or specific deal slots to showcase their products in ways that align with their preferred strategy.
Reduced Scrolling by Over 50%
A more efficient browsing experience was created by removing ads, implementing a grid, and adding standardized components from the new design system.
Quicker Customer Support
A new “Report an Issue” feature reduced user friction by ensuring issues were immediately sent to the customer success team for review. This automated process eliminated the need for editors to manually monitor comments.
Cross-Platform Consistency
This was the first time in the company’s history that the native apps, desktop web, and mobile web had the same UI. This alignment improved the user experience and helped streamline future design updates for all platforms.
Continual Improvement Beyond Launch
An 87% Increase in Clicks on expired PDPs
BEFORE: Although everything was clickable, the expired legacy pages appeared inactive and offered no way to promote active deals. Users thought it was a dead end.
Legacy expired PDP
NOW: I added an “expired” banner, kept the CTA active with copy to encourage users to check the price and availability, and introduced a feed of active related deals.
New expired PDP
Less Ads, More Revenue
To reduce revenue risk, we launched the MVP with legacy third-party ad slots, moving them to the bottom of the page and adding a background color for better separation. We expected fewer impressions and monitored the impact.
After launch, we noticed a significant drop in mobile go-clicks due to a sticky footer ad interfering with the CTA. We tested several ad variations and ultimately prioritized user experience by removing all third-party ads. The new pages eventually generated higher overall revenue than the ad loss, benefiting both the business and users.
Launched PDPs with ad slots moved to the bottom
Loyal User Preferences Matter as Much as Metrics
The legacy PDPs featured an editor’s quote, image, name, and timestamp, but editors preferred not to show their faces and the quotes often felt repetitive. Initially, we removed this section based on the hypothesis that users didn’t value the editor’s identity but we received ample feedback from loyal users who relied on the timestamps to pick up where they left off and valued the connection to specific editors. We compromised by adding back the editor’s name and timestamp while removing their image.
This update was a simple change but served as a valuable lesson: no assumption is too small to user test first.
Legacy editor section
Ongoing Iterations and Tests
Enable deal sharing
Introduce breadcrumbs
Expand related deal feeds to offer feeds that merchants can sponsor
A/B test key UI elements including CTA color, text formats, and heading copy
Reflection
My Lasting Impact: Building the Figma Design System
Creating the Figma design system was my most impactful contribution to Brad’s Deals and will be my lasting legacy at the company. Before this, there was no design system, which caused inconsistencies and slow workflows. By developing the system, I not only improved the visual look but more importantly, improved collaboration across development, design and product departments. I could design more quickly and developers could build more efficiently. Standardizing UI components was crucial as we prepared for the full site redesign. Although it wasn't part of the original project scope, the design system will have a lasting impact, making future projects more efficient and scalable.
Launch and Iterate, Iterate, Iterate
Design, development, and product teams had never collaborated on a project of this scale before, which led to many discussions about processes. We often got stuck on minor features, which caused decision fatigue and delays. Once we launched, we shifted our focus to A/B testing and real user data, which allowed us to pivot quickly. With the product live, we felt a sense of urgency and were able to focus on actual results instead of assumptions. In hindsight, I wish we had embraced this agile approach from the start, given the scale of the redesign and the number of decisions that had to be made.
