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.

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.

As a designer using Silverlight I was a little sceptical at first coming from an adobe background. I began using Silverlight on concept work using the tools provided (Expression). I was surprised to find the tools excellent to use and the interface extremely easy to understand.

My initial concerns were that it didn't have the functionality I needed to build all that was required for the project. This could be a small hurdle for most designers similar to me, stuck in our actionscript ways, that I was unable to understand the reasoning behind the functionality and the set up of the projects. Once I began working alongside developers I had my first 'aha' moment with Silverlight, I was able to see first hand the method for building and developing projects.

It was great working alongside developers and seeing how they were able to develop using the very same assets I created for them.

It is a great step to bridging the gap between designers and developers. As I have spent more time designing and developing projects using Silverlight I am beginning to see more and more potential for the technology.

All in all I am very keen to see the development and implementation of this technology across the net.

Recently we at Splendid were invited to send one of the team to attend a Boot Camp at the Microsoft campus in Redmond in the USA.

The purpose of the Boot camp (named the Artist in Residence Programme) was to to give each resident the ability to implement Silverlight solutions using the Microsoft Expressions Studio, Visual studio and other 3rd party tools such as Illustrator etc.. Silverlight (formerly WPF/e) was officially launched this week at NAB in Vegas.

During Boot Camp each resident worked with a mentor from the Silverlight development team to help them develop the knowledge of the platform. The programme was run by Barak Cohen (Marking product manager of Silverlight), assisted by a number of managers from the Microsoft team including Mike Harsh, Ed Maia, Aaron Brethorst, Mark Rideout, Peter Blois, Celso Gomes and Joe Stegman.

So, what is Silverlight? Silverlight is a cross-browser plug-in, a sub set technology of the WPF (Windows Presentation Foundation) . Silverlight uses XAML and Javascript to enable designers and developers to produce rich Web 2.0 user experiences using video, vector based graphics and animations that can be integrated in to existing web based technologies.

During the first few days of the program we were introduced to the different aspects of the Silverlight and Expressions studio Tools. We looked in detail at XAML and it's integration with Javascript and C#. XAML (Extendable Application Mark-up Language) is a text document that describes an applications look and feel and defines position, size and colour of multiple objects.

The expression studio tool set and Visual studio 5 with IntelliSense are designed to enable both designers and developers to work closer together. A designer can use Expression blend to create the visual assets which are immediately translated into XAML (using a logical naming convention) from which point a developer can control the graphics, video text and animation using Javascript.

One of the most interesting aspects of the program was to be involved at a point when the application was still in development. A stated objective of the program is to gather feedback from real users developing application for clients using other software packages (like Flash etc.). We were able to suggest elements that would prove extremely useful to designers and developers and which will hopefully be included in later versions of the software. One of the obvious pitfalls of this is that there are very few experts of Silverlight and there were many questions asked and bugs encountered.

As well as learning some really interesting stuff about Silverlight and it's capabilities we also met some cool guys from the Microsoft team and from the other companies participating including Elor and Rudi from Metacafe, Michael from McCann, Hiljamaria from Conchango, Mike from MondoRobot and Maya from Eyeblaster and of course everyone else from Render space, and AKQA.

It was a great opportunity to work within such a diverse group of designers and developers all with varying levels of ability. We also had a great day out skiing during the trip. Nice.

For more information on what we are doing with Skinkers and other projects using Microsoft Silverlight please contact dan@howsplendid.com