Class 02: User Experience

UX: Past, Present and Future

TWEET: #DIGITALACADEMY

YOU ARE DESIGNING!A GROCERY SHOPPING!APP!!SKETCH THE HOMESCREEN!

Before I tell you about the history of UX, I should mention that UX goes by many different names, and you’ll hear a lot of these today. They’re all in some

way synonymous, or at least closely related, and although though they may not be absolutely the same thing, they’re similar.

For the purposes of today, let’s just consider all of these part of the same digital

service.

UX User Experience

Information Architecture

Experience Architecture

Interaction Design

User Experience Architecture

Usability

User Centred Design

So, where, exactly is the beginning of user experience? Like any history, a definitive beginning is always elusive, rather like staring into a black abyss

waiting for the Big Bang. But a convenient place for us to start might be somewhere around here.

This is 1982, and just before the Big Bang explosion of home computing,

anyone wanting to unlock the power of a computer began with this kind of prompt. It required a specialist skill, definitely not a user-friendly interface,

especially if the user is your gran.

But I think we should go a bit further back to find the origin of UX.

Let’s instead start here. This is 1903 in Kitty Hawk NC, the Wright Brothers their first plane. This is the birth of aviation. What’s remarkable about this is the simplicity of the device – really just a motor and a stick lever to control movement. The first flight lasted 12 seconds.

As is often the case, we can thank war for some of the greatest innovation in technology. Throughout WWI and by the time of WWII, the Wright brothers’ concept had evolved into precision machines.

But to look at a cockpit of the time, precise isn’t the word that springs to mind. The massive technical innovation required an expertise that only a handful of trained pilots were able to attain, and it quickly became obvious that no matter how much their lives depended on accurate results, there was always a moment where they hit human limitations. Studying these limitations was the beginning of a field that would later be called Human Factors engineering, and this is where we might place the birth of user experience.

If we look at a more recent cockpit, this one from an Airbus A320, we see that it’s evolved into a glowing array of digital displays. These are called fly-by-wire planes, relying on data as much as diesel. The pilot programs the route, and monitors the displays for most of the flight – a sort of triumph of human factors engineering. But it’s still a highly specialist job, and if the precision of the data fails, we know what happens…

1903

Kitty Hawk 1939

Human factors

The rapid growth of aviation allowed the study of how users – pilots – interact with technology and their environment, and this paved the way for the work we do in user experience. But other technological innovations were happening at the same time that get us to where we are today.

1900

2001

1997

1984

1973

1925

2006

Rad

io

TV

Inte

rnet

Per

sona

l com

pute

r

Soc

ial n

etw

orks

Mob

ile 3

G

Clo

ud c

ompu

ting

Functional

Usable

Profitable

Strategic 19

00

2001

1997

1984

1973

1925

2006

1939

If we chart the need for an understanding of how users interact with technology over our timeline, we see the field of user experience changing since human factors engineering. It was first focused on specialist functionality, not accessible to many. The computing revolution made us aware that to work for everyone, technology needed to be usable for everyone, and design became equally important. The invention of the web added a desire to make money in addition to usability. And more recently, the myriad of technologies and experiences means that we’ve begun to focus on the strategic vision of a digital experience, sometime agnostic of the device.

1903

The balancing act

User experience has evolved along with technology to balance the needs of users and businesses, while mindful of changes in the digital landscape. But we also have to be mindful of other changes in the last decade.

A changing media landscape

Media has changed from an advertising-centric model…

A changing media landscape

To one where content is king, and the outlets for owned, earned, and bought media are almost countless. How does the user make sense of this crowded space?

Multinational

Consumers converge from all over the world, purchasing and commenting. But do they expecting the same experience or a different one?

Physical and virtual

We’re merging the physical with the digital. This is an underground station in South Korea where you can do your shopping using your phone while you wait for the train. User experience is moving off the screen, or is it onto multiple screens?

Always on

