Brad’s Deals product detail pages were long overdue for a redesign. Through my thorough research for the new tile design (which would be implemented on these product detail pages), I learned that our current PDPs are lacking many critical features that get shoppers to convert from these pages. Our current PDPs also needed a major UI facelift.

Current outdated PDPs:

The current PDPs were not designed with a mobile-first approach. There are unnecessarily large areas of white space causing a lot of scrolling on mobile. They are lacking critical parts of a good PDP like the ability to view multiple images or give customer feedback if something is not working. Due to how they are modeled in an outdated CMS platform, there is a lot of repetitive information.

Since I completed the new tile design before starting these pages, I had the research of what items should be displayed on product detail pages. However, there were countless iterations and business decisions to be made about many factors of these updated pages. Since we switched to a updated CMS platform, we had a lot of new capabilities that we had to design for and had to decide what we wanted to sunset from the legacy pages.

I completely revamped all aspects of the legacy pages. Using the new grid system, I reduced unnecessary white space, pushed more important content above the fold, and reduced scrolling tremendously. I also implemented new consistent styling for fonts across platforms, which we previously did not have and will make it much easier to design new pages in the future.

New PDPs:

Some specific highlights:

I increased the image size and added scrollable thumbnail slideshows so users can see up to 10 product images which is a huge gain for users’ shopping experiences. I overlaid themed visual flags like “New” and “Exclusive” on top of the images to be consistent with the new deal tiles and decrease white space. I also designed a save experience with a new heart icon that will be used across the site.

I implemented the same UI as the new tile designs to create consistency. Since users will be clicking those deal tiles to access these PDPs, there will no longer be a disconnect in information displayed or visual treatments.

I implemented the new deal tiles in the “You May Also Like” section which provides a lot more detail than the previous tiles and clearly shows price. By aligning them to the new grid, the amount of scrolling is decreased and products can be easily compared across a singular line instead of two.

On mobile, I updated this section to a horizontal scroll bar which allows for 50 deals instead of the previous 6.

I designed a “Report an Issue” flow so users can give helpful feedback if something on the pages is not working. I gave them the option to type in additional details for any issue they select and the reported issues automatically get sent to our customer success team to address immediately.

I had to keep display ads but I moved their location to be below all of the main content so users don’t get confused if they are Brad’s Deals products or not (a common issue we found on the current PDPs). On desktop, I moved the ads from the right rail to the bottom of the page which dramatically reduces the distraction they cause since they are usually animated ads.

You can click through all of the prototypes to see these implementations and more:

Mobile PDP

Desktop PDP

Tablet PDP

Previous

FavorEats App
Next

Brad's Deals Emails