Redesigning textburst

Redesigning a web app can be quite a complicated process and the redesign of Textburst was no exception. It involved lots of different steps and numerous design iterations before the final product was released.

Step 1 Listen to client

The first stage in redesigning textburst was purely investigative. It involved listening to mediaburst staff and trying to gauge what it is this product of theirs did; along with what it did wrong and what they would have liked it to be able to do.

Step 2 Stop listening, start thinking

Once I’d gauged in my mind how I thought mediaburst wanted their new app to work; I thought about it for a few days. Sidenote: Thinking time is so important; diving straight into creating a working model may make the client happier but in the long run it can lead to more design revisions later in the process.

Step 3 Create interactive ‘wireframes’

This was the first stage where the something actually tangible was produced. A wireframe is simply a stripped down version of the website/app. With a web app (as opposed to web site) it’s more important how it works than how it looks so creating these simple mock-ups of how the app will work gave mediaburst a great idea of how the new textburst would work.
In textburst’s case, the idea was very much to strip back any excess features therefore making it easier to use. Luckily, this was mediaburst’s philosophy too.

Step 4 Get client feedback

Once wireframes had been produced it was time to go back to mediaburst and see if what I’d produced matched their needs. I knew how I wanted Textburst to work in a perfect world but the world isn’t perfect.; Textburst sends over 4million SMS a month and they have a lot of clients to keep happy.

The mediaburst team printed out every screen of the wireframes and stuck them on the wall and checked that all key functionality was still present. It’s all every well stripping back features and simplifying but alienating existing users wasn’t part of the plan.

Step 5 Start design work (in a sandbox)

The wireframes were finally approved and it was time to commence designing the textburst Initial designs which incorporated the ‘textburst green’ were eventually thrown away in favour of a more corporate looking blue which we all felt would attract more customers.
I was very interesting in making sure this design looked and worked like web apps people are used to. With this in mind I studied Facebook, CampaignMonitor and tried to mimic what made them so simplistic and obvious.

Step 6 Think about client needs and change accordingly

The designed got handed over to the development team who then started to integrate the design into the current working version of textburst.
When the system was built it was then time to fine-tune it because it was apparent that the design wasn’t as complete as it needed to be. In particular we found ourselves asking the following questions:

• Was that screen’s purpose clear enough?
• Did we need another option in there and if so where would it go on the screen?
• How can we maintain simplicity when we we’re adding extra features?

This was a very interesting stage as it marked the point when the rest of the mediaburst team started to feel more involved. The engineers started to get really interested in all the small UI decisions and on one day in particular we spent a good few of hours discussing the positioning of micro-copy (and its wording) on one screen.

Step 8 Sit back and launch

Launching textburst was quite a scary proposition – thankfully the engineers did all of the work. Mediaburst had informed all of their clients about the changes before-hand but even so updating a core part of your business like this is no walk in the park. We all sat with baited breath in the office waiting for the deluge of complaints from angry customers but they never came.