Why user-centred design should form part of every design process

• Thursday 27 March 2008
• posted by Ben Ireland
• 0 Comments

We've read Don Norman's musings, and Jacob Nielsen's assertions that the user is king, but how does this affect a design process? Can the process really affect usability? When the audience and technology varies from one area to another, how does user-centred design help maintain a consistent experience whilst also addressing the specific needs of each audience?

Here at Splendid, we work on the methodology of user centred design, which focuses on the needs of the user to create a useful, uniform experience based on the users desired workflow, not the needs of the system. This provides us a framework for design that is inherently flexible, based on the target audience for each product, the complexity of their needs and the method of delivery.

At the recent Microsoft Mix08 conference in Las Vegas, we displayed a project that clearly reflects their user-centered approach. In what we called a '360? design solution', we sought to address the design challenges in three areas of the Aston Martin experience: Exploration (car configurator), Purchase (in-dealer configurator) and Ownership (In-car system). These use a variety of hardware and software, ranging from Microsoft's web-based Silverlight technology, through the XNA gaming platform to the Windows Presentation Foundation (WPF).

In the case of Aston Martin, the challenge we faced was to design for several audiences, from children who are fans of Aston Martin and want to build their ideal car, through to owners and their in-car experience. There are obvious differences in the needs of a fan versus a customer. We assess each user type and ensure we understand their needs, and address them accordingly. We take time to study data on who is using a given product, and the client's needs in terms of who they believe their customer to be. Often, these are at odds, but by assessing both we arrive at a true understanding of who the users are.

Understanding the users goals is the next step. In the instance of Aston Martin users, this ranges from 'create a pretty car' to 'exactly WHICH trim do I want on my foot-well carpets?' We then assess the workflows that user needs to follow in order to achieve those goals.

Once the workflows are understood, we engage ourselves with optimizing the workflow, and assessing the merits of various potential solutions. Once the functionality is defined, we skin the project in a way that respects brand guidelines and is visually pleasing and appropriate to the user.

For an Aston Martin customer, the journey begins as soon as the user enters the Aston Martin website. The configurator is a prominent link on the homepage, and upon clicking the link to launch the configurator the user is taken seamlessly to a 3D environment in which the car is their canvas. The surrounding navigation remains familiar, allowing the user to leave the process at any point. As the user is guided through the configuration of their car, they are also free to explore further content of the site such as video, text and images, whilst always remaining flexible in terms of their place in the process.

While a linear tract can be followed, flexibility and exploration are encouraged. No-one spending that kind of money on a car wants to feel out of control of the situation. Similarly, many customers will attend the factory in UK in order to see their car being built, or even prior to build to help them determine their configuration having seen those of other customers. However, with over 70% of Aston Martin's orders coming from overseas, most customers aren't fortunate enough to be within such easy reach of the factory. For those customers, a realistic configurator is a boon.

This fear of disappointment can guide many customers to opt for more conventional, tried and tested colour schemes that provide a better resale value. This is, in itself, at odds with the ultimate configurability of the car itself. The challenge to Splendid was to provide a configurator in which customers had enough confidence to explore more daring configurations. Our solution allows that flexibility in the sheer quality of the product. The 3D model of the car shines as an example of the level of realism that anyone spending that kind of money on a car should expect, while the interface encourages exploration in a way that should not scare even the most inexperienced web user.

Then there are the textures. Aston Martin offer a variety of surface textures for their interiors, which, until now, could only be represented as real swatches of material. Microsoft Deep Zoom technology allows users to zoom in to the surface materials of the car and get a real feel for their configured interior.

The appropriate nature of the configurator was no accident. We worked to understand the nature of similar products in order to understand where they succeeded or failed. We then assessed users of the current configurator to understand our user-base. Once you truly understand your user, and can stand in their shoes, you understand their frustrations and desires. Designing to accommodate them then becomes a personal obsession, you're as involved in the process as the customer is.

Having configured their car (or even before), they can arrange a dealer visit. From here the dealer takes control with a hand-held 'remote control configurator', that displays the car on a plasma screen on the dealership wall. This device allows dealers the ultimate freedom they require in helping customers configure their cars. In interviewing dealers, we uncovered that their biggest fear is configuring a ?120,000 car only to discover that their initial vision of the colour and material combinations fails in real life, leaving a customer unhappy and with a car the dealership can't shift if the customer trades it in for a more conventional configuration.

Our split-screen response focuses both dealer and customer on the configuration in equal measure, providing the perfect forum for open discussion and collaborative working, at a time when the customer generally wants their hand held through their configuration. Once the car is configured, the dealer is able to avoid another current pitfall: the order placement.

The salespeople surveyed told us that order placement was often a contentious point, customers placing orders then changing spec in the few days between configuration and factory receipt of the order via the post. An immediate order placement system would help to imply importance of order placement, and also to promote confidence in the brand... as well as looking efficient to customers."

But this is just half of the experience. The best is saved until last, when the user takes delivery of their Aston Martin. An ingenious in-car system that sets the standard for Aston Martin's competitors to follow.

