Renewal applications can now be completed online with Social Work England
When Social Work England took over from the previous governing body HCPC, they needed a new online form to help social workers renew their registration.
An intuitive and accessible workflow helped guide social workers through the process, providing help & supporting information they needed in line with new regulatory standards set by the business.
Understanding the problem
When a business decision was made to transfer regulatory powers from the previous governing body, HCPC to Social Work England, it meant they could start asking for more information to do a fully comprehensive check of all the information they needed in line with new regulatory standards set by the business.
I worked in close collaboration with the Business Analyst (Lauren) from SWE; she was able to surface the essential information we needed to capture in line with the business’ regulatory standards.
I worked in close collaboration with the Business Analyst (Lauren) from SWE; she was able to surface the essential information we needed to capture in line with the business’ regulatory standards.
Actions
Stakeholder mapping
Requirements gathering
Prototyping & Usability Testing
Developer Handoff
Agile working
Design system management
Requirements gathering
Prototyping & Usability Testing
Developer Handoff
Agile working
Design system management
Stakeholder mapping
Both CDS (Tech company) and Social Work England (Client) agreed on the following resources to form a dedicated team to collaborate daily to drive improvements to multiple aspects of their service. Due to this close collaboration, there was a high level of trust between both internal and external teams; everyone clearly understood their part to play in delivery and productivity was exceptional.
Requirements gathering
The existing renewal process on HCPC lacked the following data that Social Work England needed to capture:
1. Previous employment information
2. Whether social workers were registered with other bodies
3. A prompt to complete Continued Professional Development on their online account in line with auditing requirements
4. More thorough checks to confirm social workers were committed to safe and effective practice
2. Whether social workers were registered with other bodies
3. A prompt to complete Continued Professional Development on their online account in line with auditing requirements
4. More thorough checks to confirm social workers were committed to safe and effective practice
Sample screenshots of the existing solution in place at the time
Experience design & prototyping
Typically when doing experience design projects, we try to eradicate friction at all costs to reduce time on task, potential for frustration and optimise for efficiency. This project was the opposite, due to a different set of regulatory standards being put into place.
Given this significant change, we needed to conduct some usability testing to ensure users could get to the end of the journey without any issues. The user researcher took the first version iteration of the design into a moderated study, tested the prototypes with users and provided feedback on how to improve the experience.
Given this significant change, we needed to conduct some usability testing to ensure users could get to the end of the journey without any issues. The user researcher took the first version iteration of the design into a moderated study, tested the prototypes with users and provided feedback on how to improve the experience.
Zoomed in section of the last few steps of the Renewals journey
Usability testing & insights
We understood that adding extra steps added more friction to the journey for social workers, so we needed to design the form experience differently. A multi-step workflow was put in place to help users guide them through their journey step-by-step, providing clear visibility on the number of steps.
We learned from testing that users wanted more clarity on where they were in terms of overall progress (X%) and that this wasn’t a process that they could always complete in one sitting, so we added ‘Save & Close’ buttons that were accessible from any step to help them
We learned from testing that users wanted more clarity on where they were in terms of overall progress (X%) and that this wasn’t a process that they could always complete in one sitting, so we added ‘Save & Close’ buttons that were accessible from any step to help them
Developer handoff
Once the designs had the changes implemented from the 2 rounds of usability testing, they were exported to Zeplin for engineering to begin the build process. This approach gave the team everything they needed to build the entire flow, so back-and-forth questions were minimised as a lot of the effort was taken care of upfront.
Example video of a page design prepared for handover in Zeplin
Agile working
Regular agile ceremonies were put in place for backlog prioritisation, sprint planning, design refinement and retrospectives. Sprints ran on a 3-week cadence with discovery & definition for stories that required UX input being a minimum of 1, ideally 2 sprints ahead of engineering.
This gave the engineering lead confidence in what he could commit to in upcoming sprints, estimating accurate levels of effort in advance in team story-pointing exercises.
This gave the engineering lead confidence in what he could commit to in upcoming sprints, estimating accurate levels of effort in advance in team story-pointing exercises.
JIRA Kanban board for agile project management
Other work completed for this client
While this case study highlights one of the key multi-step forms, lots of other work was completed for this client over 2 years.
Continue reading to see more on...
Design system component libraries
Documentation site
Accessibility
Design system component libraries
Documentation site
Accessibility
Design System Setup
The Sketch component library and documentation site built using Zeroheight powered all of the design. We embedded a significant amount of accessibility guidance and implementation notes at the source, so when they were embedded as instances in individual files, they were compliant with WCAG 2.1 AA standards from the get-go.
How the component library powered multiple design files
Example of component library design specifications
Documentation site
To begin with, design system documentation was stored in our design files as it was easy for designers to write, directly alongside the master components. However, only the internal sprint team had access to these files. There was an appetite for external content editing teams to view the documentation too, as they had a responsibility to adhere to these standards when publishing website content for the public.
The accessibility team could view the content that we had in our design files but found it difficult to navigate and find where to work, as all the zooming and panning around the canvas was overwhelming. They also couldn’t contribute to it without a license, which was a huge blocker and pain point for them - hindering our ability to collaborate as a team.
These two problems sparked the idea to set up a Zeroheight site which was easily accessible to both internal and external stakeholders. It became the single source of truth for all of the brand styles, reusable components and design principles in use on the project. This allowed us to collaborate on design documentation and accessibility implementation guidance and then effortlessly share it externally, without the frustration of access or licensing issues.
The accessibility team could view the content that we had in our design files but found it difficult to navigate and find where to work, as all the zooming and panning around the canvas was overwhelming. They also couldn’t contribute to it without a license, which was a huge blocker and pain point for them - hindering our ability to collaborate as a team.
These two problems sparked the idea to set up a Zeroheight site which was easily accessible to both internal and external stakeholders. It became the single source of truth for all of the brand styles, reusable components and design principles in use on the project. This allowed us to collaborate on design documentation and accessibility implementation guidance and then effortlessly share it externally, without the frustration of access or licensing issues.
Short video walkthrough of documentation pages, made with Zeroheight
Buttons - Interaction design, notes on usage behaviour and accessibility implementation
Accessibility
Social Work England’s component library was heavily influenced by GOV UK Design System’s guidelines so that the business could benefit from the higher standards that the library had to offer. The client didn’t want to fully use that library though, as they wanted to retain control so they could bring their brand personality and style through with colour and custom fonts.
We adhered to WCAG 2.1 AA standards for all features and functionality for this client. While working on the project, I was coached by a lead accessibility consultant who collaborated with me on lab testing with people blind users and those with cognitive impairments, ensuring design adherence to colour contrast ratios, inclusive interaction design for keyboard-only users and a thorough approach to accessibility audits and reviews.
We adhered to WCAG 2.1 AA standards for all features and functionality for this client. While working on the project, I was coached by a lead accessibility consultant who collaborated with me on lab testing with people blind users and those with cognitive impairments, ensuring design adherence to colour contrast ratios, inclusive interaction design for keyboard-only users and a thorough approach to accessibility audits and reviews.
Example image of adherence to AA guidelines for colour contrast ratios (Made with Colorable)
The result
The outcome of this design system documentation site was a notable improvement in quality, consistency and adherence to WCAG accessibility guidelines. Stakeholders could get all the information they needed from the site autonomously, reducing the amount of meetings needed.
Onboarding time was reduced for new designers getting up to speed with existing work done so they could spend more time on problem-solving and UX research; and less on UI & style creation.
Engineers could get design specs built right the first time to a high standard and implemented with the considerations for keyboard and screen reader usage, limiting the amount of time needed for auditing and giving feedback.
Onboarding time was reduced for new designers getting up to speed with existing work done so they could spend more time on problem-solving and UX research; and less on UI & style creation.
Engineers could get design specs built right the first time to a high standard and implemented with the considerations for keyboard and screen reader usage, limiting the amount of time needed for auditing and giving feedback.