31three

, Ontario Canada

Jesse Bennett-Chamberlain — Friday 6th March, 3:22pm

Building Campaign Monitor Part 3 - Design Process

Jesse from 31three treats us to a fascinating look behind the scenes of a large scale commercial design project.

Since the last two posts in the ‘Building Campaign Monitor’ series were so ~~incredibly dull~~ technical, we thought we’d lighten things up a bit and go for some pretty pictures instead :)

The gorgeous design for the Campaign Monitor site was expertly handled by Jesse Bennett-Chamberlain from 31three - someone who needs no introduction in web design circles. Jesse has been responsible for some incredible designs in his career (including the current ExpressionEngine site), and the Campaign Monitor site represents the current pinnacle of his achievements (in our opinion).

It’s a great privilege to be able to share Jesse’s fascinating insights into the Campaign Monitor design, and we hope you appreciate his first guest post as much as we do. Over to Jesse… —Wayde.

Nervous beginnings

It was around a year ago that I received an email from David Greiner at Freshview asking if I was available to design a new website for Campaign Monitor and MailBuild (now superceded). When I first read through the request, I felt quite nervous at the thought of redesigning a website that was already esteemed within the design community. Knowing that I was going to be designing for another talented designer didn’t make things any easier either. I was nervous, but not nervous enough to pass up the opportunity.

First steps

A couple of months after our first discussions, Dave kicked off the project by sending over a thorough creative brief. In the first couple of pages, he outlined two main goals for the site summed up here:

“The aims of the new site are to maximize new customer conversion and encourage repeat business from existing customers through good articles, resources and a thriving customer community.”

In order to work towards these goals, one of the features we originally tried to execute, was the ability to have two different home pages: one for new visitors and another for existing customers. The idea was that new visitors would see a page with compelling product information and a clear sign up method, and existing customers would see tips and tutorials on the product as well as business advice that would encourage them to use the product more.

For my first attempt at this, I broke the content area into two seperate sections titled “The Product” and “Getting Started”. New and existing customers would have access to both areas, but a cookie would determine which one they defaulted to. The problem with this method became apparent while trying to decide what content would go in each tab. A lot of the items that would be featured on the “Getting Started” page were actually great selling features as well. Having the same content repeated in these two different tabs didn’t seem like an ideal solution… so we eventually decided against it.

From there I took the basics of the first wireframe, removed the two side tabs, and changed it up a bit, arriving at this design comp. Dave originally wanted to go with a large main banner area that showcased some of the key features of Campaign Monitor in a multi-paned approach. The mockup below had enough room for the product descriptions in the banner, but because the additional panes were hidden, it also meant many of the compelling features were hidden. Not good.

In this comp, I removed the features from the main banner, and placed them down below. I also included some large links with descriptions so that the features wouldn’t get lost behind a small indicator. This approach was better, but still had some weaknesses. The pricing would only show up on one pane, and wouldn’t be visible all the time… something we felt was important.

I was flipping through iStockphoto looking for images and ideas when I saw the paper airplane image. I thought it might make a cool graphic for the site, so I followed my creative impulses and quickly mocked something up.

Sometimes these impulses work and sometimes they don’t. This one didn’t.

An end in sight

The next few revisions convey a fairly standard progression of slight tweaks and modifications. I won’t outline each one, as the changes were too minor to justify commentary. The main thing we wrestled with was trying to find the balance between focus on new versus existing customers.

This next design comp was actually slated to be the home page to move forward with into implementation. It even went so far as to be entirely coded up by the team at Newism.

A couple of weeks before the site was due to go live however, Dave IM‘d me and mentioned that he had some new ideas for the home page. He sent over a quick sketch of what he was thinking, and that sketch translated into this next and final version.

I think we both looked at the home page for so long, that it became difficult to see it objectively.

Designers: sometimes you need to take a bit of break and come back to things at a later time.

If you had access to my original files, you would notice that several pages on the live site look a bit different than the files I provided. You would also notice that any tweaks that were made improved the site quite a bit. It’s a rare thing to see design work actually improve throughout the development phase, and I have to give Dave and the team at Newism a ton of credit. They did an amazing job at putting this project together.

The end result

A pretty design wasn’t the goal of the site though; improved conversion rates and repeat business were. I asked Dave for some recent stats and this is what he emailed back…

“As far as site performance goes, our conversion rate more than doubled immediately after launching the new site, and has actually improved by more than 50% since then. The reason for this is because there were lots of people checking the new site design out after the first week that weren’t necessarily interested in the product. Now that’s died down to more targeted traffic and the conversion rate is even better. Very cool!”

