The Key Is E

The Key is E is a “social business channeling the power of education, entrepreneurialism and creativity to impact social change” amongst African children “through a multi-tiered, educational approach which harnesses the power of creativity and music, engages schools and ignites dreams.”

The organisation was founded by Emmanuel Jal, a Sudanese ex-child soldier turned musician and activist and Paul Lindley, founder and CEO of Ella’s Kitchen, a leading global brand of baby and children’s food.

They asked us to create a logo and website that was stylish and content lead so that the site stayed vibrant and up to date.

The Logo

The first task for this project was to establish a visual identity for the organisation, starting with a logo.

The name ‘The Key is E’ cinjured up lots of potential imagery so initially various possibilities were presented to the client with the intention that these could be whittled down to a more specific direction.

After the first round the client indicated that they were most drawn to the keyhole/E motif so that idea was developed and refined until we had a design that suited the client…

The Key final logo

The Key final logo

The final logo is legible at at various sizes and can be inverted for use on dark backgrounds.

Colour scheme and Imagery

There had already been some illustrative imagery created by Carwell Casswell, for the Emmanuel Jal album that would accompany the website. This needed to be incorporated in to the look and feel of the site and therefore had a particular influence over the colour scheme chosen.  The client wanted the design to be bold with a nod to African patterns combined with a modern, contemporary feel.

Website Design

We were hopeful that, due to the nature of the organisation, the dynamically generated content for the site would naturally produce some great visuals. We wanted to put this at the heart of the design so that the site was always evolving to reflect the work being done. I did this through the use of large, easily updatable header images informed by the content of the pages and by using featured image in a grid layout on article posts.

The Key article grid with large featured images

The Key article grid with large featured images

The home page was framed around two short films on a carousel that explained the organisation’s vision. Underneath that was some scrolling mission statements requested by the client followed by the latest posts from the main content areas.

Website Development

As with most projects the site needed to be easily updatable by the client and work responsively across all major browsers. For that reason it was built using the WordPress platform combined with a custom template, the starting point of which was a tested fluid framework developed by The Space Room.

The design for this site was fairly ambitious with lots of elements that would need to look correct and respond for different devices. It also had many different content areas which needed to be built into the WordPress interface as custom post types with custom fields.

The home page proved to be the biggest challenge with carousel, scrolling statements, video content and testimonials to consider. The biggest challenge was getting all these different elements to work well for various screen sizes without the page load time becoming bloated.

Technologies used

  • Photoshop
  • Illustrator
  • HTML5
  • CSS3
  • SASS
  • JQuery
  • Grunt
  • PHP
  • WordPress
  • Responsive web design
Visit the website