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 to explore early visual styles.

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

Early full-page explorations for Nautilus.

HTML 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!

The Dashboard from a click-through HTML prototype I built so we could test and quickly make changes

Ongoing development

Following the launch of Firefly 5 in 2014, we added numerous features and a significant update — Firefly 6 — in 2016. I’m happy to report that Nautilus has grown and adapted with Firefly and is still one of the most popular themes today.

Nautilus grew and adapted with Firefly over the years; this is from Firefly 6

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. Nautilus was our first theme to offer our “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.

By adding two colours and a logo, Nautilus automatically adjusts to reflect the brand of individual schools.