Evolving the recommendation format

Framing the user need

The recommendation generated by the Plan Technology for Your School (PYFTS) service is the end of the user's primary journey and the point where schools should begin to implement the various action items as a part of their own technology planning process.

The recommendations themselves 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 as such the detail needed in each recommendation template should have sufficient flexibility to supply enough detail to understand and implement the recommendation, as a result the page structure needs to be flexible enough to accommodate any length of content.

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

Following the Alpha phase of the project a need was identified to measure and present recommendations that responded where possible to the actual needs of the school, one method implemented was to rate the schools on a 3-stage level of maturity from Low to Medium to High. Measurement was undertaken in the background as users engaged in a topic question-and-answer phase, each answer is given a specific weighting, and these were then aligned to the maturity score and a recommendation.

The recommendations were generic by maturity level in nature and because of this the following issues were identified during user research:

1. Schools were often provided with elements of the recommendation that did not apply to them
2. The recommendations could be lengthy in nature and the “wall” of words presented had the potential negative effect of increasing the cognitive load on the user therefore reducing the likelihood of engagement with it

To address the issues identified above the follow the following changes were considered to the recommendation design:

1. Aligning the actions required to implement a recommendation directly with the questions asked for the specific topic
2. Rationalising the individual action item “chunks” where possible
3. Providing an executive summary for members of senior leadership who would not be involved in directly actioning a recommendation

Re-designing the recommendation page

A range of options were considered as alternatives to the single “full length” page design, they broadly fit however into one of the following two categories:

1. Single page with interactive elements
2. Multiple pages within a single navigational structure

All the following approaches were critiqued by the DFE (Department for Education) design community within a working session

Variations to 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 advantage of minimising cognitive load for users who are new to a subject, only showing all the details of the recommendation when the accordion is activated.

Above: Single accordion layout

This design was critiqued by the internal design community; potential issues with the page's accessibility were identified specifically with accordions hiding full page content.

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.

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.

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 and given this flexibility in the presentation of content and modular nature of navigational structure

Above: recommendation integrating step-by-step functionality

Aligning answers and actions

Each question and answer were reviewed and aligned with an action in the following way:

1. No action, leave blank
2. Action required, provide supporting guidance

Above: Extract from the conceptual model developed to evaluate how to align questions and recommendation action items “chunks”

Rationalising action item chunks

As each recommendation was broken down into its individual chunks, these content chunks were re-written further to be as concise as possible.

Introducing Executive summary

To support the decision making of a school’s leadership each recommendation was to be provided with an introductory summary section that provided high-level information about an action.

Above: Executive summary at the start of the recommendation

Further refinements

Evolving the executive summary to “getting started”

Following some confusion from users with the start page of the recommendation, where actions were being introduced so early in the recommendation process that it prevented users from fully understanding the “Full recommendation” and all its actions the executive summary was further refined by reframing the page to contain the following 5 elements:

1. WHAT: Introduction describing at a high-level the recommendation
2. WHY: Signpost to a list of benefits from implementing a recommendation
3. WHO: “At a glance” list of who is best placed to undertake a recommendation
4. HOW & WHEN: Action list of jobs to be done consisting of anything that requires “work” to complete a recommendation

Above: revised annotated screen design for exec summary: getting started page

Beyond step-by-step

From user testing it was clear that breaking down the addressed the issue of cognitive load and enabled users to focus on one specific action at time, user research identified the following:

1. While most users correctly identified the step-by-step component to the right of the page as being actions that were a “part of the whole” recommendation, a significant minority missed this component when it had a small number of actions.
2. Some users believed the number sequence in the step-by-step design to be an order of completion for the recommendation when, in most cases, this is not a requirement, and any pre-requisites activities are detailed as part of the action item.
3. Some users suggested moving the action list to the left, as that is the most critical element of the recommendation structure, and users tend to read left-to-right.

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

1. Aligning the recommendation title with the topic e.g., Fixing it as “Digital technology registers recommendation”.
2. Introducing a breadcrumb navigation system.
3. Moving the recommendation action item navigation system to the left of the main body of content.
4. Removing the sequence number from the action item navigation.

Above: screen captures showing latest iteration of design across multiple pages