Overall I’m extremely pleased with how this project turned out, and if you ever get the chance to work with David or the guys from Newism, do it. Wonderful, wonderful people.

Thanks to Jesse and a reminder about the competition

A great post we’re sure you’ll agree, and a nice relief from the highly technical stuff that’s been written about in this series so far - *sheesh*. This post was a small diversion from the advised telecast, but as promised, the next post in the series will be all about ExpressionEngine templates. Brain explosion!

Many thanks to Jesse for his insightful contribution and our continued thanks to Freshview for allowing us to document the project. We hope everyone is enjoying the series as much as we are enjoying writing it.

Finally, we’re running a competition in conjunction with these posts (more about that here). There is almost $3000 in fantastic ExpressionEngine licenses and modules, Campaign Monitor credits and learning materials up for grabs, so we encourage you to get involved. There are several ways you can enter, and you can enter multiple times:

Tweet about the series (click here or include the hash code #buildingcm in your tweet)
Digg any blog post in the series
Bookmark any blog post in the series on Del.icio.us
Leave a constructive comment on any post in the series
Subscribe to the RSS feed (click the secret link in any RSS article and leave a comment in our hidden blog post to register your entry)
Subscribe to the newsletter (sign-up form at the bottom of this site)
Forward the newsletter to a friend (you can do so after signing yourself up)
Write a blog post about the series and ping us

Comments

The following 41 people were compelled to have their say. We encourage you to do the same.

Cameron Senior said on Friday 6th March, 4:48pm: 1

This series just keeps getting better!

It goes to show how important open communication is between designers and clients. Great design!

Cheers,
Cameron
Harsh said on Friday 6th March, 7:00pm: 2

This is really interesting. I’m wondering if you thought of doing an a/b test with these versions or a small portion to make decisions? eg on your primary call to action you have explored various phrases: Sign up for free, Sign up, it’s free, Create an account. Create a free account…
Bene said on Friday 6th March, 7:01pm: 3

Excellent article. Good to see the progression in the design ideas… and the final website is looking great!
Ahad Bokhari said on Friday 6th March, 7:16pm: 4

Excellent design process you all have going…It shows that you care alot about your product.

I love all the designs especially how you added simple UI elements with each progression.

LIM Less is more!!! Best of Luck to you.
Mathew Patterson said on Friday 6th March, 7:57pm: 5

Fantastic to see Jesse’s overview of the process, even for us here at the Campaign Monitor team!

@Harsh - we are actually already running A/B tests on various components of the website, nice one.
twitter.com/astralalien said on Friday 6th March, 9:55pm: 6

Looks Sweet! I don’t want to sound like a dumb-know-it-all, but isn’t email dead?
I seriously havn’t checked my email in weeks, whereas I check my social media connections hourly.
The concept is still excellent, keep up the good work
Matt Bee said on Friday 6th March, 9:56pm: 7

It would be interesting to know how much consideration of how the build would be accomplished during the design phase. I always find that having the front end developer on hand to work with a designer always adds value and smoothes the development process.

I think the new design is outstanding by the way.
Matthew Smith said on Saturday 7th March, 1:39am: 8

As I begin to work on larger projects, I always find it incredibly insightful to have pieces of a process like this revealed. It builds up the industry. Well done. Thanks Jesse. Great product and great design.
Brad Haynes said on Saturday 7th March, 3:04am: 9

Beautiful design and beautiful write-up! Very interesting about the a/b testing. It’s something we’re digging into more at work. The guys over at 37signals have been exploring this as well. You can read more about it here: http://is.gd/fJ8Y. Keep up the good work!
Adam Smith said on Saturday 7th March, 3:11am: 10

Jesse’s projects always blow me away and this one is no exception. Thanks for showing us your process… I’ve gotten so much out of reading about your process for Campaign Monitor and ExpressionEngine. Keep up the great work!
Michael Jackson said on Saturday 7th March, 4:44am: 11

@Jesse: I’ve been combing through pieces of the Campaign Monitor redesign ever since it was launched. It truly is an inspirational piece of work, and there is a lot to learn there. From the way you composed the graphics to the semantic markup, it’s a true font of information. I love how the main H1 on the page takes up the entire top section, including the “100% rebrandable”…remarkable.
Shannon said on Saturday 7th March, 7:34am: 12

I’m curious about what Jesse completed on the site vs. Newism. Did Jesse do the design, as well as the html/css markup? Or did Newism do that part?

Jesse, your designs are fabulous. You have a way of putting a lot of information on the page, without it looking too cluttered… and they end up looking very pretty too.

I know this series is supposed to be all about EE, but it might be nice to have some css tips too. In my opinion, EE is a breeze compared to css. But, that may be because EE is really fairly easy to work with once you get the idea and css is made more difficult by browser compatibility.

Also, I’d argue that email is far from dead. I’m actually surprised at that comment. But, I suppose Twitter marketing will be the next greatest thing…. “Sign up for our Twitter campaign and we’ll send you annoying little tweets all day about the products and services we offer”. Won’t work for me though. I’m staying away from Twitter for as long as possible… something I should have done with facebook.

Don’t bet the farm on these social networking sites. Most of my friends have tried out facebook and barely interact on it anymore. Mind you, they are mostly all over 30, but I have noticed a decline even amongst my teenage relations.
Leevi Graham said on Saturday 7th March, 10:37am: 13

@Matt Bee: Jesse designed most of the site before Newism was involved so we didn’t have any input about how it was going to be built until we got the majority of the screens. That said Jesse also codes so I’m sure he kept the build in mind as he was designs developed.

There were a few minor changes to the design as the site was developed but the end product is 97.65% reflective of Jesse’s design.

@Shannon: Jesse worked with Dave and the team at Freshview to complete the designs. We (Newism) then took the Photoshop layouts, built the HTML / CSS and implemented ExpressionEngine.

All three parties worked closely during this phase to make everything perfect.

@Shannon: Wayde is planning to post some of the gold CSS techniques we used during the build so stay tuned.
R.Bhavesh said on Saturday 7th March, 9:41pm: 14

jesse is a gifted, talented hero. The best web designer out there in my opinion. Thank you very much guys for this detailed post.

Its always nice to take a look at the process of such complicated and famous site. It inspires
Drew Tufano said on Sunday 8th March, 11:54am: 15

Great series guys! I’ve really enjoyed reading these articles, and learning from them. You guys rock!
Damien Buckley said on Monday 9th March, 5:43pm: 16

Thats a fantastic insight into your design process - everyone can learn something here for sure - keep it coming.
Kandace Brigleb said on Tuesday 10th March, 4:01am: 17

Thanks for posting these - I always enjoy learning about the details behind design decisions. I must say, there is just something special about those earlier case study focused mockups that we here at Needmore Designs just adore!
Matt Radel said on Thursday 12th March, 12:28am: 18

I love to see process oriented posts…makes me feel better about where I start. :)

