Schools love Firefly’s customisable, built-in templates that allow them to express their personality. To accompany the release of Firefly 5, I designed and built a new theme to replace the much loved “Blue”. We called it Nautilus.
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.
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
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!
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.
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.