
Lessons from a Design Legend (a before-and-after) - kapilkale
http://www.giftrocket.com/blog/design-tips-from-a-master
======
ender7
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.

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

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

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

------
armandososa
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?

~~~
lobster_johnson
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.

~~~
mtgentry
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.

~~~
lobster_johnson
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. :-)

------
katieben
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!

------
jamesteow
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.

~~~
lell
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?

~~~
alanfalcon
I had largely the same reaction as you.

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

------
twidlit
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!)

------
jamiequint
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?

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

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

Uh huh.

~~~
mkr-hn
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.

------
gojomo
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.

~~~
CognitiveLens
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.

------
yoshyosh
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.

~~~
CamperBob
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.

------
Silhouette
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.

------
bugsy
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".

~~~
mkr-hn
"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.

~~~
pangram
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...](http://psychology.wichita.edu/surl/usabilitynews/72/LineLength.asp)

~~~
mkr-hn
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.

------
zobzu
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.

~~~
nsfmc
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).

~~~
kapilkale
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.

------
kennystone
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.

------
Concours
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.

------
rglover
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.

------
flocial
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.

------
mkr-hn
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.

------
thomasfl
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.

------
temptemptemp13
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.

------
jamieb
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.

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

