At Stiff Rowlands we spend a lot of our time attempting to get under the skin of our clients. Not in a creepy “Silence of the Lambs” way, we just like to get a thorough understanding of their business so that we can deliver the right solutions.
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:
Design:
- Pencil and paper
- 960 Grid System
- Adobe Creative Suite
Even though I’ve been privy to this process it’s still immensely fascinating to read all about it.
In particular, the evolution of the bird characters as they morph from those quirky initial versions to the more standardised final versions, is great to see. I can recall falling a little bit in love with those characters upon first sight and, frankly, then becoming a tad disillusioned as they started to change but looking at how they evolved proves how right those changes were.
I too find it fascinating to look back at the process. In particular to see the hand drawn scamps which I was never privy to.
It’s also interesting to see how close to the final design those scamps are.
[...] Web Design for Dummies [...]