A Workshop on UX Design and Storyboarding

2,369 views
2,260 views

Published on

These slides give an overview of UX, UX design, and storyboards.

Published in: Design, Technology, Business
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,369
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide
  • Run through goals for the presentation.
  • UX is the sum of many different aspects of a product (when I say product, it’s not limited to software. UX principles can be applied to physical environments) UX also deals with how users feel about a brand over time, the response that evokes in them over time.
  • This diagram illustrates the previous definition. This is known as the UX Honeycomb created by Peter Morville, a renowned Info Arch. These are the qualities that user’s look for when interacting with a system. You’ll notice that usability there on the left is just one facet among many that an effective system needs. Information needs to be findable – users just need to locate it. Information needs to be desirable – users have to want it.
  • UX Design has its roots in many different disciplines. Suffice to say, UXD uses cognitive psychology, user research, and design principles to create everything that a user might directly interact with, including…system architecture…Explain system goals, user goals
  • Related to wireframes is the functionality of a product. UXD use user research and design principles to design the features of a system.
  • UXD concerns things like the site architecture. This is a site map that gives structural overview a website or an app. We can use site maps to get an idea of the different paths a user might take and the functionality they might need to accomplish their goals.`
  • These are what we call wireframes. OnceUXDers understand the broader picture through the site map, they can start sketching wireframes. Wireframes are a blueprint for the final look and feel of a product. One principle of UXD is to sketch early and often. As we sketch iterate and change the designs. We start out with very sketchy wireframes and slowly add color and flair. We get feedback from developers, project managers, other ux professionals. This feedback concerns layout, grid, functionality, and the interactions on each screen
  • Run through goals for the presentation.
  • So this is the UX Iceberg that covers all the layers of UXD. At the top we have the surface, or the visual design, which is what the user sees in the end product, but before that…
  • Run through goals for the presentation.
  • Run through goals for the presentation.
  • Run through goals for the presentation.
  • Run through goals for the presentation.
  • Run through goals for the presentation.
  • Run through goals for the presentation.
  • Run through goals for the presentation.
  • Run through goals for the presentation.
  • Run through goals for the presentation.
  • Run through goals for the presentation.
  • Run through goals for the presentation.
  • Run through goals for the presentation.
  • Run through goals for the presentation.
  • Run through goals for the presentation.
  • Run through goals for the presentation.
  • Run through goals for the presentation.
  • Run through goals for the presentation.
  • Run through goals for the presentation.
  • Run through goals for the presentation.
  • Run through goals for the presentation.
  • Run through goals for the presentation.
  • Run through goals for the presentation.
  • Maybe less text on this slidePractice empathy - utilize user research to generate user goals, user problems, and examine how T2 products meet those goalsConsider broader context – why do users encounter problems and how have other products failed / succeededSketch, collaborate, share – creating and communication stimulates brainstorming
  • Run through goals for the presentation.
  • A Workshop on UX Design and Storyboarding

    1. 1. UX Design andStoryboardingA workshop about UX andhow it can help us createbetter products.
    2. 2. What is User Experience Design?Why use UX Design?Activity Time!Bring it back together1
    3. 3. Defining itUser experience (UX)is the sum of all aspects of aproduct that users experience directly includingits form, behavior, and content.UX also encompasses users’ broader brandexperience and the response that experienceevokes in them.2—Pabini Gabriel-Petit
    4. 4. ―The UX Honeycomb‖ PeterMorville, 2004User experience goesbeyond usability:3
    5. 5. Defining itUser experience Design (UXD) is the applicationof design principles, methods, cognitivepsychology, and user research in the creationof all human-facing parts of interactive systemsto meet user and system goals. Functionality Site Architecture Interface Design4
    6. 6. Functionality5
    7. 7. Site Architecture6
    8. 8. Interface Design7High-fidelity wireframe done byScott Jahnke
    9. 9. The UX Design Process8StoryboardsFunctionality /RequirementsSiteArchitectureInterfaceDesignVisual DesignUser experience research
    10. 10. 9
    11. 11. What is User Experience Design?Why use UX Design?Activity Time!Bring it back together10
    12. 12. The Benefits of UX Iterative design catches problems early which cansave time and money11ImplementationTestingDesign / DevelopmentDetermine RequirementsTraditional
    13. 13. The Benefits of UX Iterative design catches problems early which cansave time and money12DeterminerequirementsDesignGetFeedbackReviseImplementationTestingDesign / DevelopmentDetermine RequirementsUXTraditional
    14. 14. The Benefits of UX UX methods can be cheap, fast13
    15. 15. The Benefits of UX UX methods increase user satisfaction andloyalty by focusing on user goals14
    16. 16. What is User Experience Design?Why use UX Design?Activity Time!Bring it back together15
    17. 17. UX StoryboardA sequence ofillustrations that showwhat the user willexperience before,during, and afterusing a product Components: Character(s) Emotions Scene (digital orphysical place)16
    18. 18. Storyboard Structure17PROBLEMBENEFITSOLUTION
    19. 19. Why Storyboard? The acts of drawing and seeing helps us think indifferent dimensions (sequence, environmentinteractions, etc) Visuals communicate more effectively than justwords Encourage user empathy Funsies (sketching skills aren’t necessary!)18
    20. 20. Our storyboard structure19
    21. 21. Our storyboard structure20
    22. 22. Our storyboard structure21
    23. 23. Our storyboard structure22
    24. 24. The problem23 I am trying to ________BUT ___________________. Before using theproduct What are the triggers?
    25. 25. The problem24 I am trying to ________BUT ___________________. Before using theproductUser’s goalUser’s problem
    26. 26. The solution25 What are the stepsthat need to occur forthe problem to beresolved? What features of theproduct enableresolution and how dothey affect the user?
    27. 27. The benefit / resolution26 What would the usersay is effective aboutthe solution? How do the featuresof the product meetthe user’s goals?
    28. 28. Activity Schedule27 Individual sketching – 10 minutes Small group sharing – 15 minutes Large group discussion – 10 minutes Conclusion
    29. 29. The scenario28 You are arranging transportation to the airport andyou aren’t sure which mode of transportation isbest. You use some kind of tool (website, app, etc.)to help you resolve the problem. The tool can be real or fictional Use the storyboard templates to sketch yourexperience step-by-step.
    30. 30. 29
    31. 31. Small Groups30 Walkthrough each person’s storyboard. What did you want to buy? What product did you use? What problem did you encounter, and what were thesteps that led to resolution? Critique the product How could the product have better addressed theproblem? Pick one person to take a photo of their storyboardand send it to t2tecinfo@gmail.com
    32. 32. What is User Experience Design?Why use UX Design?Activity time!Bringing it back together31
    33. 33. Using storyboards at T232 Practice empathy - utilize user research togenerate user goals, user problems, and examinehow T2 products meet those goals Consider broader context – why do usersencounter problems and how have other productsfailed / succeeded Sketch, collaborate, share – creating andcommunication stimulates brainstorming
    34. 34. Questions?33

    ×