Put the logo below the fold:
Breaking design rules for profit.

I’ve had to relearn certain aspects of design now that I’m running my own business. I’m making decisions I’d have considered a major error only a short time ago. Like putting the logo below the fold. Or using a color that doesn’t match the rest of the palette on purpose. On purpose!

The proof it works is in the numbers. Cascade is earning a 12-15% conversion rate, depending on the traffic source. This is higher than Bootstrapping Design’s landing page conversion rate of 8-12%.

Designing for your own business is different than designing for clients. What follows are my hard realizations after living on product income for a year.

(Also note, I’m discussing professional products only. Consumer products are a wild goose chase, as far as I’m concerned.)

The logo below the fold: customers are more important than me.

Designers revere conventions. Putting the logo in the top left corner of the site is supposed to be an important convention.

But for small startups like mine, it’s the wrong decision.

Putting the logo in the top left corner is wrong because it makes the statement that the person or company operating the website is the most important information on the page. It implies: “Hey visitor, you should know who I am before you read anything. I’m kind of a big deal.”

Brand awareness doesn’t exist if your customers number in the hundreds. Designing for a small business is totally different than designing for a large brand (or a brand that wants to become large).

Visitors don’t care about your logo and they don’t even care who you are (yet). They are looking for the answers to two questions: What problem does it solve? Do I have that problem?

You’ll notice that in my design for Cascade, I placed the logo below the fold and low on the visual hierarchy. The answers to those two important questions are right at the top where the logo would normally be.  The only people who even see the logo are those who identify with the problem and intended audience. People who don’t leave the page immediately. That’s great because throughout the rest of the page, I know exactly who I am writing to.

So stop putting the logo at the top of the visual hierarchy. Instead, write about the problem your business is proposing to solve. Write about what type of person usually has that problem. Then, lower down on the page, explain how your business is the answer and ask them to buy. And place the logo there too.

Your job as a designer and writer is to show the visitor that they have a problem and to convince them to continue reading about your solution. If you succeed in this, people will pay you.

The ugly button: business goals are more important than good taste.

(I bet you never thought you’d see a designer write that!)

Cascade’s landing page sports a shiny green button. The button isn’t ugly in and of itself. But set amongst the intense orange that dominates the composition, it clashes—badly. And, it clashes on purpose.

I chose the bright, clashing green color for the button because I wanted visitors to see it. Originally, the color scheme for the site included a complimentary blue. I used that blue in several of the illustrations, but the buttons were blue too. When evaluating the design, I realized that this was a problem. The buttons had similar visual prominence to the other elements on the page, and that didn’t fit my goals for the visual hierarchy.

My plan was to place the buttons lower on the page. After all, no one is going to sign up before I’ve explained why they’d want to. But, when the visitor does scroll to a point where the button is visible, I wanted it to be the most obvious element on screen.

A pretty blue button that matches the rest of the design did not accomplish this. So, I stripped the blue from the design and chose a clashing green color for the buttons. Now when you scroll far enough to see a button, it is impossible to miss. The ugly aesthetic of the button supports my goals perfectly.

With this change, I made a conscious decision: my business goals were more important than making the design attractive. I don’t care if Cascade wins design awards. It doesn’t matter if other designers like the page. It’s not for them. All that matters is that the page connects with technical startup founders who struggle with design.

Furthermore, rather than merely assuming I met my goals, I used analytics. Every metric shows that my design is successful.

It’s okay to break the rules.

I’m not trying to convince you to always place the logo below the fold or to always use an ugly button. But I do hope these examples give you the confidence to break best practice when you discover it’s necessary.

Doing this is not nearly as big of a risk as you’d think. Designers might point out the flaws in rude tweets, but they could surprise you. Some might even be smart enough to catch onto what you’re doing and write a blog post about it, like Sacha Grief’s writeup of the Cascade landing page.

Regardless, be proud that you’re prioritizing efficiency over vanity. Making these kinds of decisions is the right way to run a business, and your customers will be grateful. And they’ll show that gratitude by paying you.

