Framing the problem

Recommendations need to have enough content to be of use to schools but at the same time be accessible and not cognitively overload the user as they interact with the page.

The detail needed in each recommendation should be as long as is appropriate to make sure schools have sufficient information to understand and implement the recommendation, but it is not possible because of this constraint to limit what the final length of page should be, the resulting page structure needs to be flexible enough to accommodate any length of content.

Screenshot 2023-12-15 at 17.23.39 copy.png

Above: Screen capture of browser page (left), same page full length view (right)

Executive summary

School leadership has from user research proven to have varying levels of ability when it comes to understanding the requirements of systems within the technology landscape, one solution to this is to introduce and executive summary at the start of each recommendation that describes in an accessible way the features of the recommendation.

Screenshot 2023-12-15 at 17.28.50.png

Above: Executive summary at the start of the recommendation

Refinements of the single page design

Single accordion

The single accordion concept utilises a single page layout, where the only visible text element is the executive summary, this has the initial advantage of taking minimising cognitive load initially, only showing all the details of the recommendation when the accordion is activated.

screencapture-localhost-3000-mvs-install-fibre-broadband-b-2023-12-15-17_30_42.png

Above: Single accordion layout

This design was critiqued by the internal design community, potential issues were identified with the use of the accordion model hiding the full recommendation.

Multi-accordion

The multi-accordion model concept utilises a single page layout where the executive summary and key sections (at the H3) level are placed in individual accordions, modularising the content to enable easy access to various sections of the recommendation.

screencapture-localhost-3000-mvs-install-fibre-broadband-c-2023-12-15-17_32_29.png

Above: Multi-accordion layout

This design was critiqued by the internal design community, usability issues were identified with the use of the accordions in general as they hide large blocks of content.

Multi page design options

Tab system

The tab system uses multiple pages to break down the recommendation into key sections, users can navigate through the pages one by one or select the specific page number/name to directly access that material.

Screenshot 2023-12-15copy.png

Above: collection of pages utilising tab system

This design was critiqued by the internal design community, praise was given to the chunking of the data into individual bite-sized elements, though further development of the titling around the tabbing system should be undertaken.

Step-by-step

The integration of step-by step into the page design was a suggestion of the internal design community, the advantages of this approach was that the introductory text could be a permanent feature and the “Steps to take section” could utilise the step-by-step functionality to display a modular action plan that could be adaptable depending on the specific requirements of the recommendation.

screencapture-localhost-3000-mvs-install-fibre-broadband-f-1-2023-12-15-17_45_06.png

Above: recommendation integrating step-by-step functionality

Final version following user research

Following user research was the design was further refined into the following view:

screencapture-plantech-herokuapp-mvs-dtr-mid-y-start-2024-07-04-10_31_29.png

screencapture-plantech-herokuapp-mvs-dtr-mid-y-r1-2024-07-04-10_35_53.png

Image showing latest iteration of design across multiple pages

Design Board

The working design board can be found here:

https://lucid.app/lucidspark/7d007cc6-a37f-4b39-8f4b-5e05dae27543/edit?page=0_0&invitationId=inv_9f723e15-7752-4233-b667-ba33f4c5625e#

Share this page

Tags

User experience Accessibility