Sites like Groupon and LivingSocial have gained some serious traction in recent times with some raising nearly a billion US dollars in a single investment round. The idea around these "daily deals" sites is sharing, with Groupon's name being a portmanteau of "group coupon". Most are also localized to specific cities and locals with one offer being available per day.
Today, we're going to examine how these sites work at the nuts-and-bolts web design level.... and how you can take these tricks and use them in your own projects. Read on all ye web design brethren!
Obviously, these sites are very financially-oriented with retailers wanting to profit from the service. Therefore, sites like Groupon (or it's contender, LivingSocial) use a handful of design principles to capture a potential customer's attention and influence them to hit the big buy button and splash the cash on some impulse buy.
How it Works
Groupon has been ridonkulously successful over the past year... but what makes it work? Let's start with a a 50,000 foot view of the conceptual elements that make up Groupon (and any effective site like it):
- Make it Interesting: Have a product people are interested in. You can do this through literal localization of products (the restaurant down the street from you), or figurative localization (rock climbing products for a rock climbing community).
- Make it a Deal: Everyone loves a deal. Cut the price down so low that it's hard to walk away from.
- Make it Social: Convince people that sharing the deal is part of what makes it possible. This engages the viewer to share the information.
- Make it a Game: Add a time clock, allow users to gain "points", level up, compete with others, or other challenges that feel game-like.
Groupon is a ingenious marketing tool that uses the power of social networking (both online and off) to drive customers to a business. Each day, a site like Groupon will feature a single deal in a specific town or city. This "deal" can be anything, but deals involving spas and food/drink frequent the site often.
Groupon uses something it calls "collective buying power" to sell it's products. Unless a minimum number of deals are sold through Groupon, no-one can buy it. Therefore, each buyer has the motivation to promote the deal in order for them to get it themselves resulting in free marketing for the business and Groupon through social networks and word of mouth.
Effectively, Groupon offers a small (or large) discount in return for a free marketing engine.
Recognizing the Aims of Groupon
Like with any design project, we have to determine what Groupon is out to do in order to understand how it achieves that. Groupon has a simple aim, to get you involved in the deal. On it's end, it benefits from a commission on the sale but also building a reputation with the business making them want to return.
Groupon, at least in the UK, is not a store and features few deals each day. There's a main deal specific to your city, but also national and other deals that anyone can get involved in.
It's a Game!
Groupon feels like a game. A constantly-ticking countdown timer and number of sales are each publicly shown on the page alongside the price. This is important because these are key ways to pressure a sale and the subsequent social marketing. Unlike visiting Amazon or Best Buy's website where they have no time limit, Groupon makes you pressured into completing a "now or never" transaction.
What's so fun about pressure? The idea behind all of this is an effect that bargain shoppers and coupon cutters have known for decades: Discovering a deal and being forced to act on it actually triggers pleasurable sensations in the brain. It actually feels fun when you successfully find a deal and buy it within the time limit... or in other words, you're happy that you gave them your money!
Additionally, the number of sales is shown alongside the product allowing user's to constantly monitor the deal's success. If the number stalls, it, again, pressures a user into influencing other users to buy.
Living Social also has a second motivator to get people to share the deals with their friends. If you share the deal and three friends buy it, you get the deal for free! Therefore, offering better visual prominence to these key stats can influence users to buy with haste.
Amazon and Groupon both have a financial interest in their website's success. However, whilst Amazon generally divides it's attention between it's catalog of products, Groupon focuses on just one or two.
Groupon's emphasis on a single product that's advertisement takes up most of the page results in more traffic being drived to a single product. Then, impulse buying kicks in, especially with the ticking clock limiting the deal's availability.
Visual Direction is the concept relating to the eye's natural perception of a web page. There's several, probably unintended, principles in play across Groupon's site. For example, the various photographs used to advertise each deal, sometimes involve people. These people generally look to the left leading the eye towards the large buy button.
In the case of Groupon, streams of "light" (for lack of a better term) direct the user's attention to the main deal. Again, it's all an attempt to focus the user's attention on the primary deal and close them into an environment where they're more likely to buy.
Hierarchy in Play
We've all heard of visual hierarchy. It's one of the core web design principles that form a user's impression of a web page and can influence their travels in it. Of course Groupon, and sites like them, play on nature but in an alternative way.
On Groupon's side, the biggest and brightest elements on the page are the title and the buy button. Unlike buttons on normal online retailers, this one is big and when it's combined with the rush of the countdown clock, it seems like the way to beat the hypothetical game in play.
Little attention is focused on the other aspects of Groupon's design. Effectively, the site is one big advertisement that's been further marketed by those wanting to "win" the game.
What Any Web Designer Can Learn From Sites Like Groupon
This all might sound great for a mega-site that drives millions of hits a day... but what can other web designers take away from these high-concept ideas that Groupon is employing to empty our wallets and beat us back into poverty?
Lesson 01: Any Site Can Be Improved With Game Mechanics
You're welcome to argue with this one, but listen closely. I'm not saying that we should turn Wikipedia into another Giant Game of Pacman site... but by employing mechanics such as "contributor points", "earned badges", and even "easter eggs" helps to activate visitors of a website, rather than just dismissing them as passers-by.
Consider the BMW USA website for example (or any modern car site for that matter): Most of these sites allow users to enter a custom "build your own car" page. Is this functional? Sure, it helps sell cars... but more importantly, it allows potential customers to play around on your site. It's fun to try building the car of your dreams and see how expensive (or cheap) you can configure it to be.
Take that same idea and apply it to shoes:
You get the idea - by allowing users to "play" with your site, you engage them... which brings us to lesson 2:
Lesson 02: Engage Users
In grade school, everyone hated the boring cardboard tri-fold presentations that kids would give on some boring old subject like consumption or the human arterial system... why? Because it's not engaging. Engaging users isn't hard... and it can be done at the design level. Here are just a few ideas:
- Make buttons look pressable
- Use UI elements that feel usable, even touchable
- Allow users to change their experience of the site (font size changes, personalized themes, etc.)
- Ask users to comment, respond, or share something they find (this doesn't need to be corny or desperate)
- Incorporate interactive elements like jQuery sliders, configurable layouts, and accordions
Lesson 03: Speak Like a Human
One thing that I've always loved about Groupon is the way that they write copy (aka, the boring paragraphs of text that most designers never expect people to ever read). Take their "Feelings Board" for instance:
You obviously don't need to create something as silly and inane as that, but when writing copy (or reviewing it with your client), remember that real people actually read this stuff. Keep the tone applicable to the target audience of your site though: for instance, you probably wouldn't use slang or puns when working on a site for Ferrari. Surprise a reader with an especially acute understanding of the culture, technology, or any other topic that they might be interested in and you'll find that they are more likely to return.
The market for location-based deals is a relatively untapped one so Groupon's success has influenced a new breed of websites that share Groupon's functionality. Some are location-based also, but others are specific to certain markets like fashion.
Whiskey Militia focuses on fashion and it's daily deal reflect this market. They use the statistical approach to rush the sale but also show other analytic data like the number of people on page to offer more motivation for potential customers to cross the line and splash the cash.
Wine.Woot doesn't offer much emphasis on statistics, but they do use the same title/image and button prominence to induce sales.
Mighty Deals is a Groupon-style site that's aimed at creative professionals. The aim of the site is, once again, focused on a single deal with emphasis on the countdown.
Groupon has an interesting web design that forms a big advertisement. This ad is possibly one of the most powerful in the world since it succeeds on the free marketing of it's own customers. Whether some of it's design elements were direct or not, they play powerful roles in rushing a sale through. It's true that these elements, especially the game-like statistics, have influenced a new breed of businesses.
This article was originally conceived by Brandon Jones, then written and researched extensively by Connor Turnbull, and finally re-written and edited with Brandon.
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post