UX Flow: way to solve problems
3 likes198 views
The document discusses the importance of understanding user experience through techniques such as mind mapping and UX flows, emphasizing the need for designers to empathize with users and analyze complex projects from a bird's-eye view. It highlights the necessity of organizing workflow and refining interactions to achieve optimal results while iterating based on user feedback. Ultimately, the content aims to enhance design processes and improve user interactions by carefully structuring and presenting information.
UX Flow: way to solve problems
- 1. Asdeeperyoulook,asessentialyourproblemsare.Aswell,assolutions. UX Flows: way to solve problems iamandrewveles.com 20172018
- 2. Intro AndrewVeles Product Designer @ IVPN —9yearsofoveralldesignexperience —5yearsofcommercialdesign —4yearsofdesigningforstartups —4yearsinagencies @ Talkable
- 3. Clients Andrew Veles talks Barclays,Nexar,Rostelecom,Petcube,Intel, Azbuka Vkusa,Mercedes-Benz,VTB,LUN.ua, Russian Government,Ukrainian Government, Ukrainian Institute of Fashion History,Imena.UA, Rails Reactor,and over 200 others.
- 4. What you will get
- 5. What you will get Andrew Veles talks Your project is complex. You don’t see a full picture. You don’t have enough resources. You want to create a perfect solution. You have a limited time (as f cking always)
- 6. What you will get Andrew Veles talks The ! way to understand complexity of your project is to see it from bird’s eye view.
- 7. What you will get Andrew Veles talks The ! way to understand project’s problems is to see interrelationships between active points.
- 8. What you will get Andrew Veles talks Complexity User Flow Mind Map UX Flow Flow Connections Problems
- 9. Disclaimer
- 10. Disclaimer Andrew Veles talks Personas methodology doesn’t work if you don’t empathize. Empathize or learn how to do so.
- 11. Disclaimer Andrew Veles talks Everything from this lecture can be produced without evidence by empathizing to your customers.
- 12. Essential design scale iamandrewveles.com 20172018
- 13. Your project from view
- 14. Birdeye view Andrew Veles talks Birdeye view helps you identify problems,pain points,insights and ideas on your fingertips.
- 15. Birdeye view Andrew Veles talks Flow UX Flow Mind Map
- 16. Birdeye view Andrew Veles talks Mind Map helps you be organized with ! you are working on.
- 17. Birdeye view Andrew Veles talks UX Flow is the key of understanding of how your users do their !
- 18. Birdeye view Andrew Veles talks Flow navigates you through the one interaction to understand where ! actually happened.
- 19. Birdeye view Andrew Veles talks Screen is what you see. Thanks,cap! !
- 20. Birdeye view Andrew Veles talks UX Flow Mind Map Flow Affection diagram Mind Map
- 21. Birdeye view Andrew Veles talks Project lifecycle diagram Mind Map User Flow Mind MapMind Map UX Flow UX Flow Flow Flow !
- 24. Design never ends Andrew Veles talks Make the first steps...
- 25. WTF? Design never ends Andrew Veles talks …it will always transform into this. ?
- 27. Focus on what really matters
- 28. Design Never Ends Andrew Veles talks Set goals,set functions, define the rules of how to achieve goals with functions.
- 29. Design Never Ends Andrew Veles talks As a user,I want to be able to by usingGoal Function (optional) .
- 30. Design Never Ends Andrew Veles talks As a user, I want to be able to connect to the Wi-Fi by using Wi-Fi connecting interface. As a user, I want to be able to register by using registration form. As a user, I want to be able to add the event to the calendar by double clicking on calendar view. As a user, I want to be able to watch TV shows by using remote control. As a user I want to be able to get the current weather by asking Siri. As a user I want so f ! ucking much from the company to develop a need to hire an additional designer to solve all of my stupid " tty f ucking problems. 01 02 03 04 05 06
- 31. Focus on what really matters Organize yourself Make your workflow better The deeper look is higher Summary Andrew Veles talks
- 33. Mindmapping Andrew Veles talks Mindmap diagram is a way to graphically organize information around to the single document.
- 34. Mindmap is el classico
- 35. El classico Andrew Veles talks Project N
- 36. El classico Andrew Veles talks Mindmapping is the best way to archieve a bird’s-eye view of pages connected with each other. can be better!
- 37. El classico Andrew Veles talks Project N Main page Products Inner product page Popup / Detailed image Add to cart Related products Categories Popup / Quick view View all items Sign up Create account COORDINATOR Step 1 Step 2 Step 3 Create account TEACHER Step 1 Step 2 Step 3 Create account USER Account Edit account details Payment Info Order history Log Out Cart CHECKOUT Popup / New customer or Returning customer Guest checkout Customer checkout SearchSearch results Technical pages 404 502 Contact us
- 39. Better connections Andrew Veles talks Indeed,mindmapping can be more ! way to achieve all UX design process.
- 40. Better connections Andrew Veles talks Some users are always choosing the most ! way to get what they need.
- 41. Better connections Andrew Veles talks Homepage Not important page #1 Not important page #2 Not important page #5 Not important page #6 Not important page #7 Not important page #4 Not important page #3 Pricing Sign Up Thank you 80% 40% 60% 30% 30% 40% 40% 20%
- 43. Better connections Andrew Veles talks Which one you like more? Don’t press! Press me
- 44. Better connections Andrew Veles talks Visitors are coming from different ! to different places, they are not following your process.
- 45. Don’t think like your user
- 46. Think with your user
- 47. Think with your user Andrew Veles talks When coming to B2B platform,visitors are interested in values & features.
- 48. Think with your user Andrew Veles talks Fun fact: when coming to SaaS platform,visitors are ! for pricing page.
- 49. Now take a ⏸
- 50. User Flows Andrew Veles talks User Flow is a way to combine actions with ! we’ve set.
- 51. User Flows By Nielsen Norman Group Andrew Veles talks
- 52. User Flows Andrew Veles talks User Flows are useful in case if you have a lot of “ifs”,however there’s no need to use them everytime.
- 53. User Flows Andrew Veles talks Let’s combine this
- 54. Think with your user Andrew Veles talks Site N Pricing Sign up Sign Up Homepage (AIDA) Intro Introductory slide Explanatory slide Interest slide Desire slide Action slide FAQ Blog Services Introductory Page 1 Introductory Page 2 Introductory Page 3 Good.
- 55. Think with your user Better. Site N Menu Home Pricing Services Blog Introductory Sign Up Sign In Pricing Sign up Sign Up Homepage (AIDA) Intro Introductory slide Explanatory slide Interest slide Desire slide Action slide FAQ FAQ 1 FAQ 2 FAQ 3 Blog Article 1 Article 2 Article N Services Introduction Explanation CTA Introductory Page 1 Introduction Explanation CTA Introductory Page 2 Introduction Explanation CTA Introductory Page 3 Introduction Explanation CTA Legend Pricing New customer Sign Up Andrew Veles talks
- 56. Think with your user Andrew Veles talks Site N Menu Home Pricing Services Blog Introductory Page 1 Sign Up Sign In Pricing Annual (10%) Sign up Quarterly (2%) Sign up Monthly (15%) Sign up Sign Up Menu (80%) Personal Details Username Password Confirm password (70%) Pricing (20%) Credit card info (20%) Submit (20%) Thank you! Welcome Email Account page Homepage (AIDA) Menu (100%) Intro (90%) Introductory slide (60%) Explanatory slide (40%) Interest slide (30%) Desire slide (20%) Action slide FAQ FAQ 1 FAQ 2 FAQ 3 Blog Article 1 Article 2 Article N Services Introduction Explanation CTA Introductory Page 1 Introduction Explanation CTA Introductory Page 2 Introduction Explanation CTA Introductory Page 3 Introduction Explanation CTA Still getting better Legend Pricing New customer Sign Up Email
- 57. Mac App Login Login Login Password Submit Forgot password 50% Continue with Free Trial 50% Continue with Free Trial Login Password Email Submit Back to Login Mac App Onboarding Step 1 Get serious privacy protection and peace of mind Next Skip Step 2 All device access Next Skip Step 3 Popular Locations Next Skip Step 4 Multihop Connections Next Skip Mac App You have 3 days Trial. Subscribe to extend Subscribe Connect Hops Select Single-Hop by default Select server click Username Password Connect Multi-Hop Select entry server click Select exit server click Username Password Connect IVPN Firewall Status On Off Menu Bar Menu Bar Icon Show IVPN Preferences Quit File Preferences About IVPN Quit Edit Help Think with your user Andrew Veles talks Application interactions Mindmap
- 58. Think with your user Andrew Veles talks Build mindmaps for each specific operating system.Patterns on or ☎ are different.
- 59. Think with your user Andrew Veles talks Develop entry points and exit points.
- 60. on 2.1 ivpn.net Sign Up User Details Email Password Confirm password Billing Payment method Order Thank you Contains Username and Password Welcome Email Download IVPN .dmg File Downloading double click drag into Applications launchpad click click on the submit button macOS security prompt Mac App Mac App iPhone App Android App Windows App Linux App etc. Go to your Profile Launch IVPN Mac App Download IVPN .dmg File Downloading double click drag into Applications launchpad click click on the submit button macOS security prompt Mac App Mac App Login Login Login Password Submit Forgot password 50% Continue with Free Trial 50% Continue with Free Trial Login Password Email Submit Back to Login Mac App Onboarding Step 1 Get serious privacy protection and peace of mind Next Skip Step 2 All device access Next Skip Step 3 Popular Locations Next Skip Step 4 Multihop Connections Next Skip Mac App You have 3 days Trial. Subscribe to extend Subscribe Connect Hops Select Single-Hop by default Select server click Username Password Connect Multi-Hop Select entry server click Select exit server click Username Password Connect IVPN Firewall Status On Off Menu Bar Menu Bar Icon Show IVPN Preferences Quit File Preferences About IVPN Quit Edit Help Think with your user Andrew Veles talks Entry & Exit points
- 61. Think with your user Andrew Veles talks Action depends on structure and understanding how user think.
- 62. Mindmapping can do more
- 63. Think with your user Perform better connections Do more with mindmapping Organize your workflow Summary Andrew Veles talks
- 65. UX Flow Andrew Veles talks UX Flow is the way to show interactions on wireframes. Totally worth it.
- 66. UX Flow Andrew Veles talks Here’s how it looks.
- 67. UX Flow Andrew Veles talks Use UX Flow when you have more than one interaction.
- 68. UX Flow Andrew Veles talks User experience designers and interaction designers are doing wireframes.
- 69. UX Flow is the level
- 70. Next Level Andrew Veles talks Take back to Mindmap Android Onboarding You’re set! Vehicle profile Vehicle Profile Vehicle class You’re set! Camera Connect Prepare Camera Buy Online Get Started Connect to Caruma Wi-Fi Did you hear the sound? I heard it Accessibility Buy Camera Connected Insurance Select Insurance Provider Provider Details Connect Insurance Scan Front Driver License Scan Com Do this Later Home Home
- 71. Andrew Veles talks Transform it into UX Flow
- 72. Next Level Andrew Veles talks Wireframes doesn’t say enough,UX Flow gives you an opportunity to see a bigger picture.
- 73. Learning from UX Flows
- 74. Learning from UX Flows Remove clutter from existing solution to make it more simple,better and fluid. Andrew Veles talks
- 75. Learning from UX Flows Andrew Veles talks Home Play with other Petcubes Hamburger Menu Settings Play with your Petcube Profile Home Followers Notifications The problem
- 76. Learning from UX Flows Andrew Veles talks
- 77. Learning from UX Flows Andrew Veles talks Initial Getridof hamburgermenu Petcubebutton Petcubebutton+ Postaphoto
- 78. Get maximum from structure
- 79. Working on structure Andrew Veles talks When you’re watching on the flows that you have,see all the active points on all the ! .
- 80. Working on structure Andrew Veles talks When you’re talking about interfaces,everything should be clickable (tappable)
- 82. High Fidelity Andrew Veles talks Low Fidelity is about the structure,not about the transitions.
- 83. UX Flow and after testing
- 84. Testing Andrew Veles talks Set a goal Achieve a goal IterateMeasure 01 02 0403
- 85. Testing Andrew Veles talks Set a goal Achieve a goal IterateMeasure 02 0403
- 86. Testing Andrew Veles talks You can achieve a goal by yourself (your mom ! ) or using your real customers
- 87. High Fidelity Andrew Veles talks
- 88. High Fidelity Andrew Veles talks
- 89. High Fidelity Andrew Veles talks
- 90. Testing Andrew Veles talks Set a goal Achieve a goal IterateMeasure 02 0403
- 91. Think with your user Andrew Veles talks There are a huge amount of you will discover afterwards. Iterate knowing this.
- 92. UX Flow is about optimization
- 93. Structure is a key Use UX Flow after testing Optimize your interactions Learn from UX Flows Summary Andrew Veles talks
- 95. Flow Andrew Veles talks Flow is a perfect solution for one-action interactions.
- 96. Flow Andrew Veles talks Using flow is equivalent to pulling out the interaction from the full context.
- 97. Flow Andrew Veles talks UX Flow = + + + Registration flow Walkthrough flow Home flow Settings flow
- 99. Explanation Andrew Veles talks Case: user needs to connect his car insurance with the app.
- 100. Explanation Andrew Veles talks Take back to Mindmap Connected Insurance Select Insurance Provider Provider Details Connect Insurance Scan Front Driver License Scan Completed? Scan Back Driver License Scan Completed? Provider Details You’re set! A B
- 101. Explanation Andrew Veles talks Connected Insurance Select Insurance Provider Provider Details Scan Front Driver License Scan Completed? Scan Back Driver License Scan Completed? Provider Details You’re set!
- 102. Explanation Andrew Veles talks Connected Insurance Select Insurance Provider Provider Details Scan Front Driver License Scan Completed? Scan Back Driver License Scan Completed? Provider Details You’re set!
- 103. Explanation Andrew Veles talks Flow works better on user interface,not on wireframes because you don’t need to explain more.
- 104. Flow is for prototyping
- 105. Prototyping Andrew Veles talks Do not create a fully-functional prototype in Principle,InVision, etc.It will overkill the sense of valuable ☝ action you need to achieve.
- 106. Divide a prototype with flows
- 107. Get things done with flows
- 108. Prototyping Andrew Veles talks Interaction scenarios are the best representation of flows, containing common actions user wants to achieve.
- 109. Prototyping Andrew Veles talks Flows are good to set sprint tasks and design management.
- 110. Prototyping Andrew Veles talks Best way to present your work to the client – give them an opportunity to explore flows.
- 111. One flow – one action With exceptions
- 112. Prototyping Andrew Veles talks Screens that are representing in one flow should have similar UI.
- 113. Get things done with flows One screen – one action Flow is for prototyping Showcase your flow Summary Andrew Veles talks