The British International School, Cairo

I led the design and developmemt of a new website for this fabulous international school

Year

2013

My role

Visual design
Front-end development

I was excited to lead the design and development of a new website for the British International School in Cairo. This fabulous institution is a celebration of multiculturalism; their British sensibility juxtaposed with Egyptian hospitality.

This is the story of how our small team designed and built a fast-loading, responsive website powered by Firefly.

Breathing new life into an ancient deity

Sometimes it’s the case with busy schools that they don’t have much in terms of brand visuals and assets. We found it particularly challenging to work with the current version of their emblem depicting the ancient Egyptian god, Throth.

Of course, with a school as fantastic as BISC we wanted to help them out. We created an updated, modern version of Throth as a responsive SVG that gave us the flexibility on the web. We also provided a new, simplified set of standardised brand guidelines that the school could use beyond the web.

Developing a look-and-feel

Using an approach called style tiles I worked through several different versions of the look-and-feel for the new site. This technique allowed me to work-up ideas quickly and get agreement from the client more easily than mocking up full pages.

With any design, I find that it’s relativity easy to create something good; taking about 20% of the overall work. The hard part is getting from good to great. This is where style tiles really come into their own: getting to the great much quicker.

An early set of style tiles I developed that helped get buy-in from the client.

For parents on the go

Testing told us that around a third of visitors were accessing BISC’s existing site on their phones. With a further fifth using tablet-like devices it was clear we had to deliver a great experience for all visitors, no matter what device they used.

We also knew that mobile networks in Egypt were sometimes unreliable, so we needed to build a site that would work even when connection speeds were low. With a budget of 300 kb per page; each page would have to be useable before any enhancements were loaded.

This progressive enhancement approach of loading the content first and deferring things like photographs and animations until later worked brilliantly. Loading the site on a poor connection was lightening quick and meant parents could find relevant information even if they were experiencing network issues.