Lessons from a Design Legend (a before-and-after) | Hacker News Reader

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

giftrocket.com

207 pointskapilkale47 comments

The difference really is night and day. Amazing!

I have one major issue, though. Their original "Redeem" button was ugly and garish, but it looked like a button. It screams out "click me. CLICK MEEEEEE".

The new "Redeem" button is gorgeous, but it's actually a step backwards in terms of usability. First of all, it doesn't look like a button. Am I supposed to click? Where? Are the little circles also buttons? Speaking of the little circles, they really steal the show. They're so colorful and attractive, that you don't even notice the central circle - and, critically, you don't read the text that says "Redeem". I had to look at the pre-overhaul image to get a reminder of what I was supposed to be doing at this screen.

Thanks for the feedback. This isn't the first time we've heard this.

For buttons you could add a bevel--gives it more affordance

http://en.wikipedia.org/wiki/Affordance

This was my impression as well. Not quite the strong call to action you want.

While the new design is undoubtedly prettier I'd wait to call it a success and see if it actually works better, because I kinda feel like the old design was better in the functionality department. Here's a couple reasons why:

1. It's very de auteur. If you watch it in contrast with every other Mike Kus design as beautiful and awesome they are you'll see that this design is not that original and looks just every other Mike Kus design. 2. The mobile app looks like a giant bueautiful useless splash screen. It has a lot more graphics and details and yet it conveys a lot less information that the 'before' design. For starters, that the damn button is clickable and it will redeem something from Mario's Pizzeria.

Or am I just becoming an old cranky designer?

I think it's fair to withhold judgment until we have a better idea of impact on conversion, etc.

1. For us, that's exactly what we wanted. It's Mike Kus' style applied to our product.

2. The mobile app actually looks quite different. If you visit www.giftrocket.com on your phone, it's a functional version of our website. The phone app comparisons were of one specific screen within the redemption flow.

The mobile site is really functional and to the point, although on my Android phone in Firefox, the header "gift cards to anywhere" runs together.

I agree. This new design is undoubtedly stylish, but it also submerges the entire app in a kind of style-over-substance magazine look, and worse, a look that is even now getting a bit tired.

As a user I quickly get suspicious when there is a lot of style. I quickly pick up the difference between the veneer and the inner wood, so to speak, and as a user, the first thing I look for, perhaps subconsciously, is the way through the veneer. I need to use buttons and fields and read the important stuff, all the way trying to ignore the style -- the baroque embellishments, the clever icons, the careful colour balance -- which is functionally superfluous.

The main problem with style is that it obscures and dimishes the value of information. Good UI design is functional and elegant and avoids stylistic embellishments. The old design was simple and to the point. The new design is very busy and unsimple. It reminds me of the kind of excessively flowery, explosive embellishments typical of indie festival poster designs that was in vogue the last 2-3 years, but has been going out of fashion, like this one: http://bit.ly/nzJaR3. Another problem with style is that it's easy to seem derivative and as though you are trying too hard. Nobody could fault the simple, apparently genuinely sincere ambitions of your old design. Now your design is ambitious in a kind of pompus way, and easier to shoot down.

Yet another problem with style is that it can seem to imply a level of information quality. It's difficult to articulate, but look at the third section of your article, the way restaurants are presented. Instead of the old, close-to-the-database look, we now have something out of a coffee table book. The level of polish seems to imply that the information itself has been carefully harvested, edited, quality-checked and polished. But in your case (I'm presuming), some entries are probably more rougher than others, and the surface polish is not representative of the actual content.

Just my few humble cents.

Indeed much of it is "functionally superfluous", but it does serve a purpose. For example Lowe's presents itself in a different way than Home Depot with friendlier colors, different typography, and messaging that on the surface may seem inconsequential. They sell the same things as Home Depot but it's those nuances that appeal more to women.

Simple and to the point designs often lack personality. And if you're trying to build a brand your site design needs to have a point of view.

Absolutely. But personality is an aggregate of style, design, functionality and so on. Style, design and functionality are additive to a great degree — you can add more functionality and splatter on as much stylistic flourishes as there is visual space available.

For example, the minimalistic Japanese "no-brand" (it's very much a brand) MUJI has very little actual style, but lots of design. It's simplistic and function-oriented. And yet the personality is often immediately recognizable. IKEA is often minimalistic, but has a significant brand presence without applying a whole of style.

Style is like makeup. You're not making a cake, so you have to be careful about how much you apply. Too much makeup and you come across as desperate or insincere. Too little and your wrinkles will be showing. I don't know how far one can stretch this metaphor -- you get the point. :-)

