I tend to agree about this, but then its because when dealing with websites, there are a myriad of elements that will ensure a successful site. Not least, good IA and interface design and of course the ability to convert your customers or users, to enable interaction that is intuitive and easy. But importantly, you need metrics to prove the KPI’s are changing and that all the money spent on IA and this persuasive design is worth it. Its the clearest way to get ROI on IA.

Good IA should always include persuasion architecture within its remit. Its a part of the process. After enabling findability you then want the user to either buy, sign-up, comment, post, bid, sell in the easiest way possible. Of course this will never be straight forward and requires constant testing to ensure the funnel is doing its job.

It comes down to the user’s paths through the site. For each conversion we need to look at the user flow. Wireframes should be drafted for each stage of their interaction. We need both user scenarios and personas to gain a complete picture of who we are building for. We then need to A/B test the pages in the live environment and measure that effectiveness. Google’s free website optimiser is a great free tool for this.

All this should come down to a team of people;

• the UX team to gather personas and create user stories that will help inform the interaction designer
• brand marketing to help define the variety of messages that need to be conveyed and the tone of the proposition
• the IA and interaction designer for the wireframes
• the web analyst to track and monitor the A/B testing and funnel analysis of conversions and to measure audience engagement
• the web development resource to set up a user test environment with appropriate tracking

The metrics that follow will show uplift in certain areas and will encourage the stakeholders to back these projects by investing in the testing and optimisation of their sites.

In the coming month’s I will, with my colleague Alec Cochrane, investigate engagement in more detail. What excites me most about persuasive design is that it is the logical conclusion to the application of the initial information design and a way of measuring that design’s success. Persuasion is not forcing a user to interact but its a way of helping them make choices that the user has already shown interest in. Check back for updates and read more on the subject from Alec here.

Also try Omniture’s excellent whitepapers on the subjects – well worth the read…

The process of iterative design and collaboration with those who have a stake in the project is the most important element to the generation of this design document. Though it appears as a draft of a site it actually tells the story of the user’s requirements, the context of the solution and the content served. What the wireframe must convey adequately to the stakeholder group and design team is how any changes to the three factors will impact on the interface.

Factors in wireframe evolution

I have completed several IA projects that all yielded specific problems that had to be dealt with differently. In each case collaboration was key. The more that the relationship was valued the better the iterative cycle of wireframing occurred. Sharing and talking over decisions constantly refined the designs before any development or visual design occurred.

Three projects have had a good collaborative element where I was embedded into the development group. By being in early stages and party to all key decisions I had a good view of the business context in which we were operating. We knew where partnerships could be troublesome, so the interface would be adjusted. We could see where resource could be an issue to build specific site elements. By being extremely flexible to the wishes of the site owners whilst accommodating the user wants and needs, a collection of deliverables were handed to the design teams that had undergone rigorous internal and external review.

Even if a project that looks like it is going off the rails may still be saved by a well drafted wireframe. If the interface has been developed against recommendations there remains a reference point to the business to inform them where it went wrong – and an easy way to get the project back on track.

There is a solution that allows true collaboration and I intend to implement it on my next project. By creating documents that are truly living, produced in Visio and using Office Live to share and display online, we can actively encourage true collaboration. Allowing people to access the documents easily and comment on them allows a transparency that is appreciated amongst the team. Trust becomes a currency that will produce discernibly better results. This will allow us to reflect on the designs and implement change far more quickly than at present.

Changes in taxonomy may result in a change of navigation scheme and in turn to the interface. The business may decide not to evolve partnerships meaning certain content may not be present.

But by having a means to communicate in real time, online, more will be done in terms of tuning and perfecting the wireframe. Long before Photoshop is opened or the scrum rooms are busy, it can only result in a defined product and its cost-effective creation.

The aim of a pattern library is to establish best practice utilizing design artifacts that can be re-purposed for many different sites in completely different markets. To ensure that the recommendations are valid, all site elements will have had user testing, or they follow an established convention.

