Barclays use Surface technology in new concept store

• Wednesday 7 January 2009
• posted by Simon Parbutt
• 3 Comments

Barclays has launched it's first "brand concept" bank branch in the UK.

I've just been shown around the store this morning. It's certainly impressive, much more open and friendly whilst still maintaining a safe corporate feeling. We were taken up to Premier banking (on the upper floor obviously) to play on the new surface tables.

I love the fact they have introduced new ways of interacting with digital content. I do feel this is only the beginning for this type of technology. It would be a great way to 'visually' explain complex banking products. With the multi-touch surface technology the customer could collaborate with the consultant to decide on the best product, rather than being 'shown' the best product for them. Much more friendly and inline with the new feel of the branch!

Splendid at dconstruct

• Monday 15 September 2008
• posted by Michael Dingle
• 0 Comments

Photo credit Matt Harris

Last Friday, a few of us from splendid were lucky enough to go down to Brighton to attend dconstruct 08, a user experience conference that attracts experts in the field from all corners fo the globe. The pouring rain was not enough to put a dampener on the day, the impressive line-up didn't disappoint!
I had been looking forward to listening to Matt Biddulf and Matt Jones speak, the hugely amusing Jeremy Keith was a welcome surprise and took home my award for most entertaining! Other speakers included Danial Burka, creative director at digg and Tantek Celik. All of the speakers were very good, some interesting areas were addressed, all that will be very informative to the way we work at Splendid.

A few of our highlights...

Aleks Krotoski, our second speaker for the conference was a gamer. You may reasonably conclude from the name and preoccupation that we were about to hear a lecture given by a male speaker. However she turned out to be an astute female academic who's plight was to unite the world of gaming with the wider network of web designers and developers. She challenged the audience to consider the seemingly endless possibilities if the two somewhat self-serving disciplines combined powers to form an uber Voltron-esque, unstoppable force of interactivity and information. So does the elusive secret to alchemy lay before us? Maybe not, but we could make some freakin cool games such as Guitar Heropedia and World of Warcraftr.

Stephen Johnson talked about the use of information design and social networking that John Snow was able to use to pinpoint the outbreak of the cholera epidemic of London in the 1870's, drawing on this example Stephen was able to demonstrate to us the shear power of the social web and data.... Though we are long time rid of cholera it was the similarity of how such tools used in the physical world ran in such a close parrallel to how we use the social web today... The rise of Geo tagging in todays culture has opened up an entire new variable in which to interact with our environment, a true merging of the physical and online worlds. This information can be used to not only unite the world globally but refine our information into the community, thus help strengthining the networks that make up the world at it's most granular state.

Jeremy Keith was the final speaker at dconstruct.
He choose to tackle the rather large topic of 'The System Of The World' Beginning with a reference to Isaac Asimov's fictional science 'Psychohistory', I was skeptical that Jeremy was going to make a speech relevant to a room full of designers of the Social Web. But I quickly regained my confidence when he explained the science of Network Theory, whether man made or naturally occurring had a pattern of Nodes and Hubs. Hubs being a major connection and nodes being the weak ties in the network. This pattern has been proven through the Six degrees of separation experiment and can be seen alive in Social networking sites such as, Twitter or linkedin. Jeremy summed up giving us the secret formula for creating successfully social networking sites, there are known knowns

All in all it was a very productive and inspiring day, and Stacca got to hug a gorilla.

Look forward to seeing you all out there in the social web

How to keep ahead of the game in an economic downturn

• Monday 21 July 2008
• posted by AJ
• 0 Comments

Depending on who you listen to it looks like we might be in for some tough times ahead. Economic growth is slowing, property prices are falling, mortgage rates are rising and the darkening clouds of recession are gathering. If the American model is anything to go by this means consumers will soon be hanging up their shopping bags and tightening their belts and losing their appetite for spending wealth gains on consumption.

So what to do this year if you're an online retailer? Bring the sale season forward, drop prices and hope you can bag enough cash in the next quarters to see you through the lean months?

Whilst taking on a defensive stance is a common strategy in the high street, research suggests thinking smarter is what works in the online world.

