Case study brief: Accessible website design and development for Homefield College
Homefield College is an independent specialist Further Education (FE) college providing education, training, care and support to those who have learning and communication difficulties in the East Midlands.
As a charity and educational establishment serving those with learning difficulties, Homefield understood it was both a legal and moral obligation to ensure that their website was inclusive and accessible for all users.
Upon discovering that their website was not WCAG 2.1 Level AA compliant, Homefield College contacted HeX after being recommended by a contact at Natspec, the membership association for specialist FE colleges. Our team was then commissioned to redesign and rebuild the Homefield website.
Creation of bespoke accessible features and API integrations made this case study unique
Homefield supplied HeX Productions with a prospectus that was designed for potential service users as inspiration for the redesign of the website, along with providing a number of user personas in order to give the design and development team a greater understanding of the target audience. By utilising these supplied recommendations and documentation from Homefield, HeX were able to design a website that would be easy to use and provide efficient access to information.
The site was developed using a bespoke HeX theme and Gutenberg block features in WordPress, which allows for greater customisation of the elements and features that were present on their website.
Web development activities delivered
- Website design work and creation of an accessible colour palette
- Web development, including the creation of bespoke site elements
- Integration of Application Programming Interfaces (API)
- Delivering Accessibility Content and Editor Training
- Project management and accessibility consultancy
- Ensuring their site met with WCAG 2.0 standards
Designing an accessible website with a clear user flow
The team at Homefield College understood that their current website was not fit for purpose to deliver accessible information to its users, which led them to the conclusion that they would be requiring a full rebuild of their website.
Following a glowing recommendation from an attendee at one of HeX’s monthly meet-ups, through Accessibility Nottingham, and then researching our company’s vast accessibility experience in the local community – HeX were commissioned to deliver the project.
From an initial scoping call with Homefield, the HeX team were able to ascertain what the organisation required and were able to make additional recommendations.
Before beginning the designs, Homefield supplied HeX with current documentation given to users. Through this supplied information we quickly saw that the main objective was to move information from PDF formats to being available on the website.
However, this PDF documentation did help to inspire the colour scheme of the website, finding that the use of a sea blue and yellow accent colours complimented the site design. Our design team then reworked a colour palette that met with colour contrast accessibility requirements.
With Homefield’s users mainly being those with learning and communication difficulties, it was vital that we got the website’s structure right to ensure that users would not feel overwhelmed or unable to navigate the site with ease.
Our design team set to work designing an easy-to-use site, offering clear call to action content, along with simplistic and consistent navigation.
Designs were created to be user friendly, implementing round edges on content boxes and buttons to provide a more welcoming look and feel to the website.
Throughout this process we delivered design work in iterative phases to allow for feedback and suggestions on site elements from the Homefield team.
We now have a nice-looking, functional, clear, and mobile responsive website, that’s easy to update and complies with accessibility regulations.
Helen Gerrard: Homefield College Communications Lead
Creating bespoke accessible features using Gutenberg blocks and API integrations
Once the initial designs had been signed off by Homefield, the development phase began.
The development of the website was done in WordPress, a content management system used by more than 75 million websites across the World Wide Web. WordPress is a system that our HeX Developers have significant experience in using – carrying out development for the likes of Genius Within and the Wiltshire Service Users’ Network (WSUN) Autism Hub.
The site was built using HeX’s bespoke custom theme and working with WordPress Gutenberg blocks to allow developers to have a greater flexibility with the style of the website and the features that could be implemented.
Gutenberg Blocks are becoming more relied upon across the world in site installations. These are an overhaul of the classic back-end editor and allow content to be represented in blocks. This allows for content editors to see elements of the site in a more visual and intuitive way.
For Homefield we developed a range of bespoke elements; these included a JustGiving donation link banner and a customised map. This map used the Google Maps application programming interface to pinpoint multiple college locations to be viewed at the same time all on one map.
Another feature that was implemented into this site build was a custom categorisation filter for news articles, which allowed users to select news to read through written text, listen over audio, or view content on a video. This was to help users with learning disabilities digest information in different formats more easily.
Creating an integrated donation feature using APIs
As a charitable organisation, Homefield relies on donations through JustGiving to help fund their operations. Previously, donations would have to be managed through Just Giving with no integrations present on the website.
Homefield knew that in order to secure increased donations and allow users to donate in an easier way, it would be beneficial for their audience to access this facility through the website itself.
Rather than Homefield having to manage donation payments as well, the team at HeX came up with a creative solution to streamline the donation service by embedding the donation journey on the Homefield website, whilst allowing payments to continue to be managed by JustGiving. This donation feature allows users to simply fill in their details and pre-select the amount that they want to donate and then this information is sent to JustGiving to process their details and payment, making it easier for people to support the College directly from their website.
Ensuring users were able to understand the study programmes
One main accessibility feature that was implemented into the build was the ability to switch between a detailed content view and an ‘easy read’ content view. This addition meant that Homefield was able to better communicate their course details to those with learning difficulties.
These easy read alternatives were previously only viewable in Homefield’s PDF format, however, thanks to the implementation of this feature all users are now able to have access to easy to understand information via the website.
Implementing bespoke content filters to suit the needs of the user
When designing for people with communication challenges, allowing them to filter by category of content for news information depending on their preferred method of consumption is the best possible scenario.
These categories consist of ‘Read’, ‘Look’, ‘Listen’, or ‘Watch’. This categorisation is done in the back-end of the WordPress site by content editors adding tags and is filtered on the front end, where the user can select buttons.
By clicking a button, or by filtering by ‘all’, users are presented with content that best suits their preferred method of communication. The ‘Read’ content category presents written text, “Look” demonstrates the content as imagery or graphics, “Listen” plays audio clips and “Watch” lets users view video or digital media.
Training staff to understand how to implement content effectively and accessibly
The HeX team supported the implementation of content on the website. By working closely with the Homefield team, HeX were able to design and develop content pages. This collaborative approach meant that the Homefield team were able to input content into elements and pages as planned, allowing us to easily make alterations to ensure that content is displayed effectively.
Being accessibility experts, we were able to offer in-depth training to the Homefield team, teaching staff how to add content to pages using the bespoke blocks and how to implement accessible content using the back-end of the website. This left the team with the confidence to keep their site updated and accessible upon project completion.
Project outcomes and impact: reducing administration whilst increasing accessibility
Users are now able to access course information in an accessible format, also relieving some of the administrative tasks for staff and allowing for digital signposting through their social media channels.
We’re proud to be able to have helped Homefield College with the website they needed. Homefield College now has a WCAG 2.1 Level AA compliant website available for all of their users.
From previously relying on PDF documentation to share information with service users, the organisation is now able to provide detailed information within their website. Offering a clearly defined user flow, allowing their audience to easily navigate the site and locate key information.
There are future plans to make applying to the College more user friendly by using online accessible forms as well as the creation of a shop area to promote the work of Homefield’s students, residents and day service members. We look forward to working with Homefield in the future.
More case studies about accessible web development
Joshua Hayday Helping Hand Trust
The strategic communications agency, Bulletin, approached HeX Productions for our accessibility expertise. Our team set to work developing an accessible website for one of their clients.
Blood Pressure UK
Blood Pressure UK required a complete web redesign and redevelopment, transferring it to Terminalfour and ensuring it was mobile responsive, and fit the brand.
