This document provides an overview of user experience (UX) and its history and evolution. UX began in the field of human factors engineering to study how users interact with technology. It has since expanded to encompass usability, user needs, and business goals. The document discusses various trends that impact modern UX, such as new technologies, data usage, and changing consumer behaviors. It also outlines typical stages of the UX design process and provides examples of UX deliverables like experience principles and prototypes.

1. Class 02: User Experience
UX: Past, Present and Future

2. TWEET:
#DIGITALACADEMY

3. YOU ARE DESIGNING!
A GROCERY SHOPPING!
APP!
!
SKETCH THE HOME
SCREEN!

4. 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.

5. Usability
Experience Architecture
Information Architecture
Interaction Design
UX User Experience Architecture
User Experience
User Centred Design

6. 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.

7. 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.

8. 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.

9. 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.

10. 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…

11. 1939
Kitty Hawk
Human factors
1903
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.

12. Radio 1900
1925 TV
Internet 1973
1984 Personal computer
Social networks 1997
2001 Mobile 3G
Cloud computing 2006

13. Strategic
Profitable
Usable
Functional
1997
2006
1939
1900
1925
1984
2001
1903
1973
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.

14. 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.

15. A changing media landscape
Media has changed from an advertising-centric model…

16. 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?

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

18. 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?

19. 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.

20. 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.

21. 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.

22. 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.

23. 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.

24. UX at the heart of it
Creative Media
Insights Magic
Strategy & UX
Planning
User Technology
Research
Analytics
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.

25. UX IN ACTION

26. 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 !

27. Analytics
Continuous
improvements
Process flows Research & analysis
Site maps
Understand User & business
Finalise
Wireframes experience the business requirements
design & market
Creative designs
KPIs
Specification
Planning
Creative Expert evaluation
UX Expert
evaluations & Content audit
Research
Testing User testing benchmarking
Analytics Experience
principles
Iterate
Creative brief Personas
Understand
Site architecture Sketching customers
& prototyping
& key journeys Customer journeys
Scamps & sketches
Prototypes

28. LET’S LOOK AT TWO
OF THESE
DELIVERABLES IN
DETAIL

29. Analytics
Continuous
improvements
Process flows Research & analysis
Site maps
Understand User & business
Finalise
Wireframes experience the business requirements
design & market
Creative designs
KPIs
Specification
Planning
Creative Expert evaluation
UX Expert
evaluations & Content audit
Research
Testing User testing benchmarking
Analytics Experience
principles
Creative brief Personas
Understand
Site architecture Sketching customers
& prototyping
& key journeys Customer journeys
Scamps & sketches
Prototypes

30. N C E
IE ES
R L
E IP
P
X C
E IN
P R
UX VERSUS BRAND!

31. N C E
IE ES
R L
E IP
P
X C
E IN
P R
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.!

32. POP!
QUIZ

33. WHO!
CREATED!
THIS?!

34. LICHTENSTEIN!
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.!

35. WHO!
CREATED!
THIS?!

36. WARHOL!
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.!

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

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

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

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

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

42. IMMERSIVE!
DETAILED!
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?!
TACTILE!

44. 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?!

45. 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?!

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

47. 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.!

48. 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?!

50. 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?!

51. 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?!

52. 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.!

53. We look for inspiration.!

54. ALIVE
Owning the principle
User reviews Get ‘em while they’re hot
We can say a place is amazing ‘til we’re blue in the face, but what Toying with booking a flight? Think how much more likely you’d be
do people really think? By exposing the public’s views on the route to book today if you could see how many seats were left, or even
someone’s looking at, we can ensure the site feels responsive and how many people had searched for that flight in the last 24 hours.
relevant. You snooze, you lose.
May 2010 Virgin Atlantic experience principles
And we sketch some examples, well in advance of designing final pages.!

56. 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.!

57. 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.!

58. We of course began by sketching…!

59. …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…!

61. 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?!

62. 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.!

63. 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.!

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

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

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

67. 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.!

68. 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.!

69. 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.!

70. 6%!
increase in flight booking conversion*!
* Still early days, but promising!!

71. E R !
M !
O Y
T E
S N
U R
C U
J O
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.!

72. 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.!

73. 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.

76. 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.

78. They might show how pages fit together

79. Or illustrate an epic proposition

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

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

83. YOUR TURN

84. DEFINE AND GROW!
YOUR BRAND!
1. Pick a brand!
2. Agree 2 principles!
3. Agree their meaning!

85. NOW (RE)DESIGN!
YOUR GROCERY APP!
1. Home!
2. Find a product!
3. Put it in your basket!

86. Analytics
Continuous
improvements
Process flows Research & analysis
Site maps
Understand User & business
Finalise
Wireframes experience the business requirements
design & market
Creative designs
KPIs
Specification
Planning
Creative Expert evaluation
UX Expert
evaluations & Content audit
Research
Testing User testing benchmarking
Analytics Experience
principles
Creative brief Personas
Understand
Site architecture Sketching customers
& prototyping
& key journeys Customer journeys
Scamps & sketches
Prototypes
Remember, we’ve focused on 2 very small aspects of a grand process.

87. Analytics
Continuous
improvements
Process flows Research & analysis
Site maps
Understand User & business
Finalise
Wireframes experience the business requirements
design & market
Creative designs
KPIs
Specification
Planning
Creative Expert evaluation
UX Expert
evaluations & Content audit
Research
Testing User testing benchmarking
Analytics Experience
principles
Iterate
Creative brief Personas
Understand
Site architecture Sketching customers
& prototyping
& key journeys Customer journeys
Scamps & sketches
Prototypes
There’s a much bigger story here, and you’ll hear much more about this in future sessions.

88. Digital pack
! What do you need to
know
! How digital builds business
value
! What's the bottom line

90. SEM: Driving Market Share & Revenue

93. Stay in contact with us
www.lbi.com/mena
: www.facebook.com/LBiMENA
: @lbimena
: +971 444 62404
Roy Badawi Christopher Lee Ball
Roy.Badawi@lbi.com Chris.Ball@lbi.com
: @roy.badawi : +44 7525 425170
: +971 55 3688 069