Promocodes.com

Promocodes.com

A veteran in the coupon business

As the lead designer at Promocodes.com, I've spent the last four years creating a strong brand identity and developing a design language that's both visually compelling and flexible to use across departments. Projects spanned all sorts of mediums, but maintaining the website has been the most focused and lasting effort.

Contribution
  • Sketching, wireframes
  • Protoyping, mockups
  • Marketing materials
  • UI/UX design

The old design displayed these "hero coupons" in an image carousel – albeit visually pleasing it wasn't very efficient showing one slide at a time. This new (circa summer 2017) design shows all hero coupons at once, with imagery that lets each offer stand its own ground.

I introduced a grid format to navigate coupons, something not very common in the coupon industry. Designing them tastefully adds many benefits beyond a modern look and feel; one being there's now more coupon equality. When coupons are in a vertical stack it produces an artificial ranking, giving users less incentive to click anything beyond the first few. Our heatmap data has supported this, and inclined us to take a more unconventional means of displaying offers. The grid is highly flexible and adapts to screen sizes very well.

Blog articles are given plently of room to breathe, with large imagery making the stories visually attractive.

Not only does this homepage footer section boost our SEO efforts, it enables visitors to discover popular deals from Promocodes' best merchants and top categories.

You can see more of the grid structure at play here. Again, great for flexibility and perfect for promocodes.com content.

Merchant pages support a modified layout due to partnership requsites. Many merchants want control of how their brand is represented via partners, so the traditional coupon stack was maintained. There was also a need to display helpful information near the top so a sidebar was added.

I wanted the blog's article page design to focus greatly on the content alone – large imagery, single-column layout, and few distractions. I went with a font size of 40px for the headline, and 18px for the body copy – sizes that are easy to read on any device.