UX - UI architecture session

UX - UI architecture session

• 1.
  UX/UI Architecture Session March 132019 1
• 2.
  Agenda • Unpacking UXand UI • Human Centric Design • Let’s make it Real • Templates & Resources • Appendix 2
• 3.
  Unpacking UX andUI 3
• 4.
  Tell me abouta product you 4
• 5.
  People usually say… SoUseful Valuable Cant live without! Wow! Awesome It makes me feel so good! 5
• 6.
  Great product havethese qualities Useful Valuable Usable Delightful Memorable Helps you make progress Makes you feel like a better version of yourself Enabling behavior change 6
• 7.
  Well designed productscreate memorable experiences 7
• 8.
  User Experience (UX) 8
• 9.
  User Experience Design– UX Design Encompasses all aspects of the end-user's interaction with the company - marketing, sales, social its products - getting value by trying or using the product Its services - seek help or support to make the most of the product 9
• 10.
  UX is also… Theoutcome of strategy translating into a solution A well designed strategy and thoughtful design results in <insert your favorite product here> A not-so-well designed strategy and thoughtless design results in <insert the one you stopped using> 10
• 11.
  User Interface Design– UI design • UI design is everything designed into an information device with which a person may interact – Website/refrigerator/ATM • The focus is on look and feel and task success and simplification • UI design typically refers to graphical user interfaces but also includes others, such as voice-controlled ones • UI is a subset of UX ~ Not UX • An integral part of UX ~ Not UX 11
• 12.
  UX is anumbrella 12
• 13.
  UX Tool kit •Field research • Face to face interviewing • Creation and administering of tests • Gathering, organizing, and presenting statistics • Documentation of personas and findings • Product design • Feature writing • Requirement writing • Graphic arts • Interaction design • Information Architecture • Usability • Prototyping • Interface layout • Interface design • Visual design • Taxonomy creation • Terminology creation • Copy writing • Presentation and speaking • Working tightly with programmers • Brainstorm coordination • Company culture evangelism • Communication to stakeholders 13
• 14.
  Misguided Perception ofUI • Field research • Face to face interviewing • Creation and administering of tests • Gathering, organizing, and presenting statistics • Documentation of personas and findings • Product design • Feature writing • Requirement writing • Graphic arts • Interaction design • Information Architecture • Usability • Prototyping • Interface layout • Interface design • Visual design • Taxonomy creation • Terminology creation • Copy writing • Presentation and speaking • Working tightly with programmers • Brainstorm coordination • Company culture evangelism • Communication to stakeholders 14
• 15.
  To design asuccessful UI you need to think about the end to end UX 15
• 16.
  So… UX isnot UI http://www.uxisnotui.com/ 16
• 17.
  Some products aregreat and some are not! Is this magic? Is this a hit or miss? Just Serendipitous? 17
• 18.
  How does thishappen with some products? Is this magic? Is this a hit or miss? Just Serendipitous? No. You can engineer this every. single. time 18
• 19.
  Human centric Design 19
• 20.
  Human Centric Design 1. Focus on people 2.Focus on the right problems 3. Think of the end to end experience 4. Always test and learn 5. Continuously improve 20
• 21.
  1. Focus onthe people • Who am I building this for? • In what context (time, place, device, etc.) will they use our product? • What are their motivations, goals and needs? • What are their pain points? • What solutions are they using now? Deliverables: Personas, Empathy Maps, User/Job stories, User One pager 21
• 22.
  Personas (A representationof a type of customer) https://www.nngroup.com/articles/persona/ 22
• 23.
  Empathy Map https://www.nngroup.com/articles/empath-mapping/ 23
• 24.
  User One Pager: <Date> 6.Context of Use Will they use this product alone or with someone? Will they use it virtually or in-person? When will they use this product? How often will they use the product? What are the end goals, to consider? What are the experience goals, to consider? What are the life goals to consider, if applicable 5. Channels of engagement: How do we get access to users? Where do they hangout usually, Online/offline? What is the device they are most likely to use? What omnichannel requirement should we consider if more than one device is used about 2.Motivation Is the goal/need very important in the day of a life for the user? Are they interested in a new solution? What are their current alternatives? Why is this product or service important to the user? How does this product help user make progress or their life better? Do they have a choice in using this product/service? What happens when they stop using this? 1. Goals & Needs What is the user trying to get done? (Goals) How does the user do it today? (Task flow) What is the most important task to achieve the goals? What decisions do they need to make? What tasks are optional or nice-to have? What are the workarounds they leverage? (opportunities) Are they any special needs to adopting the product? 3. Pain Points What frustrates the user? Where do you observe friction? What capability is missing? What is not simple? What is complicated? Do users have a choice in using this product/service? Does it take more time? Is it very expensive? Does it take a lot of physical or mental effort? 4. Demographics What do we know about the age, sex, education, affordability etc. about our users, if applicable? Who are the influencers in this domain? Who are the decision makers? 8. Future use considerations Will they keep using it in the future? What should be true for them to continue to use it? If yes, how will their use change over the next few months or years? What will be different about the user in the next few months or years? 7. Existing data and Success metrics Is there any existing data points on our users? (market research) Who are our early adopters? What is the measure to know that we have addressed the need of the user? How will we know we are providing persuasive value for the user to adopt? 24
