Guide Dogs
A service repositioning project
Overview
Key skills
Guide Dogs are a large charity founded in 1934 to help and support blind and partially sighted people across the county.
The initial brief consisted of conducting a digital transformational project to create a modern, stable and user-centric digital platform that could support the future strategic ambitions of the charity.
Design Thinking, Design Strategy, User Interface Design, User Experience Design, Responsive Design, Design for Accessibility & Inclusivity
The problem
The charities website had become outdated and untenable from a maintenance and content editors perspective. The future goals consisted of shifting to a digital-first approach and increasing brand awareness as well as visibility and understanding of core service provision.
The primary focus was around improving the usability of the website to ensure the overall digital experience catered for the needs of the user. The solution needed to ensure that accessibility and inclusivity were at the forefront of every conversation with a vision of creating a website that could be held as a beacon and model for accessibility and future growth. Key business requirements also included:
-
Increase brand awareness.
-
Increase understanding of core service offerings.
-
Improve usability of the website.
360,000
The number of people registered blind or partially sighted who are being supported by the services that Guide Dogs provide.
50% +
Over 50% of all traffic that was coming into the Guide Dogs website was via a mobile or responsive device.
A screenshot of a hub page taken of the Guide Dogs website prior to work commencing
Accessibility and understanding the user's needs
Many people with sight loss or vision impairment use the Guide Dogs website on a daily basis for support and guidance, therefore the requirement to ensure that the website was designed and built to maintain a high standard of accessibility was paramount to provide the sense of inclusivity for the user. The three areas of focus regarding accessibility that Guide Dogs highlighted;
1
Use of different screen colours
2
Use of magnification software
3
Use of screen reader software
A practical introduction to assistive technology...
In order to better understand the requirements and needs of the user, our multidisciplinary team were invited to partake in a hands-on 'Assistive Technology' workshop held at the Guide Dogs' office. The day was hosted by the assistive technology team, a group of industry experts with a vast range of knowledge and experience of using various forms of assistive technologies.
The workshop was well structured and kicked off with a presentation 'What is Accessibility'. This was followed by four hands-on practical sessions introducing our team to varying assistive technologies including ZoomText, JAWS, NVDA and IOS VoiceOver, each being led by an assistive technology user and member of the Guide Dogs team. After lunch, there was another presentation about 'Elements of a web page' followed by a round table panel discussion with members of the Guide Dogs staff with varying levels of vision impairment.
A truly fascinating and insightful experience that resulted in a great way of up-skilling our team members about specific requirements and limitations in each of our specialised fields.
An example of keyboard navigation using a screen reader program such as 'JAWS' or 'NVDA'
An example of screen magnification software such as 'ZoomText'
Knowledge sharing...
Upon returning to the office, and fueled with enthusiasm and the wealth of knowledge that had been imparted to me, I immediately began compiling my notes and learnings from the workshop into a keynote presentation. I then sought to present my findings at an agency-wide presentation to help upskill and educate my fellow peers.
"Gain a solid understanding of the users' needs and requirements regarding accessibility from the start of a project and look to build upon solid foundations. Don't leave it to the end as an afterthought."
Key user experience insights
The website must strive to be 100% navigable via a keyboard. Visually impaired or blind users will not necessarily be able to navigate the website using sight/vision, and in many cases rely on a form of assistive technology, which could be controlled via a keyboard.
1 - Think about the user
Visually impaired users rely on their understanding of universal UI patterns and principles, combined with using 'Landmarks' to help navigate a web page. A landmark example could include a Header or Footer which universally would be positioned at the top and bottom of a website.
2 - Keep it simple
Consistency is very important. Consistency of layout and structure across page templates and UI components is paramount from navigation and signposting perspectives. This ensures the user experience is streamlined and understandable.
3 - Maintain consistency
Hierarchy is very important from a navigational and content standpoint. H1-H6 titles need to be designed and coded correctly within markup. Buttons and links should avoid generic terminology for example 'see more' as users can opt to display using lists.
4 - Clearly define hierarchy
The approach
An agile working methodology consisting of a series of sprints was agreed with the client to prioritise business requirements into a product backlog. The initial sprints consisted of a component audit of the existing website, that was undertaken in collaboration with the client in order to identify and prioritise existing components.
This list was then collectively refined and streamlined, resulting in around 30 components that would form the building blocks for all pages within the site. After establishing and defining a list of master page templates along a key user journey, I created and presented a suite of high fidelity wire-frames, defining template purpose, page structure, information hierarchy and component governance.
Ideation & wireframing
High fidelity wireframes created in Sketch detail master page template structures. Navigation principles were defined, utilising components to signpost the transition along a journey from the Home page (top left) to Hub and Sub Hub (top centre) through to Content page (top right).
Through the use of coloured overlays to showcase component governance, we could educate both the client and internal build teams to better visualise the suggested mandatory components in relation to page hierarchy for each template.
The solution
Numerous hours of brainstorming, careful planning, sketching, wire-framing, designing and developing has brought the results desired for the Guide Dogs Website. We were proud to present the new interactive platform and face of the brand to our client. The final result is a light, minimalistic, accessible and intuitive website, with a focus on delivering the best usability and experience whilst putting the needs of the users first.
Refined design principles and aesthetic styling
As designers, we are often lured by attractive, trendy and out of the box designs. But, we must always remember the ‘why’. The primary goal should always be to understand the user, their problems and then come up with a design that strives to solve it.
The approach and methodology that was undertaken during the course of this project ensured that solid foundations were in place to build upon and layer with visual design principles. This ensured that the end result is not only an improvement aesthetically but also from a functional and usability perspective.
Improved volunteering process and usability
A particular focus highlighted by Guide Dogs at the start of the project was to increase brand awareness as well as visibility and understanding of core service provision. They wanted to shift the focus away from the dog and shine a light on the important services that are tailored to the person.
By improving, reshaping and optimising the volunteer, fundraising and sponsorship journies we have also provided Guide Dogs with a solid platform to drive user engagement and promote opportunities for continuous support.
