Experientia® designed a people-centred website for the International Training Centre (ITC) of the ILO (United Nations), which provides training and related services that develop human resources and institutional capabilities all over the world. ITC-ILO use the website as their principal communication tool, to promote their activities, competencies and services to potential participants, donors and partners. The project completely redesigned the website architecture, navigation system and visual layout, to create a better user experience in terms of navigation and access to content.
The project used participatory methods such as card-sorting, co-creative workshops and usability testing to completely redesign the information architecture, navigation and filtering systems and visual style. The result is an easy-to-use, people-centred site, which meets users’ expectations, and uses language that is familiar to them. The emotional impact of the site is heightened by an emphasis on images as key navigation elements.
A particular challenge of the project was balancing the needs of the different stakeholders within the ITC-ILO. ITC-ILO is composed of a complex team, sub-divided into many departments. Integrating the information required us to gather the necessary data from the 12 internal teams, match this with the expectations of the end-users, and create dedicated pages for each department, directly on the main website, unifying the information and the visual look and feel. As a result, the information is no longer fragmented and de-contextualised in an archipelago of 12 external sites. The general portal acts as a directory, supporting the specific requirements of each department and filtering the data so that all the contents are channelled into a single destination, able to float contextually regardless of their original destination.
The site is available at www.itcilo.org/en.
Experientia® began the redesign process with a comprehensive analysis of the current site, specifically looking at functionality, architecture, storyline, design and content. The team highlighted the main issues with the current site, providing recommendations on information and communication design, site structure, visual design, web marketing, visibility and accessibility. From the insights which emerged during this analysis, the team built an initial navigation tree (organisation of contents), and defined the users of the site.
This was the starting point for a participatory process, which investigated the needs of both internal (ITC-ILO employees) and external stakeholders. The methods employed included online card-sorting sessions, participatory workshops and usability testing. Card-sorting and participatory workshops were selected as the best means to engage with the ITC-ILO employees. This allowed Experientia® to understand the current state of the organisational culture, as well as to canvas employees’ views on how to improve the current site structure.
Two card-sorting activities were conducted with ITC-ILO staff. The first one, built online, investigated the expectations of ITC-ILO staff members in terms of content positioning.
The second card-sorting activity was conducted face-to-face, and requested participants to organise and summarise all the “Areas of expertise” into meaningful clusters. The “Areas of expertise” had previously been ambiguously defined within the organisation, with a long list of items that sometimes differed between departments. Through card sorting, Experientia® was able to create a holistic approach for the entire organisation, which was then applied to the portal.
The card sorting phase ensured not only that the entire navigation was shared and planned in cooperation with the people who used the site, employing their language, but also that the team based the information architecture on the expectations and needs of the end-users, and not on their own assumptions.
Design and prototyping
With the insights gained from the initial participatory sessions, Experientia® developed the navigation tree into comprehensive Information Architecture (IA). Features and pages were designed in wireframes (limited or no visuals) and implemented in a working prototype, which was used for two usability testing sessions with ITC-ILO staff members and training course participants.
In parallel with the IA development process, Experientia® carried out the visual design phase. The team initially focused on the home-page look and feel and interaction to identify a clear design language. The visuals support a range of dynamic tools, such as interactive maps, and an advanced filtering system, which represent the contemporary feel of the design.
Experientia® improved the consistency and homogeneity of how the 12 ITC-ILO departments were presented, ensuring that the same quantity and quality of information was available on each department, accessible from the main website. A template for the specific activities that departments are responsible for was created. The department pages and information were then contextually combined with the rest of the site, so that information could be cross-referenced between areas, and related material was more easily visible.
The home-page was tested with people to get feedback and suggestions both on the visual solution and on the interaction. The first usability test involved participants from ITC-ILO courses and ITC-ILO staff members, while the second involved only staff members. In addition, Experientia® met with representatives from each of the ITC-ILO departments in participatory workshops, to validate their needs for the individual departmental pages.
The feedback from the tests fed into a progressively more refined and sophisticated prototype. The prototype was used during an internal meeting with ITC-ILO to present, validate and make any changes to the website iteration.
To ensure that the organisational structure and visual look and feel that was developed from the participatory sessions is maintained throughout the life-cycle of the site, Experientia® provided more than 20 visual templates. This ensures that even as new content or functions are added, the user experience will remain coherent and consistent.
An improved user experience
The improvement of the user experience achieved by Experientia’s new design largely comes from the ease with which the website’s contents are accessible and available. The new structure allows several navigation paths, depending on the needs of the person.
Another improvement is the emotional navigation, made of images (people and places) associated with the offered themes. Previously, the ICT-ILO used sites such as Flickr to host image galleries of training courses and newsworthy items, meaning that people had to leave the site to go and view the pictures. The redesigned site embeds a selection of picture galleries into the site, making the emotional impact more immediate.
The new website vastly improves on the ITC-ILO’s original archipelago of external websites. The information is no longer fragmented and de-contextualised; instead, all the pieces of information, regardless of their individual destination and of the levels of detail, can float in different contexts to enrich the navigation experience. People can easily move from search to browse the list of results and easily filter them on the basis of current goals. The general portal has been transformed into a directory, able to support the specific requirements of each department, while ensuring that all content is easily findable.
– Card sorting and usability test reports
– Interactive wireframes (axure)
– Graphic templates and layout
– Design guidelines
– Communication guidelines