One of my first projects when I joined Angel was to re-design an important section of Balance entitled ‘My Pupils’. The aim of this tool was to show an overview of each child in the teachers class and display gradings for each pupil. Taking into consideration, variants across academic years and subjects.
This was an analysis driven tool to help the teacher see potential, struggling children and set up relevant interventions, in advance with the ability to generate PDF reports that teachers would use for parents evening, class assessment etc.
After having a bit of a crash course in education and Balance, I made the following list of points from the screenshots shown.
Point 1:
We only show one grading at a time. For example in the screenshot you can see everything on the pie chart is green. This is the grading for ‘secure’. If you then want to see another grading, you have to use the filters at the top.
Recommendation:
I really wanted the user to be able to see all the gradings on the same pie chart without the need to toggle. We’d received feedback from users already that this would be a big help and far less clicks, so I knew this was important to get right.
Point 2:
When a user clicks through on a specific subject, they are able to drill down further and see how that pupil is performing in each module, sub-module and objective. Again, I wanted all gradings to be visible on the chart as well as all the % figures. This would be a little harder to achieve due to the small size of the pie chart.
Recommendation:
I am going to attempt to show all gradings and % figures and make them appear more ‘card’ like. The flow works quite well on this page so it’s a bit more of a UI exercise for this section.
We set up a small meeting, after school hours, with a few teachers to help understand their frustrations and gain some direct insight. We had refreshments on tap and the feedback helped immensely.
From the meeting it was evident that the users were frustrated toggling between the gradings, especially when they wanted to print the reports out for each pupil and had a lot of printed sheets.
I asked them to talk me through the process of selecting a pupil, then a subject, module, sub-module and finally an objective.
After the teachers had left, we completed a small affinity diagram exercise to note the findings.
How might we…
How might we reduce the need for paper waste?
How might we let the users see all the gradings at the same time?
Using the ‘crazy 8’ workshop technique, I began sketching different possibilities to lay the pie charts out. I also began looking at the % figures and how to display them and not have it look overly cluttered and busy. I looked at how other similar organisations displayed their data.
I wondered if I could toggle the % figures on and off so they are hidden by default, just to help keep it clutter free. I will ask users about this though as I know hiding things can often have complications.
I’ve highlighted in yellow on the task analysis diagram the elements that required a secondary click as well as marking these up on the screenshot below.
I wanted to understand the overall goal for the user to see if I could identify any steps that could be reduced or improved.
Conclusion: Viewing the below flow diagram made me realise that the further you go along the flow, the more options the user has. I wondered if we could reduce some of these steps 🤔. For example, I remembered that in the user feedback session a user had commented on the meta data of the pupil being hidden by default but available to see via a chevron. I decided to have this information on show to reduce the secondary actions on the page.
Also, if we can show all the gradings at once, then we don’t need to include the depth of learning filter, which again would further reduce the secondary actions.
The biggest change is quite evident, I tried to show all the ratings on the charts and the % figures below.
As I started working on the above card design, based off my low fidelity sketches, the stakeholders asked if I could make the individual % ratings clickable. The idea being that they would click through to a separate page that highlighted all the objectives that made up the % rating. It made sense, but I had to amend the ratings on the cards so that they looked like individual links. The original idea was that the whole subject card was a link, but now we were adding in individual links for the % ratings.
Below is a walk through of the page which you would arrive on once the user selects a rating. I used the rating colour to highlight the drop down menu and sub-modules.
I was asked by the stakeholders to allow users to create a learning event for the chosen individual. I used the draw component from planning, which had plus icons appear when the draw is opened, to add curriculum. The result worked well and was consistent with other areas of Balance.
After speaking to various stakeholders over the low fidelity sketches, I began working up some high fidelity prototypes which can be seen below.
You can see I kept the meta data, the information underneath the pupils name, on show, not hidden behind a chevron.
Above is a visual of the main follow on page that I re-designed. It shows the modules, sub-modules and objectives of the chosen subject. I made some UI improvements to modernise it. You can see how this page used to look via visual A.
I tried to make the options look a little more like cards to match the subject page. I introduced a grey banner to house the page controls at the top. I found that in Balance there are lot of options and filters that control the data being shown on the page. I thought that creating an area to house these filters would help the user understand the hierarchy of the page.
Visual A - original design
Working on such an important part of Balance was an honour. Like any UX project, the journey doesn’t end. I’m constantly reviewing Hot Jar recordings and speaking to users in monthly huddle groups to obtain feedback.
This has led to further enhancements since creating this site, which is all part of the process and the joy of working for the user.
