For the password to access the prototype pages linked to in this post, email: rob.dale@education.gov.uk.
Through speaking to local authorities and stakeholders in DfE, we identified that there is a user need for tracking the progress of different metrics across family hubs. As a result, we started looking for a way for:
- local authority (LA) and voluntary and community sector (VCS) account managers to view performance statistics for ‘Find support for your family’ (Find) and ‘Connect families to support’ (Connect)
- our team and key stakeholders within DfE to view metrics for ‘Manage family support services and accounts’ (Manage)
The approach: understanding the data we could display
Our first step was to speak to the development team about the kinds of information we would be able to collect and display. We then grouped metrics together, based on the different products and user groups, and identified which ones we wanted to display for MVP.
In terms of our approach to insight, we took our initial designs to peer review and showed them to DfE users to gather preliminary feedback. With regard to LA and VCS user testing, we decided it would be more valuable to create something and then test this once we had more users and data from the service.
Solution: creating a ‘dashboard’ for displaying metrics
Once we understood which metrics we wanted to use, we looked at examples of how other services display metrics, such as:
At first, we thought about using cards similar to the Find a lost TRN metrics. However, this would have been a new component for developers to build and we wanted to keep the data as simple as possible for MVP.
Displaying the data
We decided to use the GOV.UK table component to display the metrics. This is the simplest way to present the data and it makes information easier to compare and scan for users.
Initially we looked at displaying all the information and tables for the different products on one page separated by headings. However, this led to a very long page which could negatively impact useability. So instead, we decided to create separate pages for each product to reduce cognitive load.
Page navigation and layout
To switch between pages, we added the same side navigation that’s used in the DfE design manual.
For the pages themselves, we used the GOV.UK layout with one quarter column for the navigation and three quarters column for the tables. This works well as most of the tables have two columns. We listed the services in alphabetical order as there is no hierarchy to the services.
All pages follow a similar pattern where overall total metrics are at the top of the page to provide a high-level overview. Then for Connect there are tables to breakdown the past 7 days and the last 4 weeks, because there’s more data available for this service. This is our MVP solution which provides some historical data, and we will look to add more granular detail in future iterations.
Solved an issue with individual data displays
For the Connect metrics we came across an issue with ‘Searches and connection requests in the last 4 weeks’, as the data we wanted to display required a 5-column table. This caused problems on the mobile view because the table was too wide for the screen. We applied an ‘overflow-x: scroll;’ class to the table to make it horizontally scrollable. As the design system suggests we also aligned numbers to the right of the cell when using multiple columns.
The updated prototype
The prototype has been updated for each of the user groups:
- LA account manager performance metrics
- VCS account manager performance metrics
- DfE admin performance metrics
Future iteration
Once we have more data and feedback for these pages, we’ll look to iterate the way we display our metrics. We’ll explore alternative ways for breaking down the figures, to ensure it’s providing valuable and actionable insight to users.