It’s not often that we find ourselves (or our processes) the focus of much scrutiny as our industry tends to be more about the visible results. The behind-the-scenes stuff stays, well, behind-the-scenes. You can imagine our surprise and trepidation then when we were invited to write a guest article on this blog about the design process behind the new Mediaburst website. Well we’re not ones to shy away from a challenge, so here goes…

Consultation

Our redesign began with a meeting between Managing Director Gary Bury, developer Phil Thompson and ourselves at Mediaburst HQ, Alderly Edge in mid September 2009. We had already worked with Phil on a website for Cheadle based agency Squad a few months earlier so were very pleased to be collaborating again with such a skilled design and development savvy individual.

Gary had a very clear vision of what he wanted for Mediaburst: clearer segregation between bespoke services and core SMS product offerings. It was refreshing to work with a client that really understood the power of effective design and communication. The consultation gave us an insight into the inner workings of Mediaburst, where they were and where they wanted to be in the future. This combined with a rough sitemap and some design likes/dislikes and we were ready to get stuck in.

Scamps

First off, we tackled the homepage with some ultra high tech pencil scamps.

These quickly gave us the ability to try out some layouts before swiftly moving on to the creation of three initial Photoshop concepts.

Initial Concepts

Three is our magic number when it comes to initial concepts, it allows us to explore different approaches and also gives the client that all important element of choice. We tend to get an immediate impression of what works well and usually, the client picks our favourite. Thankfully this occasion was no exception.

Initial homepage concept with placeholder illustration inspired by Tom Pearson

A key challenge for us was the introduction of a brand personality that clearly communicated and unified Mediaburst’s core products. These products also needed to have the visual strength and impact to stand alone. We decided that illustration would be best suited to this task.

Illustration

Gary and the team loved the personality that illustration lent to the designs but were keen to avoid anything too cutesy or “CBeebies”. We explored the impact of differing styles before commissioning talented illustrator Stanley Chow to create a family of birds that represent Mediaburst and their three products: Textburst, Ooutlook Mobile Service (OMS) and Email to SMS.

Bird illustration evolution

Concept Application

During the evolution of the bird illustrations we kept ourselves busy with the application of the chosen homepage concept to the product pages. The products were designed to exist as separate entities and present their attributes in a concise, easy to follow manner. The aim was a user journey that flows effortlessly from description to price plans to sign-up.

Final homepage concept

Textburst product page design

Textburst price plan page design

Textburst signup page design

Mobile marketing page design

Copy

Of course copy plays a vital part in the creation of a successful website. This aspect was capably executed throughout the design process by copywriter Andy White (read about Andy’s involvement here).

Final Artwork & Design Review

Upon delivery of development-ready artwork for the homepage, product pages and mobile marketing page in mid November, it was agreed that Phil had everything he needed to continue the development of the website, rolling out our concepts across remaining pages of the site and building a beta version of the site by the end of 2009. We carried out a thorough design review of the beta website in early January 2010 so that Phil and the team could make final amendments in preparation for launch on Wednesday, 20 January.

Result?

If we’ve done our job properly, the real measure of success of the new website will be an increase in traffic, new business and a return on investment for Mediaburst. Only time will tell but early signs are positive. We believe that we have helped to create a vast improvement on the site’s predecessor and an enjoyable user experience. If you think otherwise feel free to buy us drink and tell us why!

Materials & Tools Used

Consultation:

• Tea, coffee, biscuits (one chocolate) and sandwiches.
• Brains, pens, pencils & paper.

Project Management:

• Google Apps
• Basecamp

Design:

• Pencil and paper
• 960 Grid System
• Adobe Creative Suite