From humble Low-fi prototype to live online campaign

I’m a proud member of the Information Architects Institute (IAI) and follow their mailing list religiously. In fact, I get stressed out because I can’t read every message sent to the list due to my workload. Their spirit of participation and the ongoing innovation of its members motivated me to share the work I was doing with low-fidelity prototypes a few months ago.


That was the easy part – I found it much harder to put my reputation on the line and actually show how I implemented the concept on a real-life project. I realise that I open myself to criticism as I’m sure that not all the UX and IA “rules” (BTW I don’t believe in rules :) ) were met in totality.

That said, here goes…

I was still working for a digital advertising agency when I started with this project. I left the agency a while back for a highly technical environment (telco/bank) and can only now appreciate just how little documentation we did. We spent our time on vague ideas and left too much room for project members and clients to miss-interpret the ultimate goal and execution of the concepts we proposed.

I use the analogy of a radio advert – it’s not referred to as ‘theatre of the mind’ for nothing. Each person will interpret the audio segment based on the power of their own imagination. Great for radio adverts, bad for projects. When it comes to presenting a new concept to your client (and other team members) you don’t want to leave any room for miss-interpretation.

The Solution – let’s show them pictures.

Digital agencies have been showing their clients digital mock-ups for years, so that’s hardly a groundbreaking suggestion right? The issue here is that agencies usually present a Photoshop mock-up of what the project will look like. The challenge with presenting a true-to-life visual interpretation of a concept is that your target audience find themselves engaged in discussing look-and-feel rather than the overall concept you are trying to convey. Oh yes, and if they like what you did, try and explain to them that it’s going to take another 3 months to produce – right after they saw it on screen a few minutes ago!

The answer, Low-fidelity prototyping. I blogged about this a while back.
Check out the article (and example) for a quick overview of the hand-drawn low-fidelity  – [here]

Thanks to the feedback I received from the IAI I was enthused to apply my learning to a new project for one of the top four banks here in South Africa.

…but it was a campaign based site

I tend to shy away from campaign-based projects seeing that they are usually short-lived and pretty much a web-gimmick. The success of these websites are usually measured on the number of entries received and agencies pat themselves on the back as they rake in advertising awards for them. Now for a little humility and honesty. Did I go out and build something ground breaking? My name is “Werner Puchert” and I was part of a team who built yet another campaign based web site with all the bells and whistles. :)

That said. I grabbed the opportunity to experiment and apply some of the techniques I was experimenting with and only had the opportunity to research up to that point.

“We want a SIMS game!”

The senior creatives, the guys who came up with the above the line concept, wanted us to create a SIMS-style environment. At that point I wanted to jump out of the window. The site had key content elements and I wasn’t sold on the SIMS idea at all. I grabbed my good friend and senior Digital Designer Nick Mugford and we locked ourselves away for a week to brainstorm.

How can we build a “SIMS” environment that (1) users can navigate and use effectively and (2) answer the business objectives of our client?

We covered the wall of our office and started drawing and mapping out our ideas…
Check out my previous blog post to see what we came up with and what we ended up presenting to our client - [here]

We got the thumbs up, what now?

The post-presentation feedback after low-fidelity prototype was extremely positive. Our client gave us the green light to continue with the project specification document. We had to revert back with a cost estimate as well as confirm the partners we were going to use to build the 3D and Flash based elements. Separate teams, working in parallel with us, focused on the social media aspects and content for the final project.

It was one thing to pitch a project and concept but we were concerned about how the target market would feel about our 3D world. The only way we could test this was by doing some form of usability test. Our client agreed and we scheduled a paper-prototyping exercise – our first one ever! We chose paper prototyping because of its interactive nature The fact that we had most of our concept interfaces drawn out for the low-fidelity proto-type just made it even more convenient.

Nick popped the drawings into Adobe Fireworks and cleaned it up for us. We consulted the consumer market research to confirm the profile of our target audience. We then went out recruiting about 10 representative users for our paper prototyping session.

We filmed our Paper-prototyping exercise – check out the video to get an idea of what we did,

Note: I’ve never done paper-prototyping before and relied heavily on Dan Brown and Christina Wodtke’s publications to guide us through the process.

Feedback from the testing was extremely positive. We also identified some gapeing holes in our concept and the overall flow of the web element which we were able to fix before the first line of code was written.

With our usability findings in hand we documented the whole concept, defining and describing in detail how each element of the interface and the overall digital web campaign should fit together.

We returned to the client to present the cost and our final project specification. The project got the green light and we went into production.

The conclusion,

I left the agency shortly after that. Nick co-ordinated the production phase and I remained in touch with the team as they progressed. The project went live a few weeks ago.

The final version of the site is very close to the first low-fidelity prototype we pitched a few months ago. I have subsequently picked up some key elements that I would love to tweak, based on our first usability test… but I had to let go :)

I recently spoke to Nick again and he informed me that the post launch feedback from our client was extremely positive. Not only could the agency do their usual pat on the back but we had a number of users sign up for a new account with the bank. Response to the website surpassed the uptake of previous projects.

I can only come to one conclusion as I look back on the project. When I match this project with some of the other projects we did in the past the additional work we did on prototyping and usability test jump out as the key differentiators.

To quote one of those crazy infomercials,
“This stuff really works!”

In summary

To take you from low-fidelity to the final product,

  1. Low-fidelity prototype:
    The concept of low-fidelity prototypes (Blog Post)
    Applying it to this project (Blog Post)
    The Hybrid Site structure (2008-04-23_site-structure)
  2. Project Specification:
    Usability test (YouTube Video)
    UI elements for Project spec (2008-05-24_UI diagrams)
    Project specification diagrams (Will share this on completion of campaign)
  3. The result:
This entry was posted in General, Information Architecture and tagged , , by Werner Puchert. Bookmark the permalink.

About Werner Puchert

South African Digital Strategist with a passion for all things UX. A proud member of the Information Architects Institute Werner believes that UX is more than an industry or profession - its something that needs to be ingrained into whatever you do. Africa is a hub for innovation and hungry to share and collaborate with the international community. Werner’s goal is to understand how UX can be harnessed to benefit both the community and those driving innovation.