I created a theme for the Firefly learning platform


Jan 2015 - August 2015

What I did
  • Web design
  • Web development

The spirit of the old

The classic Firefly theme “Blue” was a firm favourite amongst teachers, so I had a challenge on my hands to convince them that my updated successor was as good.

I started with Style Tiles — a technique to quickly iterate through ideas and get to the great ones rapidly. I shared these around the office and with those teachers kind enough to give me their opinions.

A set of style tiles I created

A set of style tiles I created

Early design

Once I had a handle on the overall look-and-feel, I translated this into full-page mock-ups for the significant areas in Firefly.

Mocking-up full pages in Sketch allowed me to “stress test” the design before starting the more labour intensive work of creating HTML and CSS. I could quickly see what worked, what didn’t and get more feedback from the all-important teachers

An early design for the Nautilus Firefly theme

An early design for the Nautilus Firefly theme

Building a prototype

Unlike a website, Firefly isn’t a curated collection of content — it’s a tool that teachers use in a myriad of ways. By creating a click-through prototype before building a full-blown Firefly theme, I could quickly test all kinds of content and make adjustments to ensure that Nautilus looked great — whatever teachers threw at it!

Explore the prototype

A standard theme; a customised experience

A big challenge that we wanted to address with Nautilus was customisation. Plenty of schools wanted to inject their branding into Firefly, and we’d obliged by developing custom CSS for Blue. Some intrepid teachers had even started hacking Blue’s markup and styles themselves.

All these custom modifications meant that each time schools upgraded to the latest version of Firefly, something inevitably broke. I built Nautilus with “smart-rebrand” technology; meaning schools could provide two key-colours and a logo, and the theme automagically adjusts by using tones of those colours throughout — seamlessly matching the brand of the school.

No more broken customisations; just beautiful, simple branding for every school.