The world is accessible 24 hours a day, but we’re learning more about what this actually means to people’s behaviours, and therefore to experiences.

Multichannel

There are a lot of channels out there. But how often do all the channels come together seamlessly? Apple is hailed as some of the best design on the planet, but who’s ever tried to sync across multiple devices? And what about this iCloud business? I still can’t figure it out.

Segmented organisations

Consumers don’t care about the internal workings of organisations – to them it’s one brand. As experience designers we’re also able to articulate the consequences of siloed thinking and acting. We often end up knowing more about the business as a whole than our clients.

The data revolution

Data – the new oil. If we can leverage it. First we need to find it, harness it, and make sure we’re incorporating it into everything we do.

The pace of change

And to add to all this complexity, it’s all happening at an incredible pace. Keeping pace is an essential skill for us.

UX at the heart of it

Media Creative

Technology Analytics

UX

User Research

Strategy & Planning

Insights Magic

Not intending to appear solipsistic, this is where we fit in, right in the centre, working very closely with creative and technology teams to build digital experiences that matter. Working together, we take insights, and create magic. How, then, can we define user experience? Who are we? We craft customer experiences across every touch point, using human-centric persuasive thinking.

UX IN ACTION

The design process is always slightly different for every client. There are, however, 7 typical stages during which user experience plays a role, working in close conjunction with blended teams to ensure the client’s goals are met and exceeded.!!Typically, we first need to understand the business and its place in the market. Upfront research, business requirements, and key performance indicators happen at this stage.!!We often next evaluate the current and intended experience against a set of key heuristics, while benchmarking it against competitors and comparitors.!!Next we work to understand who it is we’re designing for, and what their key journeys and goals are.!!Once we have a brief, we work closely with creative and technology to design the experience and create prototypes for testing.!!User testing is an iterative process that allows us to improve our designs using feedback from real customers. Sometimes several rounds of testing and revision are necessary to arrive at the right experience.!!When the users tell us we’ve achieved success, we finalise the work with refined visual designs and document the experience with site maps, wireframes, and specifications.!!And always striving for perfection, we continually improve the experience using analytics and live site testing techniques.!!We’re then ready to start the process all over again.!!There are a myriad of tools and techniques you’ll use as user experience designers at every stage of this !

Understand the business

& market

Expert evaluations & benchmarking

Understand customers

& key journeys

Sketching & prototyping

User testing

Finalise experience

design

Continuous improvements

Iterate

Research & analysis

User & business requirements

Creative brief

Testing

KPIs

Expert evaluation

Content audit

Experience principles

Personas

Customer journeys Scamps & sketches Prototypes

Process flows Site maps Wireframes Creative designs Specification

Analytics

Planning Creative UX Research Analytics

Site architecture

LET’S LOOK AT TWO OF THESE

DELIVERABLES IN DETAIL

Understand the business

& market

Expert evaluations & benchmarking

Understand customers

& key journeys

Sketching & prototyping

User testing

Finalise experience

design

Continuous improvements Research & analysis

User & business requirements

Creative brief

Testing

KPIs

Expert evaluation

Content audit

Experience principles

Personas

Customer journeys Scamps & sketches Prototypes

Process flows Site maps Wireframes Creative designs Specification

Analytics

Planning Creative UX Research Analytics

Site architecture

EXPERIENCE!

PRINCIPLES!

UX VERSUS BRAND!

EXPERIENCE!

PRINCIPLES!

Experience principles are one of the best tools for harnessing the inherent DNA of a brand. This will not only make for happy customers, but can also be the unifying principles that bring creatives, UX’ers, and clients together.!

POP!QUIZ!

WHO!CREATED!THIS?!

LICH

TENSTEIN

!

Famous for painting using a comic book style. We knew it was him by the mimicked dotpress printing, which is actually painting. This is a play on modern forms of mass reproduction and storytelling.!

WHO!CREATED!THIS?!

WA

RH

OL!