• 25.
  2. Find theRight Problem Not all problems worth solving Ask 5 questions: • Is this a problem or a symptom? • If this is a problem, what are the existing solutions? • Is this important enough to solve? • Are we fitting into our user’s life? • Is this viable and technically feasible at this time? 25
• 26.
  Lean canvas https://leanstack.com/leancanvas 2 26
• 27.
  Value Proposition Canvas https://www.strategyzer.com/canvas/value-proposition-canvas 27
• 28.
  Balancing Innovation https://inceodia.com/blog/desirability-feasibility-viability-the-sweet-spot-for-innovation/ 2 28
• 29.
  3. Think aboutthe end to end experience Have you wondered landing on an article without the ability to share? How many times have you had to repeat information to different customer service reps? How may times have you bought something online and could not return in the store? 29
• 30.
  Inside-out view Product orcompany centric view Marketing Sales Product Customer support Single or multi channel experience Oh, you need to talk to our support teams. This is Marketing department. And I cannot transfer you because you can only reach them via email 30
• 31.
  Outside-in View Customer centricview Seamless Omni Channel experience You can pay the card balance in the store while we take care of your online return. No Problem! I become aware (mktg) & I also compare (sales) I buy product 1 (sales) & Try product 2 (marketing) I use (Product ) & I need help (support team) I need help (support) & I become aware of new products (mktg/support) 31
• 32.
  Embrace this Reality •People need to live life on their terms • They do not and should not have to care about how our company is organized • You need to empathize with their needs and fulfill their expectations 32
• 33.
  Think This NotThat When you begin understanding your customer’s life, • Think Narratives NOT Features • Think experiences NOT interactions • Think how your product will fit into their life NOT how you can sell your product 33
• 34.
  How does thishelp? • You start accounting for all touchpoints digital or physical • You learn to accommodate the contextual needs. • You design with an awareness about, where the user has been before and where the user will go after at a capability, feature, screen, transaction level 34
• 35.
  What does thislook like? Jordan: The bullied persona (Narrative) Jordan stared at this phone. It made him angry and confused. Someone had called him names and had become very abusive. This was not the first time he felt bullied. But he wondered if he was taking it too seriously. He wanted to know if this was bullying or just online social drama. He needed help and some support. He reached for his phone to explore. 35
• 36.
  Narratives -> usefulscenarios Jordan: The bullied persona Jordan stared at this phone. It made him angry and confused. Someone had called him names and had become very abusive. This was not the first time he felt bullied. But he wondered if he was taking it too seriously. He wanted to know if this was bullying or just online social drama. He needed help and some support. He reached for his phone to explore. SITUATION [Capture context and channel] Someone is trolling and very to Jordan THINK [Capture end goals/ needs, /motivation] He thinks he is being bullied and wants to do something FEEL [Capture experience goals, pain points, aspirations) Confused and angry. Wonders if he is overreacting. DO (Channel, action/resolution) Uses his phone to learn more. Looks for the right option on Safari/app-store 36
• 37.
  Job stories &user stories Source: https://jtbd.info/replacing-the-user-story-with-the-job-story-af7cdee10c27 37
• 38.
  4. Always testand learn Now our scenarios are ready to be translated into low-fidelity prototypes We are ready to also establish user/job stories. We can do this in parallel or they both can mutually inform each other 38
• 39.
  Paper sketches 39
• 40.
  Lo-fi Wireframes 40
• 41.
  Organize information withPrototypes Source: http://www.natasha-young.co.uk/cross-cultural-understanding/paper-prototyping/ 41
• 42.
  Translate to highfidelity (hifi) UI prototypes 42
• 43.
  Let’s make thisreal! 43
• 44.
  1. Focus onPeople 2. Find the right problem 3. Think about the end to end experience 4. Always test and learn 5. Continuously Improve User One Pager, Persona etc. Key problems to solve Prioritized Scenarios, job/user stories Iterated Prototypes, refined content, intuitive navigation Progressive, value adding product DELIVERABLES WHATS User research Prioritization frameworks ( Lean, Value prop etc.) Establish narratives/ storyboard Low fidelity prototypes – iterated and validated Continuous Feedback - User Research/Surveys HOWS 44