Edit: Several astute commenters on Hacker News noted that on the Cascade landing page, there is a small, dimmed logo in the top right corner. I admit the title of this post is slightly inaccurate because of that. The logo is not only below the fold. However, all occurrences of the logo are low on the visual hierarchy, which is the key point.

Comments

  1. [...] via Hacker Newshttp://blog.studiofellow.com/2013/03/21/put-the-logo-below-the-fold-breaking-design-rules-for-profit… [...]

  2. Michael says:

    Your logo is above the fold on the top-right corner (and again below the fold).

    You can argue that the top-right placement is “low on the visual hierarchy” but it certainly seems to contradict the broad headline of the post.

    • Jarrod says:

      Thanks. I just added a note in the post to reflect this point.

    • Marcos says:

      I have to agree with Michael, and even after the article edit it still doesn’t make sense to me.
      The article mentions on the update: “However, all occurrences of the logo are low on the visual hierarchy, which is the key point.”
      In most websites I know I could see their logo is on the top-left hand side and also low on the visual hierarchy.
      Naming few which are not start-ups anymore (http://dribbble.com, http://kippt.com, http://amazon.com, http://ebay.com), where these guys use their logo as an introduction to the user and not and attempt to impose their identity. But to be honest, I don’t remember of recently browsing a start-up website having a huge logo on the top. Kippt and dribble are two good examples when launching (at least these are the ones I can remember how they were back in time).
      Websites usually maintain their logo’s size and proportion close to cascade’s example on the right hand side, but located on the left instead
      There is a slight advantage though: They are not repeating a logo below the fold, which, for some graphic designers, would be an overkill.

  3. John Farrell says:

    Conversion rates also have a lot to do with how you are getting your traffic and/or demographics. I would assume anything based on the numbers you have here.

  4. Neil Bowers says:

    The initial impact of your home page would be much stronger if you didn’t have the twitter and facebook widgets, and your logo. They’re visual noise at the moment.

    • Ben Rogerson says:

      I agree, it would be better to move them – possibly into the call to action box at the bottom of the page?

      Here I’ve swapped out your key points with the logo placement with your facebook, twitter links:
      “Hey visitor, you should know [my facebook and twitter pages] before you read anything. [They are] kind of a big deal.” – heh

      Nice read though, thanks for your ideas. I too agree that in some situations the logo would be best placed below the fold on key landing pages.

      Also in Chrome the comment fields on this page are out of alignment :)

  5. I seem to possibly have missed the point. I looked at your site from the context of your write-up (in which I enjoyed). However with your website open on one window I kept reading. I understand your theory on the ugly button as I have been doing this for some time myself. But what intrigued me was that you have an ugly placement of the twitter and Facebook right beside your logo in which contradicts your theory.

    If I had a chance to have a site like you have right now, I would remove the logo at the top and the social crap. Move the social buttons to the bottom of the page, let people decide if they are important to push. I feel it is too distracting with them there, and they look like the muscle men at the door before you enter a nightclub.

    Keep up the good theory writing, I will follow you to keep an ete on your progress online.

    Ciaran

  6. Robert says:

    Funny how you get a bunch of designers critiquing your design and totally ignoring the points you make on your blog post!

    I for one gotta say BRAVO! Designers today need to open their eyes and realize that they’re hired to make their clients money… first and foremost. So many apple fanboys think you gotta turn everything into a perfectly designed apple clone in order to be a good designer, and to me that’s bullcrap.

    On a similar note, I think copywriting is much more important than design to most small businesses, and yet designers choose to design around aesthetics first and use lorem ipsum placeholder. When what they should really be designing is the copy and then the aesthetics around that!

  7. Andrew says:

    The two questions every site and app should answer for all users are:
    Where am I?
    and
    What can I do here?

    Basically what you’re saying is this– I’ll sacrifice the “where am I” question in order to focus on the “What can I do here?” question.

    It’s an interesting idea. Cascade is a one-pager and in one page design this effect is interesting. We also know that people scroll a lot more freely than they click these days, so there might be something to that too.
    In multi-page design, however, do you think this effect would still be worthwhile? On internal page you’re probably better off sticking to convention for the simple reason that your message is worthless if it isn’t sourced. Imagine reading a news article before knowing the article was published by the New York Times. You’d be inclined to say “This is BS!” because you wouldn’t have any idea about the validity of the source.
    Your point here is that the source already lacks validity because it isn’t a major company, but as a user, how do I know that? There are thousands of major startups with credibility, funding, etc. that users have never ever heard of…so landing on one of those wont’ come as a shock to anyone either.

    I love this article.
    It’s well written, poignant, and interesting.

    I also respectfully disagree.
    Providing the answers to the two most basic UX questions is a critical aspect of usability.
    If I don’t know where I am (and believe me users come from all kinds of unexpected places), then I’m unlikely to trust the source. Trust is critical to conversion rates for small businesses.
    So I’m inclined to believe that even though this could be a more fascinating prospect in the future, at the moment I wouldn’t advise a client to take this advice.

  8. Goran Peuc says:

    It seems to me that you do not fully understand what logo is, and what it stands for. Do a small mental exercise – imagine Nike and Adidas both removed logos from their web-shops. Imagine what happens when customer comes to those sites. They are both sites which solve customer’s needs – get shoes on feet and shirts on backs. But the LOGO is what makes it all different. The logo conveys emotion, quality, and whatever it was branded to be. Nike logo instantly conveys competitive sport, Adidas logo conveys casual sport and rebellion. Imagine eBay removed logo from top position – noone would buy anything from there ever again. eBay stands for security of second hand online shopping. This matters. Logo does not just stand for “Hey, this is me”, it stands for much much more. You first have to learn what logo is, than make posts like this.

    Also, I do not mean to be rude, but orange and green colors are not ugly combination. They are what the design world calls – complementary colors – and that is because they fit well together, they complement each other. Basically, that is the opposite of ugly.

  9. John Reindoer says:

    I feel like the site is largely contradictory to the point you’re trying to make in the article. As mentioned the logo is still visible on the top right corner, next to twitter and facebook buttons that have a completely different design thus calling more attention to themselves. Everything above the fold is so big and drawing attention to itself that my eyes can’t find a single point to focus on.

    That site needs a lot more open space and element hierarchy before being a good example. The image above the fold is relatively hard to decypher and in itself less relevant than the text that accompanies it (which is too small and easily missed). And it only gets worse once you go down, there’s never a clear element that needs your attention, everything is yelling out to be read and focussed on.

  10. Manuel Weiss says:

    I can resonate with this post quite well as I am in the exact same situation right now. I am redesigning the landing page for our continuous integration and deployment service at the moment and also made the decision that business goals are more important than good taste. At first it was really tough for me to do it but in the long run the numbers speak for themselves.
    I also think Robert is correct in saying that the copywriting is the most important thing on a landing page.

  11. [...] users are willing to scroll down or click on a website or application in order to find answers.  Jarrod Drysdale’s article about placing your company’s logo below the fold doesn’t directly say it, but perhaps users scroll in order to find the logo.  Thus their [...]

  12. [...] Put the logo below the fold: Breaking design rules for profit – I’ve had to relearn certain aspects of design now that I’m running my own business. I’m making decisions I’d have considered a major error only a short time ago. [...]

  13. Susan Silver says:

    This is what I have been doing on Cirquedumot. The logo resides below the fold. It just isn’t very important at the moment as is featuring the blog. Having the logo at the bottom next to the copyright information works and it gets people clicking on my social media profiles. In my opinion, breaking rules is the way to go if it results in conversions. You can always change it back to the conventional method, but not until you see the data.

  14. Stijn says:

    On a one-page website, like yours, you could be right. A logo in the top right corner isn’t necessary.
    However, on a multi-page website, I would never skip the logo. A logo in the top right corner isn’t just branding, it’s usability too. It brings you back to the homepage if you find yourself lost in a website.

  15. Kai says:

    I really like the premise of your article, but having a logo in the top right corner of your site undermines your point. Why don’t you just remove the logo from your site in the top? What would you loose if you did so? What are you gaining by having it there?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>