Good. This is indeed Marilyn Monroe as depicted by Andy Warhol. Warhol produced thousands of these silksreen prints in the likeness of famous photographs of the time. This is a commentary on the worship of contemporary idols.!

Let’s try again. Who knows what store this is? It’s Miu Miu, sister shop of Prada.!

The carpet is so plush, you want to take your shoes off and try on others.!

Bags are laid casually on the table, as if placed by a well-heeled woman at home.!

Mirrors place you amongst the clothes. No models here – just you and the goods.!

Details! An exquisite shopping space, a place you want to hang out for a while.!

TACTILE!

DETAILED!IM

MER

SIVE!We could probably guess the types of principles Miu Miu stands for as a brand simply by examining this store.!!And it should be a no-brainer that when I go to the Miu Miu website, I’m going to get a similar, albeit digital, experience. Right?!

Wrong. This is embarrassing. This

is Miu Miu a la Oxford Street.

Indeed, if we were to hide the Miu Miu

logo, this could easily be Primark.

Where are the principles so

lovingly made alive in the store?!

ARCHITECT!INTERIOR DESIGNER!

+!THE CLIENT!

If we think about who was responsible for the fabulous experience of the Miu Miu store, it’s an architect, an interior designer, and of course the client. And they clearly discussed invoking some core brand values. Why didn’t the UX and visual designer do the same?!

DNA!Because they clearly didn’t get under the skin of what it means to be Miu Miu.!

About 3 years ago Virgin embarked on rebranding their entire fleet. This extended to their digital touchpoints, and this is when we were brought on board, so to speak.!

They updated their brand mission and corporate values, and the concept that every Virgin employee should be an everyday pioneer became a hallmark of the rebrand. But does the digital experience make one feel like an everyday pioneer?!

Sadly not. This is a recent Virgin flight

search results page. Some

inherent usability problems aside,

apart from an overreliance on red,

this page doesn’t feel very Virgin.!

!So how do we

reflect the Virgin core principles in

the design?!

This is the core of the Virgin experience. A brand onion usually has four main ingredients – essence, personality, values, and benefits. We won’t bother ourselves with the details, we’ll just consider this the DNA of Virgin Atlantic. But how do we ensure these are inherent in our designs?!

We break them down, one by one, and examine what they really mean. Creating these is a collaborative process, and therefore a significant way to engage the team and the client. Here we’re breaking apart the concept of “Alive”, defining it, associating a famous person and one of the personas we use on the project.!

We look for inspiration.!

May 2010 Virgin Atlantic experience principles

Owning the principle

ALIVE

We can say a place is amazing ‘til we’re blue in the face, but what do people really think? By exposing the public’s views on the route someone’s looking at, we can ensure the site feels responsive and relevant.

Toying with booking a flight? Think how much more likely you’d be to book today if you could see how many seats were left, or even how many people had searched for that flight in the last 24 hours. You snooze, you lose.

User reviews Get ‘em while they’re hot

And we sketch some examples, well in advance of designing final pages.!

When we’ve done this for all of the principles, we turn them into a set of handy cards we carry along with us to every design discussion. The more we use them, the more we internalise them – the more we live and breathe the brand.!

Let’s return to our flight search page. We spent some time focusing on the usability and design of this page, but it wasn’t until we began applying the experience principles that we drove our solutions into territory that would make Richard proud.!

We of course began by sketching…!

…and turned those sketches into clickable prototypes for several rounds of user testing. And after several amends and multiple iterations, we finally settled on this…!

These flight search results have only recently launched. I’m sure you’ll all go out and book a flight after this, so I won’t dwell too much; but a few innovations include exposing more options, breaking the journey into outbound and return legs, and of course an improved visual design. But there are quite a few innovations here that grew partly out of our experience principles. Where do we see this?!

Showing the lowest price in the calendar ribbon at the top of the flight search results instills confidence in customers – they know they’re getting the price they want within their chosen date range.!