I like the redesign (it's hard not to), but I had similar misgivings. The biggest issue for me is the mystery meat navigation. The icon that looks like an iPod would intuitively go to music, but mousing over you see that it's for electronics. So the record must go to music, right? No, it's arts and entertainment. So now the visitor needs to hunt around via mouseover to find what they're after. Looking at the screenshot for their mobile app makes me wonder how they handle this effectively without mouseover. E.g., click on the pizza icon and see sushi gift cards? What, where's the pizza?

Yes, that's the problem with using concrete iconography to represent metaphors. They are easily interpreted as being concrete.

(Iconography is hard. These days kids are probably asking about those weird icons in toolbars that they don't recognize, and moms and dads need to explain how back in the day we used quaint things like floppy disks and clipboards and stuff; soon they will have to explain about envelopes and magnifying glasses. Apple, meanwhile, just moved iCal back a decade by introducing a leather-bound framing metaphor for the entire app.)

Hiring a designer with a distinct style is one way to make sure the design meets your general aesthetic goals. Compared to a designer whose portfolio has some things you love and some things you hate, in various different styles.

OTOH, it is amazing that some designers just repeat the same motifs in every work they do, and make a career out of it. Another one is Michael Schwab. I love his work but it is all very samey: http://www.michaelschwab.com/portfolio_posters.html

There's a standard "startup app look", and your first design was that - it didn't stand out from other apps. The new design is excellent, it feels much more like sending a gift. I can imagine users better connecting with the new design. Thanks for sharing these design tips. Bravo!

HN'ers can be serious buzz kills. Yeah, you can argue that it's less usable but the brand and emotion is dramatically more upbeat and fun, which is what I think the company is going for. I would be more likely to pay attention to hall the pages with this re-design than the templated startup design that was created before. This new design is easily one that will be passed around Twitter and other social media. The fact that you were able to make gift cards seem fun and attractive is a testament to his talent. Kudos to you guys.

And while I wouldn't call Mike Kus a design legend (I'd reserve that for peeps like Jonathan Ive, Dieter Rams, the HFJ duo... basically those who have a profound effect on the industry, peoples lifestyle and/or the craft) he definitely is one of the best web designers out there.

I'm usually surprised and inspired by the optimism and constructiveness of comments on HN. I sometimes view reading HN as a salve against cynicism. What the heck is happening in these replies? Usually when HN comments are critical, they are also constructive and the criticism is well thought out. In these replies some people are denigrating the entire indie-festival-poster style that is carrying startups to stardom calling it pase or not as likely to convert. And yet this style is preferred on all the rockstar YC/startup sites. In this case the only one who knows the conversion figures is the parent. The rest of the replies are fueling their cynicism with guesses and assumptions and inexplicably turning against an aesthetic that I feel we've built. HN: What the heck?

I had largely the same reaction as you.

My takeaway: Don't go to Designer News to read opinions about Hacking.

I don't have any issue on the aesthetics as these are subjective. On any point on the spectrum of utilitarian and flamboyant you win/lose some audience effect. The trick is to rest on the spot where your target audience's visual preference resides.

The issue here (at least on the front page and mobile screen) is the Information architecture. Putting the graphic first before the tagline pitch is not very effective (the graphic is a visual aide not the other way around) and a form instead of a call to action button doesn't also work. The next set of info is too far below the fold, etc.

I can see that its layout is inspired by the Facebook logged out home page. But this is not a household-known social network but an app that does one thing and a bunch of extras so the goal is not to dazzle then cause action but to inform to cause action.

In my humble opinion this exercise took some important aspect of the product backward in terms of informing users more efficiently and I would imagine the load times (for the website) also adversely affected. Im not saying you should scratch this redesign but refine this version more and hopefully iterate to one that is pretty and informative (and faster!)

Without a doubt the new site looks way better, Mike Kus does some amazing work. However, in the process I think a lot of things have happened here that probably would lead to more user confusion or drops in conversion than the old design. Design is more than just making it pretty, its also making it usable and making it convert.

A few specific examples...

1. I find the point about contrast in the article to be completely false. There is a more muted palette but I disagree that brown on black is higher contrast than red on white.

2. The mini-circles around the redeem button are just distracting from the primary call to action on that screen, do they do anything? Why would you trade the location name for buttons that don't do anything?

http://o7.no/pwkxA9 [png]

3. The homepage no longer has a single clear call to action ("send a giftrocket"), if you increase the number of possible users paths on a page it will almost always lead to reduced conversion. Your homepage has 19 things I can click on above the fold. (For point of comparison Square and LivingSocial have 5, Groupon has 4). Does anyone give a GiftRocket by clicking on the categories and browsing?

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

    background-color: #F7F2DD;
    color: #4F5354;

Uh huh.

Some people forget that contrast doesn't just mean an arbitrary amount of distance between two colors on the spectrum. Cognitive contrast is important, and brown + black makes for unpleasant reading.

FYI: this blog post's text was unreadably faint on initial load into FF6 with NoScript.

(Kind of ironic for a post which includes the emphatic lessons "When it comes to contrast: go big or go home!" and "Pay attention to typography".)

Enabling Javascript for the page helped; perhaps that's how the "text-shadows [Mike applied] to nearly everything" so that "the text felt more vibrant" were implemented?

So I would add a lesson #7: don't rely on fancy Javascript effects for something as basic as readability.

I was a bit surprised by the contrast claim as well, considering they are now using gold-on-cream and gray-on-cream for much of their text and icon elements.

It's a good discussion of how to re-see a site, though - definitely something that is important to do from time to time.

The first design is much better in terms of usability and clarity. The header immediately catches my attention and brings me into a sentence that describes your service. The second design just directs me to put in my email, why should I? What is the value proposition, I don't even know what this thing does. The first design uses white space and contrast very well, exposing the call to action button. It also contains a mobile phone picture running the app to give the visitor a preview of what the device would look like on their phone. It's like the 'test drive effect' car dealerships have when they let you try out the car; there is less mystery to what you are getting.

The second design did make some good changes, particularly larger pictures of food, however it comes off as too design heavy and lacking clarity in several areas.

Overall I feel there is more clarity with what you want me to do in the first design.

Edit: You have to view the work as a whole when comparing the designs side by side. There were several important parts of Mike's design that were cut out to fit the blog post that actually bring a ton more clarity.

Gotta agree. I was honestly unsure at first which screenshots were from the "before" design and which were from "after." In the majority of cases the original design was better at delivering both usability and clarity, as you say.

Here's a litmus test for those who like the newer design better: would you want your OS to look like that? Not everything should look like an OS UI, of course, but take a few moments to think about why you wouldn't want your OS and most of your other day-to-day applications to look like the "after" design.

Friendly word of warning to the site owners: whatever you're doing is tripping so many malware alerts in my browser/plug-ins that I couldn't even get as far as reading your article (which is a shame, because it sounded interesting).

FYI, I'm not running anything particularly unusual, and I have never seen that kind of effect on a page before with this browsing set-up. Either (a) you've been "0wn3d" or (b) you really need to tone down the scripting to an acceptable level or (c) you're probably going to put off a significant number of people who might otherwise be interested in your site.

Aside from the article itself, I am confused by the title. Are they meaning to call themselves a "design legend"?

I have not heard of them. Also, their blog site layout is quite flawed. The text hits the left edge of the page at 1000px width. First, text should never hit the left side of the page. There should absolutely always be a margin of no less than 8px, but nearly always should be at least 0.25". Second, 1024px is more than half of a 1920px width screen and the site only looks proper at about 1280px width. This is too wide.

We (people using computers) have been forced into wide screen aspect ratio displays because of the need to show movies. Fine, that is the way it is. But this means that common use is to have two pages or tasks side by side. Full screen for tasks of reading produces lines that are much too wide to scan properly. Web pages should not require more than 960px for basic reading. The 960px includes the window scroll bars and frame if present, so the actual page text should be slightly smaller.

Do not design windows that expect 1024px or 1280px width, and do not design windows where the text crashes into the page edge when resized. Both these are very amateur hour mistakes. Therefore, it is inconceivable that the people at this firm are "design legends".

"But this means that common use is to have two pages or tasks side by side."

Is this common? I've never known another person who does this outside a dual screen setup.

OK, let me ask some questions to calibrate your set up and see where you're coming from.

1. What is the width in inches of your display and how many pixels.

2. How many inches from your eyes to the screen in a normal working position?

3. Is your browser set to full screen width right now?

4. How many words per line are there across the screen in this page of hacker news on your set up?

How does this answer the question? You said it was common. I asked if it was really that common. What is your source? It's an important question to ask if you're designing something because it determines how much work needs to be done.

It's why I've considered adding j/k support to my blog. It wouldn't be worth the effort for most things other than a tech blog.

I normally don't browse side-by-side, but it's fantastic for translation from scanned originals. (My two bits.) Way easier nowadays.

Reading is more comfortable when the text is not sized to the entire screen (cite below, with more references). Also, witness the number of window managers that offer ways to facilitate half-window views (i.e., XMonad, Cinch or SizeUp, Windows 7 window snapping, even Ctrl-X 3 in Emacs, so on and so forth).

http://psychology.wichita.edu/surl/usabilitynews/72/LineLeng...

Where is text sized across the entire screen? There is text across the screen in the linked blog, but it's broken into distinct blocks.

>Aside from the article itself, I am confused by the title. Are they meaning to call themselves a "design legend"?

I think they are calling Mike Kus a design legend, who taught them these six lessons.

The fonts on the new version are less readable. Logo in gold on yellowish/cream background? its the same color category!

Black on weird textured background for the body? do not use textures for background - like - ever - if you're going to write text on it

Then gold text on cream again.

Design legend much?

The rest is ok and there's some actually good tips but what I listed is totally noobish.

i think the takeaway here is that the (100% subjective) design of their site benefited from (again, subjectively!) somebody that wasn't slavish to these sorts of prescriptives (although perhaps slavish to their own aesthetic, but whatever).

the reason startup websites look like the 'before' is because for whatever reason, everyone's told that there's this certain blue that projects confidence and whatever. the background is white and the text is #444 because of another mandate from heaven (h&fj) and so forth.

The reality is that while maybe black on 'weird textured background' may be technically harder to read than black on white, it's nonetheless legible. Somebody made the point that what really matters is whether this new site converts better. Whatever.

At some level, design is a matter of taste. They like their new site, you don't. Agree to disagree, but it's not like these things are 100% set in stone. I mean, everyone used to think fraktur was highly legible but something (tschichold?) eventually changed. Who knows.

It's all fashion (subjective).

I think this is a fair summary of what we're getting at. There's still plenty of usability stuff we need to work on. The focus of this article was on emotional design. Based on initial feedback (and somewhat anecdotally) I think we built something that elicits a better response from users. Agree that much of it is fashion.

Logo in gold on yellowish/cream background? its the same color category!

What matters for readability is value contrast, not hue contrast. In fact, in extreme cases, too much hue contrast can make for less readability because different colors have different wavelengths which can cause them to be slightly out-of-focus on your retina:

http://amazing-space.stsci.edu/resources/explorations/ground...

http://www.infoq.com/articles/Colors-UI

New site is absolutely gorgeous. The blog post is nice, but you have to click around the full-size website to see the difference. The design gives me confidence using your site and makes me almost feel like the results are hand-crafted. Great job.

The new site looks great, gorgeous but I think you should do an A/B test, I wouldn't be surprise if you find out, the old site convert better than the new one, I'm almost sure the old sure convert by far better than the new one, so the question will be: Are you trying to get a nice looking site or get new users? The new site has too much distraction: Don't make me think! Don't make me ask myself what all those nice looking icons are for! Credit to the designer for the creativity/talent but, I'll really do an A/B test here to find out if it's really an improvement.

This is a great post because it does two things: first, it shows that you don't necessarily need an out of this world design for your first version, but also, that it pays to upgrade your design once you have the means. But, like a lot of people are saying, the one thing this article lacks is a demonstration of the designing generating more business than the previous version. Here's hoping that Gift Rocket does a follow up post comparing stats from the before and after.

I love the design from a pure aesthetic point of view but if you're going for commerce it's "test or die" because at the end of the day conversion metrics rule your business. I'd like to know how this new design contributed to their bottom line. Also, no offense to the very talented designer, but looking through his portfolio the current style follows a lot of his other work, hence not too much originality to distinguish it from his other clients.

I can't keep from noticing the texture in the background, so the text might as well not be there. I gave up on trying to "design" my own blog and just focused on making it mildly appealing and easy to use. No complaints so far.

Liked the down to earth tips.

Websites like this are really design products. If it's not graphic design, it's service design. The technical stuff is comes second.

Does anybody know how much that kind of work costs? I'd shoot mike an email but I'm guessing you guys could give a broader range of answers.

I wrote a really scathing review. So scathing that even I couldn't post it. But in essence:

Brown background.

Presents!!!

Brown sky.

Brown favicon.

Spot the odd one out.

And this improved sign-up and retention by how much?

Reply on news.ycombinator.com