Our Online Canteen | eCommerce for Schools

Our Online Canteen is an online platform allowing parents to order & book food for their kids at school. Each school can register and upload its own menus, uniforms and more!

Demographics

Our Online Canteen is a web service that allows parents to order their children’s school materials online. It would be used by multiple schools.
OOC flight

School Coordinator
They manage the inventory and itinerary of the school, and manage multiple internal stakeholders making sure everything is up to date. 

OOC parent

Parents
Time-poor and multi-tasking, the parent needs to have simple and clear directions often with children going to different schools.

OOC Children

Children
Not a user of the platform, but the recipient of it. If the platform fails to perform they will be negatively affected. 

OOC logo

Logo Redesign

The logo desperately needed updating. We created several variations of the apple logo in the flat style with different levels of abstraction.

We had to be careful not to promote one particular facet of the business more than another. With that in mind, we landed on the segmented version and the client also felt it reflected this.

Style Guide

The colour pallet was primarily limited to different hues of green on white with minimal instances of brown. The visual hooks would be created with the imagery.
OOC logo style guide

Imagery

The imagery offset text forms and blocks and acted as a navigational / contextualization tool. The colours for each image were modified to unify the page.

They could be combined, placed on shelves and overlapped to marry the content it was next to visually. 

OOC imagery
OOC-1-1
OOC-2

Web design

A combination of large white areas, clean and legible, san serif fonts, analogous greens and photorealistic iconography created an experience that was functional, but playful.
OOC-menu1
OCC-menu2
OOC-head3

Information Architecture

Our online canteen internal screens have a school end and a family end both with multiple users. Correlating UI elements between each version is the simplest way to meet both objectives.

Website and Components

We combined a clean and polished look with playful visuals to covey utility and professionalism. 

This brand met the pragmatic demands of the users without sacrificing personality.

OOC home
ooc-2
ooc-3
ooc-5
ooc-6
ooc-7
ooc-4

Interface Design

With the Online Canteen interface, we prioritised clarity and legibility – the primary use case is to be functional. 

We also made the website and management areas fully responsive down to mobile, although we saw that currently it was primarily used on desktop. 

Final Outcome

The final result is easy to use and has an interface that can be expanded upon.

We see the design as a perfect balance of usability and user experience that should make many parents’ lives just a little bit easier.

They need as much help as they can get! 

OOC website mockup

“Michael has had to collaborate with multiple stakeholders and colleagues across the business to deliver the new brand/website/ iconography and associated materials in advance of the launch. TOP work Michael!

Jarred Marks – Our Online Canteen

Let's see if we click 👉

We have experience at every level and stage. Talk to us about strapping a rocket to your roadmap.

Cyber man 1