YOU ARE DESIGNING!A GROCERY SHOPPING!APP!!SKETCH THE HOME SCREEN!
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 someway 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.
Usability Experience Architecture Information Architecture Interaction Design UX User Experience ArchitectureUser Experience User Centred Design
So, where, exactly is the beginning of user experience? Like any history, adefinitive 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 ofprompt. 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 – reallyjust 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 intoprecision machines.
But to look at a cockpit of the time, precise isn’t the word that springs to mind. The massivetechnical innovation required an expertise that only a handful of trained pilots were able toattain, and it quickly became obvious that no matter how much their lives depended on accurateresults, there was always a moment where they hit human limitations. Studying these limitationswas the beginning of a field that would later be called Human Factors engineering, and this iswhere 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 aglowing array of digital displays. These are called fly-by-wire planes, relying on data as muchas diesel. The pilot programs the route, and monitors the displays for most of the flight – a sortof triumph of human factors engineering. But it’s still a highly specialist job, and if the precisionof the data fails, we know what happens…
1939Kitty Hawk Human factors1903 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.
Radio 1900 1925 TV Internet 1973 1984 Personal computer Social networks 1997 2001 Mobile 3GCloud computing 2006
Strategic Profitable Usable Functional 1997 2006 19391900 1925 1984 2001 1903 1973If we chart the need for an understanding of how users interact with technology over ourtimeline, we see the field of user experience changing since human factors engineering. Itwas first focused on specialist functionality, not accessible to many.The computing revolution made us aware that to work for everyone, technology needed to beusable 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 tofocus on the strategic vision of a digital experience, sometime agnostic of the device.
The balancing actUser experience has evolved along with technology to balance the needs of users andbusinesses, while mindful of changes in the digital landscape. But we also have to be mindfulof other changes in the last decade.
A changing media landscapeMedia has changed from an advertising-centric model…
A changing media landscapeTo one where content is king, and the outlets for owned, earned, and bought media are almostcountless. How does the user make sense of this crowded space?
MultinationalConsumers converge from all over the world, purchasing and commenting. But do theyexpecting the same experience or a different one?
Physical and virtualWe’re merging the physical with the digital. This is an underground station in South Koreawhere you can do your shopping using your phone while you wait for the train. User experienceis moving off the screen, or is it onto multiple screens?
Always onThe world is accessible 24 hours a day, but we’re learning more about what this actually meansto people’s behaviours, and therefore to experiences.
MultichannelThere are a lot of channels out there. But how often do all the channels come togetherseamlessly? Apple is hailed as some of the best design on the planet, but who’s ever tried tosync across multiple devices? And what about this iCloud business? I still can’t figure it out.
Segmented organisationsConsumers don’t care about the internal workings of organisations – to them it’s one brand. Asexperience designers we’re also able to articulate the consequences of siloed thinking andacting. We often end up knowing more about the business as a whole than our clients.
The data revolutionData – the new oil. If we can leverage it. First we need to find it, harness it, and make surewe’re incorporating it into everything we do.
The pace of changeAnd to add to all this complexity, it’s all happening at an incredible pace. Keeping pace is anessential skill for us.
UX at the heart of it Creative Media Insights Magic Strategy & UX Planning User Technology Research AnalyticsNot intending to appear solipsistic, this is where we fit in, right in the centre, working veryclosely with creative and technology teams to build digital experiences that matter. Workingtogether, we take insights, and create magic. How, then, can we define user experience? Whoare we? We craft customer experiences across every touch point, using human-centricpersuasive thinking.
The design process is always slightly different for every client. There are, however, 7 typical stages duringwhich user experience plays a role, working in close conjunction with blended teams to ensure the client’sgoals are met and exceeded.!!Typically, we ﬁrst need to understand the business and its place in the market. Upfront research, businessrequirements, and key performance indicators happen at this stage.!!We often next evaluate the current and intended experience against a set of key heuristics, whilebenchmarking 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 createprototypes 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 ﬁnalise the work with reﬁned visual designs anddocument the experience with site maps, wireframes, and speciﬁcations.!!And always striving for perfection, we continually improve the experience using analytics and live site testingtechniques.!!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 !
Analytics Continuous improvementsProcess flows Research & analysisSite maps Understand User & business FinaliseWireframes experience the business requirements design & marketCreative designs KPIsSpecification Planning Creative Expert evaluation UX Expert evaluations & Content audit ResearchTesting User testing benchmarking Analytics Experience principles IterateCreative brief Personas UnderstandSite architecture Sketching customers & prototyping & key journeys Customer journeysScamps & sketchesPrototypes
LET’S LOOK AT TWO OF THESE DELIVERABLES IN DETAIL
Analytics Continuous improvementsProcess flows Research & analysisSite maps Understand User & business FinaliseWireframes experience the business requirements design & marketCreative designs KPIsSpecification Planning Creative Expert evaluation UX Expert evaluations & Content audit ResearchTesting User testing benchmarking Analytics Experience principlesCreative brief Personas UnderstandSite architecture Sketching customers & prototyping & key journeys Customer journeysScamps & sketchesPrototypes
N C E IE ES R L E IP P X CE IN P RUX VERSUS BRAND!
N C E IE ES R L E IP P X CE IN P RExperience principles are one of the best tools for harnessing the inherent DNA of abrand. This will not only make for happy customers, but can also be the unifyingprinciples that bring creatives, UX’ers, and clients together.!
LICHTENSTEIN!Famous for painting using a comic book style. We knew it was himby the mimicked dotpress printing, which is actually painting. Thisis a play on modern forms of mass reproduction and storytelling.!
WARHOL!Good. This is indeed Marilyn Monroe as depicted by AndyWarhol. Warhol produced thousands of these silksreen prints inthe likeness of famous photographs of the time. This is acommentary 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.!
IMMERSIVE! DETAILED!We could probably guess the types of principles Miu Miustands for as a brand simply by examining this store.!!And it should be a no-brainer that when I go to the Miu Miuwebsite, I’m going to get a similar, albeit digital, experience.Right?! TACTILE!
Wrong. This isembarrassing. 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 Miustore, it’s an architect, an interior designer, and of course the client. And theyclearly discussed invoking some core brand values. Why didn’t the UX and visualdesigner 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 ﬂeet. This extendedto 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 everyVirgin 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 ﬂight search results page. Some inherent usability problems aside, apart from anoverreliance on red, this page doesn’t feel very Virgin.! ! So how do we reﬂect the Virgin core principles in the design?!
This is the core of the Virgin experience. A brand onion usually has four mainingredients – essence, personality, values, and beneﬁts. We won’t bother ourselveswith the details, we’ll just consider this the DNA of Virgin Atlantic. But how do weensure these are inherent in our designs?!
We break them down, one by one, and examine what they really mean. Creatingthese is a collaborative process, and therefore a signiﬁcant way to engage the teamand the client. Here we’re breaking apart the concept of “Alive”, deﬁning it,associating a famous person and one of the personas we use on the project.!
ALIVEOwning the principleUser reviews Get ‘em while they’re hotWe can say a place is amazing ‘til we’re blue in the face, but what Toying with booking a ﬂight? Think how much more likely you’d bedo 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 evensomeone’s looking at, we can ensure the site feels responsive and how many people had searched for that ﬂight in the last 24 hours.relevant. You snooze, you lose.May 2010 Virgin Atlantic experience principlesAnd we sketch some examples, well in advance of designing ﬁnal pages.!
When we’ve done this for all of the principles, we turn them into a set of handycards 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 ﬂight search page. We spent some time focusing on the usabilityand design of this page, but it wasn’t until we began applying the experienceprinciples that we drove our solutions into territory that would make Richard proud.!
…and turned those sketches into clickable prototypes for several rounds of usertesting. And after several amends and multiple iterations, we ﬁnally settled onthis…!
These ﬂight search results have only recently launched. I’m sureyou’ll all go out and book a ﬂight after this, so I won’t dwell too much;but a few innovations include exposing more options, breaking thejourney into outbound and return legs, and of course an improvedvisual design. But there are quite a few innovations here that grewpartly out of our experience principles. Where do we see this?!
Showing the lowest price in the calendar ribbon at the top of the ﬂightsearch results instills conﬁdence in customers – they know they’regetting the price they want within their chosen date range.!
Exposing multiple cabins and classes in the results table allows you tofeel more adventurous by booking a trip you might not have chosenotherwise.!
A video component allows you to watch branded content withoutmoving away from your purchase and begins the process of creatinggood travel memories.!
And at the same time it puts the customer in the mindset of theirjourney. Already they’re feeling special and loved.!
Price guarantees and openness about prices across cabins createpeace of mind. Customers know they’re making the right decision atall times.!
Interactive elements on the page make it feel alive. Selectionscollapse out of the way when not in use, and the basket follows youfor ease of use and legibility.!
State changes during the process help add a personal touchthroughout, and make the scary process of buying a ﬂight feel a littlebit less stressful.!
What has been so refreshing about Virgin’s ethos is that it applies to not only itsemployees but also to everyone who ﬂies with Virgin. We, too, as designers,have felt like everyday pioneers, and this is owing in large part to changing ourDNA to match our client’s a bit more closely.!
6%!increase in ﬂight booking conversion*! * Still early days, but promising!!
E R ! M ! O Y T E S N U RC U J OThe most commonly known output of the user experience practitioner is thewireframe. However, I want to introduce you to what I consider to be the unsunghero of our repertoire (tool, deliverable, process) – the customer journey. Withoutthis no digital narrative can be sure to succeed! Because of the way it forces you tothink and to work. Simply put, a customer journey is a narrative, that illustrates howpeople would ideally interact with your product, service or campaign. We use themat various stages of the project: right at the beginning to ﬂesh out an idea, when weknow exactly what we want to achieve and we need to start getting into detail, andat the end to check our work is complete and there are no holes or gaps in the userexperience.!
If we think of our Miu Miu store, we have to understand where the store lives withinthe virtual mall, how to get to it, and how to use your credit card with as few clicksas possible. There are many different types of journeys that might illustrate this.!
Simple box journeyThese simply show the steps a customer might go through on his or her journey through anexperience, with boxes and words.
Non-linear, not always digitalJourneys might also move in and out of different digital and non-digital spaces. They don’t evenhave to be linear in time and space.
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!
Analytics Continuous improvementsProcess flows Research & analysisSite maps Understand User & business FinaliseWireframes experience the business requirements design & marketCreative designs KPIsSpecification Planning Creative Expert evaluation UX Expert evaluations & Content audit ResearchTesting User testing benchmarking Analytics Experience principlesCreative brief Personas UnderstandSite architecture Sketching customers & prototyping & key journeys Customer journeysScamps & sketchesPrototypesRemember, we’ve focused on 2 very small aspects of a grand process.
Analytics Continuous improvementsProcess flows Research & analysisSite maps Understand User & business FinaliseWireframes experience the business requirements design & marketCreative designs KPIsSpecification Planning Creative Expert evaluation UX Expert evaluations & Content audit ResearchTesting User testing benchmarking Analytics Experience principles IterateCreative brief Personas UnderstandSite architecture Sketching customers & prototyping & key journeys Customer journeysScamps & sketchesPrototypesThere’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! Whats the bottom line