As the patterns have been user tested the functionality of the design object is sound. Of course the look of the item can be changed but how the user interacts with it will have been checked and the functional aspects decided.

Some notable examples are www.welie.com and also www.jtidwell.net The book by Jennifer Tidwell is a fantastic source of reference and inspiration but it must be said that your personal working practice and market will also produce useful patterns. For a full explanation and where the term derived try Wikipedia’s article here.

An example of a design pattern

The context of your work should always be at the core of your pattern libraries. For instance, I work in publishing, therefore news and community features are very important to our website users. If I worked on sites specializing in online sales then a different suite of patterns would be used (shopping cart, online payment areas etc).

Another matter is that patterns evolve constantly over time and it should never be a static document. Include actual examples in the real online world to convey what they are, what their purpose is and how they should be used. A recognized problem alongside a solution is another way of highlighting the purpose of the pattern.

Pattern libraries also align themselves to the application of design to development. In Introduction to the Building Blocks by Joe Lamantia this standardized way of working is outlined. The diagram below shows how using agreed design patterns allows developers to plug in the elements – forming the basis of the Service Orientated Architecture method of developing for websites.

Basis of SOA can be a result of applied design patterns

Design patterns enable us to be confident that usability issues have been addressed and that the development can continue without the need for complete redesigns. This widgetising (for want of a better word) enables a flexibility, an agility, beyond the big bang redesigns. Tweaking is a good thing when most of the site operates well, incremental changes allow considered site development.

When parts, and not the whole, are looked at in detail it gives perspective to the problem. Context, content and audience are clarified within these design microcosms. Its a great way to define your design practice too, stating how you come to design solutions by using qualified research as the basis for decisions.

Wire frames should

• be the culmination of all the user research and applied to the schematic
• ensure the clients understand that the interface is where the user interacts with their products
• allow concentration on functional aspects of the site and not brand or graphic execution
• be a working document that will change as the design process progresses

Using PowerPoint to show wire frames is a really powerful tool as it allows an element of control over the client. As you are in a formal presentation environment, you are in charge. When you talk, the audience will listen (if they don’t, just stop the presentation until you receive undivided attention). It also allows you to reveal features in a very structured manner, on your terms, that will aid the audience’s understanding about what is being suggested.

With the animation features you can also highlight elements on the page to draw attention to a particular area. Its best to do this in stages.

Conversion areas – Start by showing the money generating areas, tell them where subscriptions or sign-ups will occur. Where people can purchase products, and where the site funnels are located to convert casual browsers into users (RSS or email newsletters) or customers (online stores and subscription centres).

Search – Highlight the prominent position of search and why it is necessary to encourage the user to discover content. If a re-classification of content has occurred its good to tie this in here with the new taxonomy design

Login – Important to convey that this area also offers the user help to activate their access, find their password and learn more about the benefits of having membership (whatever the site offers). Also the interaction that the user will have here and technologies used.

Core – The main area of the page that will either display products, information or an application. The reason for the site’s existence should be spelled out here. Highlight key areas and also the secondary community areas such as blogs, forums etc. Also any widgets are to be explored here that benefits the user experience.

By unfolding the site’s features in a very structured way you are not overloading the client with too much information. Break it down into steps, it becomes a more manageable presentation of the site interface design and architecture. Annotations also should be added alongside the wire frame. This allows the presentation to stand alone if the client needs to distribute it amongst the stakeholders.

After the presentation the real work will begin when the dialogue between interface designers and web developers starts. Remember as the design is given a branded look, and goes to usability, that the wire frame’s integrity is not diminished by personalities on the team. Changes should only occur as a result of user testing.

It is an iterative process and changes will happen but keep an eye on developments as the site takes shape. Not following a signed-off wire frame is the equivalent to not having one in place at all.

The old computerweekly.com

As this site represented the best of computer related business journalism, it was apt that it should be the company’s first site that underwent a complete overhaul form the ground up.

