PRIMARY PLANNING TOOL

A redesign of our report view

One of the key features of our SaaS application, Primary Planning Tool, was getting negative feedback from our users. It was the first iteration of reports we had released but the feeling was pretty clear - we hadn't nailed it and there was work to be done. It was the perfect opportunity to dive into some user research to understand the problem, improve the implementation and get our users back on our side.

Introduction

Always judge the design by the results that it causes in human behaviour.

I think this is a great quote from a designmodo article which also summarises my approach to design. The iterative approach is deeply rooted in the philosophy of User Centred Design. With UCD there are continual cycles of improvement, learning from your users and iterating on your previous solutions. As designers we rarely get things 100% right the first time and that's something I am very comfortable with. A valuable lesson I learnt is to have the humility to learn from your mistakes and work to resolve them.

The Problem

The Primary Planning Tool is designed to help teachers create short and long term plans and export their Cuntais Miosula (Monthly Reports for inspectors and school principals). Our main focus in the first release was to give users a solid tool which is easy to use. While I believe we had great successes here, one aspect was clearly not successful. For every short term plan a teacher creates, they must also report and submit this for inspection. This report is essential to meet the guidelines set out by the department of education.

Sample Report

The first iteration of our Short Term Plan report - uses a single column layout


We initially designed our reports to be clean, responsive and linear. We followed a single column bootstrap grid to output all the data for the report. The first problem we came across was that teachers were inputting much more content than we expected and as a result, outputs were extremely long. In some cases reports were close to 16 pages long. This is much more than the 4 or 5 printed pages that teachers are used to. Not only did this make it difficult to consume online, teachers were no longer printing their reports. It is worth keeping in mind in some schools in Ireland, teachers are required to submit hard copies of their reports.

Additionally, teachers struggled when to engage with the new format and layout. Content was not laid out as they were use to. Sections were re-ordered and laid out differently to their current versions. When they invested so much time building their reports, they were clearly disappointed with the outputs.

Facing the problem

Sample Report

Some examples analysed of teacher's reports - lots of grids.


It’s never easy to write a few paragraphs on the various aspects of your design solution that you got incorrect. However it was clear as day what had gone wrong. I’ll summarise and then take you through how we addressed it;

  1. We didn’t spend enough time researching existing artefacts and reports
  2. We didn’t understand the full context of use of the reports - some were still printed, others were emailed to their principals.
  3. We didn’t fully appreciate their mental models of the digital reports and as such failed to extract some subtle hints which would have helped our design.

Research and Insights

We had gathered first hand feedback from our users from email, phone calls and onsite visits. With this I had a willing and eager set of users I could go speak to. I spent time on the phone, in schools and online with screen sharing and video-conferencing getting to know our users face to face and conduct some user interviews.

The first goal of the research was to gather as many existing artefacts and sample reports that teachers had available. I immediately noticed that teachers used various formats and layouts. Some used powerpoint, others MS Word. Some laid their documents out in landscape and others in portrait. However once you stripped back these subtle differences, there was one common feature - tables and grids.

The solution

In the revised design, I started to lay out the document with a flexible two column grid. With more awareness of how teachers prioritise content and where certain content can be lengthy, I structured the design to match.

Revised layout sketches

Initial Sketches on revised layout


I also looked deeper at the text formatting. Where previously we used lines breaks to distinguish content breaks, we now used bulleted lists and reduced the padding. These may sound simple but only when we truly understood the content we were confident to make these decisions.

Axure prototype

First prototype in Axure - New fixed menu and grid layout


In order to reduce screen retail space and give more attention to the content, I later proposed a left-sided menu. We also decided to remove the main application navigation in the report view. As we observed through user testing that the user is not focused on jumping between sections at this point in their workflow. As an added element we reduced the visual noise using a more muted white panel. I also used a key interaction design trick of a subtle animation (Side Note: See this great article on Micro-interactions) when the teacher switches between Edit Mode and Preview/Report Mode. Combined with the change in menu colour, the user is not in any doubt as to what they are looking at.

Animated gif

Proposed toggle animation when teacher switches between modes - created with Flinto


Another key insight of the research was that teachers were struggling to interpret and distinguish key aspects in the content of the report. To support this I introduced some visual hierarchy with icons to supplement subjects and clear distinct line breaks between sections.

Lastly we wanted to tackle the issue of mental models that our users had. As we had identified that users were comfortable with traditional documents editors, we needed to reflect this in the design. To aid this we included a Portrait and Landscape switcher. While this essentially expands the HTML canvas, it looks like a real document and our end users have reacted very positively to this. A final little touch is that they can now go fullscreen with the report in their browser, which is a really immersive experience.

Screenshot of final design

Final layout - Screenshot taken from live product


Outcomes

As a project team we were really keen to address this problem. We worked tirelessly to turn this around quickly. To ensure we got this right, we combined the feature release with user feedback on Axure prototypes, sample print-outs and peer reviews of the reports.

Artwork from email newsletter

Artwork created for email newsletter sent to our users


As a team we set some key metrics for this release and I’m happy to say we met each one. In comparable sample reports from before and after the design change;

ROLE

Product Design, User Experience Design, Interaction Design

DESIGN TEAM

Individual designer working on this.

SKILLS

User Feedback and Research, Ethnographic Research, Axure Prototyping, User Testing, Animated prototypes,