Great stuff - thanks for sharing!
Hasnain said on Thursday 12th March, 9:17am: 19

Contest or not, this series is just GREAT! Keeps getting better! Thanks!

Jesse, you know you’re single-handedly making Gotham & the Classic Icon Drawer icons ubiquitous? Double edged sword: Both are great tools, but both are also popping up everywhere…
Steven Grant said on Thursday 12th March, 11:01pm: 20

another fantastic look at Jesse’s design process.

Great to see his revisions also, very refreshing.
Jesse Bennett-Chamberlain said on Friday 13th March, 12:20am: 21

Thanks for all the kind words! I’ve had my head buried in my latest project, and forgot to come back here and check for comments.

@Hasnain Thanks for the Gotham & Icons comment… I needed to hear that. I promise my next project will have neither. :)
Steven Grant said on Friday 13th March, 12:36am: 22

@jesse - oh I’m intrigued at what the next project will be. How’s your own church site getting on? We’re just about ready to launch ours - waiting on that final content.
Cameron Senior said on Wednesday 18th March, 11:29pm: 23

Back again! Just coming back to the article to read again.

Just wondering how communications, reviews etc were managed between @jesse, Newism and freshview?

I usually subcontract the design of sites to a 3rd party designer, and would like to hear more about the organisation of the project with a similar distributed model as I usually have.

Might be a bit of a red herring kind of question, but thought I’d ask!

Perhaps an idea for another article in the series?

Cheers!
Zac said on Saturday 21st March, 12:55pm: 24

It is amazing how much detail and how many iterations went into this design!
Floris Baan said on Sunday 29th March, 5:40am: 25

Whoa! Nice to see all those different mockups. The final result is looking extraordinary! Nice to read this article!
Josh said on Thursday 9th April, 4:38am: 26

Great job on this design Jesse. As always, you’re designs are beautiful and thoughtful. Glad to hear that the conversion rates are so high with this redesign.
Rob said on Thursday 9th April, 12:05pm: 27