It took nine months of development work from many different groups of specialists. The way the specialists were organised is explained in this article. The project defined many working practices and processes that the company has embraced as a way of developing its other websites.

We listened to our users, and applied our research and created a taxonomy and site structure that has moved the site forwards that a quick launch, or re-spray would not have done.

Our aims were to:

• Make our content easily found and visible to users within the site
• Create a more enjoyable and valuable user experience that the users would return to
• Increase page impressions to bring in site revenue
• Allow the site staff more choice to be able to present rich media content
• Give the site more personality and to interface with their audience

The site is a great achievement for the company and the site editor, James Garner, walks through the features here in this short video.

Selling the vision

In any project you need to have a vision of what you are trying to achieve and you need to communicate this to all stakeholders, with the speed and clarity of an elevator pitch, so as to avoid confusion or boredom.

This helps all team members to see your vision and an array of deliverable will also encourage that. Information architecture is a difficult concept for many to get their heads around as it encompasses many different areas.

We knew as a team that we had to sell IA as well as implement change during the design process. This task was hard, but with persistence and humor a lot has been achieved.

Information gathering

We knew from a content audit that the site was dysfunctional, broken links, redundant content and poor usability plagued the site and made for an intensely frustrating week whilst I inputted the spreadsheet. But it was worthwhile as we knew what we wanted to keep and throw away. We also realized how much content became lost the second it moved from the home page. All the rich, deep content was impossible to find – and these were high value research papers.

Personas were created from 30 depth interviews, 20 ethnographic studies and 950 online user surveys. This gave us a suite of 6 users we were happy with. It was interesting to find out the types that are associated with the IT industry. They have a thirst for knowledge, they need to know more than their bosses, to have the appearance of knowing the latest trends and being up to date. They are generally quite suspicious or skeptical so will not share information readily with other members of the community. But they do read blogs and respect expert opinion, they just do not contribute.

With these personas fully formed, and the business objectives (or what we wanted them to do on our site) worked out we could then start the taxonomy creation.

Hitbox – HBX Analytics

During this project we were very fortunate to work alongside Alec Cochrane, the web analytics manager who has his finger on the pulse of the site audiences everyday. he provided us with insight into user behaviors, where we had high bounce rates from visitors arriving from SERPS (search engine results pages). He also gave us a scorecard of where the site was failing in terms of traffic and engagement with the user. We knew what the users were searching for, and pretty quickly we could tell why they were not finding the content that we knew we had.

Analytics screen showing overlay on the new website

This was a crucial factor in building the design. We not only had data through research, user interviews and surveys but we also have the live data of what the users actually do on the site. These behaviours are so valuable in a commercial sense because we know the flow of user traffic and the funnels that occur and how we convert a browser to become a subscriber of a service. By looking at the web metrics we were able to understand the patterns of usage, the popular and unpopular areas. The depth of information enabled us to formulate a plan quickly.

Alec has also come up with a series of metrics, that can measure the effect of the redesign from pre-launch to post-launch. This will effectively measure the effectiveness of the IA work and give us an ROI. We can then actually quantify the increases in page consumption and engagement. More details of this are written in Alec’s blog here.

This ability to give ROI is a massive plus to the whole IA cause. IA has always had a big problem. Although it is a logical and an intelligent approach to website design, the biggest question has always been if the cost justifies the effort. In the next few months we hope to show the difference the work we have done has made to the site, and the revenue it will generate.

Persona driven taxonomy

My fellow IA, Rachel Hammond’s grasp of her field led us to approach this area of the redesign with confidence but also with a new angle. As we knew our user base were industry experts we also knew that the vocabulary they used was specific and related to specific areas of their markets.

The interface used to manage the CW taxonomy

The two key aspects of information taxonomy are taxonomy structure and taxonomy view.

