CICM Globe Header Image

Web Design Case Study: The Centre for Issue & Crisis Management

CICM website on iMac
The Centre for Issue & Crisis Management site

www.issue-crisis.com

A while ago, one of our contacts in London came to us for a branding and logo set as well as a website for their new venture. We launched the previous iteration of the CICM website not long after, and over the years produced numerous whitepaper articles, presentations and so forth for them. The website, however, was beginning to creak at the edges and show it’s age. It was time for a refresh: a responsive redesign to go alongside their increasing client list, courses and publications.

What we did:

— Full preliminary design mockups in Adobe Illustrator and Photoshop
— Completely hand-coded fully responsive HTML/CSS/jQuery website
— Implemented on our preferred Content Management System (CMS)
— Maximised Search Engine Optimisation (SEO)
— Built user-friendly publication and course functionality that populates the content across various pages based on existing categories

The core target of the website was to promote their services — Consultation and courses — as well as the free articles/publications the staff and guest authors write. Rather than clutter the homepage with related-but-not-quite-important images on a slideshow (effectively hiding otherwise important information), we elected to keep it simple. A summary list that is set apart from the remainder of the content (to draw attention and improve click-through-rate) designed to the client’s specifications — Gold and grey! This is intentionally different to the white/blue/red scheme throughout the rest of the site, and as such it worked well as an attention-grabbing device. We carried through that styling throughout the site to aid User Experience (UX) — The most important bits and section navigation would always be displayed top-left in the dark grey box. Consistency is good stuff!

CICM website screenshot
CICM’s course page

Another fancy feature is the hand-coded publication function. The old site presented them as PDF downloads (which we designed) with small summaries, but it was a little long-winded for the clients to use and was a little cumbersome for us. Simple, but clunky. This time however we sought to eliminate that issue while promoting the newest, freshest content. Through our preferred Content Management System (CMS) we built the functionality to add a title, PDF, image and description that would populate numerous sections in one fell swoop: The Homepage gained the two latest articles, a featured article and a random article (that excluded the existing ones so that users never see a duplicate); the Publications section gained a new publication tile for that article and a generated page with either the whole article or a short excerpt (depending on length); and the Courses/Consultation Service pages serve up a random selection of related articles and courses — Randomised from a specified category or categories! Clever stuff.

CICM website screenshot
CICM’s dynamic article selection functionality

Naturally, we wanted to keep the design elements clean and sharp. Their branding focussed on “the thin red line” of protection, and we wanted to enforce a feel of solidarity. Convenience played a part — It made the design process for the UX on mobile devices much more streamlined, too. Given the nature of the content, it made sense to design it with a sense of minimalist clarity and ensure the calls to action (CTAs) were prominent throughout without resorting to imagery which could affect loading speeds, or obnoxious tactics that frustrate or confuse users.

Mobile and responsive web design is ubiquitous in this day and age, and so we make sure all of our new sites are mobile-friendly and passed by Google’s rigorous tests. As such, CICM is fully responsive and suitable for use on any mobile or tablet device as well as desktops. The client also made use of our SEO package, which means their site gets an extra boost of fine-tuning to the back-end to make sure Google, Yahoo and co. all take kindly to it.

CICM website on iPhone
CICM’s responsive web design
CICM website on iPad
CICM’s show/hide staff profiles

We also implemented an attractive HTML5 background video on the homepage. Check it out!

Leave a Reply

Your email address will not be published. Required fields are marked *