bd deal detail - revised.jpg

Brad's Deals Deal Detail Pages

Brad's Deals Deal Detail Pages

Say that three times fast

 

     

     

 

The Problem

Our deal detail pages had always been kind of an afterthought—you kind of had to stumble onto them by posting a comment on a deal, and as a result they hadn't gotten a lot of design love. When we started directing traffic to deal detail pages from our daily newsletter, all that changed and it was time for a redesign. The goal here was to improve readability of the deal copy itself, increase the visibility of the editor who posted it, and make the "Get It" button a lot more obvious. 

 
 
Brad's Deals deal detail pages circa early 2016. Look at that line length!

Brad's Deals deal detail pages circa early 2016. Look at that line length!

 
 

The Process

Once again working with the prototyping team, I produced two potential deal detail page designs for testing. Both included a "details" section (essentially a trimmed-down version of our regular deal copy), a "details" section (a bulleted list of coupon codes and other information absolutely essential to get the deal), and a short "tweet-length" quote (140 characters...were we ever so young?) from the editor who posted the deal; the main difference was that in one design the "details" section was hidden in an expandable region that was collapsed by default.

 
 
Artistic reenactment of my rough sketches. It was 2016.

Artistic reenactment of my rough sketches. It was 2016.

 
 

More importantly, we hammered out a new flow for deal discovery, leading the user from a lightweight, just-the-essentials module on the homepage or in a newsletter to a detailed dedicated deal page and finally to a merchant site.

 
 

Proposed homepage/newsletter-to-purchase flow

 
 

The Product

Things didn't quite turn out as planned. The new deal detail page went into production, but we never got the go-ahead to enact the rest of the proposed flow. As a result, there's a ton of information duplicated between the homepage deal modules and the deal detail pages, both of which feature the full deal copy in its entirety.

 
 
The revised deal detail page

The revised deal detail page

 
 

What Worked

I don't mean to be all doom and gloom! I think the revised deal detail pages are cleaner and more readable, and the editor quotes really did help to raise their profile among readers, many of whom had thought that the deals featured on the site were posted by community members rather than a team of experts. And honestly, if all we got out of this project was the the big green "CHECK IT OUT" button, it still would have been worth it.

What Haunts Me

Why did I let myself get talked into putting the store name in 11 point text above the big green buy-it button instead of using it in the call to action? Why did we never get around to making the "Free Shipping" and "Only at Brad's Deals" tags clickable? Why is the layout 50-50 instead of a 3:9 split? Why, Katie?!?