www.tid.es (2008)

Telefónica I+D (R&D) corporate website looked dated for a company that wanted to embody web standards and best practices, so a structure and content redesign was requested.

What

Telefónica I+D (R&D)’s website (www.tid.es) had seen its last update in the late 2005 and it was starting to show. Web standards and best practices had been evolving in the last years and it was time for the corporate site to update.

composition of mock-ups showing different pages in the new Telefónica I+D site
The new design was serious, corporate and standards compliant.

The old site reflected the company’s structure, with technical terminology and clever names being used as navigation labels. Content was to be kept as it was deemed as important, but the text was verbose and formatted in long paragraphs with few headers. Common tasks (like looking for the business address or applying for jobs) were obscured under complex navigation and long instructions.

The new site was simple, easy to use and maintain, and consistent.

  • Web standards compliant: logo on top left which doubled as anchor to home, big search box on top right, horizontal primary navigation with dropdowns and secondary vertical navigation on left sidebar, big image slideshow on homepage with several modules underneath…
  • Simple navigation: labels were created from common vocabulary (“who we are”, “what we do”, “work with us”…), next level navigation was always visible with no exploration needed, shallow information architecture (three levels deep maximum), breadcrumbs were used.
  • Web-formatted content: shorter copy, headlines, bold highlights, lists of elements… while retaining the original substance.
  • Consistent: layout was standard and pages were built with modules that could be easily re-used and replaced.
  • Quick links: shortcuts to commonly accessed pages were “floated” to the home page.
  • Easy and cheap to maintain: it was built using open source CMS Drupal.

My work

Met with different stakeholders and real users separately to understand the site’s goals from their point of view.

Conducted competitive research on other research and development websites, looking for standards in layout and navigation.

Created a content inventory and checked with stakeholders what was considered critical and what was possible to update, re-format, or let go.

Built “user profiles” based on limited research.

scan of a hand-written user profile, describing a general kind of user, its general goals and its goals regarding the Telefónica I+D corporate web
We created a set of five main types of user for the web, based on competitive research and interviews. For each kind of user, or “user profile”, we wrote a description, some general goals, and a list of goals regarding Telefónica I+D’s web.

Used the “user profiles” and the content information to create an Information Architecture that would support different user’s goals, while keeping the critical content and detecting where further content could be needed. Card sorting was used to help find labels and organise the site.

scan of a hand-written page listing information architecture for the Telefónica I+D's website
The Information Architecture was shallow but extense. It was defined through lists of content.

Hand-drawn wireframes were created for the different pages in the Information Architecture and shared with the Visual Design and Development teams.

scan of a hand-drawn wireframe for the digital reports page at Telefónica I+D's website
Hand-drawn wireframes were created for the main pages of the site, and were distributed along text documents adding further information.
mock-up of final digital reports page at Telefónica I+D's website, based on hand-drawn wireframe
Visual Design team worked on the hand-drawn wireframes to create the graphic assets needed (this mock-up was created by Sergi Vila)

Formatted content for the web: reduced and simplified text (30%-50% less words), highlighted important keywords, used bulleted lists and white space.

visual comparison between original text content and text after being reviewed; the reviewed content is shorter, has several highlights, and uses bulleted lists were appropriate
Side-by-side comparison of original text and reviewed text for one of the “history” pages. The reviewed text has around 30% less words, highlights keywords, and uses bulleted lists and white space where appropriate

What I got

  • Experience with Information Architecture for a corporate site, including card sorting.
  • Copy-writing experience after reviewing and re-formatting lots of text content.
  • Knowledge on how to create a consistent site that has to answer different people’s needs and goals.