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

Upload Contacts

Our largest source of customer queries surrounds uploading bulk SMS contacts. This is in part because the current page is not exactly what you’d call intuitive. (click the image)

The sheer length of the page scares users. The instructions are at the top, perhaps logical, but most users forget the latter steps by the time they have completed the first stages. The “select fields” and “groups” sections in particular are confusing.

We’ve made a few tweaks and come up with this draft which we believe will make the process much smother.

You’ll notice the page is now much shorter with clear instructional copy to guide you through the process.

To de-clutter the page we’ve removed the instructions of how to convert excel to CSV. These is no reason to force you to read these instructions, we’ll include a link to a popup window so you can choose.

We’ve also introduced a preview sample of the uploaded data for you to confirm before committing. And, importantly, you’ll now be able to continue working in Textburst, sending and receiving SMS, while the upload is processing. The actual upload will process in the background, no more waiting for the screen to refresh.

A much improved process, I hope you agree?

Timeout Settings

We currently time out a session on 20 minutes of inactivity.

On this point we’ve listened to you, we’ve heard your requests, we know you don’t like this, so we’ve transferred power back to you:

You log in

You stay in

You log out.

Improving the “To” Field

As web technology improves it’s important to include those developments which add to the usability of our products. To make the send message page more fluid the inclusion of a clever bit of coding will certainly help in the “to” field.

I’ve struggled to describe this in a non techy manner but I think this series of images speak for themselves.

On the send an SMS message page, you have the “To” box that you can type numbers, names, or groups into:

As soon as you click in the box a menu appears:

Start typing and the Ajax functionality will automatically find relevant SMS contacts and groups, simply click the contact or group you were looking for.

Personalise

Finally, you may have noticed the addition of “Personalise” in the image above.

The current version of merging fields in a text message is cumbersome and hence frequently overlooked.

Recipients of SMS messages will undoubtedly respond better to a personalised message and hence why we have drawn more attention to this functionality.

As you are typing a message, use your mouse to click the relevant field to insert into the message.

Simple, effective, and helping you improve communication.

Until January

Hopefully you’ll see your feedback is being taken into consideration and an improved product is just around the corner, scheduled for release early January.

We have spoken to both users of our site, employees, friends and relatives.

Opinion seems divided on the subject but here at Mediaburst we felt that in 2009 most users have scroll wheels on their mouse and aren’t afraid to use them.

The advantage for us is we can use the top half (above the fold) to draw attention to the key aspects of our SMS products and provide more detailed information as you scroll down the page. The obvious advantage is by using this mechanism we can reduce the number of pages on the site making it quicker and easier for customers to find the information they need.

Fortunately I’ve just stumbled across this presentation by the respected Chuck Mallot which validates our position both conceptually and with some nice stats.

A copy of the presentation is available at SlideShare