Taxonomy structure provides a classification schema for categorizing content within the content management process. the structure is aligned to the personas and our users’ behaviours has given CW a great advantage over their competitors because it is not realistic content.

The taxonomy forms the backbone of the site structure. It was created by gathering as many sources together around the industry (websites, journals, whitepapers) and breaking these down to unique elements and clustering these together to form categories to classify our content against.

This screen grab shows the taxonomy within the site’s bespoke search service (called Zibb, powered by FAST). The CW taxonomy forms the basis of navigation, categorisation of content and highlights areas for future development. Zibb also ensured our search results were serving up related content contextually.

Zibb serves up the search results with contextual related content

Concept Model and blueprint

We then produced a concept model illustrating the types of information, ideas, and requirements to be presented on the Web, this is the taxonomy view. It represents the logical grouping of content visible to a site visitor and serves as input for website design and search engineering. I cover this in more detail here. We were fortunate to have really strong personas for this project that enabled us to find out how our users consume information, their behaviors, wants and needs.

Four main areas were defined by looking at the community of users. News was an obvious requirement, defined by their particular area of interest within the sector. The need for knowledge was evident, and we created an in-depth research area where case studies and whitepapers could be housed and easily accessed within the categories defined in the taxonomy. Tools and services, RSS and email news alerts and newsletters, reflected the need to be kept up to date and in tune with their specialism.

Finally, although the CW community was secretive and did not divulge information amongst their peers readily, they were very interest in expert opinion. The need for this type of information gave rise to much more integrated blog postings.

Together, these concepts guided our Web development efforts and in turn will maximise return on investment. The theory is generally that if the product is build right the users will come. Everything is specific to an area in the IT industry. This targeted delivery of information has also helped the sales teams target advertisers. The four channels that the taxonomy design created has given the team a great platform to build from, editorially and commercially.

The concept model then informed the blueprint (or site map).The concept model ensured the site structure has truly reflected user goals and this is also taken through to the wire frames and eventually the look and feel of the final pages.

Interface development

The navigation scheme defines all the elements of the page that users interact with to advance to other areas within the site. It also clarifies the naming of those items on the page. Its important that this is a document and not a visual representation at this stage as it allows us to keep the naming of items and their organisation removed from the visual layout or look and feel. This avoids lock down in the way the design team perceives the new design.

When the deliverables above are complete, we need to consider the prioritisation of information and content for each page, which in turn facilitates the production of wire frames. Its important to note that the wire frame represents;

• The culmination of all research to date
• It describes the interface that our users have with our product and also indicates the interactions they have with elements on the page
• It allows concentration on functional aspects of the site and not brand or graphic execution
• It must be noted that it is a working document that will change as the iterative design process progresses

Core and Paths

A key element to this design was the method outlined by Are Halland at the IA Summit in Las Vegas this year. Such is the strength of this approach to web page design we decided to embrace it for this project. His presentation on this subject can be seen here. Primarily, as he puts it, it is ‘designing findability inside out’.

This process is divided into three key stages:

1. Prioritise and design the core – This is to satisfy user goals using prioritised content and functionality.
2. Design inward paths to the core – Consider how users will arrive at the page from SERPs, facets, menus, search, RSS, aggregation, email etc.
3. Offer relevant outward paths from the core – Ensure that the site delivers both user and business goals through clear calls to action and completion of interaction tasks.

This is a visual representation of the core and paths model. You may look at this and think ‘this is just common sense’, but it allows a user centred approach that can be aligned with business objectives. The reality is that this just doesn’t happen in the majority of web product development processes.

Looking at each stage in turn, the first stage is to design the core of the page.

For CW.com, we used the home page, a channel level homepage, and a news article page. We looked at key content such as lead news story and the editor’s picks or the best from the web aggregated form external sources. The key functionality and supporting content also had to be included here and prioritised on the page.

Next we considered the inward paths, which are the channels that our users are likely to utilise to arrive at the page.

