.svg){kind=logo}
Nessy: Accessible Digital Education Resource
Nessy Learning
Nessy has been the world leader in making fun, educational software for children since 1999, developing a global reputation for exceptional quality along with a strong and unique brand.
Therefore, it was paramount that such an awesome brand should have an equally awesome website to showcase how great Nessy is to its global community and those interested in learning more about the Nessy identity. However, the existing website didn’t truly capture the creative essence of the Nessy brand, nor did it work hard enough to showcase the successes of the core Nessy Learning programs. The Nessy identity had outgrown its site and needed something new.
The team at Nessy weren’t quite sure exactly what they wanted this new site to be. This is where Clock came in…
The first step in helping to create a new front-of-house for Nessy was to work with the team to identify their current frustrations with the existing site, the shortcomings and what the dream website would look like. If we shot for the moon and landed among the stars, that’d be a great place to be for a brand that wanted a site to reflect their impressive global reach.
Starting with multiple workshops, we worked closely with their executive team and multiple departments within the company to get a sense of a site that would make everyone proud. The workshops included; empathy mapping, user mapping and content mapping.
The key goal here was to find what the primary user action needed to be, where did Nessy want users to go. What journey did we want to take the user on, what parts of the site did the team want to be easy to discover.
This step was crucial as it gave us insight into what Nessy wanted the site to be and the metrics they would look for to define its success.
Following the discovery process, the first key step was to decide how to approach the design of the site.
The new site obviously needed to reflect the strong Nessy brand, but it also had a practical responsibility to ensure users could easily navigate the previously labyrinthian content of the old site. It also needed to consider the multiple user types. Not only is Nessy a source of information and help for parents of children with dyslexia but also teachers and crucially, the children themselves. It had to be informative, it had to be clear, but also fun and engaging for the children who will go on to use the platform themselves.
To that end, the first step was a UX sprint, focusing on the navigation itself and the user journey to make sure that finding content was intuitive and accessible for each user group. Once the core structure of the site was defined, it was then a case of finding a way to weave in an element of playfulness to the site.
Thanks to Nessy’s amazing creative team, we had a plethora of assets to work with, making the design process a joy. The underlying idea was to create a world for Nessy, using changeable background colours and headings to create the feeling that each product page and section of the site was its own world within Nessy. The assets would blend into the pages of the site to create the sense that the asset continued long down the page and into the footer.
However, we couldn’t get too carried away with pure visuals. Given the site is an important source for children and parents of children with dyslexia, accessibility and readability had to be at the forefront of our minds. Something that the site's Google lighthouse scores reflected on launch with a near-perfect 98 for accessibility.
As exciting as a design can be it is often only as good as those who can deliver it. The structure of our departments meant Clock’s development team were involved in every step of the design decision making which helped us to seamlessly prepare and transition into build. The impressive brand assets supercharged the creativity within the team, allowing us to push the designs further by adding unique rollover effects and little easter eggs hidden across the site that helped to really bring to life (keep your eyes peeled on Nessy in the top logo!)
The build also needed flexibility in both the colour schemes of each page and the functional options available to the Nessy team. They wanted to be able to create a number of different pages with subtle differences that helped to provide variety to keep their audience engaged.
While functional, Nessy’s previous WordPress CMS forced a workflow of nesting and bolting new sections onto existing areas. Although it helped the Nessy team display content, it created a maze of nested sections that were both hard to navigate and difficult to maintain without long standing knowledge of the platform.
Clock’s custom-built, widget-based system was purpose-built for exactly what Nessy needed. We were able to create a flexibly diverse set of modules that allows the Nessy team to use them as building blocks to create a wide selection of pages. The CMS structure also keeps the articles and sections in check to ensure the wide range of sources and crucial content aren’t lost in a labyrinth of navigational headers.
New Nessy and Old Nessy
Another important facet of the site would be its need to cater to audiences from a multitude of countries. It was crucial as an educational site that even the nuances of difference between British and American English were reflected on the site, to ensure accessibility for those who had been taught from either curriculum. This was achieved through clever instancing within the CMS which allowed the team to duplicate and edit content from a single CMS but distribute it too multiple instances of the website that would be served to different locations.
To enhance this we also included a translations centre in the CMS so each instance can have core translations put across the whole instance. This not only makes changing between the instances a breeze but also future proofs the site for late inclusions of perhaps Spanish or French instances later on.
We absolutely loved working with the entire team at Nessy on this project and are delighted to see how the new site plays an integral role in further supporting children with their educational needs. Clock’s approach to the design and build has already had a huge effect on performance - with 87 out of 100 rating on Google lighthouse, as well 98/100 on accessibility - a key metric and factor for the target audience.
