Tag Archives: information architecture

“Designing Web Navigation” by James Kalbach

James Kalbach: Designing Web Navigation.Get it while it's hot: Jim Kalbach's book "Designing Web Navigation" (O'Reilley) has just been released. In Jim's own words (from his new blog, Experiencing Information):

Since web navigation design touches most other aspects of web site development in some way, the book necessarily paints a broad picture touching on many areas, including things like user research and visual design. But as much as possible the focus throughout remains clearly on creating an effective navigation system. I always try to bring it back home to web navigation whenever the conversation touches other areas.

I can wholeheartedly recommend it (I read some chapters in advance :-)).

Designing the (AOL Phone) Box

AOL Phone Box (small image)In August 2006, AOL Germany launched the AOL Phone Box, an AOL-branded ADSL 2+ modem / router with integrated 4-port Ethernet switch and VoIP telephony functionality. When we started working on the AOL Phone Box project more than a year ago, the AOL Germany world looked quite a bit different: AOL was one of Germany's biggest ISPs, providing a huge number of customers with fast DSL Internet access (and a big number with slower narrow-band dial-up access); the web-based products like the portal, e-mail, instant messenger offered functionality on top. Now, the access business has been sold to Telecom Italia, and AOL is turning itself into a portal player, offering free e-mail, news, and other web-based services and content. Time flies …

The project had a number of goals, apart from just creating the Box:

  • Create an Internet Access Device that is simple and straightforward to set up – in order to reduce the number of support calls (setting up the access device is a major call driver).
  • Create a compelling, appealing user experience make people want to possess the box.
  • Build up in-house expertise on how to create hardware products for future projects.

After quite a bit of research, the project team decided on working with a German manufacturer, Bautzen-based Sphairon Access Systems. Sphairon had a hardware and software platform that looked very promising, and they had lots of experience working with various telecoms – they build DSL splitters, Internet Access Devices, ISDN NTBAs and other devices needed for telephony and Internet access. We started out from an existing product, but had it completely revamped to fit our ideas of what an AOL-branded device should look like. Nuremberg-based industrial design firm B/F Design supported us here – they created innovative rough designs, did fantastic renderings and great prototypes.

The Interactive Design sub-project had a couple of tasks:

  • Revamp the existing user interface to make it fit into AOL Germany's visual design language.
  • Check and improve the user flow to achieve a higher level of usability.
  • Control and manage external development and design efforts.
  • Innovate on new features and parts of the offering.

Where we were coming from

The closest relatives to our AOL Phone Box are the members of Sphairon's line of Turbolink devices. They feature quite a versatile, extendable hardware platform, but come in a rather plain, matter-of-fact shell. The IAD shown below was presented by Sphairon at the 2005 CeBIT.

Sphairon Turbolink

Likewise, the design of the configuration web interface was a bit plain, and we felt it could be improved a bit – it had to be adapted to our visual standards anyway. We therefore adopted a visual style that mirrored our AOL Germany portal design.

How we got there

First, a new shell was developed by B/F Design. It needed to reflect AOL's brand values – Human Individuality, Top Quality, Elegant Simplicity, and Inspiring Enjoyment – and look high-class. I think they did a tremendous job.

AOL Phone Box

Reversed-engineered Information Architecture for Web FrontendIn parallel, we reversed-engineered the existing browser-based configuration front-end – we created a site map containing all the places and functionality. We then compared this site map to our list of desired features and started moving functionality around, restructuring the configuration tool's organization. After deciding which functionality should be experts-only and which should be available to all users, the IA for the web configuration was finalized and wire frames for a number of screens were created to illustrate the arrangement of elements on the UI. To get the web configuration tool to sport our visual style, we developed a visual design style guide especially for this product and delivered all the necessary assets to Sphairon, together with a couple example screens. We then moved on to defining two new parts of the AOL Phone Box experience: the "Einrichtungsassistent" (setup assistant) and the "CD-Intro" (CD-based introduction to the product). The customers should use the CD-based introduction to get the cabling right; once everything had been connected properly, the setup assistant (resident on the hardware) should take over and lead the user through the basic configuration of the product. To the user, this two-platforms approach should feel like one seamless process. During the interaction design process, we especially focused on possible error conditions: We analyzed them and either tried to circumvent them, or we used them to help users identify what might have been the cause of their issues and to help them out (again, a way to reduce Call Center volume and thus cost).Extremely close collaboration in the team and with our development partner Sphairon helped us make great progress, and we took great pride in seeing our ideas get realized and the designs getting closer and closer to what we had envisioned.

Design and Usability Evaluation

After some time of working on a project, you lose the ability to actually assess a solution's quality. So, at two points in the development cycle, we conducted usability evaluation measures with our partner HCiconsult. Early on (with a rough version of the UI in place), a heuristic evaluation was done. Later, when the development was 2/3 complete, we had a usability test conducted with seven test participants. Both measures showed we were on the right track, but of course there was still room for improvement. The findings were discussed and incorporated into the design iterations.

When we started to think about packaging and printed material, we realized that it would be highly desirable to provide a consistent wording throughout all materials – be them on the configuration UI of the box, on the CD, on the packaging or on leaflets. So we provided the necessary wording and operated as wording QA for the electronic manual. While this was quite an extra work package, it nicely followed the philosophy of an end-to-end design responsibility.

AOL Phone Box packaging

A challenging and rewarding project

In the end, the Interactive Design team had contributed in the following domains: For Interaction Design, we had contributed Information Architecture, user flows, and screen layouts. As for Graphics Design, we had created Visual design standards and provided the graphics assets for the development partner. Wording of all customer-facing texts including Web Interface, packaging, and manual had been provided by us. We had had our say in the design of the packaging, and of course there had been the final sign-off of all materials by the Director Interactive Design.

The AOL Phone Box has proved to be quite a success. The expected benefits were realized, the customers love it, and we have not only delivered a fantastic product, but also learned a lot – and had quite a bit of fun.