The in car system provided an enormous challenge in terms of hardware. Aston Martin control screen-based interaction via a hardware joystick and 'Menu' button. A touch-screen system would have been easier to design for, but would not have supported Aston Martin's user-centred design in giving the user the most intuitive and least intensive interface possible. We don't want them taking their eyes off the road.

Allied to this, the system uses groundbreaking GPS technologies to track the precise position of the car to within 6 inches, allowing the system to support racetrack use and to map progress on a real0time 3D map, even on a racetrack, where timing is also supported. This is real 'James Bond' technology for the masses.

Given the physical hardware of the car, the in-car system couldn't follow the same visual design as the configurators and also remain in keeping with the elegant interior.

We worked with the Aston Martin design center to create a unique brushed aluminium appearance for the in-car system, that perfectly complemented the centre console. The screen is barely noticeable in use, and replaces all other in-car systems in a space that was previously dedicated only to GPS equipment. The result cuts the number of interface elements the user has to be aware of by half, again allowing them to focus fully on the road ahead. This isn't just an interface concern, it's a safety feature.

Across the suite of products created, we had to maintain crucial brand elements, yet appropriate each interface to the intended audience. The result is an understated blend of style and function, the user experience a consistent journey through use of multiple products across a single brand. The transition between each piece of the Aston Martin lifecycle is elegant, platform transitions unnoticed by all but the most discerning user. Maybe this 'User Centered Design' stuff isn't all nonsense afterall.

Silverlight Custom Control

• Monday 10 March 2008
• posted by Paul Bishop
• 0 Comments

So we have shown you some pictures of the Aston Martin Keynote at Mix08 and a link to the video but how did we actually do the work...while we don't want to give all our secrets away here are some behind the scenes details...

This blog follows a section of the development of the Aston Martin silverlight presentation for Mix08. The content assumes prior knowledge of Windows Presentation Foundation and its xml mark up called XAML.
This blog will briefly detail how we made a custom template for the slider control. The custom template changed the visuals of the slider and added additional functionality to allow the Aston Martin car to rotate while showing a number of features of interest.

Figure 1 shows how the slider renders out of the box. The silverlight slider has the same basic functionality found in all GUI sliders. The control allows minimum and maximum values of the slider to be defined; dragging the thumb of the slider changes the value of the slide within it set bounds.
In the case of the Aston Martin project the value of the slider represented the frame number of a rotating car animation, so dragging the slider changed the frame index and therefore animated the car.

Figure 1: Visual of the standard Slider Control

The slider has the following default template shown in Figure 5, basically the template is made of a grid with two nested grids within it which allow the slider to define a different layout for the two orientation modes horizontal and vertical. Concentrating on the horizontal layout, the layout consists of a 3 column grid. The first column contains an invisible repeat button within it to automatically decrease the value, while the third column contains an invisible repeat button to automatically increase the value of the slider. The middle column contains a thumb control which can be dragged along the track of the slider which spans all the columns behind the other controls. When the thumb is dragged the slider changes the width of the first column, moving the thumb along the track.

Figure 2: Built in Template for Slider Control

This template can be found in the source code of the controls or by using Lutz Roeder's Reflector to save the resource (generic.xaml) from the assembly the slider is contained in.
The goal of the custom template is to

1. Change the visual of the track Layer
2. Change the thumb visual.
3. Add additional controls to move with the thumb, which show features of the car of sections of the sliders track, while communicating a picture and description for each feature associated the frame number, which is the slider value.

Changing the track layer is easily done with a simple rectangle with gradient alpha colours and the aid of Expression Blend.

Figure 3: Custom Track XAML

Basically this effect is created by defining four gradient stops allowing the middle 60% of the track to be a solid colour while the ends of track gradually fade out by altering the alpha mask from 100% to 0%

Equally the thumb can be given a custom template to be more visually appealing.

Figure 5: Built in Thumb Template

Figure 6: Thumb using a custom template

To add additional controls which move with the thumb an additional row is added to the control template and the additional controls are added to the middle column of the first row. Additionally another row can be added to the template to add a text block control spanning 3 columns and aligned centrally to describe any feature the slider should reveal.

To make things simple we can add an image to the middle column of the first row. When the slider is dragged, the slider value is changed; depending of the value of the slider different images can be displayed. In order to achieve this, the custom control overrides the OnValueChanged method. The On ApplyTemplate method can also be overridden to allow references to the image and textblock control to be found the template.

The basic XAML and code can be seen in Figure 8 and Figure 7. The final silder visual can be seen in Figure 9

Figure 7: Custom Slider Code

Figure 8: Custom Slider XAML

Figure 9: Final Slider Custom Visual

Conclusions:
The sliverlight control template framework is very powerful and is incomparable to prior web technologies, it allows full customisation of a controls visuals while retaining its functionality. It is a completely different world from working with technologies such a combination of asp.net and javascript.

If you want to know more about the Aston Martin project or our work with Silverlight 2.0 then all you need to do is get in touch.