ESMS

An design overhaul of the Erskine Stewarts Melville schools website.

The background

Erskine Stewart’s Melville Schools (ESMS) is one of the largest independent schools in Europe, based in the heart of Edinburgh and a client of Story UK. When it was clear that they required a  new website, we were more than happy to help.

The old website was extremely outdated, and lacked a lot of functionality was now required in order to allow parents – both prospective and existing – to communicate with the schools effectively.

As part of this project, I was involved in the protoyping, design and build of the website and application management system.

Getting started

Following on from research that was carried out to ensure the brand was positioned correctly amongst its competitor base, I began to create the user journeys and personas. Careful consideration was taken to ensure the new website would meet the needs of prospective parents as well as other key audiences looking to engage with ESMS digitally.

Once these had been created and approved, we moved on to creating the interactive wireframe for the website.

The creation of these allow us to communicate key areas of the website journeys to the client, as well as provide a solid base upon which to refer the backend developers to. I tried to cover off the key journeys in an agile approach, focussing on one or two, and then building the website up from there.

At the end of the prototype stage, the whole website had been wireframed. We tested key journeys with respective audiences, and after a few tweaks were made, the prototype was finalised.

Design concepts

From the very start of the project, ESMS made it clear that each of the schools has a different colour palette:

  • Nursery & Junior School: Yellow
  • Mary Erskine (Girls School): Blue
  • Stewarts Melville (Boys): Red
  • Sixth Form: Purple

Whilst this didn’t really present any major problems, it was something to consider when approaching the design phase. How would we communicate this on the site, without the end result looking like a rainbow. In the end, we applied each colour to their respective sections, and used them sparingly within each. Aside from this, the concepts didn’t really present much of an issue.

The content on the site is informative, and as such, the layout of these pages took care of themselves. The gateway pages used a card based approach to show the sub pages within each section, but beyond that it was all fairly straightforward.

The build

Similarly to the design stage, the build of the ESMS website was self explanatory. There were a few templates that needed to be styled and designed, but the vast majority of the interface was simple.

The mobile menu needed to work effectively to allow users to find deeper content pages, whilst the rest of the site needed to allow easy navigation between sections.

Based on the feedback that we’ve received, this has happened and the finished site is a vast improvement on what ESMS had in place before.