Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to UX Design

1,323 views

Published on

Talk given at Birkbeck, University of London in February 2016. Please note some of these slides represent my personal views and are not necessarily representative of the General Assembly curricula on UX.

Some slides would benefit from the audio to make sense. Any questions please don't hesitate to ask! Also, what happened to my GIFs, Slideshare?

Published in: Design

Introduction to UX Design

  1. 1. Bill Tribble Senior UX Designer, Mendeley INTRODUCTION TO UX (USER EXPERIENCE) @bill_tribble
  2. 2. 2WELCOME @bill_tribble / bill@btribble.com BILL TRIBBLE Senior UX Designer Mendeley
  3. 3. AGENDA ‣ What exactly is User Experience? And who does it? ‣ UX as Digital Product Design ‣ UX Processes ‣ In the Real World… 3
  4. 4. 4WHAT MOST PEOPLE THINK UX IS… ‣ Prototyping ‣ Interface layout ‣ Interface design ‣ Visual design ‣ Taxonomy creation ‣ Terminology creation ‣ Copy writing ‣ Presentation and speaking ‣ Working tightly with programmers ‣ Workshop leading ‣ Company culture evangelism ‣ Communication to stakeholders ‣ Field research ‣ Face to face interviewing ‣ Creation and administering of tests ‣ Gathering, organizing statistics ‣ Documentation of personas and findings ‣ Product design ‣ Feature writing ‣ Requirement writing ‣ Graphic arts ‣ Interaction design ‣ Information Architecture ‣ Usability
  5. 5. 5WHAT UX ACTUALLY IS… ‣ Prototyping ‣ Interface layout ‣ Interface design ‣ Visual design ‣ Taxonomy creation ‣ Terminology creation ‣ Copy writing ‣ Presentation and speaking ‣ Working tightly with programmers ‣ Workshop leading ‣ Company culture evangelism ‣ Communication to stakeholders ‣ Field research ‣ Face to face interviewing ‣ Creation and administering of tests ‣ Gathering, organizing statistics ‣ Documentation of personas and findings ‣ Product design ‣ Feature writing ‣ Requirement writing ‣ Graphic arts ‣ Interaction design ‣ Information Architecture ‣ Usability
  6. 6. 6WHAT IS UX? “User experience is how a person feels when interfacing with a system or product…” This includes but is not limited to websites, apps or software. DESIGNER / DEVELOPER - JACOB GUBE (SIX REVISIONS)
  7. 7. 7WHAT IS UX? “the design of anything independent of medium or across [device] with human experience as an explicit outcome and human engagement as an explicit goal…” UX LEGEND - JESSE JAMES GARRETT
  8. 8. 8WHAT IS UX? “UX is digital product design” ME
  9. 9. 9DESIGNING THE USER EXPERIENCE THE FIELD OF USER EXPERIENCE IS CONCERNED WITH IDENTIFYING A REAL-WORLD PROBLEM AND USING DESIGN TO SOLVE IT.
  10. 10. 10DESIGNING THE USER EXPERIENCE USER EXPERIENCE IS SUBJECTIVE; WE DESIGN FOR THE NEEDS OF SPECIFIC TYPES OF USER
  11. 11. INTRODUCTION TO UX UX AS DIGITAL PRODUCT DESIGN 11
  12. 12. WHAT IS UX? UX IS NOT SOME WHOLE NEW THING ‣ It builds on previous generations of design techniques ‣ Human computer interaction (HCI) design ‣ Information architecture ‣ Product design ‣ We’ve always designed for experiences ‣ The only thing that’s changed is the context - digital technology ‣ Digital technology brings a few new challenges and a different structure 12
  13. 13. A SIMPLE OUTLINE 1. Start with an idea for a product 2. What problem are you trying to solve? 3. Who are you trying to solve it for? 4. Write a user-story showing how you solve their problem 5. Design (‘wireframe’) a screen-flow 6. Create a prototype 7. Test the prototype 8. Go back to step 5 and repeat 13
  14. 14. CITYMAPPER 1. Start with an idea for a product 2. What problem are you trying to solve? 3. Who are you trying to solve it for? 4. Write a user-story showing how you solve their problem 5. Design (‘wireframe’) a screen-flow 6. Create a prototype 7. Test the prototype 8. Go back to step 5 and repeat 14 Get me home Getting home when drunk Me Push the button Get a route home Made an iOS app instead I got home when drunk!
  15. 15. INTRODUCTION TO UX UX PROCESSES 15
  16. 16. UX PROCESSES PROCESS AND THINKING ‣ In solving user experience problems, we place the user at the center of our thinking ‣ UX design requires process, not just tools ‣ Process is not one size fits all
 16
  17. 17. UX PROCESSES User experience design process in five steps: 1. Research & Ideation 2. Information Architecture 3. Wireframing 4. Prototyping 5. User Testing 
 17
  18. 18. UX PROCESSES User experience design process in five steps: 1. Research & Ideation 2. Information Architecture 3. Wireframing 4. Prototyping 5. User Testing 
 18
  19. 19. RESEARCH AND IDEATION QUESTIONS ‣ Who are our users and what do they need? ‣ What purpose does the product serve for those users? ‣ What are the business goals in creating this product? ‣ What currently exists to serve the same purpose?
 19
  20. 20. RESEARCH AND IDEATION 20 When my boss and the client are setting unrealistic goals and I’m responsible for the work UXreactions.com
  21. 21. RESEARCH AND IDEATION GATHERING DATA ‣ Conduct user interviews ‣ Conduct user and stakeholder surveys ‣ Review analytic data from existing products ‣ Receive business goals from stakeholders ‣ Establish any known technical limitations 21
  22. 22. RESEARCH AND IDEATION 22 When the products features are set by Marketing UXreactions.com
  23. 23. RESEARCH AND IDEATION REFINING THE DATA ‣ User data becomes “personas” ‣ Build a business case for your product or feature ‣ Map out the competition 23
  24. 24. RESEARCH AND IDEATION PERSONAS 24
  25. 25. RESEARCH AND IDEATION PERSONAS 25
  26. 26. RESEARCH AND IDEATION COMPETITIVE ANALYSIS 26 - music app
  27. 27. RESEARCH AND IDEATION COMPETITIVE ANALYSIS 27 - vocational training app
  28. 28. RESEARCH AND IDEATION IDEATION ‣ Sketching workshops! ‣ Rapidly explore and share ideas with stakeholders, clients, users ‣ Exercises may be done over time as data is collected - exploring ideas will open more questions and possibilities. 28 RECOMMENDED
 RESOURCE Google Ventures Design Sprint (online / book)
  29. 29. RESEARCH AND IDEATION CLOSE COLLABORATION The research process develops in a number of ways, depending on the product and the experience. ‣ Close collaboration is required at all times with e.g. developers, designers, business analysts, product managers and stakeholders 29
  30. 30. UX PROCESSES User experience design process in five steps: 1. Research & Ideation 2. Information Architecture 3. Wireframing 4. Prototyping 5. Usability Testing 
 30
  31. 31. INFORMATION ARCHITECTURE MAPS The content of an experience, organized in a logical manner as a basis for how the user will interact with it ‣ Taxonomy of features/functionalities ‣ Hierarchy of content ‣ The process starts out rough and refines through iteration 31
  32. 32. INFORMATION ARCHITECTURE JOURNEY MAPPING The stories that a user may follow through the experience are visualised as flow or journey maps ‣ Journey maps document movement and actions toward an end goal rather than literal locations within an experience ‣ Drawing a map often identifies points of unnecessary complexity which can be streamlined 32
  33. 33. INFORMATION ARCHITECTURE JOURNEY MAPPING 33
  34. 34. INFORMATION ARCHITECTURE OBJECT-ORIENTED UX 34
  35. 35. UX PROCESSES User experience design process in five steps: 1. Research & Ideation 2. Information Architecture 3. Wireframing 4. Prototyping 5. Usability Testing 
 35
  36. 36. WIREFRAMING Wireframes (or schematics) are diagrams that establish layout, hierarchy of content, and the states of various interactive elements ‣  Wireframes are functional drawings ‣  There is no one correct style of drafting a wireframe ‣  Wireframes should start very rough (pencil sketches) and be refined through iteration 36
  37. 37. WIREFRAMING START ON PAPER 37
  38. 38. WIREFRAMING SIMPLE WIRE FRAMING 38
  39. 39. WIREFRAMING LOW TO HIGH-FIDELITY 39
  40. 40. UX PROCESSES User experience design process in five steps: 1. Research & Ideation 2. Information Architecture 3. Wireframing 4. Prototyping 5. Usability Testing 
 40
  41. 41. PROTOTYPING DESIGNING INTERACTIVITY ‣ Prototypes take a variety of formats, from clickable PDFs, to coded demos, to scale models of physical objects ‣ Like wireframes, they help facilitate decisions quickly ‣ Used with teams inside the company or outside with users
 41
  42. 42. PROTOTYPING DESIGNING INTERACTIVITY 42 Copyright (c) Make Us Proud, 2016
  43. 43. 43 Copyright (c) Make Us Proud, 2016
  44. 44. UX PROCESSES User experience design process in five steps: 1. Research & Ideation 2. Information Architecture 3. Wireframing 4. Prototyping 5. Usability Testing 
 44
  45. 45. FIRST TIME USABILITY TESTING GET REAL FEEDBACK The best method to refine an experience is to involve real users and gather their reactions to interacting with it ‣ Start with simple, lo-fi prototypes ‣ Refine your visual design as you iterate on your ideas 45
  46. 46. FIRST TIME USABILITY TESTING 46
  47. 47. UX PROCESSES ONE SIZE DOESN’T FIT ALL ‣ These processes all vary from team to team and project to project ‣ You learn to tailor the processes used depending on the problem you’re trying to solve 47
  48. 48. INTRODUCTION TO UX IN THE REAL WORLD… 48
  49. 49. INTRODUCTION TO UX WHO DOES UX? • User Researcher - Identifies user behaviours, goals and needs through interviews, studies and surveys • Information Architect (IA) - Defines the structure of a system, how content is described, organised and discovered • Interaction Designer (IxD/UX Designer) -Defines interactions, user flows, wireframes, and affordances of a system • UI Developer - Builds the system by interpreting the functional specification, sitemaps, wireframes 49
  50. 50. IN THE REAL WORLD… ‣ The field of user experience design is young and rapidly evolving ‣ Keeping up with the contemporary methodologies is vital ‣ Learn actively through books and classes as well as passively through being a critical user of digital products 50 AN EVOLVING INDUSTRY
  51. 51. 51IN THE REAL WORLD… NEVER STOP LEARNING ATTEND INDUSTRY EVENTS RECOMMENDED
 EVENTS ‣ IxDA ‣ UXPA
  52. 52. IN THE REAL WORLD… CAREER OPPORTUNITIES ‣  Product company - From product-wide strategy, to focusing on a single experience and constantly refining it. ‣  Agency - work on a variety of client projects for short periods of time to support first-time launches or major updates ‣  Startup - Help to establish a product and rapidly iterate through variations in the core experience ‣  Freelancer - Lend support to a variety of teams or take on smaller projects independently 52
  53. 53. INTRODUCTION TO UX SUMMARY ‣ User experience design is about solving a problem for a specific user type using design thinking ‣ UX comes from ergonomics, usability and psychology and uses elements of all three ‣ Many different specialisms working together for a common goal. ‣ We don’t give people what they want - we try to understand what they need through observation, questioning and testing 
 53
  54. 54. INTRODUCTION TO UX Q&A 54
  55. 55. INTRODUCTION TO UX RECOMMENDED BOOKS 'Don't Make Me Think: Revisited' by Steve Krug 'Design is a Job' by Mike Monteiro ‘How to make sense of any mess’ - Abby Covert ‘Lean UX’ Jeff Gothelf ‘Google Ventures Design Sprint’ 55
  56. 56. INTRODUCTION TO UX RECOMMENDED TOOLS Wireframing - Sketchapp, Pen & Paper Prototyping - Marvel, Invision Surveys - TypeForm, SurveyMonkey 56 RECOMMENDED SITES UXdesign.cc, 52 Weeks of UX, Medium, UXMag.com, Dezeen (not just UX)
  57. 57. Keep in touch :) @bill_tribble http://btribble.com THANKS FOR COMING! CONCLUSION

×