Last week, I unveiled a new design for the Folyo homepage.
Folyo is a service that helps connect companies with great freelance designers. It had been stagnant for a while, so I decided to try and breathe some life into it with a new start.
(If you’re curious about why I took the decision to give Folyo a second chance instead of calling it quits, you can read more about that here)
Today, I’d like to talk about what, specifically, I’m doing differently with this new homepage.
This post is a little long, so here’s a quick summary of what it covers:
- What was wrong with the previous design.
- How to design by focusing on the message first, and visuals second.
- The one place where pain is a good thing.
- Restaurant Menu Syndrome.
- How to write effective headlines.
- Why you shouldn’t dismiss the “long sales letter” format.
Note: if you enjoy this kind of design analysis, I suggest you sign up for my newsletter. It only comes once a week, and I try to always feature actionable design advice.
The Old Design
But first, let’s take a look at the previous homepage.
The previous homepage
If I had to sum up my goals at the time in one sentence, it would be “look professional”. I launched Folyo as a single founder with no previous business experience and not many connections in the design world, and I had somewhat of an inferiority complex.
The result was a design that looked like a startup homepage should, but with a weak message and no clear focus.
I wasn’t especially proud of it and vowed to replace it with something better “as soon as I had the time”. But of course, it ended up serving as Folyo’s homepage for the past two years.
“You’ve Got It All Wrong!”
Throughout my interactions with Folyo customers, it was becoming more and more obvious that the old homepage was doing a horrible job at explaining Folyo’s value.
Here’s how it would typically go: people would ask me if I knew any good designers, so I would suggest they take a look at Folyo. They would then come back saying that the site featured some great design talent, but could I recommend anybody in particular?
A typical email exchange after point someone to Folyo
From these exchanges, it was clear that they thought Folyo was just a designer directory, and were browsing profiles one by one. This defeated the whole value proposition of Folyo, which is that instead of contacting designers yourself, it’s much faster to get them to contact you.
And when you start saying things like “why don’t they understand!” and “they’ve got it all wrong!”, it’s probably time to stop blaming users and take a look at what you’re getting wrong.
So for the new homepage, I decided to do a complete 180. Instead of something pretty with a weak message, I would start with the message and worry about the looks later.
Show vs Tell
I rarely sketch or wireframe when working on new designs. Instead, most of the work happens in my head: instead of trying out fonts and layouts, I try out ideas and concepts.
For this redesign, I came up with the idea of directly showing how Folyo works. So instead of explaining how you post a project and then wait for designers to contact you, I used animations to show the whole thing taking place in front of your eyes:
The Folyo process, animated
It doesn’t matter that the actual process looks nothing like this visually. What’s important is that showing is so much more effective than telling at getting a point across.
(For me, the most impressive example of this was Disqus’s previous homepage, which would take you through the whole commenting process, complete with fake commenters interacting with you.)
Once I had this concept, I began to organize the rest of the page around it.
Bringing The Pain
I started thinking about how else I could make things clearer. The first thing I realized is that although I was offering a solution, I wasn’t making it clear at all how that solution related to the customer’s current situation.
With the previous message, even if you were looking for a designer, it was very hard to see the value in using Folyo unless you had already tried other avenues (job boards, Dribbble, etc.) and failed.
So instead of targeting anyone looking for a designer, my message only made sense for the much smaller subset of people who already knew how painful finding a designer could be. And in fact, one of the most common replies I got when suggesting people check out Folyo, was “why can’t I just browse Dribbble instead?”.
The solution was to start things off by putting that pain in writing. In other words, before explaining how you’re going to save the day, make sure the reader understands why the day needs saving in the first place:
Finding a designer is hard: here’s why
Restaurant Menu Syndrome
A lot of landing pages suffer from what I would call “Restaurant Menu Syndrome”.
When you go to the restaurant, you enjoy having a big menu with all kinds of options: here are your starters, and you’ve got a couple entrées to chose from, and here, don’t forget the drinks and desert section, too!
Translate this approach to the web, and you end up with multi-column landing pages that try to give you a little bit of everything. Here’s our blog, here are a few testimonials, and here are some extra links in our footer just to make sure you don’t leave hungry.
But although this strategy might work for restaurant menus, I’m not sure at all it’s a good fit for most startup homepages.
As you can see, the previous homepage had no less than 9 distinct points of focus, resulting in a disorienting and messy experience:
The “Restaurant Menu” homepage
The Omakase Strategy
Instead, I would suggest the omakase strategy. This is a Japanese term roughly meaning “I’ll leave it to you”, and it’s what you say in a sushi restaurant when you’d like to let the chef decide what you’ll be eating.
On the web, that means letting the design take charge and firmly guiding your attention from point to point (and the risk of having to eat sea urchin is also greatly reduced).
This is much easier to achieve with a single-column format, as it removes the “what should I be looking at next?” effect that often occurs with multi-column layouts.
A single vertical linear path
And instead of worrying about eye tracking and f-shapes, your task become much simpler: simply keep the user scrolling down the page. It’s not a coincidence if scrolling-triggered animations have become so popular: it’s a great way to keep the user engaged with minimum cognitive effort on their part.
Scanners vs Readers
When attempting to lead someone down a page of text, another key point to keep in mind is that there are different types of readers: some readers actually read, but most are content to just scan, jumping from headline to headline.
This means that it’s very important that your headlines make sense by themselves. You can think of it as the headlines being a condensed version of your body copy.
Here’s a quick example of what I mean:
Copy:
Folyo designers are hand-picked, and each designer’s application is evaluated individually.
Headline:
- Wrong: Quality Over Quantity
- Right: We Only Feature The Best Designers
While the first headline certainly has a nice ring to it and complements the copy nicely, it doesn’t actually mean anything by itself. So someone scanning across the page will get a lot more information from the admittedly less elegant second option.
Another nice trick I got off the new Freckle homepage is to use an ellipsis “…” to link two headlines together.
Using ellipses to link headlines together
Speaking of the Freckle homepage, it’s a great example of good copywriting, and I had it opened in a browser tab while working on Folyo.
So it’s not coincidence that a lot of the things I talk about here are also covered in this great article about the Freckle redesign (even though I didn’t come across it until after my own redesign).
The Dreaded Long Sales Letter
By now, you might’ve noticed that the technique and format I describe correspond to what’s known in marketing circles as a long sales letter.
While very effective, this format also suffers from being associated mostly with weight-loss formulas and various other scams questionable endeavors.
Red font, ugly design… yep, it’s a long sales letter
That’s not a coincidence: in addition to being an effective sales tool, this format is also comparatively easy to produce, since it’s (mostly) text.
That doesn’t mean the long sales letter can’t be done well. 37Signals famously A/B tested a long sales letter version of the Highrise homepage to great effect, and the aforementioned Freckle homepage is another example that long sales letter don’t always need to make your eyes bleed.
Since I didn’t want Folyo to come across as cheap, I started thinking about ways to take a page out of 37Signals and Freckle’s book and get the benefits of the format without its downsides.
Breaking The Mold
The first thing I did is split the page off in sections. Not only did this let me fit in the animated “how it works” section nicely, but it also visually departed from the standard white page of LFLs.
I also gave the page a bit more character by setting the text in Rooney Sans, a nice rounded font with an approachable and fun personality.
Breaking from the single-column layout
Finally, I made sure to include breaks from the rigid single-column layout throughout the page, for example in the designer profiles. Content like the four designer profiles is not meant to be read closely anyway, it’s mostly there to give context to the page. So setting it on multiple columns isn’t that bad.
The Splash Screen
Even after all this, I still felt like something was missing. Like many text-heavy page, my landing page didn’t have any strong “hero” zone. I tried filling the void with a large headline or even a quick illustration, but it wasn’t working.
At that point, I stumbled on the Mixture site, and noticed that they too used the “full-width bands” format (with nice fade-ins and animations to boot). I also noticed that their first “band” automatically filled in the height of the window thanks to an ingenious CSS trick (setting its height to 100vh, which means “100% of the viewport height”), and I decided to appropriate this idea.
Now it might seem weird to have what is essentially a splash screen on a homepage. After all, I’m creating an artificial barrier that’s preventing people from seeing my content.
The landing page’s splash screen
But on the other hand, the splash screen sets the tone of the site and gives a strong identity to what would otherwise be a fairly forgettable design. And setting position:fixed on the splash screen also contributes to making the design stand out, since the rest of the page doesn’t scroll up like the user expects it to.
As a designer, my perspective on this might be a little different from purely marketing-oriented folks. But I believe strong branding is important, so I’m ready to take risks to establish that.
But Does It Work?
Of course, the only way to really test the validity of all these theories would be by A/B testing each of them, and I intend to do just that over the next couple months.
That being said, just because you don’t test your results right away doesn’t mean you shouldn’t be trying to improve your product.
I’m very happy with the redesign so far, if only because it gave Folyo a new start, and gave me a nice motivation boost (after all, nobody likes working on an old-looking product). And I think that matters a lot when you’re working on your own projects.
So go take a look and share your thoughts here or on Hacker News. And if you have a chance to put some of these techniques to use, I’d be curious to know what kind of results you get!
P.S. On a completely unrelated note, if you have any interest in self-publishing an eBook you should join me and 3 other authors for a live hangout next week.