Historic England (originally part of English Heritage) is an executive public body that is tasked with protecting the historic environment of England by preserving and listing historic buildings, scheduling monuments, and registering parks and gardens.
Project Summary
Create a consistent and accessible design for all searches across the site.
My role within the project:
- Wireframe and design
- Stakeholder meetings and training sessions
- Design analysis
- Design review testing
- Creation of handover documentation
Old Design
The old design had a lot of problems:
#1 Centered content, long titles and descriptions which caused a lot of critical functionality to stack and be pushed further down the page.
#2 Searches had an irrelevant background image that distracted the user from the primary aim of the component.
#3 The same functionality had different names. One page used words like ‘advanced search’ another used ‘search options’ which caused confusion to the user.
#4 The search placeholder text was either very vague or too long so the user couldn’t read it.
Design Options
The design considerations for the MVP version were:
- Making the map and text search have the same hierarchy
The map view was used 35% more in the last 6 months according to Google Analytics. - The title, description, and placeholder text
A large title that highlights the purpose of the component, a description detailing what a user would find within the search, and concise placeholder text would give the user an understanding of what content is required.
- Use of relevant images
Images should only be used when they add something to the search for example within the archive. This allowed the user to get an understanding of the type of images they’ll find. - Consistency across the 10 searches
- Improved hierarchy by giving the component title a clear H2
This would be important for users who use assistive devices.
Accessibility and UX
Here are a few of the UX design considerations:
- Prominent display of the search field. A strong blue colour was used to create contrast and draw attention to the text search.
- Proper placeholder field size with clear guidance to help with usability.
- Clear advanced search to showcase all the options.
- Colour and text accessibility to ensure it meets the WCAG requirements.
- Clear CTA text for example ‘search the map’ instead of just ‘explore’.
- More accessible check boxes that are easier to select for those with disabilities and for consistency.
In the future with the new search I purposed that we should add the following:
- Auto suggestions
Decreased search time – create better searches, get better results, reduce cognitive demand - Spelling mistake correction
supports accessibility by supporting users that are dyslexic or have issues with spelling - Advanced search within the page to ensure a less confusing and faster user journey.
Handoff
When designing, a chunk of my time is taken by creating a handoff document for the developers and having a handover meeting to ensure that details such as typeface, padding, margin, hierarchy, and interactions are understood.
Outcome
We saw a great increase of advanced search use, especially on the National Heritage List Entry page, as more users were now aware of it.
Due to the new search design, users are also more likely to scroll further and interact with more elements.
