Groupon’s Design System

Groupon’s strategy had relied fully on relevance and short term bookings. It was completely void of investing in the user’s life time journey. I was tasked with develop a wholistic cyclical user journey that considered every step in the users exposure to Groupon. As a result many permutations of deal cards had been explored and iterated on. I optimized cards to minimize banner blindness, reduce cognitive load, and encourage browse and discover behavior.

Upgrades

The objective is to create a deal card that drives engagement. We do this by improving, aesthetic usability, increasing sizes in accordance with Fitts’s Law, and adding badges to nudge the user to click.

Also... We reduce the number of deal cards on screen, per category, in accordance with Hick’s Law. As opposed to endless scrolling we want to drive users closer to a deal which they will book. Providing too many options increases cognitive load and makes decision making harder on the user. Reducing the number of deals and adding buttons to view larger collections encourages more engagement.

Permutations

A Zeppelin was kept updated with a matrix of all deal cards. This was made available to other departments to ensure owners of different products were kept informed of cross platform changes. This is also where documentation was domiciled for our engineering team (Sparta). Versions consisted of different cards for each vertical (Goods, Getaways, Occasions, Things to Do, and Local). Permutations were also created for the varying combinations of information that could exist on a card. Sales vs full price, badges vs no badges, percent discount vs red strike through pricing and so on.

Card Anatomy

Designed to scale with various different content types and amounts without breaking.

Badges, Icons, and Content

We implemented the deal cards (and all of our other designs) using an atomic design structure. Defining content variants allows for a more efficient design and development cycle. Design and implement something one time. If a change needs to be made it will scale to all other areas. We communicate, not just the design but, the implementation strategy with SPARTA in order to cut down on lead time and reduce inefficiency later down the line.

View More projects