LearnOld-School Ugly

Treehouse
writes on April 6, 2011

We’re using Basecamp to manage the Treehouse launch. We’re on the Free plan (we only need one project for now) and I noticed something interesting when I logged in this morning.

They have a big fat jakob-nielsen-old-school-ugly upgrade message. We’re talking yellow-background-and-blue-links ugly. Even though I think it’s unattractive, I bet this message works well for them. I don’t know if they’ve A/B tested it, but my gut instinct is that it really works. The reason is because the message is so jarring visually. It doesn’t fit into the asthestic of the rest of the app at all.

A lot of us would rather design an upgrade message to look great and compliment our branding. However, I bet the effectiveness of “nicely designed” upgrade messages is a lot lower than this ugly-style message.

Thoughts?

43 Responses to “Old-School Ugly”

  1. You may consider it ugly, but the style is in line with the rest of the site style. Flat color backgrounds, clean text. This is not a site composed of gradients, textures and lush illustrations/graphics. The box is certainly a little big and wordy, especially for them.

  2. Waseem Senjer on April 25, 2011 at 7:24 pm said:

    37Signals makes it work , and I think they test it very well , Ryan Singer -their designer- has a great scope about user experience , despite of the ugliness , I’m sure that they have a good point of view about why the message should look like that .

  3. nomad-one on April 12, 2011 at 1:17 pm said:

    I can think of quite a few instances where I’ve been muscled into buying something, and even though I made the purchase and “gave in” due to the jarring experience, it left a bad taste in my mouth to the extent that I avoid that type of situation as much as I can in future.

    I think the same applies to this approach in call to actions on some level.

  4. Thomas Lewis on April 12, 2011 at 12:30 pm said:

    Do 37Signals A/B test? That’s pretty much a bear/wood/defecation question- they are kings of the split test, in fact the homepages of their various products, as well as their own homepage have been split test so many times you never quite know what you are going to get. These guys have wrung every last cent out of their traffic, and sometimes that does mean that things look a little out of place/not best practice. It does help that their product plans are fiendishly well implemented too- the free plan is good for about 5 minutes until you need/want to upgrade. We started with a free Basecamp plan, now run with a $49 plan for that, plus Backpack (Intranet), & Campfire (Chat). Read Rework, written by Jason Fried who started 37Signals for an insight into how they work and market their products – http://www.amazon.co.uk/ReWork-Change-Way-Work-Forever/dp/0091929784

  5. your this article makes me to rethink about that

  6. Thomas Reeve on April 10, 2011 at 4:11 pm said:

    Effective design, doesn’t have to be attractive design. The contrast on the page is what makes it work so well. It really draws your attention

  7. Darren on April 8, 2011 at 3:59 pm said:

    Looking at the image posted the yellow on the ad seems to match the colour of todays date. This draws the eye and captures attention, the links are styled the same as all the others on the page, the brighter yellow is the same as the one on the list marking todays things and the rest of the text is the same as the text on the rest of the page.

    So it isn’t built with css3 loveliness, rounded corners and gradients, why does that make it ugly? Personally the brown used at the other end of the list is an FUGLY colour! I see that colour in my baby’s nappies all the time!

  8. It’s simple: the ones that will never use a paid version will be put off by the “ad” and leave basecamp. (thus reducing the resources needed to support free accounts)

    The ones that will some day upgrade are nudged to do so. (As opposed to setting up another free account, that will also look ugly)

  9. *throws money at it*

    GO AWAY!

  10. When did ugly/not ugly become the measure? I thought we were here to get something done. One thing about it, 37signals gets it done.

  11. Yeah it’s ugly, but it works, right? Where is the right place to draw the line between effects and effective?

  12. Not only is it ugly, it’s annoying. I’ve complained (to 37 Signals) at least twice about it, because there is no way to make it go away. It’s not a friendly nudge in the right direction; it’s basically a banner-ad that I’m forced to look at every day, except it has the same effect as all other banner ads I see- it makes me NEVER want to upgrade. So I hope it’s working for them somehow, because they’re definitely losing sales because of it as well…
    –Mark

    • Of course there’s a way to make it go away… Upgrade! Believe me, 37 Signals is doing just fine with or without you.

      • Oh yeah, I should mention that I already PAY them, so it’s not like I’m whining because they’re shoving an ad in my face while I use their service for free. No- they still shove the ad in your face when you give them money every month. Just means I stick around and put up with it until the minute something better (and less annoying) comes along.
        –Mark

  13. Certainly eye-catching, yes! I wonder if the non-design people on free Basecamp plans notice the crudeness of that module and say to themselves “Wow, that block doesn’t look as good as the rest of the site”.

  14. For our clients (high price ticket conferences) we did a lot of testing and found that a single, “ugly” call to action, that in no way matched anything on the rest of the design, got the better CTR and goal completion.

    Interestingly, if you use this approach for more than one call to action on a page, it’s not effective.

    I would say though that all of 37 Signals user interfaces are functional and nothing more. I’d love to see actual data on a ‘business function’ web app that has a very modern, trends-orientated UI compared to something like basecamp or highrise.

    Looking into the back of Zoho or Salesforce products reveals a very similarly “functional over beautiful” approach to UI.

    Is this because it works, or because the systems are so large and complex now that the overhead involved in making tiny UI/visual tweaks is too expensive to prioritise?

  15. Upselling users with ugly UI is quite interesting. Thanks for sharing. Still I think there needs to be a better way that is as effective. Wouldn’t want this in my product.

  16. Another example is Google Adwords’s (undismissable!) message nagging you to refill your Adwords balance: http://imgur.com/Hdssv

    I’d like to think the blue-on-red is an honest design mistake, but the cynic in me thinks they’re using chromostereopsis for profit.

  17. Observer on April 6, 2011 at 1:07 pm said:

    Ugly or not…it made enough of an impact that you took the time to write up a post about it.

    I would say that is pretty effective.

  18. The problem with this approach, though, is that as a new user, you don’t know for certain that that’s the one and only ugly piece of design in the app, and so in my opinion it devalues the product as a whole, not just the free edition. You don’t know that once you upgrade everything will be lickably nice. Therefore some design-conscious customers may be put off for life when seeing something like that.

    I bet you it’s possible to make a pretty, but still in-your-face, call-to-action that converts just as well without making the operators look so design-starved.

    I think 37S have had it easy a bit too long and their utilitarian design will start to change now that people are getting used to sexy interfaces. You can already see them going through refreshing things from the outside in, starting with their public sites.

  19. I think the point isn’t about beauty or ugly, it’s just that this box is so different from the rest fo the app that it’s like the box is poping out the screen and atract your attention so much that you really see it, and read it, and often buy it.

    It could be beautifull, I guess, but, it must be different from everything else on the site. When things are the same, you can’t differ the message from the interface, so it’s easier to ignore.

  20. “The sleek silver and green buttons converted so much worse than the massive ugly red ones, which is always disappointing from an aesthetic point of view.”

    “I agree, there’s a little part of me that dies whenever ‘ugly’ wins”

    Ugly isn’t winning here, ugly is losing! Here, ugly converts because people don’t want to see ugly. If they don’t convert, they’re forced to see a big yellow field when they’re using the application. Conclusion, people doesn’t like ugly, so ugly loses.

    An ugly call to action, on the other hand (the ones you see before you start using an app), isn’t something you see every time you use the application, because, well, you aren’t using the application yet (it seemed to me this was the kinds of use cases you were talking about). In addition to the fact that you’re not forced to see it so often, I suspect there’s a different dynamic at play when it comes to buttons, where the ugly/pretty paradigm plays a lesser role.

  21. Good point! Testing, testing and more testing. Could it also be a change fad? Something that just jumps out at you because it’s different

  22. I cannot say I am a fan of “ugly design” but I think you may be on to something as far as it’s effectiveness. I think that is more of a matter of contrast. When you add contrast to a design, something is going to stand out and get your attention. I think that is what you are saying is happening here. So maybe it does not necessarily have to be ugly in order to accomplish the effectiveness that you think it has.

  23. Anonymous on April 6, 2011 at 12:24 pm said:

    It’s meant to annoy so you come off the free plan I think.

  24. You are right, Ryan. It is intentional.

  25. I would be tempted to upgrade to get rid of that message. 37signals clearly knows their user-base. People use their applications because they’re simple, awesome and well designed. Getting rid of the message is a whole other reason to upgrade. Never mind all the extra features! It’s probably the most powerful call to action they have!

  26. I agree with you, when you see something so ugly in your project homepage you just want to get rid of it and upgrade your plan 😉

  27. It makes me sad how often ugly interface elements work better than beautiful ones, but when it comes to the web conversion is usually king so sometimes we have to make sacrifices. I worked on a site a few weeks back where we tested a bunch of button options on a page. The sleek silver and green buttons converted so much worse than the massive ugly red ones, which is always disappointing from an aesthetic point of view.

    On the flip side you have to be careful, making something uglier for a small increase in conversions will often be bad in the long run when it comes to user loyalty. Hope you’re well Ryan!

    • Hey Matt. I agree, there’s a little part of me that dies whenever ‘ugly’ wins 🙂 I agree about the long term conversion rate though. If you constantly reduce to the best converting elements, you’ll eventually lose all sense of the design.

  28. Anonymous on April 6, 2011 at 12:01 pm said:

    It’s also similar to the color scheme used for sponsored links on Google. Although google is slightly tamer. So there must be something in it.

  29. I like the design of the message its perfect for the style of Basecamp. Also if you need to “design” upgrade promo your product isn`t very well.

  30. erm, the design of this website is ugly, I guess that makes it new school ugly?

  31. Isn’t that a bit like saying writing on post-it notes is old-school ugly? Which it might be, sure, but it works. Maybe it is old-school effective instead?

Leave a Reply

You must be logged in to post a comment.

Learning to code can be fun!

Get started today with a free trial and discover why thousands of students are choosing Treehouse to learn about web development, design, and business.

Learn more