August 2013 to January 2014

Puluwan is a web app which helps students practice maths exam questions.

As the development of the Puluwan project was well underway when I joined the project, my first task was to do a full usability review of the interface at that stage. This gave me plenty of time and opportunity to get familiar with the problems the app solved, and how the user could complete tasks. My usability advice mostly revolved around reducing the steps in the user journeys and removing clutter from the interface.

I started working on the branding and interface design at the same time, which I’m finding to be the most effective approach in new projects. Working on the branding and interface design together means the work can complement each other, and any problems when the branding is introduced into the web app are anticipated, and dealt with, before they arise. When branding is completed before interface design, you can find issues with forcing colours and shapes into the interface just for the sake of matching the brand.

Puluwan style tile

My first style tile for Puluwan

My first style tile has a lot in common with the final interface. Following the usability review, I had a solid idea of what I wanted to achieve for Puluwan, so many of my ideas were formed early on in the project. I wanted a simple interface that helped the user focus on the questions.

Puluwan logo and logomark designs

Puluwan logo and logomark designs

The Puluwan logos came out of playing with the shape of the letters in Museo Rounded. I’d come across Museo Rounded in a previous project, and it had the potential to be a friendly and readable typeface for the project. However, I didn’t want to over-use Museo Rounded in the interface, as it could be distracting from the primary content, and would need to be installed on every teacher’s computer if they wanted to upload correctly-formatted questions to the Puluwan exams.

Formatting the questions was a big part of the Puluwan design. I needed to devise a system that would make it easy for teachers, who aren’t designers and don’t have fancy graphics software, to add and upload questions in a way that would appear consistent. Using an existing exam paper, I worked out font sizes and layouts for different types of questions. I chose to use Helvetica for body text as it worked alongside Museo Rounded, and would be installed on most teachers’ computers. We decided to implement the questions as images, as this would allow for the most consistent layouts. After extensively researching the markup and accessibility of maths and mathematic symbols, I had to give up on making the questions screen reader accessible, as the support for maths on the web is still very basic.

templates of typical maths questions in the same font and style

Some of the test question designs, with questions taken from a sample exam paper

From the final template screenshots, you can see how it all came together. I spent a lot of time trying to make the interface as accessible as possible. So, even if visually impaired users would struggle to read the questions, students using keyboard navigation and with other accessibility needs, would have a better experience.

Dashboard with navigation, lists of types of questions and test results

Simple dashboard showing the options available to the students

Login page with logo and simple form

Login page showing Museo Rounded used for headings and Helvetica used for body text

Screenshot of exam test with red areas showing the errors in the test answers

Showing the student where their test answers had errors

Screenshot of test with simple maths questions

Puluwan exam test


In progress