Are you planning an education website redesign? Great. This blog post will help. Whether you’re in a marketing postion or a key influencer in the decision, this will be a valuable way to spend 10-12 minutes.

Let’s start by saying this: Education sites are on the up. If you’ve been on any website for a major college recently, you’ll have probably noticed that serious investment has been made. It makes sense. The current school going generation are seriously connected to the digital world, and the generation after them will be Apple Watch, Google Glass wearing, tech super nerds. But the point is – schools and colleges get it; websites matter. In fact the latest study from Bluehost stated that;

“75% of people cited web design as the #1 factor in determining the credibility of a business or organization.”

That might be sobering but hopefully useful information to know.

Our latest project taught us so much about redesigning an education-based site, that we thought we’d share our process and learnings – from planning to launch. We are not claiming it to be THE definitive guide or the only way to skin a cat. But this step-by-step guide will highlight the key fundamental stages, and give you valuable insight with helpful resources for a successful education website redesign. Let’s get started.

Background / Brief

Our particular case study is Summer Academy. A successful academic program based in the Twin Cities since 1978, that offers high-potential students 50 imaginative classes designed to challenge students from 1st to 11th grade. Because of the Program’s popularity (they fill all 1,100 places every year), the goals for the redesign were not centered around acquiring more students, but about serving existing students and parents better. That said, if your aims are about increasing inquiries and student counts – read on, there’s still plenty of goodness ahead.

Step 1: Discovery & Planning

The goal of the Planning and Discovery phase, is to clearly understand the organization. What it is, what it does and what it does differently. What’s the special sauce? Secondly, to articulate the mission – where do you want to go? Next, you need to establish realistic primary and secondary goals for the website. *emphasis on realistic. This requires input from key decision makers, honesty, tough decisions and in most cases compromise. Have this conversation internally, then with your developers.

The results of these discussions are critical in shaping every key component of the website. The focus of the site, navigation, information hierarchy, the page layout and calls-to-action.

The last stage of planning is creating a sitemap and flow diagrams. You want to map out the technical structure of the site and the key user/buyer journeys and actions. We love using giant post-it notes but wall-sized glass-boards work well too. #hipster 😉

Wireframing is also useful and popular with lots of agencies, but for smaller projects this stage can often be skipped.

For Summer Academy, we were able to review their existing website and Google Analytics data. This helped inform the site structure, navigation and layout to match the habits and needs of their current users. Whatever resources you have to understand what currently works and what doesn’t – use it.

Step 2: Get Creative

The most exciting and potentially the most divisive area. A word of sage advice – nominate a project manager from the outset. Someone that has the final say. Successful redesigns and big committees don’t mix.

Schools and colleges usually have their own colors and usually an emblem. That’s a great starting place. Then some inspiration sites from both sides are useful as well as discussion what is liked and why? Current web design trends are also useful as relevancy is a strong currency to web users. It’s worth stating that creative freedom and design features will be dictated by two main factors – budget and the ability of your web designer/agency.

Can we see it yet? Aww… c’mon!

For Summer Academy we started the creative with the logo. We knew that the contemporary look of the new site combined with the focus on mobile-friendly design meant a new logo was needed – thankfully the client agreed. We took the original eye-catching colors as a reference and went for a bold, clean logo using the serif font Cambria. 

Step 3: The All-important Homepage

There are differing opinions circulating on home page design right now but we still hold to the traditional approach of designing the homepage first, instead of last. For us, starting with the homepage helps establish priorities, site focus and information hierarchy. The homepage is still the most common entry point for the majority of websites, even though it’s not typically the page users “convert” on.

As you’ll see from the before and after comparison, for Summer Academy’s homepage most of the original elements remained, but the look and feel changed significantly. Our focus-driven design principles meant reducing the visual complexity (like large paragraphs of text), in order to enhance the ease of comprehension.

Less clutter and more clarity = happier people.

Original Homepage

New Homepage

Step 4: Primary Objectives and Big Wins

One of the philosophies we’ve always had is “find the big wins.” What are the low-hanging fruit for improving conversions, the user experience (UX) or communicating brand values better?

For Summer Academy, one of the big wins was the class selection process. They offer over 50 classes! Everything from Japanese culture to Myth-busting. Traditional subject categories wasn’t an option. So we took the class listings from a single column layout, with expandable content areas, and introduced “featured boxes” in a 3 column layout. These were still filtered by grades but now they connected to dedicated class pages.

Technically, we built on a Bootstrap 1170px grid. 1170 pixels provides a nice big canvas to display content for desktops whilst also having elegant break-points as you shift down to smaller devices.

Class Listings BEFORE

AFTER

Step 5: Calls-to-Action

If someone were to ask us – what is the single biggest thing missing from the websites we review? It would be a lack of calls-to-action – no contest. It has definitely improved in recent years, but it’s astounding to us, how site owners and web designers have either poor quality or simply non-existent calls-to-action. Every user needs to understand “what do I do next?”

The progression of that, is the fundamental need to understand something Oli Gardner has been shouting about for years – attention focus ratio. In plain speak, it’s about less is more. Delighting users through relevancy and simplicity of choice.

So, for Summer Academy, these high-level principles resulted in a (nice and bright) call-to-action area at the bottom of every page. With clear sign-posting, some helpful notes and two relevant options.

Talk is Cheap Money Buys Houses. aka Results!

Summer Academy achieved 870 registrations (80% of places) on the first day of registration. Within 2 and a half days they were full. The previous year it took 11 days. As we launched the new site during the build-up to registration opening, we were able to track and compare the email subscription sign-ups from the old website and the new website.

“The new website improved email subscriptions from 60 sign-ups in 17 days from 1319 visitors, to 78 sign-ups in just 5 Days from only 732 visitors!”

In other words, we were able to achieve 74% increase in email conversions in a third of the time, purely through improving the UI/UX design. From a registration perspective, we managed to achieve a 367% (year-on-year) improvement, with no increase, or notable differences in marketing or promotional activity.

Email Sign-up BEFORE

Email Sign-up AFTER

Step 7: Mobile-friendly

We could write a book on this topic (and people have), but there’s a gulf of difference between a “responsive” website and a site developed with a mobile-first methodology.

(Non)Newsflash: Mobile is important. We’re on our smart-phones a lot. Like. Lots. In 2009 we stared at those little glowing screens (on average) just 20 minutes a day. In 6 short years we’ve ramped up our usage to 2.8 hours a day. Combined with our desktop use, that’s an average of 5.6 hrs of screen time a day. Which means, short of an incredibly unlikely mass cultural revolt, we recommend placing the mobile experience right at the top of your agenda.

Although we’ve been designing responsive websites for years, Summer Academy was our first “officially” built with mobile-first design. And it was game-changing. The attention to detail and quality of the user experience we were able to achieve was incredible. Not only does this mean many happy visitors for Summer Academy, but we also love using and showing off the site on a tablet or mobile phone, as much as our beloved 5K iMac Retina.

A Bit about Growth Driven Design

For colleges this is probably a given but even for smaller institutions – the days of “one-and-done” are gone. Even with all the improvements we achieved with Summer Academy, there are still plenty of improvements we wanted to make.

Growth-driven design (GDD) is a smart approach (and mindset) that breaks away from the traditional cycle of redesigning every 2-3 years for a model of continual and incremental improvements. It removes the idea that you can get everything right first shot. Understanding that with the current pace of change, organizations are constantly needing to not only add content, but adapt and change – and their websites need to reflect that.

That’s It That’s All

Check out Summer Academy and if you’re planning an education website redesign or designing a new school website – we’d love to know if this article was useful in the comments.