Disclaimer?

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.

www.standardbank.co.za/achiever

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:
   http://www.standardbank.co.za/achiever/

In business we tend to lose perspective on who’s ‘needs’ we’re actually building our business models on. It’s easy to talk about “user needs” and “clients” when you substitute your own needs into the equation.

As the strategists race ahead with the Quantitative and Qualitative research I realized that there was a huge opportunity for me explore yet another avenue of the great world of User Centered Design.

So what can I do?

Persona development jumped out as a perfect deliverable that I could add to the marketing and development mix. I’ve heard Jeff Parks, from the IA Podcast, speak at length about this technique but never had the opportunity to try my hand at any of it.

So what are personas?

Well, basically – it’s the practice of creating characters that represent your users/consumers. They could be totally fictional or even based on people you know. The key criteria are that these characters should fit the profile of your target user group. It’s also critical that you incorporate these personas into all the documentation and brainstorming session you engage in. These characters must follow the business around, leaving them in your drawer or on a document server makes this exercise pointless.

A sample of one of Todd Warfel’s persona diagrams.

I really like the work that Todd Warfel’s doing on personas. I really recommend checking out his blog (search for personas) – http://toddwarfel.com/. You can also find slides of presentations he did at the recent IA summit on Slideshare.net

Why personas?

The worst thing one can do is build something that you think is “cool” – especially if you don’t fit the profile of your user base. Creating personas and incorporating them into your deliverables helps keep your initiatives true and focused on the target audience.

How to persona?

I found it hard to get a step-by-step guide on creating personas. Boxes and Arrows and all the other UX blogs I frequent have detailed information but there’s no step-by-step quick fix. It seems that a lot of it comes down to your “gut feel” backed up by your understanding of the data you gather during the research phase.

I haven’t progressed beyond the research yet. I’m currently exploring as many documents and samples I can find. I came up with a little action plan based on my preliminary research – and that’s what I’m going to share with you in this blog post. I hope to post feedback as I go along and then measure my final deliverable against this action plan.

I sat down drew out the following steps on a whiteboard –

My whiteboard process deciphered,

1 – Discovery document

I’m waiting for the final outcome of the research phase. I plan to create a Discovery Document which will contain my interpretation of the research -

• Extract all the product dependant information.
• Identify patterns for each of the user groups.
• Convert these patterns into specific product related business goals.

Dan Brown introduces a nice matrix plotting user categories against specific patterns (Goals) in his book Communicating Design. This diagram basically highlights to what extent a specific user group needs a corresponding system goal satisfied.

2 – Group em!

From the document above I should be able to group certain needs together and start to get an idea of what I need to build. I don’t have that data yet but I’m hopeful that it will ultimately guide me through the next few steps. I’m sure it’s not going to be totally encompassing and that’s where “gut feel” and input from stakeholders will play a defining role.

I don’t want to go overboard and hope to build about 5 personas in total. I’m hoping that I’ll be able to have at least, create:

• 3 Primary personas
  Important to business and product success.
• 1 Secondary persona
  Power users or users who cost a lot in support.
• 1 Complimentary persona
  A person who might have a radically different need for which the system might not cater for in the first phase of the project.

I took these persona groupings from Christina Wodtke’s book, Information Architecture – Blueprints for the web.

3 – Give them life

The next step will be to flesh them out – Dan Brown has three layers of detail and it’s up to you to decide how far you want to take it. In my case I’ll try to take it as far as possible but time and stakeholder input will dictate the process as well.

• Layer 1 – Bare Minimum:
  - Real name and role name (Pessimist, optimist etc).
  - Motivations and needs (taken from me discovery document).
  - Scenarios (possible actions between user and the web site).

• Layer 2 – Further Detail:
  - System Features in relation to the persona.
  - Behaviors (Bridge that gap between Motivations and Features).
  - Quote (something the user will say – direct dependence on product/feature set).

• Layer 3 – Persona in the Flesh
  - Demographic information.
  - Technology – comfort level of persona.
  - Personal background (not too detailed).
  - Photograph.

…that’s my plan of action. I will post updates when and if possible. Some these elements are of a sensitive nature so I might have to tone my research deliverables down a little.

Warning:
This is just my take on the process based on my personal research. I might be totally missing the mark here. I can’t share all my data but will try to create at least one persona that I can post here on my blog to see if my ‘process’ succeeded in creating a workable document.

More Reading:

• http://en.wikipedia.org/wiki/Personas
• http://www.usability.gov/analyze/personas.html
• http://toddwarfel.com/archives/category/personas/
• http://www.boxesandarrows.com/view/everything-and-the