Online enterprises are unique in that all customers visit businesses via a browser window which is for all intents and purposes identical across geographic and demographic user bases. This makes for a very level playing field in which participants are fundamentally bound by the same parameters. Within this small window competitors do not have the capacity to be bigger, brighter, louder, have more street frontage or be closer to home. They can only be better than their competitors.

In this environment it is clicks that count for users, and sites can be made or broken by how well they create a user experience online which matches or exceeds competitor offerings. These days web users are experienced and knowledgeable, they no longer have to put up with bad design and when confronted with it they will quickly vote with their cursor.

The basics of the user experience comes down to interaction design; i.e. how you can create a complex technical system that users (customers) find easy, engaging, and hopefully compelling to interact with. Visual design is important, but making something pretty counts for nothing if it doesn't result in sticky traffic.

You already know the companies that have mastered interaction design because they dominate the top of the online retail tables. The Amazons, Expedias, EasyJets, Tescos and Play.coms of this world are well versed in the art of user centred design and although they started with a viable business model they have overtaken the hundreds of competitors in their space to get to the top of the tree.

In the offline world the master of this discipline is Apple. As an icon of good useable design it's hard to go past the ipod to demonstrate just how potent getting the user interface right can be for a product or business.

Less obvious however are examples of how poor design can sink an idea just as quickly. Probably the best known interaction design catastrophes in the online world is that of the ill-fated Boo.com which went far too long on technology and three dimensional spinning shoes and far too short on usability.

There are thousands more where that came from, all united in the fact that you haven't heard of them and they have either gone bust or are well on the way.

The failure of companies to pay heed to interaction design is all the more astounding when you realise it is one of the most cost effective investments an online business can make.

With modern modular build techniques the web front end (visual layer) can be developed independently of the site infrastructure (business logic). This affords online businesses the opportunity to evolve and improve their proposition without making large investments in technical infrastructure.

If you keep an eye on the big players you'll notice they are making continual gradual improvements to their client interface. Earlier this year Play.com relaunched their site. This is not a functional step change, this is a refresh to improve the customer experience and clarify the site proposition. Similarly Ebay evolves their site design continually to cater to the increased complexity of the site.

We highly recommend businesses undertake some user testing. Putting yourself in the minds of your consumers is good, but getting their direct feedback is better and often surfaces issues you were unaware of. When we worked on OAG (the Official Airline Guide) testing revealed that users believed adding items to a "basket" would reserve a flight despite them not having provided any payment details.

From an investment point of view testing means you have a vast reduction in the risk of changing your site and can forecast with some certainty how changes will be received.

The benefits of good interaction design are evident in the numbers. With a new booking engine and site design GNER (now National Express Mainline) effected a 30% increase in site revenue and a 50% increase in percentage conversions.

On relaunch of their site last year Hays recruitment enjoyed a 25% increase in job applications and a 12% decrease in ineligible applicants.

Done well investment in interaction design will deliver your business better results with less effort. In our eyes it's a no brainer, especially in tough times. The only surprise to us is that it needs explaining.

Let get connected

• Friday 27 June 2008
• posted by Paul Bishop
• 0 Comments

Splendid have been asked to sit on the Connected Device Council by our good friend John Holdstock at Microsoft. The group is a select group of brands and companies (we are the only user experience company in the mix) that will help shape the future of all thing embedded, that's everything that isn't a desktop or laptop. So everything from cars to toasters.

The group includes Vodafone, easyJet, Road Angel and hosts Mclaren (the people who make those nice fast cars).

It was a great day, some good discussions (such as when Silverlight will be available for embedded devices) and the day ended on a high with a tour of the Mclaren F1 and SLR factory...

Up the Reds

• Tuesday 17 June 2008
• posted by Alex Eicke
• 1 Comment

With England out of the Euros '08 the football fraternity looked elsewhere for its fix. Boasting more internationals in their squad than Arsenal, the splendid football team took to the hallowed turf of hangar lane to partake in the annual 5 a side Nexus cup.

