Case Study: Perch Redesign

Folyo case studies examine the design process behind collaborations between startups and Folyo designers, and are a great way to learn from real-world examples.

Ordinarily, design case studies are written by designers. But since Folyo’s mission is to help connect startups with great designers, this creates an opportunity to look at the design process from both sides of the table.

So for this first case study, I picked the recent Perch redesign. Rachel & Drew from Perch posted their project description on Folyo last April, and they quickly got 21 replies from interested designers.

They ended up picking Paddy Donnelly, a great illustrator and designer who’s famous for (among other things) his Life Below 600px article.

I asked both Paddy and Rachel about their collaboration, the new site, and the overall design process.

Redesign Goals

One of the biggest mistakes you can make when designing something is starting without having well-defined goals.

“Make it prettier” is not good enough, you need to know what message you want to communicate, as well as how your current site is coming up short.

Rachel, can you give us a very short intro of what Perch is? What were your goals for this redesign?

Perch is a content management system designed to make it really easy for designers to add a CMS to their site. It essentially lets you add the CMS to the site rather than having to build your entire site around the system. Unlike many similar systems it is self-hosted so people purchase Perch and install it on their own server rather than it being software as a service.

We launched Perch 3 years ago and initially we assumed people would be using it for very tiny sites. As it turned out people started using it for large sites with loads of content. It scaled fine other than the fact that the admin UI had been designed for tiny sites and so larger sites ran into usability issues.

So it was these issues we wanted to solve with Perch 2, to keep it as a really simple, easy to use CMS, but one that would allow your site to grow.

So the redesign of the site was part of this, we felt that Perch was growing up and we wanted a slicker, more up to date – and responsive website, to go with our more mature product. However we also wanted to maintain our fun and friendly feel.

Preliminary Work & Art Direction

Every design project needs some kind of preliminary research phase. Sometimes this all takes place inside the designers (or the client’s) mind, and sometimes tools like wireframes or mood boards can be helpful.

Paddy’s preliminary sketches

How did you approach this project? Did you have some specific ideas in mind, or did you explore different possibilities?

We started off with some Skype chats to go over what exactly the guys wanted to get out of the site redesign. As the Perch CMS had grown over the past three years, Rachel and Drew felt the site could use an upgrade. There were a few branding aspects of the site that the guys wanted to keep, but they were very open to new ideas from me and willing to take a few chances.

After our initial conversations, I began sketching out some first ideas and we went through some moodboarding exercises to establish a look and feel that both the guys and myself were excited about. After this we created extensive wireframes before diving into the design.

Mapping out the site’s architecture with post-its

The design uses a lot of illustration. How did that happen? Was it something you knew you wanted from the start?

The Perch brand has always been very playful, incorporating sketchy illustration elements throughout the site. I wanted to push this up a level and draw people in with an engrossing experience on the homepage, while still retaining the much loved Perch bird character of course.

The original design already used illustration and we aim to give Perch a friendly, non-technical feel. We try to be accessible to people who have never worked with a CMS before so we wanted to avoid a heavy serious technology look.

Similarly, the site features a bright yellow bird mascot. Did you already have this mascot before? Does it have a name? What part does it play in your overall identity?

The bird mascot was designed by Kev Adamson very early on in the life of Perch and so we knew we wanted to keep the birds as they are really popular.

We see search requests coming in from Google for “the CMS with the bird”. They don’t have names (we refer to them as Bird 1 and Bird 2 a lot of the time) and have been very important in terms of establishing Perch as a bit different.

Content & Story-telling

Coming up with good content for a site can be tricky. One one hand, the designer is capable of creating beautiful layouts, but often doesn’t know enough about the business to write the content themselves.

And on the other hand, the client knows about their business, but might not have the design skills necessary to harmonize content and form.

I asked Paddy and Rachel how they dealt with this particular problem.

It seems a lot of work went into the About page, both for the copy and the design. Did Paddy also work on the content? How did you decided on the general layout of the page?

Story-telling was a device we were keen to use throughout the site. All too often in websites, pages like the about page can be afterthoughts which are dumping grounds for text. We wanted to use these pages to draw user in and introduce them into the Perch experience in a more effective way.

The content came from Rachel and Drew and then together we decided on the ordering while I provided suggestions for visuals. The fact that the guys wanted to dedicate so much time to crafting something original for sections like the about page, just shows how much care they put into their product.

The About page

Paddy has been great at forcing us to think about our content, across the site but especially on that about page. Both Drew and I are established writers and we can churn out lots of words! As we are not designers, when we need to get a point across what we tend to do is write more words. Paddy really helped us to cut down the wordiness of the site and give us ways to get the same ideas across visually, something that I think really works for our audience.

What has been the feedback on the new design? Did it meet your goals?

Feedback from our customers has been really positive, the site is still recognisable as Perch, which we wanted. It is a lot less “wordy” and demonstrates the benefits of using Perch.

We were a little worried when we started this process that people who already liked Perch would think we were making a big departure from the original product, however the site seems like a progression from where we were – still keeping the fun and staying away from looking like something technical and scary. In that way it mirrors the way the product itself has developed.

The site has definitely added to the feeling that Perch has “grown up” and I’m hearing that kind of sentiment from our customers, which is brilliant as I feel we hit the mark.

We wanted to find a designer who wasn’t afraid to challenge us or suggest we make changes or try new things with the site. We definitely found that person in Paddy, and the whole experience has been really enjoyable.

The finished product

Rachel and Drew were an absolute pleasure to work with on this project. Perch is their baby, but they weren’t afraid to take some chances with the design, trying new things and making bold decisions with the site. From the start, our goal was to make something great for the Perch products that we were all proud of, and that’s exactly what we got. For me, it was such a treat to work on an established brand that I already admired before the project started.

Feedback on Folyo

I also asked Rachel and Paddy what they thought of the whole Folyo experience:

One of the hardest things about finding designers is finding designers who have availability. We know lots of designers however they tend to be booked up for months, so finding someone to work on a project can involve a lot of emailing around to see if someone is interested.

I really liked the fact with Folyo that we could describe the project, the budget and the timeframe and designers were then able to respond who were able to work with that. So there wasn’t the awkwardness of realising our budget wouldn’t stretch to using a certain designer, or the issues of really wanting to use someone but finding they were too busy. The job posting form also helped me to post an accurate description of our project, which I found really helpful.

As designers are pre-screened, we didn’t get responses from people who were entirely unsuitable. As a tip for any designers reading this – a little personal note about why you want to work on a particular project is really important.

We had some responses with either no note at all or an obvious cut and paste one that they send with every response. To be honest I immediately put those to the bottom of the pile when looking through the list.

What sets Folyo apart from other job board services is the high level of quality in the projects listed. It’s not flooded with $10 logo designs like a lot of other online services. These are real, exciting projects with real budgets.

As the list of designers who appear on Folyo are vetted, I imagine from a client’s point of view, it’s great to have be able to browse through quality designers with confidence. I’ve gotten a few projects through Folyo now and the whole experience is great.

The one thing I would change is to increase the number of Dribbble shots you can import into your profile page. I’d love to show off a variety of my work directly on Folyo rather than just one piece

Conclusion

Tutorials are great, but I firmly believe that real-world case studies are the best tool to learn about design.

They confront you with real problems, and you can see how these problems were solved with just a few clicks.

So if you’ve used Folyo before (either as a designer or a company), I will be very grateful if you’re willing share your design process with the community. Just get in touch and let me know!

By the way, you can comment/upvote over at Hacker News, too.