Within each issue of their publication, .net magazine invites a designer to redesign a website submitted by a reader as part of their ‘Makeover’ feature.  Jay was contacted in 2010 to do just this and jumped at the opportunity to be involved.

The website that Jay was tasked to redesign was that of ‘Sparks‘, a children’s medical research charity based in the UK, and the makeover was published in the October 2010 (Issue 207) .net print edition.  The original version of the website is included below:

After considering the brief and the existing website design, it was clear that a lot of time had been spent on the website and the content, but it wasn’t presented in a way that encouraged users to get involved.  The redesign involved creating an aesthetic that was appealing to users and encouraged engagement, remained professional and delivered information with more clarity and structure:

You can view the full version of the design in our work section.

The full article excerpt is included below.

Sparks.org.uk Makeover

The content and information provided within the Sparks website is up to date, relevant and thorough, but it seems that the design and information architecture haven’t been given the same level of attention and they’re affecting the website’s real potential to engage its users.

On first look, it’s obvious that the people looking after the Sparks website have dedicated a great amount of time and effort in delivering what they have today.  They’ve already got all of the right information for a great website, but aren’t presenting it in a way that is appealing to the user.   Added to this, the site seems to be directed at the wrong audience – it’s too technical and lacking the vibrancy and fun that exists within the charity and the team behind it.   The foundations of the website are there, but it falls short of presenting an inspired design that properly conveys the charity’s background and purpose. Overall I found that the biggest issues and areas for improvement were:

• The colour scheme is not complementary and often makes the website difficult to use
• There are too many items competing for our attention and there’s no clear hierarchy
• There’s a lack of refinement and attention to detail
• The main text is justified and reasonably small, which makes it difficult to read
• There are navigation elements throughout the site with no clear function
• There’s no distinction of purpose between content areas

The site needed a complete refresh – it needed to present itself in a way that was appealing to its viewers, remained professional and was able to deliver information with more clarity and structure.

Look & Feel

The biggest issue I had with the existing website is that it wasn’t what I’d have expected from a charity dedicated to helping children.  I wanted the new website to reflect it’s values directly and communicate its purpose in a more light-hearted and welcoming manner.  With this in mind, I decided to begin with the logo and colour scheme.

Starting with the logo was a tough decision as it’s a part of Sparks’ established brand.  I didn’t want to make any radical changes, just introduce a more approachable aesthetic that would fit in with the rest of the design.

The result wasn’t too different, but moved away from the harshness of the original typeface.  I chose Quicksand for its approachable aesthetic, but also because it was available as an embeddable web font which could be used for headings and display text within the website.

“They’ve got all the right information for a great website, but aren’t presenting it in a way that’s appealing to the user”

– Jay Hollywood

The existing colour scheme lacked vibrancy and in some places made the website difficult to use.   To introduce a sense of fun I decided to incorporate a more pastel-based colour scheme.

It was important to keep blue as the primary colour, but I also brought in a set of secondary colours that would complement the design and help with the separation of content.  Added to the new colours and vibrancy, some subtle textures would bring more life to the design and further communicate that the focus is on children.

The navigation on the existing site was prominent, but lacked personality and wasn’t encouraging users to browse.  I moved ‘Login’ to the top of the page and removed the words ‘in the’ from ‘News’ as I felt that they were unnecessary and misleading.  I decided to incorporate relevant icons for each of the main navigation items in the header. These would be useful for increasing the prominence of the navigation overall, but would also encourage interaction, help users to visualise the purpose of each section and maintain the new aesthetic that I was aiming for.

The original website included several areas for important information, but there was no hierarchy between them.  With the new design, I introduced a ‘feature area’, with the intention of displaying five interesting elements that Sparks would want the visitor to see, using JavaScript to cycle through them over a period of time.

This area sits directly under the navigation and includes a title, image and summary for each item, which links to a page of Sparks’ choosing.  Added to this, the most recent news and events would be displayed with less prominence below, along with the introduction from the current website.

Adding Clarity

Included within the existing design was a link to sign up to the Sparks newsletter and a list of ‘Quicklinks’. I decided to incorporate these into a sub-footer between the main content and footer of the new design. This would bring clarity and separate of these items from the main content. Also included in the sub-footer was an expanded set of supporter logos from the existing design, which reduced the need to animate them one by one and helped display them in a way that wasn’t exhausting for the viewer.

Finally the footer more structured and re-introduces the colour and texture from the top of the page.  Included here is Sparks’ original content, but also a repeat of the main navigation items and social links to encourage engagement.

Thanks for reading!

Filed Under Design, Insight, Published
Related Posts New humaan website! , Ideas 7 – Tomorrow when the web began , Case Study: Explorer Travel , Case Study: Counter Culture , The creative brief – a designer’s best friend

You can follow Humaan on Twitter and subscribe to our RSS feed.