LBi Digital Academy | Class #2
•
3 likes•1,920 views
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.
Report
Share
LBi Digital Academy | Class #2
- 1. Class 02: User Experience UX: Past, Present and Future
- 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
- 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.!
- 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