Nice redesign. What icon set did you use for the sidebar navigation on the live site? I’m referring to the ones in the screenshots above under the section “An end in sight” (before the Classic Icons start showing up.) Those are slick!
M. Mucha said on Wednesday 22nd April, 7:49am: 28

Thanks for sharing with us Jesse. Getting a glimpse behind the curtain at the process is always a treat. I’ve learned a lot about layout and wire-framing from getting to see this process; the push and pull, and ultimately the realization of these wonderfully usable and graphically beautiful layouts.
Aaron Martin said on Wednesday 6th May, 5:20am: 29

This whole series has been impressive, but I think this article interests me the most. I always love seeing complete design processes. As a designer myself, I see great designs online and you always default to thinking that it was designed that way initially. We all know that’s rarely the case, but it’s nice seeing the proof in stepped out fashion.
David C said on Friday 22nd May, 8:27am: 30

“A couple of weeks before the site was due to go live however, Dave IM‘d me and mentioned that he had some new ideas for the home page. “

I love this line. I do this all the time with my designs and the the change is for the better. It’s great to hear that even 3 weeks before the launch you were willing to make a drastic change. The homepage came a long way from the first comp. Thanks for sharing.
Chris Strom said on Saturday 1st August, 2:55am: 31

Thanks for sharing your design process with us. The final site looks brilliant, and really does a great job introducing and explaining their product. Fascinating story behind the final design as well. Will you be writing any more about this?
Murtaza said on Sunday 18th April, 2:44am: 32

I love jesse’s desings, He is such an amazing designer
Eropharsoarse said on Sunday 15th August, 8:08am: 33

Very Interesting!
Thank You<a >!</a>
Wadaevesque said on Saturday 23rd October, 5:03am: 34

Hi, very good post, thx<a >!</a>
Corblooto said on Sunday 28th November, 3:24am: 35

Willkommen und Hallo im Erotikchat.

Der Erotikchat bietet ihnen eine Möglichkeit erotic kontakt und jedemenge andere Sachen,wie erotische Rollenspiele
Hier in unsrem Erotikchat erwarten dich erotic kontakt Blind Date
Suchst du Heiße Live Chats , dann bist du hier genau richtig.Ok,los gehts,stellt sich die Frage,worauf wartest du?
Heiße Live Chats schöne girls ,einfach anmelden .
Du suchst jemand in Freiburg, in Lübeck, vieleicht von Essen , vieleicht in Basel-Landschaft, oder von LaTour-de-Peilz? Mit Sicherheit kein Problem.!
Yeng71 said on Tuesday 14th December, 5:56pm: 36

a “journey of design,” as quilt artist, teacher, and author, Gloria Loughman, pass4sure N10-004, pass4sure EX0-101, pass4sure 350-030 shares the process and methods she uses to capture the natural beauty of her native Australia in her amazing, dreamlike quilts.
david bill said on Saturday 15th January, 10:16pm: 37

Great job on this design Jesse. As always, you’re designs are beautiful and thoughtful. Glad to hear that the conversion rates are so high with this redesign.
MB2-633|70-089|70-235|70-237
DISalvador said on Saturday 29th January, 7:10am: 38

Hi everyone, it’s a nice place :-) I’m really happy to be here. I’m new on the net and I hope I’m here with you for a long time. <a >gorge profonde</a> Few words in french for my friends ;-) And happy new year !
shawnlee said on Friday 11th February, 11:00pm: 39

This whole series has 000-968 been impressive, but I think this article interests me the most. I always love seeing complete design processes. As a designer myself, I see great designs online and you JN0-332 always default to thinking that it was designed that way initially. We all know that’s rarely the 70-516 case, but it’s nice seeing the proof in stepped out fashion.
Aaron Martin said on Wednesday 6th May, 5:20am: 29This whole series has been impressive, but I think this article interests me the most. I always love seeing complete design processes. As a designer myself, I see great designs online and you always default to thinking that it was designed that way initially. We all know 70-682 that’s rarely the case, but it’s nice seeing the proof in stepped out fashion.
brian50058 said on Tuesday 15th February, 5:09pm: 40

This whole series has been impressive, but I think this article interests me the most. I always love seeing complete design processes. As a designer myself, I see great designs online and you always default to thinking that it was designed that way initially. We all know that’s rarely the case, but it’s nice seeing the proof in stepped out fashion000-106 - 642-973 - 642-691 - 000-977 - 312-50
s10 webdesign said on Thursday 4th August, 9:21am: 41

The designs posted here are really goodlooking , if only all designs were like this