Thanksgiving is, as some would put it, “a holiday dedicated entirely to eating.” (Spoken in a very dry voice.) However, we in the States will not settle for a mere one day of glorified overconsumption; no, we need two! So Thanksgiving (this Thursday, if you remember) is followed immediately by Black Friday, the single greatest consumer holiday for retail shopping.
I vividly remember my mum waking up early to go buy a microwave one year.
So here I am, reluctant to wake up, but equally as reluctant to forgo a chance to go shopping for great deals. The happy solution, in our day and age, is to shop online. With Retail Me Not.
Retail Me Not is a lovely site that collects user-submitted coupons for various websites that offer you free shipping and discounts. It’s handy for bargain-shopping online and offline; I always check Retail Me Not before going to a store or ordering something online. And yes, there are a lot of other coupon-clipping websites out there, but are there any that are better designed than Retail Me Not? I don’t think so.
Design? Usability? Both.
The first goal of any site like this has to be accessibility and ease of use for the user. After all, whenever you visit Retail Me Not, you’re there for one specific purpose: find a coupon code for, say, 10% off on that Gap cardigan you’re planning on getting. The site’s design is beautifully unobtrusive, but with notable style.
What does this design remind you of?
There are essentially two main stylistic themes in the Retail Me Not design: glamorous retro and scrapbooky. These aren’t necessarily the most scientific terms, but how else do we to describe first impressions?
There’s a very clear colour scheme that incorporates this retro mood without feeling too dated: deep purple, darkish reds, and pale creamy-pink tones. The scrapbooky feel can be seen in the details: the zigzaggy paper edges around the search box, and the dashed lines that make me want to grab a scissor.
A closer look
However, there are certain areas that first catch my eye upon viewing the homepage, and I’d like to take a closer look at them. There are three key design elements I’d like to drill further into: the lovely script logo, the styling for ‘TODAY’S TOP COUPONS’, and the adorable navigation buttons on the side (not visible in the screencap above):
That lovely logo
The logo reminds me of those thick, friendly scripts used in signage for a retro diner, but the text has a very modern, fresh aesthetic that keeps it from being dated. Gorgeous. Notice the tapered strokes on the crosses of the t’s—they get thicker towards the right!
On the homepage
The homepage is organized to be supremely helpful for visitors: there’s a little showcase of ‘Popular Sites’ that shows screenshots of websites whose coupons seem to be the most popular, and below that is a section where the day’s top coupons are listed. Notice the headers for the ‘Popular Sites’ and ‘Today’s Top Coupons’: bright colours, dashed borders, and (if your browser supports it) a subtle and lovely text-shadow that makes the text look embossed into the page.
And, of course, within the ‘Top Coupons’ section you can see further little stylistic details. Coupon codes are displayed in a box with a dashed border (familiar for anyone who cuts paper-and-ink coupons out of newspapers) and a handy little scissor icon next to them. The icon prompts you to click on the coupon code box, which will then automatically copy the coupon code to your clipboard.
On the buttons
The buttons on the bottom right of my image (and to the right side of the website) are lovely. Buttons tend to be more effective when an icon is paired with text—images are instantaneously processed by our brains, and usually help us to get an idea of what the button should lead to, but the extra text eliminates potential for confusion or misinterpretation. Icons also add a little graphical interest and flair to the main text of a button (here, it’s the ‘Black Friday coupons’ text in that lovely cursive typeface). The main text is paired with explanatory text—a less fancy sans-serif phrase (”Get the scoop on Black Friday deals”).
The extra explanatory text is a helpful detail for users, because it elaborates exactly what this ‘Black Friday coupons’ button will lead them to (a page that should tell them more about Black Friday deals—presumably a list of Black Friday-specific coupons). These cute little buttons on the Retail Me Not Site (check out those wee folded corners!) is, in my opinion, a near-perfect button. To review: icon, main text, explanatory text. The holy triumvirate indeed.
Design as eye-candy and functionality
Perhaps the thing I like most about Retail Me Not’s website isn’t that it’s pretty, or that it has lovely little details tucked into the corners. It’s a well-designed site that is intended, above all, to make it easy to browse and use. Stylistic details aren’t superfluous or purely there for looks; many of them, I’d argue, are visual cues to help a user understand how the site works.
Coupon codes (or shopping trips, as you can see above) are given a percentage rating based on how many people could use them, and how many couldn’t. The colour of the circle around the percentage gives some indication as to how well that coupon code performed—providing a quick visual indicator of what coupon codes to look at and which ones to ignore. Green codes are almost universally useful; orange codes are a little iffy (some people said they worked and others said they didn’t); red codes indicate what is likely an obsolete or fake coupon code. This is clearly more than just a designer flinging colours on a page; here, colour indicators help users.
And then there’s that little footer graphic. It invites people to stay in the loop regarding future coupons added to the site, and it also just happens to be beautiful. Little lightbulb-and-gold border? Very Hollywood-movie-mirror, isn’t it? And again, it’s a button with an icon (of a flaming newsletter—entirely appropriate), main text, and explanatory text.
I like my buttons bold.
To sum it all up:
So there are three things I hope you will have interpreted from this post. One is that you should always check for a coupon or discount before buying stuff online. (Alternatively, you can realize that I am a stingy person.) The second thing: make your buttons awesome! Icon + main text + explanatory text. Two is better than one (just an icon or just main text isn’t quite as good as both!). And all three…all three, as you have noticed, is a very exciting thing for me. I can go on and on and on about how nice and lovely and explanatory and logical and interesting such buttons are.
The last thing is, perhaps, the most important one, even if I don’t get as fangirly on it as the buttons. When designing a website, the ultimate goal is that it is easy and logical to use. Aesthetics come second; if they make the website easier to use (as in Retail Me Not’s case) then it is of course a good thing. If it doesn’t really help or hurt a user’s understanding of the site one way or another…that’s fine. We all need a little superfluous gorgeousness in our lives. But design should not and must not get in the way of the user.
This is Kyan Blue, signing off. Let’s see if I can find more examples of lovely buttons out there!