Inward paths may include: Search engines, Blogs, Social bookmarks, Syndication, Aggregation, RSS and Email subscriptions. The consideration of inward paths helped us to focus on the marketing channels that we needed to consider to drive users to the relevant type of page. It also promotes focus on the keywords and themes that users are likely to use and how these can be utilised in the optimisation of the page for search and online marketing campaigns.

Finally we designed the outward paths that help users complete their online tasks and goals and our designated business objectives. These outward paths include:

• E newsletter sign-up
• Inline links to related articles to drive page consumption
• Sharing, printing or emailing of news articles
• Related content types such as video or audio
• Stimulating community participation in forums or blogs
• Contextual navigation to aggregated content or the editors best bets
• Subscription to an RSS feed

An additional benefit of the core and paths model is that we can consider which types of content or pages we want to channel external link popularity or Google PageRank to. This can achieved through both a manual and automated process. A point to make here is that intrusive or excessive online advertising to drive monetisation should not comprise the long-term commercial benefits of a quality user experience.

Prioritising the content

As the page impression becomes a less meaningful measurement due to new technology like AJAX, we are focusing more heavily on driving and monetising interaction (user engagement). This is an excellent model for prioritising the user interactions that we can monetise effectively in the future. Hopefully the results will prove another reason why it is such an effective way of producing website page design.

Once the wire frames have been approved the content is then organised so the most commercially valuable and user focused content is pushed to the top of the page. This is an area that James garner controls and he worked with us to establish a content priority.

As the design went through user testing, certain elements did change, as with any iterative process, but by the team collaborating the design solution remained true to the initial vision from concept to design delivery.

The development cycle

The wireframes were handed over to creative and they began designing the interface and graphic elements. The development group release some functional elements to the old website before the relaunch.

These agile methods allowed the old site to feel the benefits of the new widgets. However, as the site changed so radically in the new design, we still had to release the site in an old style ‘big-bang’ manner. This is perhaps where agile has its problems as a methodology for new launches. It is a great tool to implement incremental changes but not for a completely new site.

A holistic approach….or joined up thinking

By providing IA deliverables we ensured a more comprehensive brief being delivered to the design and development team. Our approach addressed concerns of marketing, editorial, sales and business development with the needs and wants of the user. This was aligned with the achievable technological delivery from the IT team that ensured we delivered the vision of what we wanted to give the user.

The best online experience can be defined by the standard of the information found and the speed in which the user can access content. With this new site the hope is that all the research, best practice and application of methodology will result in a site that has a structure that provides a solid foundation for all the developments it will have in the future.

Even though the birth of the site was sometimes a difficult one, it is just the beginning for the Computer Weekly team. New tools and features are now being lined up for the second phase of the site. The core IA work has enabled the site to be future-focused and versatile. Good sites should be able to adapt to change,with the structure and design allowing this to happen.

The full essay is posted here with insights to reflective practice in the design arena. Iterative design processes owe much to action research – its all explained here

As much as they span the boundaries of different disciplines they are much more than just a project manager. They have to represent the needs of the users at all stages of the project process and be aware of (and make the business aware of) risks posed from technology choices, lack of research funding and cultural difficulties that every business experiences.

Agile vs UCD

Unfortunately many businesses embrace processes that have proved a success without encouraging their further development. Agile, in certain situations is an absolute must and a great methodology for ensuring web development is effective and efficient. But it does have its draw backs. The user gets lost in the development cycle, their needs are encapsulated in user scenarios but developer solutions do not always listen to the voice of the user.

UCD can also be guilty of too much testing, too many iterations, a lengthy, complex and expensive process that to the business owners feels expensive and slow. I have talked before about this here but lets open up the argument to the wider environs of the other major players in a project.

Who wins?

You need a well organized development group and Agile is just fine to ensure that they work in a way that will get the job done. But that really is it. It goes no further than that. It is not a panacea for all previous ills in web development. The problem is that you need UCD people overseeing this development, so at every stage when a new widget appears on the site it has been reviewed by user testing – the purpose has been defined and you know it will be used and is useful to the user. To make sure that both play well together we need to ensure that our developers have a UCD mind-set and that our UX people are aware of the agile methodology.