So much have changed since my last blog entry – I’m happy to report that usability tests on our 3D website went down well. Perfect? No, but we fixed some critical errors and concluded that our system was ready to go into production. I will post the live link up as soon as possible – the actual website went into production two weeks ago.

Now for the curve ball. I left the company (TBWA\TEQUILA) at the end of May.  I gave up the wonderful world of advertising for telecoms/banking. I joined a start-up business unit within one of the top four banks of South Africa – FNB (First National Bank).

I can’t write to0 much about the business unit yet but I’m super excited about the possibilities of applying and learning more about Information Architecture and Usability principles. One of the reasons I joined the team was their very dynamic and interesting guy by the name of Luis Simoes. Luis, and his team built the FNB Mobile Banking platform and Innovation is key with this team.

What drew me to the team was the fact that they had a dedicated UI team in place to look at and research usability scenarios.  FNB is by no means the most “User Friendly” banking system available but the fact they invest in teams dedicated to enhancing user experience had me sold from day one.
As Information Architect I have certain challenges waiting for me at FNB. I’m currently documenting a Navigational Taxonomy for a new web-portal and I’m tasked with some informal UI wire framing – I’ve never been great with wireframes. I’m basically a UX-team of one at the moment, it’s scary but quite a challenge and something I hope will give my career the necessary boost.

I’m also extremely excited about where they placed me within the organisation. I’m their first official Information Architect and they decided to slot me into the marketing section rather than the technical team. I was worried about this at first – but it seems to be a nice fit. I come from a marketing agency therefore the logic behind their decision.

My first boss, the then MD of TBWA\Digerati and a man I respect immensely, said “Werner, you’re not in IT! You’re in marketing…”
I read somewhere that an IA is suppose to find the link between Business objectives and User needs – from my “cubicle” in marketing I might just be able to get that right as long as I keep the user’s needs top of mind.

So what about this blog now? The marketing manager at FNB actioned some consumer research recently. I’ve been following a lot of podcasts and articles regarding the creation of Personas and think that this will be my next IA mission. I’m hoping that I’ll be able to derive at least three to four unique personas from the research we’re gathering.
I’ll be exploring that within the next few weeks.

I also have a collection of IA books next to me as well a new book from O’Reilly about Web 2.0 strategy. I hope to give feedback about those as soon I settle in a stop working nights to catch up with my new team.

I later found a little gem on the O’Reilly website – Information Architecture for the World Wide Web by Peter Morville and Louis Rosenfeld. It’s brilliant book and should definitely form the part of any aspiring IA’s arsenal.

I’ve had the book for just over a year now and I’m only half way – I keep on reworking chapters’ over-and-over, whenever I get a chance. I even dragged my copy to Malaysia last year when I played in the Asian Paintball World Cup. Needless to say, I brought back my copy stained with orange paint and was forced to cover the book due to the water damage it suffered.

It’s NOT the end-all, be-all of IA but a great foundation. It’s like a real Uni-book in my opinion. You struggle through it at times not knowing how you’d ever apply or even remember some of the chapters but after reading it you find yourself applying the techniques without thinking.

Using it…

Information from the book formed the foundation of one of our new business acquisitions. We where pitching for the SBL-Unisa web site about a year ago. The SBL (School of Business Leadership) is an off-shoot of one of largest distance learning institutions in Africa. The business school wanted their own separate web identity and we successfully landed the business with the help of insights we gained from my paint-stained book.

The final project itself did not pan out as I hoped – it went live with many good intentions. The driving force behind the project, on the client side, left to pursue another career opportunity leaving the project to stagnate a bit.

It’s a South African thing

South Africa’s online community is definitely trying to keep up with the times. That said, I think some of the core problems we still face on a project-to-project basis is the fact that clients still find it hard to (1) assign proper budgets to the digital offerings and (2) assign dedicated resources to their web identities.

I don’t want to mention brands by name but one of our larger clients is in the process of introducing a new brand of pet food to the market. Hell, what a great opportunity to do something really groundbreaking. I did not spend much time on my initial re-search but the opportunity to disrupt the market and do something really ground-breaking in the digital sphere was obvious. One line in the strategy made me excited – ‘This audience is the internet capable’.

Competitors to the new brand made use of experts and practical guides to “prove” to users that their product really worked. I thought that we could get our friends from Cerebra/Brandsh (our social media experts) to help us set up a Blog and YouTube channel. We could then adopt a malnourished pet, and with the right attention and nutrition restore the animal to its cheerful self. Imagine showing users in real-time how your product works?

