A Redesign Focused On Modernization and an Enhanced Shopping Experience
Cross-Platform Redesign • MVP • Design System Creation
Company
Brad’s Deals
My Role
Lead Product Designer
User research, ideation, user flows, wireframing, prototyping, usability testing, design system implementation, design handoff, design review
The Team
Product Designer (1)
Project Manager (1)
Engineers (4)
Background
Brad’s Deals is dedicated to finding and sharing discounts and deals to help consumers save money. The website doesn’t sell items directly; it promotes sales and products from merchant partners. Behind every deal posted is a team of editors manually sourcing and publishing the content. The editor’s workflow has remained the same since 2001:
Step 1
An editor finds a deal and inputs the product’s information into a content management system (CMS)
Step 2
An affiliate link is generated and the deal is published to the website for users to browse
Step 3
Brad’s Deals earns commission when an affiliate link is clicked or an item is purchased
After 20 years with an outdated content management system, the company upgraded to a new CMS to improve efficiency, enhance user experience, and support modern content needs to stay competitive in the e-commerce space. The CMS upgrade unlocked many opportunities, but a full website redesign was needed to support the new features. Phase one of the redesign focused on updating the product detail pages (PDPs), as these pages received the most traffic.
Challenge
The legacy PDPs were not delivering the level of functionality our modernized CMS platform allowed for. The outdated design and lack of product information were causing shoppers to quickly abandon the pages and visit the merchant’s site for more details. This not only impacted the user experience but also limited our ability to drive sales through partner opportunities. We needed to rethink the PDP structure to create a seamless experience that kept users on-site for longer, provided richer product details, and unlocked new sales opportunities for our partners.
Desktop Legacy PDP
Mobile Legacy PDP
Framing the Problem
How might we modernize product detail pages to deliver greater value to deal shoppers?
Final Solution: Before and After
What We Aimed to Achieve with the PDP Redesign
Enhance User Experience: Ensure that our Product Detail Pages provide comprehensive, easy-to-navigate product information that encourages users to stay on the site, reducing bounce rates and unnecessary exits to merchant websites.
Increase Partner Sales Opportunities: Reimagine the PDPs to better support affiliate and partner sales, creating intuitive pathways for users to purchase while improving visibility of partner offerings, ultimately driving incremental revenue.
Align with Modern CMS Features: Ensure the redesign aligns with the new CMS platform's capabilities, creating a seamless integration between content management and user interface design to streamline future updates and maintain scalability.
Constraints
Enhance User Experience: Ensure that our Product Detail Pages provide comprehensive, easy-to-navigate product information that encourages users to stay on the site, reducing bounce rates and unnecessary exits to merchant websites.
Increase Partner Sales Opportunities: Reimagine the PDPs to better support affiliate and partner sales, creating intuitive pathways for users to purchase while improving visibility of partner offerings, ultimately driving incremental revenue.
Align with Modern CMS Features: Ensure the redesign aligns with the new CMS platform's capabilities, creating a seamless integration between content management and user interface design to streamline future updates and maintain scalability.
Final Solution: Before and After
By surfacing more product information with less scrolling, the new product detail pages make it easier for shoppers to discover deals and make informed decisions. The updated UI and MVP approach lay a foundation for future iterations, customizations, and merchant opportunities.
Legacy Desktop PDP
New Desktop PDP
Legacy Mobile PDP
New Mobile PDP
User and Business Impacts
Increased Purchase Confidence
Adding a larger gallery with 10x more product images gives customers a fuller view of the product’s features, quality, and details. This transparency helps users make informed decisions and increases their confidence in the purchase. It also allows shoppers to see the product in different contexts or angles, which creates a more engaging and interactive browsing experience.
Improved Personalization and Engagement
Expanding the recommended deals section from 6 products to 50 products provides shoppers with a broader selection, increasing the chance they’ll find relevant deals. By adding personalization based on browsing history, the recommendations are tailored to the user, making it easier for shoppers to discover deals that match their preferences.
Legacy Related Deals Section
New Related Deals Section
Enhanced Convenience
Adding the ability to save an item lets shoppers easily revisit products they’re interested in, streamlining their decision-making process. This feature keeps items top-of-mind and allows users to plan purchases more effectively.
Improved User Satisfaction and Trust
Allowing users to report issues directly to the customer success team drastically reduces user friction. Previously, users with issues would leave comments on PDPs but often received no response. Now, reported issues are immediately pinged to the customer satisfaction team, ensuring they are addressed quickly and eliminating the need for editors to manually check comments.
More Efficient Shopping
Separating the price on a PDP lets users quickly scan and compare products. By changing this pattern sitewide, users can easily sort and filter by price, helping them find options within their budget. Adding MSRP, discount percentage, and shipping details help shoppers quickly identify the best deals.
Legacy PDP Headline and Price
New PDP Headline and Price
Expanded Merchant Opportunities
The new CMS allows for additional feeds to be placed below the related deals feed, which broadens merchant sales package options. An entire feed or specific deal slots can be purchased and all deal placements can be customized.
Elevated Browsing Experience
Visual consistency was brought to these pages by implementing a design system with reusable components, introducing a grid system, and optimizing for mobile. A simpler and more efficient experience was created by removing ads and reducing scrolling by over 50%. These updates make the PDPs easier to navigate and allow us to scale and iterate quickly.
The Process
Determining Lasting Business Impacts
There were several cross-functional objectives that product, development, and design needed to align on before gathering user feedback on desired PDP improvements. Since this project was the first phase of a full site redesign, the decisions made in this initial project would impact all future pages. It was imperative to design for the future vision of the site rather than trying to address issues within the legacy codebase. These were the decided priorities:
Mobile-First Design
77% of users visit the site on mobile devices. The legacy website was designed for desktop and didn't account for mobile users. The app was developed years later, causing visual differences between it and the website.
Implement Global Styling
Without a prior design system, the code and UI were a mess. Many page elements did not meet accessibility standards. A complete overhaul was necessary.
Create New CMS Fields
The old CMS would no longer be limiting the content displayed on site. Any desired custom fields could be created.
Expand Merchant Offerings
Despite partner requests, we could not offer similar advertising packages as our competitors because updating the old code was too difficult.
Incorporating User Input
In addition to meeting business objectives, it was essential to maintain the core elements that customers valued while introducing new features that enhanced the overall experience. We analyzed user feedback collected over the years and gathered new feedback from a subset of our most engaged customers. We sent a survey to understand desired changes on PDPs and reassured customers that their needs and preferences remained a priority. The main pain points discovered were:
“The pages look outdated”
The majority of complaints were visual: excessive scrolling, strange spacing and alignment of information, and large empty sections.
“Not enough product information
to decide to purchase”
Users felt they had to immediately visit the merchant’s site because the PDPs lacked expected e-commerce features (multiple images, no option to save or share deals, shipping and coupon details that were easy to miss).
“Ads interfere with trust”
Users often mistook third-party ads for deals. They expressed confusion when ads were in the middle of the page on mobile and thought they made the site seem “spammy”.
“Issues are not addressed before deals expire”
Users shared that they utilize the comment section to report problems with deals (coupon codes not working, items being out of stock, or price changes) but often do not receive a response from an editor before the deal expires.
Impact x Effort Matrix
A product manager, the head of engineering, and myself assessed the development effort vs the user value of the collective feedback received from stakeholders and users. To create a roadmap, potential features were then bucketed into three categories: MVP, fast followers, and future iterations.
Design Roadblocks & Solutions
There were a few immediate roadblocks to overcome before focusing on on adding new features to PDPs.
Roadblock #1: No Existing Design Library
Brad's Deals was new to Figma and didn't have a design system, which was essential for updating the website.
Solution: Built a Design System to Boost Efficiency and Collaboration
As the sole company designer, I learned to create a design system that incorporated spacing levels, a color palette, font families, form controls, buttons, icons, and more. None of these styles had been established before so there were endless decisions to be made. I worked closely with developers to align the Figma library with their Storybook library. This was the biggest unlock to achieving a modern website. Some effects:
Streamlined collaboration between design and development
Simplified iterations and feature additions by replacing outdated, rigid code with flexible, reusable components
Created visual consistency across the site and app for the first time
Roadblock #2: Delayed Rollout Timeline
While I developed the design system, editors were trained on the new CMS platform. The transition was more difficult than anticipated because they had used the same system for over 20 years. Editors requested that we do not add any new features to PDPs until they had a better grasp of how to use the software.
Solution: Iterative Page Updates
The extra time allowed for a more iterative approach than originally planned. Instead of immediately adding new CMS features to PDPs, developers and I focused on updating the legacy CMS features with new UI including:
New design system styles applied to legacy page mocks
Responsive grid layout implemented by collaborating with developers
After proper spacing levels, fonts, and a grid system were incorporated, these pages were a drastic improvement from the legacy pages. Developers began building the PDPs with the updated styles.
An early iteration after implementing guides, spacing levels, and new font styles
Roadblock #3: Impacted Editorial Workflow
The editorial workflow had never been changed before and we had to ensure that editors’ revenue goals would not suffer while they learned the new platform.
The new CMS platform proved to be challenging for editors to learn but it was essential for the growth of the business and the future of the website.
Although the new features would temporarily slow the editorial workflow, it would ultimately benefit our users. Editors felt confident that with time and practice, they would adjust to the new platform.
I relied on user feedback and best practice research to get stakeholder buy-in to incorporate new features. For example, pulling the price out of the headline required an extra step from the editors but it would allow users to sort and filter by price.
As editors got more comfortable in the new CMS, the product team and business stakeholders determined new fields that would be most impactful to shoppers and legacy fields that could be sunset. We relied on the user feedback we had received to guide these decisions.
Design Implementations
Product Features Supported by Research
The old CMS didn't have basic features that are now standard on e-commerce product detail pages. To stay competitive in the affiliate marketing space, we concentrated on these impactful improvements supported by best practice research:
Multiple Deal Images
The old platform allowed 1 image, but the new CMS supports up to 10. This lets editors show detailed product images, which can be more impactful to shoppers than text descriptions.
Previously, editors had to combine product variants into one image using Photoshop. To reduce manual work for editors, we added an AI integration that automatically imports the first 10 deal images from a link.
Removing Price From Headline
The old CMS had a single field for product headlines, forcing editors to include details like price and shipping. The new CMS separates these fields, allowing users to sort and filter by price. Research shows that displaying the original price and discount percentage makes shoppers feel they are getting a good deal, so those fields were also added.
These new features give users more product information, improve site functionality, display more relevant content, and meet merchant requests to expand their presence on PDPs.
Feeds of Related Deals
In the legacy CMS, six “related” deals from the same product category were shown but editors could not manipulate those deals. In the new CMS, a more accurate algorithm surfaces up to 24 related deals, even if they are in a different product category to improve relevancy. For the MVP launch, we added one feed of related deals but we will be expanding this to accommodate our merchants who want the ability to add multiple deal feeds.
Multiple Products from One Sale
Editors often share multiple deals from a merchant’s sale. This was tricky in the old platform because a new PDP had to be created for every product in the sale. In the new CMS, editors can link multiple products to one sale. Users appreciate this because there are often too many products in sales, and this selection feels curated.
Reduced User Friction
The comment section on legacy PDPs was meant to build community among shoppers but was mainly used to report problems with deals, like broken coupons, out-of-stock items, or price changes. An account was required to comment. Editors didn't receive alerts for user comments and had to check PDPs daily. Often, a deal would expire before an editor noticed a comment.
Legacy comment section
New report an issue flow
I designed a modal with the most common issues reported and a space for users to add optional details. The platform team implemented a Slack integration so issues are immediately pinged to the customer team and are addressed quickly. This eliminated the need for editors to manually check PDPs.
Consistency in Native Apps
As the front-end team implemented changes on web, I worked with the native apps team to ensure the PDPs looked consistent across all platforms. The new design system made this possible and served as a source of truth. There were many app-specific edge cases to consider but the native team had a much quicker turnaround time so we were able to implement solutions efficiently.
MVP Launch
User Testing
After we updated legacy content with the new design system styles, added additional features, and built a report an issue flow, basic prototypes were ready for user feedback. A small online focus group of regular Brad’s Deals shoppers reviewed the prototypes and shared their feedback. Since the main goal was to refresh the old PDPs, we chose users familiar with navigating the previous platform.
We received positive feedback overall. Users could easily navigate around the PDPs and appreciation for multiple images and more related deals was noted. Users liked the added savings percentage to quickly see the discount. We received feedback to move the coupon code closer to the CTA (which we did implement in a later iteration).
Due to time constraints, I had only created one prototype for both developers to reference and users to interact with. To help the developers, I had included error states but this confused users during the testing. I learned the importance of having specific user testing prototypes and using variants to show error states to developers.
Slow Rollout Plan
After some UI tweaks, stakeholder approval, and several rounds of design, product and QA testing, we launched our MVP to 20% of email users. After first launch, we continued to improve the related deals algorithm. We analyzed engagement data and received user feedback while gradually increasing the audience size. It was over a month before we launched to 50% of email users.
Releasing these pages to segmented audiences allowed us to address critical bugs that we did not encounter until the pages were live. This mitigated the risk of losing users due to poor user experience. Had we launched the MVP to a larger audience early on, our small engineering team would not have been able to fix all of the bugs for several weeks.
Leveraging the App for Quicker Testing
As we gradually rolled out the MVP to 100% of users, I collaborated with the native apps team to test and iterate quickly. The native team had a much quicker build time and a stronger A/B testing tool which allowed us to run app tests and use the results to support web decisions with data.
The main test we conducted was comparing a sticky CTA to a non-sticky one, and the non-sticky option was preferred. Other tests were mostly small visual things like price above or below the headline, where the coupon code should be, and “You May Also Like” vs “Related Deals” copy.
Sticky CTA
Non-sticky CTA
Post-Launch Iterations
Prioritizing User Experience Over Ad Revenue
To reduce revenue risk, we originally launched with the legacy third-party ad slots on these pages. To address previous user feedback, I moved the ads to the bottom of the page and added a background color to clearly separate them from our products. We anticipated reduced ad revenue due to fewer impressions and wanted to determine the extent of the decrease.
Launched PDPs with ad slots moved
When we first launched, the data showed that mobile go-clicks were much lower than desktop, which was unusual since they were typically similar. We quickly learned that mobile users were having trouble clicking on the CTA due to a sticky footer ad frequently interfering on certain device sizes (this ad was not on desktop).
We tested a few mobile variations with and without the ad and ultimately decided to prioritize the user’s experience over ad revenue. We removed all third party ads from these pages. Over time, the new design drove higher revenue than the loss of ad revenue. It was a win for the business and for the user experience.
Allowing Users to Save
On the legacy site, users could only products on certain pages. We knew users wanted to be able to save products from any page and on any device. Although it was easy to add a save icon to PDPs, I had not originally understood the complications of launching a “Saved Page” from the new CMS. I worked with the platform team and the front-end team to build out the user’s saving path. This was a lesson learned that simple UI changes may require significant back-end work and cross-collaboration for a smooth user experience.
Legacy saved items page
New saved items page
After launch, we allowed users a transitional period to access both the old and new saved items pages and explained how to re-save old deals in the new version. Although not an ideal user experience, deals are short-lived and disappear from the saved screen once expired so the majority of users had less than five active saved deals. Eventually we were able to shut down the legacy saved page. We plan to continue iterating on the new Saved page.
Increasing Engagement on Expired Pages
Deals often expire quickly, causing many users to land on expired PDPs through email sends. Although the links on expired pages can be clicked, the expired legacy PDPs were completely greyed out, making the links appear inactive. There was not a section to promote active deals which dead-ended users.
An “expired” banner was added to the new PDPs and the CTA remained active and encouraged users to check the price and availability. Flags, the discount percentage, and additional images were removed. A feed of active related deals was added for users to browse. There was an 87% increase in go-clicks on expired PDPs and heat maps indicated users spent additional time exploring the related deals section.
Legacy expired PDP
New expired PDP
Emphasizing Brad’s Deals’ Core Value
The main thing that sets Brad’s Deals apart from competitors is that there are real humans behind every deal. The legacy PDPs included an editor quote, image, name and timestamp. However, editors preferred not to show their faces on the site and the required quote was repetitive. The product team hypothesized that users did not care which editor posted the deal so we removed this entire section upon first launch.
Legacy editor quote
I received feedback from an overwhelming amount of users that they check the site daily and use the timestamps as a way to pick up where they left off. They enjoy knowing which editor posted the deal because users have an affinity for particular editors.
We ultimately compromised with editors and added back the name and timestamp but not their image. This was a simple feature to update but a great learning experience that no assumption is too small to be user tested first. It reminded us that important features for loyal users are just as valuable as those that boost business metrics.
Ongoing Iterations and Tests
We are continuing to make improvements to these pages including:
The ability to share a deal
Adding more related deal feeds
Adding breadcrumbs
A/B testing various UI elements: CTA color, text format, heading titles
Reflection
Impacts to the Business Since Launch
A Shift in Metrics
Brad’s Deals had long used go-clicks as the key measure of success. In recent years, commission rates for purchases increased drastically compared to those for go-clicks. We hypothesized that the majority of legacy PDP go-clicks came from users needing more product information on the merchant’s site. Therefore, by adding more details to our product pages, we expected go-clicks to drop. This prediction proved correct, leading some stakeholders to view this project as a failure at first. However, over time, we saw a significant increase in purchase revenue, showing that fewer but more qualified buyers were visiting merchants. Both the company and our partners benefit from purchasers more than clickers. It taught us that a decline in one metric can be positive overall and to re-evaluate metrics over time.
A Solid Foundation for the Remaining Site Redesign
As the first pages created in the site redesign, these PDPs were the product of several years of behind-the-scenes upgrades from multiple teams: switching from Ruby on Rails to Nuxt, upgrading to a more flexible CMS, implementing design and accessibility standards, updating native apps, improving the editorial workflow, and more. In addition to offering greater benefits to shoppers, this project improved employee work processes. I design faster, developers build more easily, and editors post more content to users. All of the implemented changes laid the groundwork for the full site redesign and allowed teams to approach an overwhelming redesign with confidence and efficiency.
Personal Learnings
As the sole designer on this project, every element of creating the new PDPs was a learning experience. Some key takeaways were:
Invest Time Upfront on Tasks that Create Efficiencies
Creating a design system was not in scope for this project. However, I knew that it would be the biggest unlock to not only this project, but all future projects. It was worth the additional time I spent independently learning Figma to save time later on. This ended up being my most impactful contribution to the project and the product team. It brought consistency, alignment, and collaboration to the company like never before.
Advocate for the Users
A big challenge of this project was balancing 20 years of business feedback with user input. The new CMS changed many things at once (both internally and externally), which raised concerns from stakeholders about the potential impact on revenue. However, the reason for updating the CMS was to better serve our users, and I continually reminded stakeholders that users were central to this redesign. I brought research and user feedback to support revenue-related decisions. I emphasized that improving the user experience often leads to higher revenue in the long run, even if it may disrupt revenue short-term.
Launch and Iterate, Iterate, Iterate
Design, development, and product had never collaborated on a project this large before, leading to many discussions about processes. We often got stuck on minor design issues, causing decision fatigue and delaying our timeline. After we launched, we were able to conduct A/B tests and analyze user data, which helped us pivot more quickly. With the product live, we felt a sense of urgency and measured actual results instead of hypothesizing. For a redesign of this scale where endless decisions needed to be made, I wish we had adopted this approach from the start.