Filter the noise – listen for the voice

Be aware of Agilistas - every company has them and they may undermine the voices that should be heard from the other groups. All voices are important, but as we say time and again, the user’s is the voice that matters. If we learn to listen and act on what they tell us, design and implement it for them, then the business looks after itself. 

The launch manager

One person (or group of people) needs to ensure that this happens but also that all the other issues are addressed. Namely the SEO implementation is in hand, the business requirements are satisfied and a strategy here is well-defined and in place. The vision needs to be owned, the clarity communicated again and again until the whole team know how the solution is shaping up. 

To get the right person is the real challenge for any company. I have worked on a project which is due to go live soon. The site itself had several teams collaborating constantly for 6 months to get this product right. From sales and marketing, user research, web development and web design, IA and SEO teams. This project has been steered by one person, who has worked throughout, with the user at the heart of all their decisions. This is the only way you can ensure the user will be heard through product development – to employ somebody who listens to user voices and never forgets what they said.

Realistic?

Frankly yes. There will probably be somebody in one of these teams who could fit the bill nicely. But to ensure collaboration at all the right touch points their diplomatic and motivational skills must be as good as spotting risks to the project and their knowledge of their user groups. Getting the right people of course, is not easy, but its the most important investment that a company can make to ensure the quality of its products.

Beware of the stakeholders one-eyed view…

Choose your weapon

When you think about how hard it is to convince certain types around the boardroom table, it is these same people who respond so well to figures that are facts. Some decision makers will trust you implicitly (obviously a joy to work for) others are so conservative they will not move until you show cold, hard figures.

If the statistics are good enough you can almost negate any discussion over a design decision. The figures are the evidence that we need to ensure design solutions are implemented. The problem that you see, may not be seen in the same way by the client, so you need to think of ways to illustrate the solution.

Prove them wrong

I had a client who insisted on placing the magazine cover in the top left of the page and it was the use of web metrics that persuaded him to see that this was confusing the user. He linked the image to a subscription page where there was a huge drop off – primarily because the users thought that the image would reveal the magazine content. Without statistics the argument would never have been resolved.

Metrics are the user voice

The great thing about evidence based design decisions is that they are non-negotiable. The users are telling you what to do. The figures in the metrics spell it out. So decide what you need to show the client and then get the analyst to research and present the figures. A chart here will help convey the message, the simpler the better. Those in control of the software will often also have a perspective about why or how the users behave in the way they do. A good web analyst is a real bonus to any design team especially in a user centred approach. 

It allows a common ground to be reached in terms of a vision for the site or project. It is a mental model and the tangible document between what the IA is thinking and what the rest of the team is wanting to see from the site. Add the users into this and you have the IA basics right there. Essentially the IA basics, it places the user at its core (user needs), the business interfacing with the user and its own objectives (the products’ context) and the actual content that will be produced often in the form of a product (content).

You can also blend in real world statistics to give credence to your thinking, many business owners like to be shown a few figures to back up your arguments and it makes for a more in-depth read.

The great thing is that the client identifies with this A3 colour print, they put it on their wall. It defines where they are heading, its ‘the star to sail their ship by’ as Peter Merholz said recently at dConstruct…

For the IA its also the way we can ensure that user needs are in the fabric of the structure of our site. Not only by persona led taxonomies but by defining areas that users will feel a part of and then creating areas around these zones. By using the model as a basis for site structure, the site map can be spun out fairly rapidly and its presence ensures the user needs, the business goals and content types are never missed in the design process. 

I find that this document is the most important in many ways, as it crystallizes the thought processes of a team and defines how a project will be tackled and what the likely outcomes will be. All with the user at the centre of the design process, and that can only ever be a good thing.