The old computerweekly.com
This was not so much a redesign, or even a relaunch, but more of a resurrection of a site that had become tired, old and ineffective. Its many shortcomings were highlighted with the onslaught of the new generation of sites from competitors that used user-generated content and a more social networking approach to their presentation layer.
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 from 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 deliverables 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.
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 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 built 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.
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:
- Prioritise and design the core – This is to satisfy user goals using prioritised content and functionality.
- Design inward paths to the core – Consider how users will arrive at the page from SERPs, facets, menus, search, RSS, aggregation, email etc.
- 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.