Chris Hughes
Design
London
WorkSafe is a government organisation that has a mandate to create safe environments in the workplace. This is done by requiring businesses to notify or submit applications to WorkSafe.
WorkSafe needed to create an online self service portal for users to submit applications, fill out notifications forms and have an all in one place solution to do this.
I was the lead designer in a cross-functional team, working closely with users, developers, and product managers to deliver design outcomes.
“How might we create a frictionless service that leverages the benefits of a self service portal?”
From the design perspective there were heavy restraints since it was going to be developed using the Microsoft Dynamics 365 platform with PowerApps. This was overcome by working closely with the developers to understand what the restraints were to deliver the best outcomes within the restraints. This was also a product being made from the ground up so it was not only the designs but the concept of the product that was being tested.
In my cross-functional team, we followed agile methodologies to drive collaboration and alignment. We planned work in value increments (VIs), broken into two-week sprints. Each sprint began with story creation and prioritisation and included daily stand-ups, design reviews, and iterative refinement. We closed each sprint with a retrospective to identify improvements, and at the end of each VI, we presented our achievements to the broader Digital Transformation unit to showcase our progress and impact.
User research reports
Wireframes and high-fidelity Mockups
User testing plans and scripts
Supply room is a bar and restaurant that’s been around for over 10 years. They have great food and great service and needed to showcase that to show how well they stack up to the competition.
Supply room is a bar and restaurant that’s been around for over 10 years. They have great food and great service and needed to showcase that to show how well they stack up to the competition.
Supply room is a bar and restaurant that’s been around for over 10 years. They have great food and great service and needed to showcase that to show how well they stack up to the competition. Check out another project
Getting an understanding of how the paper and PDF based system worked. Talking to people that frequently engage with the users of the system and what their opinions of it were. Engaging with the business to gain their perspective on the current approach to get buy in with the new platform that the team would create.
To do this I looked through all forms available and went through the same process a user would in completing these forms. On top of this I looked at all previous research that had been done to gather insights, assumptions and pain points.
• Prioritise accessibility to assist users with low reading levels.
• Reduce friction in form completion and eliminate redundant information input.
• Align form consistency across different business groups.
• Engage regularly with the business to establish a streamlined information update process.
The MVP for the first value increment was for users to have the ability to digitally submit a form. I started by creating a style guide, defining the typography, colours, and visual elements based on our brand guidelines. This set the foundation for consistent design throughout the project.
Next, I developed the first mockups for the MVP, focusing on how users would navigate through the first application process. These early designs visualised the user journey, mapping out key touchpoints and interactions, doing design reviews and collaborating with developers along the way.
Finally, I created the first iteration to the MVP which was to create a way for users to log-in, these designs were more detailed, incorporating features like multi-factor authentication, form validation, and a step-by-step process to enhance user experience.
Building a style guide that includes typography standards, colour schemes derived from our brand guidelines, button styles, spacing rules, and visual elements such as icons and imagery, the start of the design system. This guide ensures consistency in design across all touchpoints and provides a solid foundation for our UI components, helping the team maintain a cohesive look and feel throughout the product.
This outlines a starting point for how the user would navigate the process of filling out applications, showcasing the initial concepts and flow. I mapped out each step of the application journey, paying close attention to how information would be displayed and captured on the page. The mockup included key elements such as form structure, input fields, buttons, and progress indicators. During our agile sprints, I conducted regular design reviews to gather feedback and refine the user experience, collaborating closely with developers to ensure that designs aligned with technical feasibility and user needs. This iterative approach allowed me to identify and address potential friction points early, shaping a more seamless and user-friendly experience with each iteration.
While the MVP was being built I started on the registration and log-in, first creating the user flows for the steps the user would have to go through. The log-in screen emphasising ease of use and security features, such as multi-factor authentication options. For the application process, I designed a step-by-step form that guided users through each stage, ensuring clarity and reducing potential errors.
Once the MVP and registration/log-in was live, I conducted usability testing to identify any potential issues and opportunities for improvement. Participants were sourced from WorkSafe’s list of users who had provided consent to be contacted, ensuring we were testing with individuals who would eventually use the new application process. These participants had experience with the existing PDF and paper-based system, which provided a great baseline for comparison.
Duration: Each session was scheduled for 1 hour.
Platform: Conducted remotely via Microsoft Teams.
Preparation: Developers were notified in advance to ensure access to the test environment during the sessions.
Backup plan: A clickable prototype in Figma was prepared as a contingency in case of any technical issues during live testing.
After conducting gathering insights from user interviews I developed journey maps to visualise the end-to-end user experience within the self-service portal. These maps detailed each stage of the user’s interaction, from log-in to form submission, highlighting pain points, motivations, and key decision moments. By aligning these journey maps with both user needs and business goals, I was able to identify critical areas for improvement and prioritise features that would reduce friction, making the portal more intuitive and accessible.
• Simplifying the sign-up process: Based on the confusion observed during sign-up, a more streamlined, guided process should be developed to reduce friction and ensure clarity.
• Minimising repetitive data entry: Incorporating auto-fill features or data recall functionality to eliminate repetitive input of the same information.
• Continue splitting up the forms: As users responded positively to the segmented forms, future iterations should continue to use this approach, potentially refining the chunking strategy based on further feedback.
At this stage I was continuously iterating on the designs while incorporating new features based off of feedback from previous user research. One of the key improvements I implemented was the creation of a simple, modular ‘dashboard’. flexibility, making it easy to introduce new features as needed. Other features need in the roadmap were new features so users could track the progress of their applications.While users typically accessed the product on desktop, all designs were fully responsive to ensure a seamless experience on mobile as well.
I redesigned the log-in and registration flows after identifying that users were often confused by having too many log-in options. Given that some users only needed to log in from a range of every week to once every five years, simplifying the process was critical to reducing friction and improving overall usability. By streamlining the registration, log-in options and removing unnecessary steps, I was able to reduce cognitive load and help with the issue of people not knowing which service they used to register to the self-service portal.
I also created a basic dashboard. This initial version served as a foundation that could be expanded over time into a comprehensive dashboard, offering users a streamlined way to access and perform additional actions. The modular approach allowed for easy expansion over time. There was also a shift in priorities where we needed users to be able to submit notifications as well so a quick PDF upload for page to do this was created as well.
I designed an application tracking feature that allowed users to monitor the status of their submissions to WorkSafe. Although the interface itself appeared straightforward, the process required significant collaboration with business analysts to define the various status stages, transitions, and the specific information available to users at each stage. This feature provided users with transparency and clarity around their applications, enhancing the user experience while aligning with organisational processes.
To improve the design and functionality of the forms within the self-service portal, I collaborated closely with developers and the system architect to implement a modular structure. This allowed the platform to present a simplified, user-friendly interface that could adapt as new features were introduced over time. This meant that designs and development work could re-used. The way the user would go through this new approach would still be step by step, aligning with user feedback that favoured this chunked approach. By doing so, we created a more intuitive and streamlined experience, reducing user friction during the application process and enabling flexible expansion as the platform evolved. This modular, user-centred design set the stage for continuous improvement and scalability in line with future needs.
This is a snapshot of the work completed on this project over nearly two years. In that time, there were eight VIs, and many additional features were discussed, designed, and shipped. From the start of the project to this point, there has been a significant improvement in the consistency of the user experience, the scalability and speed of product delivery, and enhanced functionality that has helped our users achieve their goals.
Before leaving the project, I designed a feature enabling users to submit applications or notifications on behalf of a business. This involved navigating complexities around user permissions, addressing who could submit applications, and appointing others to do so. I also considered business scale, creating a flexible model that could accommodate the unique needs of both small and large organisations.
I also made a concept of what sort of functionalities we could have in a finished product for visual communication purposes as there were more functionalities in the road map such as alerts, document uploads, and other user-centric functionality.
