Client
Zen Educate
Timeframe
May 2022 - Sep 2022
Client
Responsive Web Design, SEO, Marketing, Information Architecture
How might we make the Zen Educate website easier to use and find online, to keep visitors happy and attract more traffic?
Navigating a website shouldn't feel like being lost in a maze—yet, that's exactly how users felt on the Zen Educate website, a confusing, outdated labyrinth that not only frustrated visitors but also drove them away. In addition to high bounce rates, the site suffered from a lack of essential search engine optimisations, significantly reducing its visibility in search results. In this project, I collaborated with a talented multidisciplinary team to transform the website into a streamlined, intuitive pathway, significantly enhancing the user experience and increasing organic traffic. This effort not only improved site usability but also reinforced Zen Educate's commitment to providing accessible and valuable educational resources.
The Zen Educate Website Wasn't Showing up in Search Results
Teachers across the UK actively search for positions using terms like "Supply teaching jobs near me" and "Special education teaching jobs UK," but often Zen Educate wouldn't show up in their search results. This disconnect meant not only missed opportunities for teachers but also highlighted a critical gap in our website's ability to connect with its intended audience. This emphasised the need for a strategic overhaul of the website’s structure to better capture and engage these users.
The Navigation was Unpredictable and Unclear
I began this project by facilitating a heuristic evaluation, a fast and effective method to assess a website against established usability principles, even without direct user involvement. Using Nielsen’s Ten Usability Heuristics, the product team analysed each element of the website's interface, from visibility of system status to user control and freedom. This structured evaluation allowed us to dissect the website through a UX lens, identifying mismatches between design and user expectations.
In a collaborative workshop with our product manager, tech lead, and software engineer, we pinpointed several key usability issues. We found inconsistencies with keyboard shortcuts, slow-loading pages, and a missing 404 error page, among others. However, it became clear that our main challenges were related to navigation. The navigation was unpredictable and unclear, making it difficult to move around the site. Moreover, the job posting page lacked filters, making it hard for new users to find relevant opportunities. These findings mirrored data collected from our marketing team, which showed a 70% bounce rate and an average visit duration of less than a minute.
Leading this heuristic evaluation was crucial in understanding the current pain points our users faced, and helped us form our hypothesis moving forward…
By improving the navigation of the Zen Educate website, we will enhance user experience and SEO, thereby increasing organic sign-ups and reducing the bounce rate.
Designing a New and Improved Navigation
Off the back of the heuristic evaluation, I began working closely with an SEO specialist to improve the website navigation and hierarchy. We focused primarily on the jobs section for this project, identifying it as a critical area that would result in the most impact with the least effort.
The jobs page on the Zen Educate website allows users to view all recently posted openings. However, these listings were not organized by region or specific job criteria, forcing users to sift through hundreds of postings to find relevant opportunities. This lack of filtering also impeded our SEO efforts; without content-specific pages, the website struggled to rank well in search results. For example, a search for "Primary teaching jobs in London" wouldn't direct to a unique URL on our site, leading to suboptimal search optimisation.
Testing the Perfect Navigation
Utilising our extensive design system, I began iterating the navigation bar with our new proposed hierarchy in place. I decided to test the new tiered menu component directly with our users to make sure the interactions were in line with their expectations and provided the best experience.
To evaluate the effectiveness of these new designs without disrupting our live environment, I chose to conduct moderated A/B tests, using Maze, with high-fidelity prototypes of each option. Conducting the test through Maze not only prevented any potential negative impact on our actual user base but also allowed for rapid iteration and feedback collection.
During the A/B test, which we ran over a period of four weeks, we investigated whether users understood menu labels in the navigation, which navbar was clearest and aligned more with their expectations, and which one was more likely to result in confusion and error. The results were revealing: participants explained design A was more confusing- citing they felt "information overload". Additionally, for mobile users they were frustrated by the interaction of having the scroll far below the fold to view all jobs. However, design B was far more successful with participants, explaining they found the content easier to scan and understand at a glance and the interactions were more inline with what they were expecting.
The numbers spoke clearly, too: Design B not only made users happier but also helped them find their way around 50% faster than Design A. This test showed us that Design B was the better option, especially for people using their phones.
Creating the Perfect 'Hub Page'
Let's take a moment to dive into the concept of a "hub page". Simply put, a hub page serves as a central home for organising and presenting related content on a website.
It plays a crucial role in enhancing our website's SEO efforts. By curating a well-crafted hub page, we can optimise it with relevant keywords that attract search engine traffic. As a result, users can easily find their way to more specific or detailed pages within our website. It's like creating a perfect hub that efficiently directs users to the information they need while bolstering our online visibility.
As a part of the MVP, we needed to create an engaging hub page to house all relevant jobs for each job position, job type, borough and contract type. So I got to work!
Over 4 Sprints of Iterative Testing…
Improved layout of the page: By holding a “Sign Up” CTA above the fold, as well as filter interactions below, we’re guiding users to explore further and interact with the page- boosting overall website engagement.
Relevance: One clear piece of user feedback was that the jobs shown should be relevant to their needs. By incorporating a filter asset, the website is now populated with meta tags and relevant keywords to help users land on the page that addresses their search needs best!
Visual hierarchy: The initial design appears somewhat cluttered and lacks a clear focal point. Text elements and buttons are uniformly sized, overwhelming users with too much information at once. The redesigned page introduces a cleaner layout with more white space around text and buttons, which helps to direct the user's attention more effectively.
Regular updates: As part of this project, a talented team of developers moved the entire marketing website to a new CRM system. This ensures future content updates are easier to implement, helping these hub pages maintain relevance and usefulness.
Filters Make Everyone Happier…
We understand that nobody wants to spend countless hours scrolling through numerous job listings to find the right opportunity. That's why we wanted to give our users the option to customise their job searches with advanced filtering options.
By incorporating these filters, we not only improve the user experience but also boost our website's SEO. Each filter added creates a unique URL, making it easier for job seekers to discover relevant positions through Google's search results. It's a win-win situation that enhances usability while increasing visibility for our users.
Monitoring the Results
Before going live, we conducted extensive pre-launch testing in a controlled environment. This phase included usability testing, and SEO performance checks to ensure that the new design would perform well under real-world conditions. The deployment was meticulously planned to occur during off-peak hours, minimising potential disruptions.