Alas, no money and we’re stuck with copying content from the international brand sites. Suggesting something with a little less impact, than my original idea, was also out of the question. Client wasn’t willing to invest resources into the digital and we have a 4 week deadline. We’re going to use the web to generate a large database of names and addresses that they could bombard with electronic marketing messages.

I tried to spark some thought around the marketing initiatives, but to no avail. I’m a little ashamed to say that I managed to extract myself from project – I could not face another arbitrary project.

I hate these new start-ups…

Something else I picked up is the introduction of new technologies and gimmicks to the market. I must disclaim myself a little before I continue. I love new technologies – the mere fact that I overlooked so many of them before they exploded into the main stream has made me very open minded. I’m not against introducing new concepts and ways of getting stuff done.

I have one issue with this though. To quote Jeff Parks (a Canadian IA and Consultant), “If the only tool you have is a hammer, then every problem looks like a nail”.

I’m working on projects were we’ve been forced to work with some database and mobile “experts”. There’s a total disregard for the Big Marketing Idea with some of them – these guys go off and build marketing strategies around their toolbox of technical competencies.  The sell client on each and every tool they have and are eager to get business through bullshitting clients with technical jargon. E-mail newsletters, e-zines and Mobile barcodes, MMS and SMS will work for every campaign in their minds – lets bombard the consumer with tons of annoying crap, it will work!

Where’s the disruption and innovation? What happened to offering you client/user a ‘brand’ experience?

* Wow! I started off trying to post some feedback from a recent on-line course I did on Controlled Vocabularies – It just turned into a full-on rant by itself. Check my next update for the short overview on my new thesauri and skillz…

Later that week

A client-service manager at the agency had a problem conveying a new concept to one of our top clients and I thought that we could use something similar to help them out.I must be honest, the initial concept of an 2nd Life type of Sims interface combined with large amounts of in-depth content did not enthuse me much. The IA in me wanted to challenge the concept but the project went beyond that point. We had to work with what we had.

I disappeared for three days with the lead designer, Nick Mugford, to plot out the project scope and build a presentation to “sell” client on the idea for a new online campaign.

Putting it together

We scoped out the project for just over two days – the result was this wall full of scope notes and drawings.

I proposed to Nick that we build a paper prototype to show client what we intended for the web site and user interaction within the Sims-like interface. Nick was hesitant at first but was sold on the idea after the scoping exercise realizing that we had too many concepts to convey effectively through a mere verbal presentation.

In the past we would have gone into the meeting with a PowerPoint presentation with reference and static photo-shop mock-ups of the interface. The design team was no-where close to a creative execution and I did not want the team to spend valuable time on mock-ups before we have clients’ buy-in on the concept.

The Storyboard

I used a digital camera to shoot stills in the first prototype but Nick wanted to film the process with a digital camcorder this time around. We followed the same basic procedure as in the first prototype and ended up with a whole bunch of movie-clips.

We popped the video into flash and inserted stop actions at pre-determined points – unlike the video I’m attaching to the blog.

The Flash movie of the prototype allowed us to pause the sequence at pre-determined points. Before playing each sub-sequence we would explain to client what they were about to see.

Our Presentation

We presented client with a,

• Hybrid Navigational Taxonomy (IMAGE)
• The prototype 
• Online reference of similar web-based 3D interfaces

The original prototype video formed part of a two-hour presentation.

We had some trouble with the camcorder. The Sony we used has a built-in auto focus function and our tripod wasn’t as sturdy as we thought. We also shot the video in natural light and it had a direct effect on the overall consistency of the shots. Nick had to play around with the levels to get an overall consistent look – I suggest using a fixed light source for the next one.

We’re still waiting to hear what client’s final decision is as it reaches for beyond the web with several components coming together. Judging by the spontaneous applause we receive after we conclude out part of the presentation I think it went relatively well.  

I recently sent an e-mail to the Information Architecture Institute (Mailing List). I’ve been working on a pro-active project exploring alternative ways to prototype web projects. To quote Tom Wales (Yahoo) – half the documentation we do is “Bullshit”. Bill Buxton (Microsoft) mentioned that we tend to do project documentation just to convince client that the money they are spending on projects are justified by serving up a document that they can’t understand or relate to i.e. “I don’t understand a word!!! These guys must know what they’re talking about”.

I interested in using alternative ways to explain projects to client and internal teams. I want to relay “concept” rather than dictate design or confuse with complicated specifications.

BTW – I took me some time to muster up the courage to send my prototype to the IAI group. Sometimes you just have to take the plunge. I’m happy to report that I received some really helpful feedback from the list and I feel even more motivated to explore this further.

