Ipswich Choral Society Redesign

  • Category: Web Design 
  • Completed at: Personal Project, 2014
  • Responsibilities: Design and Layout
  • Tools: Photoshop, Balsamiq, Bootstrap 3

I was looking for a site to design and came across the website of a choir from my home town – http://www.ipswichchoralsociety.org/  It’s not a bad site – it loads fast and contains a lot of information, but the design is a little dated and there don’t seem to be any clear goals for the visitor.  I decided it’d be a good candidate for a redesign, and possibly a little tweak to the brand too.

ics-current-siteics-current-site

I identified some key areas I’d like to improve:

  • Current layout follows a basic grid, but there’s not much consistency in what goes where
  • Heading font is consistent with the site’s header, but it’s not very easy to read
  • The body text size is quite small
  • The side navigation menu is small and not particularly easy to notice
  • Forthcoming events does not stand out enough or feature enough information
  • Logos need to be grouped together, and coloured consistently
  • No clear goal – what do we want the home page to achieve?
ics-notesics-notes

I also did some research on sites for other similar organisations.  Most were pretty poor, but a couple stood out:

  • http://www.henleychoralsociety.org.uk/ – Very nicely designed site, with a logical layout and good balance of content.  It showed it was possible to produce a design choral society site with the right design and photography.
  • http://www.dws.org/ – Great use of space, and makes the organisation seem fun and interesting.

Both these sites were important because they gave a personality to the organisations.  There’s a certain vibrancy they have that most other sites don’t.  They helped create a brand; a trick that most similar sites had missed.   

Brand Refresh

ics-logo-refresh-2ics-logo-refresh-2

I wanted to give the brand a quick update because I felt that it was a little predictable.  The use of Calibri (whilst a fairly decent font) made it feel like it had been created in Microsoft Office, and overall it was a bit of a missed opportunity.  I wanted to add some character, and a font change seemed to do this pretty well.  Brandon Grotesque lent a good quality feel with a modern style and the relatively large stroke widths echoed of musical notation.  It turned out to be the basis of my redesign.  

Full Size Design

Ipswich-Choral-full-size-9Ipswich-Choral-full-size-9

I was aiming for something that felt good quality, established and slightly quirky.  I wanted to communicate the creative side of the music without being staid or boring.  It needed to inspire people to come to a concert or become a member.  

The content had three main goals –

  1. Giving a picture of the organisation
  2. Encouraging people to join
  3. Advertising upcoming events

I placed each of these items in the top section of the site, and tried to make them stand out as much as possible.  They also had to be concise and informative.  It was important that they didn’t shout too loud though as there was other important content on the page.

I added news, support links and affiliates and funding on the bottom row.  I wanted to make it easy to get to the content people were interested in straight away, which is why I added the Amazon and iTunes links straight on the page rather than making people click through to get them.  

The logos in affiliates & funding are not particularly well organised on the current site, so I tried to enforce consistency by desaturing them and placing them in the same section.  They’d change to their appropriate colours on mouseover.

Medium Size Design

ics-medium-sizeics-medium-size

The decrease in size was fairly simple here.  I squashed the columns and made some of the font sizes smaller.  I decided to crop the centre photo because I would be able to retain the aspect and stay fairly faithful to the content.

Tablet Size Design

ics-tablet-sizeics-tablet-size

I went with a two column layout here, further cropping the Join Us photo so it would fit.  I increased the font sizes in some areas, particularly in The Choir and made the logos in Affiliates & Funding smaller.

Mobile Size Design

The mobile size design essentially ended up being a tweaked tablet design, with one column and a mobile-friendly menu.  

Summing up

I’m pretty happy with how this design developed.  I found it quite easy to develop the initial concept, and it adapted quite well to a variety of different sizes too.  I really like the overall feel, which communicates a professional and cultured image whilst retaining a quirky and interesting feel.  It’s a big improvement over what they had before in terms of brand and content. 

I will contact the choir and ask them for their feedback.  The design will be updated according to their response and I’ll update here when it happens.