Tutor Plus – Web Design Project
Client Work | Solo Project | 1 month
Overview
Tutor+ is a peer tutoring management web app developed by DueNorth Systems. It’s modern and responsive, adapting to the needs of every school it is implemented in. Tutor+ helps administrators lessen their workload, tutors to help students, and students to get the help they need. Tutor+ needed a website designed for their launch in Spring 2019. Together with DueNorth Systems, Sesame Design developed this unique and interesting design concept.
Concept
The website is a series of square tiles, each taking up the whole height and half the width of the viewport, creating a checkerboard pattern. When looking at the site up close however, the checkers aren’t distracting. Checkers are a common theme in educational design, representing things like chess, plaid, and checkered paper for math and geometry. Along with the strong clean lines of the checkers, I decided to use a flat vector illustration style with lots of smooth curvy lines for contrast.
Research
Most of my research consisted of client meetings to gather necessary information and pitch ideas. I referenced a number of other educational websites, not for inspiration but rather to scope out the competition. I noticed that lots of them featured corporate stock photography and subdued colours. Tutor+ had to be different. The brand colours are yellow and orange, so I chose a bold primary blue to go along with it.
I knew I wanted to use illustration instead of photography after looking at other education websites. The same old classroom stock photography was too predictable. It was also very important for me to show an accurate representation of our diverse community. So I chose an open-source illustration library called Humaans. Their human illustrations fit perfectly with the site’s style and message.
Process
Before I started digitally designing the site, I created a kit of elements for the project. I knew that there would be a multitude of pages, so rather than designing each one I opted for a more efficient and budget-friendly approach. Out of the elements that I created I made templates for the two types of pages we needed, and passed along content and design documentation. That way the developer could piece together the necessary pages now and later on in case an expansion is needed. I also designed two sample pages with the necessary content for both to show how everything fit together.
The biggest challenge of this site was keeping the concept strong throughout display sizes. For the mobile site, rather than try to cram the checkers in, we decided to take a different angle on the concept and use tiles styled like sticky notes. That way the stationary theme was consistent, but the execution made much more sense for smaller screens.
Result
The Tutor+ site is striking and bold, sure to grab any educator’s attention. It provides comprehensive information for all those involved in the educational process, and more. Here’s Tutor+!
Next Project
The Bar Lady
A modern and chic take on gourmet chocolate.