Exposing multiple cabins and classes in the results table allows you to feel more adventurous by booking a trip you might not have chosen otherwise.!

A video component allows you to watch branded content without moving away from your purchase and begins the process of creating good travel memories.!

And at the same time it puts the customer in the mindset of their journey. Already they’re feeling special and loved.!

Price guarantees and openness about prices across cabins create peace of mind. Customers know they’re making the right decision at all times.!

Interactive elements on the page make it feel alive. Selections collapse out of the way when not in use, and the basket follows you for ease of use and legibility.!

State changes during the process help add a personal touch throughout, and make the scary process of buying a flight feel a little bit less stressful.!

What has been so refreshing about Virgin’s ethos is that it applies to not only its employees but also to everyone who flies with Virgin. We, too, as designers, have felt like everyday pioneers, and this is owing in large part to changing our DNA to match our client’s a bit more closely.!

6%!increase in flight booking conversion*!

* Still early days, but promising!!

CUSTOMER!

JOURNEY!The most commonly known output of the user experience practitioner is the wireframe. However, I want to introduce you to what I consider to be the unsung hero of our repertoire (tool, deliverable, process) – the customer journey. Without this no digital narrative can be sure to succeed! Because of the way it forces you to think and to work. Simply put, a customer journey is a narrative, that illustrates how people would ideally interact with your product, service or campaign. We use them at various stages of the project: right at the beginning to flesh out an idea, when we know exactly what we want to achieve and we need to start getting into detail, and at the end to check our work is complete and there are no holes or gaps in the user experience.!

If we think of our Miu Miu store, we have to understand where the store lives within the virtual mall, how to get to it, and how to use your credit card with as few clicks as possible. There are many different types of journeys that might illustrate this.!

Simple box journey

These simply show the steps a customer might go through on his or her journey through an experience, with boxes and words.

Non-linear, not always digital

Journeys might also move in and out of different digital and non-digital spaces. They don’t even have to be linear in time and space.

They might show how pages fit together

Or illustrate an epic proposition

The core of this, of course, is the user, the persona who will experience and consume the product you’re designing.

They, after all, will be in the pilot’s seat when you hand the product over to them.

YOUR TURN

DEFINE AND GROW!YOUR BRAND!

1.   Pick a brand!2.   Agree 2 principles!3.   Agree their meaning!

NOW (RE)DESIGN!YOUR GROCERY APP!

1.   Home!2.   Find a product!3.   Put it in your basket!

Understand the business

& market

Expert evaluations & benchmarking

Understand customers

& key journeys

Sketching & prototyping

User testing

Finalise experience

design

Continuous improvements Research & analysis

User & business requirements

Creative brief

Testing

KPIs

Expert evaluation

Content audit

Experience principles

Personas

Customer journeys Scamps & sketches Prototypes

Process flows Site maps Wireframes Creative designs Specification

Analytics

Planning Creative UX Research Analytics

Site architecture

Remember, we’ve focused on 2 very small aspects of a grand process.

Understand the business

& market

Expert evaluations & benchmarking

Understand customers

& key journeys

Sketching & prototyping

User testing

Finalise experience

design

Continuous improvements

Iterate

Research & analysis

User & business requirements

Creative brief

Testing

KPIs

Expert evaluation

Content audit

Experience principles

Personas

Customer journeys Scamps & sketches Prototypes

Process flows Site maps Wireframes Creative designs Specification

Analytics

Planning Creative UX Research Analytics

Site architecture

There’s a much bigger story here, and you’ll hear much more about this in future sessions.

Digital pack

!  What do you need to know

!  How digital builds business value

!  What's the bottom line

SEM: Driving Market Share & Revenue

Stay in contact with us

www.lbi.com/mena : www.facebook.com/LBiMENA : @lbimena

: +971 444 62404

Christopher Lee Ball Chris.Ball@lbi.com : +44 7525 425170

Roy Badawi Roy.Badawi@lbi.com : @roy.badawi : +971 55 3688 069