Unfortunately due to a busy schedule our lead in to the tournament was not as smooth as hoped. With minimal training, fitness and knowledge of the game, team splendid took to the pitch with the hope that shear will and enthusiasm would help us triumph over stiff opposition such as MTV, Publitronic, Nickelodeon, Red Bee, MDM and Aquirva.

Needless to say that at the end of the day the results did not go our way, but fun was had by all and in usual splendid tradition we did our best work at the bar post match.

Why we love to put our work on the wall

• Wednesday 21 May 2008
• posted by Simon Parbutt
• 2 Comments

We love to put our work on the wall, this isn't us just showing off - its all about communication. Most of our projects start as a collection of thoughts, problems and ideas. These ideas are then taken through our process to define what they are and how they will work. Creating a project wall is how we define, communicate and document this process. Here are some reasons why:

It's visual
A picture really does say 1000 words. Written briefs can get forgotten in the design process. Wouldn't it be better if your brief was brought to life as a set of images, diagrams, personas, research findings and great reference material which grows with the project?

It's big
We can all see it, all the time. From the designers and developers dedicated to the project, through to the rest of the studio who may have useful knowledge or experience in a similar field.

It's a living document
A couple of post it notes or some fresh wireframes can update the whole team very quickly and easily. We can all see where our designs have come from and easily trace the original concepts if needed. All ideas are captured in one place. Even better, it is kinder to the trees as print outs are all in one place rather than each team member having multiple copies.

It's external
Ideas can never develop if they are locked in someone's head or burried in a hard drive. Collaboration is vital in producing a well rounded user experience. The wall provides a focal point, a meeting place for the team's efforts. A neutral space where ideas can develop and grow.

You can see more than one thing at a time
Reviewing designs on screen is great for certain aspects of the process. But, to understand the flow of a user journey, you often need to see the full story from beginning, through the middle to the end. The project wall lets you see all of these aspects at the same time, ensuring that the customer is always our number one priority.

You have to stand up to take part
Maybe it's just us, but we like to stand up for energetic debates and discussions.

Everybody gets it, quickly!
As designers part of our job is to communicate our progress on a job. Thanks to the project wall, everyone can instantly see the progress made from the last checkpoint. Although it looks deceptively simple, it's actually a very useful tool. Think new team members being brought up to speed really quickly; think developers getting project without wading through overweight documentation; think stakeholders quickly grasping the current status of a project. All of this without being subjected to a massive powerpoint. That's what we call a result.

Record Shops in Soho: An Art project with Spencer Murphy and Ali Augur

• Wednesday 7 May 2008
• posted by Paul Bishop
• 0 Comments

A good friend of Splendids, Ali Augur, has been working with photographer Spencer Murphy on a project to document Soho's record shops. The exhibition is round the corner from our office so we thought we have a shout about it

In December last year, Photographer Spencer Murphy and Designer Ali Augur went about capturing a series of portraits of Soho's independent record shops and their cult owners. These portraits will be on show from 15th May - 24th May 2008 at 63 Broadwick Street, London W1.

The lyrics of Earl Zinger's 'Saturday Morning Rush' were the inspiration behind the project. The track was significant as it captured a moment in time and documented a scene on the brink of change. Ali originally set about illustrating the shops, but this proved too labourious, with many shops disappearing before he was able to draw them.
An introduction to AOP winning photographer Spencer Murphy last year put the project back on track. The result is a series of powerful portraits of the record shops and their owners. From Junglist legend Nicky Blackmarket at BM Soho to Harold Moore's Classical Emporium. Also included is Mister CD which sadly closed down at Christmas - an unfortunate example of the historical importance and cultural relevance of the project.

Leeksy has gone and got a Brazilian...wife that is...

• Thursday 10 April 2008
• posted by Team Splendid
• 1 Comment

Long term Splendid boy Mark Leeks (or Leeksy) has gone and got married to the lovely Gio in her native Brazil. Dont they look lovely?

And our very own Creative Director, Simon Parbutt was the best man. We dont have a video stream so a picture will have to do of his cracking best man's speech...

The day looked great from the pictures, but we are not sure about the one of Leeksy wrestling the Mother in Law...

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.