Check out my communication to IAI and my prototype video – I think it explains all.
Designers in the agency I work for tend to get nervous when I attempt to scamp up wireframe models. They perceive what I’m doing as inhibiting their creative license – BUT creativity and pushing the boundaries is something we encourage in our agency all the time.

I’ve been racking my brain about this…

I listened to a podcast with Bill Buxton recently. Just to “disclaim” myself – I have not had a chance to get my hands on his book and might have totally misinterpreted his message. After that I ran across two more podcasts, one with Tom Wales and the later Kevin Cheng, both from Yahoo. I interpreted the shows in my own way based on their inspiring words. Kevin and Tom focus more on the concept side while Bill had a more practical and functional solution BUT the core message from both sides were…. Start DRAWING!

Just a little background…

In my team concept and the BIG idea drive a project. I work closely with the design team and we tend to find and build solutions without the need for wireframes. I will build the relevant taxonomies and work on the strategic elements after that a designer will mock up a look-and-feel based on my verbal brief and the documentation – this is then presented to client.

Designers will mock up all the pages as soon a client sign off on the project specification (and go through several reverts if needed). The mock-ups and a functional specification will then end up on the developers’ desk.

The problem with the initial mock-up stage (1) is that client end up looking at the pretty pictures ignoring all the IA and strategic solutions, and (2) client can’t understand why we take so long to develop our projects especially after we showed them a real-life mock-up of the site in the strategic phase.

So I started drawing…

I’m trying to convince my team manger that we must use Google Maps to serve content for a large development group and thought I’ll explain how I see the mini-project rolling out using my new found drawing skillz.

I put pen-to-paper, snapped the drawings with my little digital camera and popped them into Flash. I’m still working on a mini-document to support the flash component but you’re welcome to check out the result of my experimentation…

Just a few additional observations.

The exercise highlighted some unexpected things like:

• I picked up some logical errors in the process – which I would have completely missed before.
• I had to think about the simple things like when do the user see the “pointer” or the “hand”.

The only negative about using flash was that I had to plan the sequence carefully (maybe that’s actually a positive?). If I had to update the sequence or add elements in the middle of the sequence that might be a headache. I don’t think it’s the platforms’ fault though. I built the sequence directly on the timeline – maybe I could find a more intelligent way to build it.

I love the idea of making the system more interactive, triggering the different elements through user intervention. That’s easy enough, depending on how you implement it.

I don’t want to spend too much time on this process i.e. if it takes longer than the traditional wireframe and documentation process then this concept has lost its appeal.

I can’t believe that I’m actually writing a blog entry – It was never something that I wanted to do. But hey! Here I am…

I first started exploring blogs when I gave up my position as Senior Web-Developer at TBWA\Tequila in Johannesburg. My boss offered me the opportunity to make a career shift and I have been working, exploring and researching my way into an Information Architect (IA) role.

A lot of what I found myself doing back then (as a web developer) paralleled with that of Information Architect’s day-to-day tasks due to a shortage of resources. I had to refine those skills and actually figure out what my core deliverables where. Blogs and mailing lists became a valuable source of information about my new-found profession.

I’m a very practical guy and will try to use this space to echo my learnings. Please note that most of my posts are basically derived from what I read and my interpretation thereof – I’d love to engage with like minded people and debate these topics.

I have a few initiatives on the go at the moment and will report on them as I go along –

Concept Prototypes

I read a wide variety of articles and listened to podcasts about a “new” way of prototyping of new projects. The thinking is that you convey a basic concept to your client rather than a super-realistic mock-up of your proposed web application. In short, throw away your Photoshop scamps and put pencil to paper – Let’s start drawing!

I studied fine arts for three years and found the proposal of drawing out my ideas and concepts extremely appealing. I’ve been working on a little sideline project and hope to have it posted here soon.

Taxonomies and Controlled Vocabularies

I managed to worm my way into an online course, Taxonomies and Controlled Vocabularies at Simmons College (Massachusetts). I’m sharing the e-class with some very experienced Library Science types. I can’t comment on the content of the course and the fact that it’s a self-help online learning experience yet. I’m only starting this weekend but I will make a point of posting my assignments and feedback.

The Elements of User Experience: User-Centered Design for the Web

I’ve been poaching everything I could find on the Jesse James Garrett’s (Adaptive Path) website – http://blog.jjg.net/ – I started to feel bad though. I thought I’d alleviate my guilty conscience by buying Jesse’s book The Elements of User Experience. Seriously, I’ve heard tons of good things about this book. I’m currently making my way through the contents (really cool) and will post a few comments as I go along.

Here’s to my first ever blog-entry!