• 45.
  1. Focus onPeople Techniques: User Interviews Deliverables: Personas and One Pagers 45
• 46.
  Understand the typesof users – 4 Personas 1. The person who is bullied 2. The person who is bullying 3. Friend of a bully 4. Friend of the bullied 46
• 47.
  User One Pager:Jenna – Friend of the person bullying <Date> 6. Context of Use Happens when people are alone or with someone - Online and offline Mostly when using social media or in the evenings when my friends walk home. 5. Channels of engagement: Instagram, Facebook 2.Motivation I this it is a tragedy and this needs to be stopped :I want to feel proud for standing up for myself and others. 1. Goals & Needs I want to be able to help my friend to take control of his anger issues I want to become an advocate and raise awareness 3. Pain Points There is no easy way to make a complaint. I don’t know how to organize events and raise awareness Even our parents need to learn how to talk about this. 4. Demographics High school kids Middle school kids College juniors Boys and girls are equally affected 8. Future use considerations Yes, Jenns like students will keep using this if we provide value. They may want to become advocates and need help to raise events 7. Existing data and Success metrics 100 downloads a month Not more than 20 uninstalls per month At least 50/100 to create accounts in the first 5 days. At least 10% should recommend the app 47
• 48.
  2. Find theright problem Techniques: Balancing feasibility, viability & desirability Deliverables: Key Problems to solve 48
• 49.
  Key problems tosolve The person who is bullied Jordan, Kate The person bullying Sam Friend of a bully Jenna Friend of the bullied Zack Wants to lodge a complaint Wants to seek help discreetly Wants to guide a friend who is bullying Wants to lodge a complaint Wants to learn more about taking control Wants to learn about legal consequences Wants to learn more about helping the bullied Wants to learn more about helping the bullied 49 Note: The key problems inform narratives, scenarios and user/job stories. One problem can correspond to one user story/narrative or span many.
• 50.
  3. Think aboutthe end to end experience Techniques: User Interviews Deliverables: Narratives, translated to scenarios and user /job stories 50
• 51.
  Narratives and Scenarios(1) Jordan: The bullied persona Jordan stared at this phone. It made him angry and confused. Someone had called him names and had become very abusive. This was not the first time he felt bullied. But he wondered if he was taking it too seriously. He wanted to know if this was bullying or just online social drama. He needed help and some support. He reached for his phone to explore. SITUATION [Capture context and channel] Someone is trolling and very rude to Jordan THINK [Capture end goals/ needs, /motivation] He thinks he is being bullied and wants to do something FEEL [Capture experience goals, pain points, aspirations) Confused and angry. Wonders if he is overreacting. DO (Channel, action/resolution) Uses his phone to learn more. Looks for the right option on Safari/app-store 51
• 52.
  Narratives and Scenarios(2) Jenna – Her friend Sam bullied Kate Jenna was replaying what happened to Kate that afternoon. She could not believe that Sam could be so rude to Kate. As Sam’s friend, she was not sure how to talk to Sam about this. She got home to find some help. SITUATION [Capture context and channel] Jenna’s friend Sam was being rude to Kate THINK [Capture end goals/ needs, /motivation] Jenna wants to confront him but not sure how. FEEL [Capture experience goals, pain points, aspirations] Jenna is ashamed that her friend behaves badly. DO [Channel, action/resolution] She uses her laptop to seek helpful resources Searches for, “How can you stop bullying?” 52
• 53.
  Job Stories Jenna –Her friend Sam bullied Kate WHEN I see my friend bullying someone, I get tongue tied. I WANT TO know how to talk to him/her SO THAT I can guide my friend and help others. Channels: online/ offline/mobile 53
• 54.
  4. Always Test& Learn Techniques: Usability testing & Prototyping Low-fidelity Prototypes Deliverables: Validated prototypes and information architecture 54
• 55.
  Low-fi prototypes Iteration 1– Focused on expectation alignment o You are being bullied o Someone says you are a bully o Your friend acts like a bully I am sorry about that. How can I help you? 1. Need to lodge a complaint? 2. Need to understand why they behave this way 3. Need to learn how you can take control of the situation? o o o Complaint Form Your name (optional) Your contact # (optional) Physical or verbal abuse Details Submit I want to know what happens to the complaint after I file 55
