Redesigning the CollegePlus Home Page

Or

"Design is more than making stuff pretty"

February 20th 2015

About 7 months ago I started on the long road of redesigning the CollegePlus website. As anyone who has worked on a website redesign before will attest, it was suffering from the bloat that comes from long periods of inattention.

Ideally, design is a process starting with a blank slate and building up. However, in the case of a redesign it's more a case of reduction to remove accumulated parts that are assumed necessary. It follows that, one of the most difficult parts of a website redesign is overcoming the expectations of stakeholders based on years of experience with previous designs.

We started with a collection including 130+ pages of copy, videos, promotions, marketing campaigns, and defunct partnerships. More specifically there were at least a couple dozen top tier pages. This made for a confusing user experience. I could talk for hours about the project, but for now let's focus on one thing.

The Home Page

It was clear from the beginning that this was more than just a layout change. The page had problems in its color pallet, layout, typography, and overall purpose. However the biggest problem was this...

It doesn't look like much! However, it represents the main source of visitor confusion on the site. If you clicked the left button you'd stay on the main site but if you clicked the right button you'd be moved into what essentially was an entirely new site.

Although the button looks like you are choosing between two different products you were actually choosing between two different brands.

The analytics showed that splitting traffic like this just wasn't working for us. At first I thought it was just the design's fault so I started mocking up variations that would hopefully increase conversions.

It just wasn't working though!

It continues to surprise me how blind we can be to the obvious problem. In retrospective it is clear this homepage shouldn't have been splitting traffic, like we were trying to but it took me quite awhile to realize this. When I finally did things started moving.

Here's an early concept for a single purpose homepage. Notice however that the 2nd button from the original design is still sticking around as a small text link in the lower left corner. It's hard to convince product stakeholders to change sometimes.

NOTE: Video background was awesome but unnecessary. If you want to make one here is a good starting place.

At this point the design had undergone a massive change but still had some unnecessary pieces.

If the page wasn't focusing on the 2nd button then why did the link need to stay on the page? Did the homepage really need a video? If the main headline was reworked did we need a secondary level of copy?

With those questions in mind I started heading in a very different direction. Trying to keep it in it's simplest form. Just copy and a CTA.

But wait! Is that really going to be enough to draw the visitor into the content? What I needed now was a simple way to give a visitor a peak into our product without overwhelming the with copy. This is where Ruthie , our graphic designer, stepped in.

Those small illustrations were just what we needed to give visitors a quick idea of what we do.

I tested this in a Usability Hub 5 Second Test where users were shown the design with copy and illustrations. Amazingly the majority of users tested could understand something of what we did in just 5 seconds. This was unprecedented in the history of our product. It's a complex one! And it had always been difficult to explain even in person, let alone on the web.

The rest of the page fell into place quickly. Including three sections of high level copy about the purpose of the company, matching illustrations, and then finally a CTA to sign up for email updates.

The Results

Now that the redesign has been live for some time and had thousands of visitors we can look at the data.

The home page already had a low bounce rate at 36.42% however after launch the new site dropped that by 2.99% for a new low of 35.33%. Interestingly enough mobile traffic saw an even bigger drop of 3.90% in the bounce rate. I think this is mostly due to an increased mobile optimization and much clearer mobile CTA's.

Another interesting result shows up in the heat-maps from CrazyEgg. Although the new homepage has had many less visits than the old one there are definitely enough for a comparison.

We can clearly see that the new design has focused user's clicks to a few areas. This has improved the conversion rates and lowered the bounce rates.

The more qualitative results were even more interesting. The feedback from various surveys and conversations with visitors showed that more than ever before people could easily understand what we do. They felt that the brand was trustworthy and they could easily find the information they were looking for.

Conclusion

This was a great project that extended far beyond just the home page. In total it was six months work over dozens of pages and a custom Rails CMS.

Technology Used

  1. Rails w/ Postgress
  2. Haml
  3. Sass w/ Bourbon and Neat
  4. SVG system built with Grunt
  5. Velocity.js for animations

Not a solo effort!

I worked with the great team of fellow designers Julian and Ruthie , developers Mark and Nathan , and support from Josh and Michael.

Hopefully I'll get the time to write about some of the other parts of this project. If you have any questions or feedback I'll be on Twitter.