With so many schools contemplating website redesigns and their web strategy for the new school year, we felt it time that maybe we should weigh in. We asked one of our globetrotting consultants who visited a dozen countries across Europe, the Middle East and Asia to give us some thoughts on which of our 225 international school websites make it to the top. Here goes.
Western Academy of Beijing (WAB)
All we can say is: fun! There are a lot of "slick" designs circulating around the internet and plenty of open source templates that scream "boring!" but neither is the case with WAB. The opening video, following a group of eager students, quite literally draws you in as you enter the campus to see what awaits. "Connect, Inspire, Challenge" are strong and inspirational, but they are punctuated by the statement "Make a difference", which is a great way to round out the message.
Perhaps it's also the angles that set this site apart. Websites are often so "square" with a neatly organized grid and lots of vertical and horizontal margins but WAB pushes into this trend in ways that add visual interest to the site.
We've talked ad nauseum about infographics in our blog and they continue to deliver, efficiently communicating a lot of information with a little bit of text. WAB does a nice job of this by conveying key metrics that matter -- "Nationalities", "Student-Teacher Ratio" and others -- all of which combine to clearly spell out "The WAB Difference." Infographics need to be strategic like everything else and WAB does that.
Further down the homepage, the combination of a grid of compelling pictures titled with just a word allow the user to self-select their interest to learn more. This is a school that offers a lot in sports, arts, outdoor education and the like, and this photographic approach covers a lot of ground quickly. It also helps set the stage for student testimonials via the "Student Voices".
The story continues. What happens to WAB alumni? The homepage takes a minute to answer that question with a few featured graduates, perhaps the best way to convincingly share a school's value proposition.
Calls to action, interesting news stories, and a well-organized footer finish the homepage off. There's much more to see and learn at this school, and WAB's site gives you every opportunity to jump off and find out.
British International School of Stavanger (BISS)
With so many websites overwhelming you with a lot of information, BISS by contrast, keeps it simple. This comes to bear in its coat of arms, which the school developed during a rebranding exercise. Coats of arms tend to be packed with ornate symbolic details that your average consumer only interprets as legacy graphic regalia that even the school archivist has forgotten. BISS conveys a strong brand with its updated shield while not overburdening it with meaning.
The navigation at the top provides a manageable number of items to get to the know the school -- keeping this list short is harder than it looks, and we applaud the School for resisting all those inevitable requests to "add this to the homepage". The simple utility navigation at the top also helps — "Parent Essentials" is a great, intuitive label for what parents need.
The large calls to action — "Enquire", "Apply", "Visit" — offer three different ways for a prospective family to engage with the school, each with its own purpose. Parents who simply want to learn more have a path that is slightly different than those who either want to apply or who are ready to pay a visit.
BISS is clearly a beautiful place, and they uniquely convey that with a large photo of campus that's not front and center on the homepage, where instead we see pictures of children, but set well into the footer, which makes sense alongside contact information and useful links. This allows the picture to be large but not dominate the homepage.
Not to be forgotten, the mobile experience, which may be how half of users are experiencing the website, is excellent. The images and content refactor well, and the navigation is nicely tucked into a hamburger menu that expands into a short list that is easy to use. Check it out from your mobile device to see it in action!
Marymount International School, Paris
C'est bon! Marymount's website is a lovely international school website that has also stood the test of time. And, what's more, in the well-executed "bell and whistle" category, this is one website that does a terrific job of parallax scrolling, a whistle that often gets blown at the wrong time. The "reveal" of large format high-quality pictures of children provides a continuous reminder of why this school is here in the first place and the core messages such as "Creating Unity through Diversity" and "Inspiring a Lifelong Love of Learning" help anchor important core messages.
We also appreciate the single panel that combines an animated, looping infographic, a testimonial and the school's mission statement, uniquely articulating the school's value proposition succinctly. The faded emblem is a nice design touch to break up the white space.
Specific, real facts about what's happening on campus can often drive a point home far better than any well crafted school philosophy. In this case, a photo with text overlaying that reads "Students collect over 100 warm winter clothes" is an excellent example. The first on the homepage is a teaser, then there's a full row of them that put action over words.
In terms of navigation, color is always a welcome addition to help differentiate each section and instruct the user on where to go. Bold, solid colors provide high contrast to both the homepage it's covering and for the text links.
What's more, this color is carried throughout each section, effectively branding it accordingly to help keep the user oriented without being intrusive. Additionally, the responsive version is well developed, carrying the color like its desktop equivalent while structuring the content elements appropriately. Great work!
This has to be one of the best websites in the Middle East. It's visually striking with a uniquely personalized path that allows prospective families to choose their own adventure. We love the commitment to segmenting audiences, pushing current parents to the only other available option in the top right alongside the hamburger menu that contains the traditional area navigation.
This is also one of the most interactive school websites every launched. Users can preselect broader interest areas when they first arrive, which in turn drives the content of what they see below. As you scroll, elegant, full-screen design panels layer strong photography, short compelling messages, calls to action and next steps to engage the user further down the path -- all combining to provide an immersive experience. The strategic use of white space helps focus the eye on the important areas of the page while helping to augment the bright colors in the pictures. Additional horizontal scrolling leads to complementary panels that cover a different aspect of the topic, providing a sense of depth to the content.
Calls to action toward the bottom are meant to direct users to the "Admission Guide" to make it obvious what to do next, whilst finishing the page with a tailored search that catches a user in case they didn't get what they expected.
The footer does a nice job of laying out easy-to-read contact information, policies and commonly used links in a way that is not overwhelming and easily accessible.
Singapore American School (SAS)
As one of the largest international schools in the world, Finalsite was challenged to develop a school website that could serve such an important institution in southeast Asia. It's easy to put this in our top five given how much there is to see and learn without stepping a foot on campus.
This website combines best practices on most every front. One place to start, though, is to visit their timeline, which captures a rich history in a graphically elegant way; the school cleverly linked directly to a "SAS by the numbers" page which reinforces a legacy of success and growth. Unlike a lot of infographic pages, this design provides charts of important data that are also supplemented by impressive numbers and graphics.
The variety of ways these bits of information are relayed, such as this single message overlaying an image, gives the user multiple paths to understand the school and breaks up what would otherwise be a sea of icons and numbers. This single page covers all facets of SAS and takes the user through a journey of success and achievement -- who wouldn't want to go?
Back on the homepage, SAS tells its story through short panels that come alive with color and animation, organized in a way to direct the user appropriately to a next step. Being such a large operation, providing large buttons inviting prospective families to self select their division makes it easy and clear where to start.
"10 Reasons to Join SAS" is a fun and simple way to engage visitors with a quick navigation through some interesting facts and points that drive their message home. A great website!
I hope these schools have inspired you to do something new on your website. Let us know if you're looking to take your website one step further and ask for a free website audit.
ABOUT THE AUTHOR
Angelo graduated valedictorian from St. Paul's School in Baltimore, MD and from Princeton University. Despite getting his degree in creative writing and English Literature, it generally takes some doing to keep him from programming and breaking websites. Just after graduating, he started Silverpoint, and grew it to over 300 schools worldwide before merging with Finalsite in 2013.