Blog

GiftRocket combines the thoughtfulness of a gift card with the flexibility of cash.

Six Key Lessons from a Design Legend (a before-and-after)

Posted 07 August 2011 by
Color comparison

When we first built GiftRocket 1.0, our team was absent designers. As the only one without a CS degree, I ended up spending a few weeks reading design books and mocking up the site before our March launch.

Eventually we recruited a professional designer named Mike Kus to help us out. We liked his emphasis on large text, illustration, and simplicity. He redesigned our site and we released the results last week.

I did a quick comparison of the before and after, and wanted to point out some things any developer can do to improve the feel of their site. Note that this isn’t so much about usability as it is about aesthetics and emotional design. Here are the tips:

1. Figure out your color palette.

We were extremely conservative when we started, So we made the site… blue and gray. I knew nothing about color theory and was reading the Pantone Guide at the time. The book called gray “classic, cool, sober, corporate” and our blue “calm, pleasing”. And as a result, the site felt exactly like that- sober and corporate.

Color differences

Mike, experienced and unhesitant, presented the cream, gold, and black palette we currently use. Cream, a color Pantone defines as “smooth, rich, and warm”, became the new base of the site. Gold (“warm, opulent, expensive, radiant”) and black (“powerful, elegant”) were used as highlights to give the product a premium feel. Mesh that with Mike’s colorful illustrations and we hit the jackpot.

2. When it comes to contrast: go big or go home!

We suffered from two contrast issues. Firstly– the site just didn’t have any. The footer was just some links at the bottom of the page, separated by a horizontal rule. Our mobile site also lacked contrast.

iPhone app comparison

Mike approached the app as a cousin to the website, using the same branding but inverting colors and layout. By using the black as the background, everything else became more vibrant.

3. Use large pictures.

Our Yelp business icons started out tiny at 60px by 60px. After Mike got through with them they were nearly 3x larger at 100px by 100px.

Images comparison

Moreover, in certain places he put a padded border around images, which made them appear even larger. The pie here really pops out. It looks delicious.

Image with border

The impact was that the pictures of businesses stood out far more. Pictures convert (see AirBnB, Sosh, Earbits, and MunchOnMe). If you have the opportunity, enlarge what you’ve got and let the visuals speak for themselves.

4. Pay attention to typography.

We originally used Helvetica Neue for everything. We had no basis for the decision other than MailChimp did it, and we liked MailChimp (their influence on our design can be seen in our massive headers).

Typography affects the feel of a site, just like color. If Pantone had written something about Helvetica, the description would probably have been the same as their description of the color blue. Authoritative. Clean. Corporate.

Mike introduced a much more interesting set of fonts. Big, black rounded fonts for the headers, and Museo Sans for the text. The rounded headers added a fun vibe to the site, and the Museo Sans added just a touch of elegance.

Header text comparison

Mike also applied text-shadows to nearly everything. As a result, the text felt more vibrant; if dark text received a light shadow, it looked embossed onto the page. If light text received a dark shadow, it protruded from the site.

Footer text comparison

This isn’t to say that you need to go willy-nilly with fonts on your site. Helvetica is a great typeface. But there are thousands of choices. Consider using something else, even if just for your headers.

5. Be bold with textures.

Distortion effects in Photoshop and Gimp go a long way. Mike made the cream background look like it was sandblasted with gold, creating a glittery feel that felt much more like a hallmark card. Moreover, anything that looked like it should be a scrip of paper– like the actual GiftRocket card– Mike made look like paper. Our gift form, formerly just a white background with some shadow, now felt like an actual certificate of some sort.

Texture comparison

While I think clean, metallic backgrounds and menus are still in style (e.g. Apple), I suspect these textured backgrounds are becoming more popular (see Square’s old site and Frank Chimero’s work).

6. Repeat branding pieces for consistency.

Mike created a few branding bits– the swirly braces and the gold star. They’re displayed below, without comparison since we really had no branding bits on our first go-around.

Branding pieces

Mike applied them everywhere on the site. They’re on forms. They’re in our app. They’re in our terms of service, which now has stars for bullets. Even the fake currency on the how it works has them. Take a look around the site and see how many you can count. To me, this observation was like noticing the FedEx arrow. I can never unsee it, ever.

It would be naive to assume that these six things alone are the reasons our site now feels better. But had we applied these tips to our own website earlier on, I think we would have had a more visually pleasing product.

Like what you read? Follow @giftrocket on Twitter.