Current implementation
After a user has signed in to the service the first page, they will access is self-assessment, self-assessment is the centre point of all the interactive elements in the service from this page users can engage in answering questions and accessing the recommendations generated by the service.
Current layout of self-assessment page. Left new user display. Right all sections completed display.
During user research it was found that users consistently missed the recommendation component positioned below the question topics, preferring to continue through the question categories. The following is an exploration of the alternative concepts for the page design including:
Alternative concepts include
- Increasing the visual impact of recommendations in current display
- Re-organising the page placing a container for recommendations first
- Merging topics and recommendations into a single view
- Creating a bespoke tile with single view elements
- Shifting away from single view page to and anchor and category pages model
Increasing the visual impact of recommendations in current display
Keeping the current page structure the recommendations display would be replaced with a display that deliberately contrasts with the task list component used for the questions categories by utilising a range of component designs.
_Above: Design options include, left to right addition of priority flag to individual recommendations, permanent structure with placeholders, mix of priority flags and permanent structure, tab-based display based around priority. _
Re-organise page placing a container for recommendations first
Responding directly to the hypothesis that as users interact with the service the recommendations will become more of a priority than the question topics, this took the current design and restructured the page to place the recommendations first in the page structure.
Above: Selection of designs featuring placement of recommendations component first
Merge topics and recommendations into a single view
During the various UR (User Research) sessions, it was noted that users were often missing the recommendations as it was often positioned below the fold of the page requiring users to explore the pages layout actively looking for that material, one option was to bring the topics and associated recommendations together on the page
_Above: Collection of visuals bringing together question topics and recommendations _
Creating a “tile” container for both questions and recommendations
Developing the idea of bringing the topic and recommendation together to improve the visual connection between elements that are related to one another, these two elements were placed together in a tile-based container. This is an experimental component design not used elsewhere in the GDS (Government Design System) framework and would require user testing to prove its validity.
Above: various implementations of tile based single view container
Shifting away from single view page to and anchor and category pages model
As the service develops one concept to build in scalability to the service is to have a page per parent category. The home page will anchor the service around available categories; the categories would use a simplified layout containing question topics and associated recommendations.
Above: left anchor page, right category page
Design and technical review of considered options
Each of the options were discussed with both the design and development communities, all approaches are technically viable and a design review within the DFE (Department for Education) design community assisted in refining several elements that were included in two alternative designs to be further evaluated in future User Research session.
_Above: output from internal design review _
Evaluating options A and B for public beta
From the above options further refinement was undertaken and created for testing in the prototype.
Version A places access to the question topic and the recommendation on the same line, along with various indicators providing information about those elements' various statuses.
Version B uses the same model of information and status but spreads the content across multiple lines within a display tile.
Image showing version A and B, used for evaluation during User Research
Above: Image shows collected research findings
Both designs A and B were evaluated during user research, with the following findings:
- All users understood the layout and relationships between the topic questions and output recommendation across both designs
- The “Success” banner featured at the top of each page was proven to be ineffective in most cases, users did not notice the banner, when they did, they struggled to connect the message to next steps
- Users were confused by some of the status tag label’s, specifically “Ready” in relation recommendation and questioned whether they could be refined further
Refining for public beta
Following the previous round of user research was the design was further refined in the following way:
- Design A was selected for further development utilising both the most standardised GDS component and is the most efficient use of screen space
- The page banner was removed from the design
- The colour coding of the status banner reduced to a single colour, and this space was utilised as a messaging point for topic that includes whether the topic has been “Started” if its underway and when it was completed
- A “View Recommendation” button was introduced into the design as a CTA (Call to Action) for the topic and a tag that identifies when the recommendation is “New” following completion of a topic
Above: Image showing latest iteration of design