• 56.
  Low-fi prototypes Iteration 2– Focused on expectation alignment o You are being bullied o Someone says you are a bully o Your friend acts like a bully I am sorry about that. How can I help you? 1. Need to lodge a complaint? 2. Need to understand why they behave this way 3. Need to learn how you can take control of the situation? o o o Complaint Form Your name (optional) Your contact # (optional) Physical or verbal abuse Details Submit o o What happens now? Here’s what happens after you lodge a complaint… 56
• 57.
  Low-fi prototypes Iteration 3- Focused on content and navigation o You are being bullied o Someone says you are a bully o Your friend acts like a bully o Learn more about bullying o US and local Statistics Sometimes, I am not sure about people’s actions. I don’t know what I’ll pick The language is too in my face I think there are too many options here. 57
• 58.
  Finalized Low-fi prototypes oSomeone is bullying you o Someone says you are a bully o Your friend acts like a bully o You are not sure if someone is a bully Learn more Added new menu option You are not sure if someone is a bully Updated You are being bullied was changed to Someone is bullying you Updated Learn more was removed from the main menu and moved to the right corner Removed US and local statistics was folded under Learn more 58
• 59.
  Possible Next steps 1)You are ready to move to high fidelity prototyping 2) Visual design, animation, working on voice and tone of the application are the possible next steps 3) One more round of usability testing Note: Sketches and wireframing are usually low-fidelity prototyping 59
• 60.
  5. Continuously Improve Techniques:User Interviews, Usability, Analytics, Survey feedback Outcomes: A progressive product that adds value, helps them make progress and changes their lives for the better 60
• 61.
  The Result A lovableproduct and a loyal customer 61
• 62.
  Templates & Resources 62
• 63.
  User One PagerTemplate <Date> 6. Context of Use Will they use this product alone or with someone? Will they use it virtually or in-person? When will they use this product? How often will they use the product? What are the end goals, to consider? What are the experience goals, to consider? What are the life goals to consider, if applicable 5. Channels of engagement: How do we get access to users? Where do they hangout usually, Online/offline? What is the device they are most likely to use? What omnichannel requirement should we consider if more than one device is used about 2.Motivation Is the goal/need very important in the day of a life for the user? Are they interested in a new solution? What are their current alternatives? Why is this product or service important to the user? How does this product help user make progress or their life better? Do they have a choice in using this product/service? What happens when they stop using this? 1. Goals & Needs What is the user trying to get done? (Goals) How does the user do it today? (Task flow) What is the most important task to achieve the goals? What decisions do they need to make? What tasks are optional or nice-to have? What are the workarounds they leverage? (opportunities) Are they any special needs to adopting the product? 3. Pain Points What frustrates the user? Where do you observe friction? What capability is missing? What is not simple? What is complicated? Do users have a choice in using this product/service? Does it take more time? Is it very expensive? Does it take a lot of physical or mental effort? 4. Demographics What do we know about the age, sex, education, affordability etc. about our users, if applicable? Who are the influencers in this domain? Who are the decision makers? 8. Future use considerations Will they keep using it in the future? What should be true for them to continue to use it? If yes, how will their use change over the next few months or years? What will be different about the user in the next few months or years? 7. Existing data and Success metrics Is there any existing data points on our users? (market research) Who are our early adopters? What is the measure to know that we have addressed the need of the user? How will we know we are providing persuasive value for the user to adopt? 63
• 64.
  Scenario Template < Personaname> Situation (contextual use case) Think (end goals, needs, motivation) Feel (experience goals, pain points, aspirations) Do (Channel, resolution) 64
• 65.
  Job story template When<this happens> <I face this situation> I want to <be helped with> < be able to do XXX easily> So that < Desired outcome> <Desired Progress> <Expected Result> Channel/context information Devices digital/physical touchpoints 65
• 66.
  66 Wishing you lotsof inspiration and success  You can reach me at: https://www.linkedin.com/in/vidhyasriram/
• 67.
  Question Time! 67
• 68.
  Resources Interested in thisspace? • Nielsen Norman • Interaction Design Foundation • Meetups and Slack channels • Mentors 68
• 69.
  Appendix 69
• 70.
  Narrative vs Scenario Narrative •A plausible story about a persona using the future product or service in a specific situation. • Agnostic of granular actions and channels and devices. Gives sense of how our product fits in user’s life Scenario • More specificity to a scenario with additional information on channel and device touchpoints. • Breaking down into think/feel/do aspects helps guide interaction ,visual design, and content strategy 70
• 71.
  How are theserelated to Human centered Design? Lean UX Agile Development Design Thinking 71
• 72.
  All are inservice of delivering HCD Design thinking is about being empathizing with people and exploring the right problem Lean principles are about learning faster Agile is about evolving the product with iteration 72