Joris Groen, Josine van de Ven
Cambridge's design philosophy is based on an approach that brings together a multidisciplinary team of business analysts, technical experts (Web developers, programmers, enabling technology specialists) and User Experience specialists.
Cambridge's heritage is technology. Given the complexity of the technology-driven New Economy, it became even more important to add newer disciplines to the Cambridge mix of expertise. "Design" (or User eXperience) was one of the areas we recognized we needed to grow in. The challenge was to integrate User Experience disciplines into the Cambridge system. At the same time, we wanted to bring the User Experience specialists together for knowledge sharing, community forming, as well as for internal training and support. Cambridge started the User Experience (UX) group about four years ago. UX is Cambridge's design community, including Visual Designers (Creative), Interaction Designers (Cognitive), Information Designers (Content/Cognitive) and Web Developers (Construction). These specialists work on our client projects as a fully integrated part of the team (alongside colleagues in the technology and business/strategy groups). To increase quality by collaboration, the UX specialists also work together (away from their different client project teams) on a regular basis, typically, one day per week.
The method that is used by Cambridge contains clearly defined, distinct phasesgrouped around major decision points. These phases fall into the differing character of the product lifecycle: Strategy, Definition, Design, Development, and Rollout/Launch, then maintenance. In the strategy phase, we work with the client in forming a valid business plan. Once a business plan is established, the real work begins.
We start with a "Product Definition" phase, where we identify and document the functionality, and target audience of the online business. The UX specialists also design preliminary storyboards and visual directions (style guide) of the Web site, based on user interviews and contextual inquiry. This visualization allows us to validate concepts early on, and is often used as a tool to create buy-in (within the client organization, within the team, from venture capital, etc.).
In the "Design" phase the UX focus is on the user scenarios, which lead to concept development and paper prototypes that are tested with end-users. Based on the needs of the project, we perform cognitive walkthroughs, focus groups and usability testing. This results in UI-style guides, page templates and the content architecture of the Web site.
Of course, we must work very closely with technical specialists on the team, to validate the technical feasibility of the design. Sometimes concessions have to be madebut at least they're made early on and we make sure to keep the balance between usability requirements and time to market. This way we are sure we have come up with a design that will actually worktechnically and interactively.
For our Design Example, we have chosen a project we did for LogiGo.com. LogiGo.com is a European wide e-market for freight and freight space. Users are planners of logistic service providers that use the Web site to find freight for their trucks or to find trucks for their freight. After registration, users of this e-market can respond to interesting offers that the system has found for them based on their profile. They also have to manage the responses they get on their request for quotes and offers.
In the design phase we conducted cognitive walkthroughs using raw storyboards. These were a series of sketches of screens with no graphical style applied. Initially these screens where based on client demands, best guess and some interviews with domain experts. The storyboards where used to walk through the screens with some users in a very early stage. Another advantage of this approach is that it is easy to apply changes on these sketches. In this way a high iteration speed could be achieved. In a parallel track, the graphical style of the Web site was developed using the raw storyboards as input.
Figure 1 shows an example of a raw storyboard, or low fidelity prototype where the interaction is tested separately from the visual design. In the storyboard below, figure 2, you see the higher fidelity prototype where visual design is incorporated.
We designed a "dashboard" to provide a starting point for the trading activities and for a dynamic view of the system. In an earlier project we defined some high level guidelines for digital dashboards:
- Information displayed is dynamic, based on relevancy
- Order and grouping of information based on frequency of use rather than correct semantic categorization
- No navigation within the dashboard (one view)
- Highly personalized
The functionality of the e-market implies a broad variety of user alerts (e.g. when a new match is found, when a closed deal is reached, or when a message from customer service about new functionality is sent). We created an inbox showing a list of the latest 10 alerts, no matter what kind. The format of the items in the list is a short text string, containing the most important characteristics of the alert, just like an e-mail subject header. Clicking on the text link leads to the detail page. The alerts can expire and are then automatically removed. The goal of this approach is to make the user interface simpler by reducing navigation and automatically filtering on the time aspect. Users don't have to look at different pages to find what they need within the next time frame. It is comparable to the big dynamic displays in train stations, listing all departures in the next hour sorted by departure time.
In the future we hope to let users optimize its behavior (e.g. size, type of alerts) to their personal demands. That is why a lot of space is left open on the dashboard, so that the dashboard can contain more information in the future.
Josine van de Ven
Cambridge Technology Partners
Het Kasteel 1, 3441 BZ Woerden,
A cognitive specialist has a background in HCI and has experience with web site production. Other skills are knowledge of usability testing and internet technology.
A creative specialist has a background in visual design, or may have experience in product design or graphic design. Other skills are experience in creating graphics for the web and computer graphic production.
A content specialist has a communications background or is an experienced editor. Other skills are writing and editing.
A construct specialist has a technical background and has a good knowledge of web-based technologies. Other skills are experience with building web sites and knowledge of internet-related products.
- Mullet, Kevin and Sano, Darrell. Designing Visual Interfaces: Communication Oriented Techniques, SunSoft Press, Mountain View, 1995.
- Mayhew, Deborah. Usability Engineering Lifecycle, Addison Wesley, 1998
- Jacobson, Robert, Ed. Information Design, MIT Press, 1999
- Tufte, Edward. Visual Explanations, Graphics Press, 1997
- Wallace, Patricia. Psychology of the Internet, Cambridge Univ. Press, 1999
Tools (just the most commonly used):
- Paper and pencil
"Design's purpose is always the same: inspire insight, evoke a responsetransform thought into action."--Clement Mok
"They didn't know it was impossible, that's why they did it."--Mark Twain
©2000 ACM 1072-5220/01/0300 $5.00
Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee.
The Digital Library is published by the Association for Computing Machinery. Copyright © 2001 ACM, Inc.