Slide 1

Slide 1 text

From research to design Donna Spencer - Maadmob (@maadonna)

Slide 2

Slide 2 text

About me • Information architecture, interaction design, content strategy • 17+ years • Run UX Australia • @maadonna Card%sor(ng How%to%write%great% copy%for%the%web A%prac(cal%guide%to% informa(on%architecture

Slide 3

Slide 3 text

Workshop schedule • User research basics • Combing research for findings • Analysing & communicating • Stories • Sketches • Prototypes Activity throughout: Something to do with meal planning

Slide 4

Slide 4 text

User research

Slide 5

Slide 5 text

About user research • Activities to learn about your users • Why? People may (compared to you): • Do different tasks • Have different technology experience • Know more or less about the information • Use different terminology • Use something in a different place (desk, mobile) • You will learn lots of useful things!

Slide 6

Slide 6 text

About user research • Formal: Research at the beginning of a project • Informal: Get to know your users in less formal ways • Ongoing: Keep in touch and continue to learn

Slide 7

Slide 7 text

Participant involvement Collection method Direct Indirect Self-reported Observed Interviews Focus groups Observation Search logs Website analytics Customer feedback Call centres Help desks Diary studies Surveys

Slide 8

Slide 8 text

Interviews What it is One-on-one discussion with someone Good for Collecting realistic, rich information Exploring an issue Following tangents Tips Conduct in context Ask ‘show me’ Prepare a guide, but not rigid questions Audio-record & transcribe Extreme user interviews - edge-case users Time Can be time-consuming to arrange. Interview time per person

Slide 9

Slide 9 text

Focus groups What it is Small group discussion / workshop (6-12 ppl) Good for Collecting opinions Getting larger numbers of people involved Tips To get more practical input: - Ask people to do some preparation - Use activities, not just discussion Audio-record & transcribe Time More time effective than interviews.

Slide 10

Slide 10 text

Observation What it is Watching people work, not asking them about it Good for When you don’t want to interrupt (call centres, critical situations) Real life Tips Watch then discuss Discuss situations that didn’t happen in the observed time Time Similar to interviews, but time per participant may be longer

Slide 11

Slide 11 text

Diaries/journals What it is Ask people to record an aspect of whatever you are studying Good for Learning context Behaviours you may not see during interview/ observation Longer-term studies Tips Make it straightforward and low effort Provide clear instructions Time Need time for participants to respond

Slide 12

Slide 12 text

Survey What it is Prepared set of questions Good for Involving a large number of people Quick responses Tips Ask open questions rather than closed - more useful information Time Can take a while to prepare the survey Results can come in quickly (online)

Slide 13

Slide 13 text

Web stats & search logs What it is Usage information for an existing website Good for Identifying popular content, terminology, entry points, usage trends Tips Analyse regularly Do before other user research Time As needed

Slide 14

Slide 14 text

Other people What it is Other people who already know about your users Good for Getting an initial understanding of users based on internal knowledge Tips Talk to staff from call centres and help desks Time As needed

Slide 15

Slide 15 text

Analysing user research

Slide 16

Slide 16 text

Analysing user research • We’re going to pull apart the research and put it back together, to draw out the key ideas

Slide 17

Slide 17 text

‘Combing’ for findings • Identify and write down all the small things you learned • Methods • Sticky notes (paper) • Digital equivalents of sticky notes • Spreadsheets • Software (Reframer from Optimal Workshop)

Slide 18

Slide 18 text

‘Combing’ for findings • For information-use projects • Look for all the things that people said they wanted, needed or looked for • Look for their reactions to them • For applications • Look for tasks (start with verbs) • Each ‘thing’ is one observation • Don’t write combined observations • Write in the exact language that users used • Take more than you think you need

Slide 19

Slide 19 text

Affinity diagramming • Also known as the K-J method • Good for identifying patterns from findings • Always done as a group method • It’s about the discussion, not the outcome • Arrange your sticky notes into groups, discuss as you go, learn interesting things

Slide 20

Slide 20 text

Mental models • Good for getting a deep understanding of tasks and motivations • And identifying how to support them • But intense • she says 10 hours analysis to 1 hour interview • Current state • Makes a great diagram! • Mental models by Indi Young (Rosenfeld Media)

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Journey mapping • A customer journey map is a story of the customer’s experience • Often shows movement across touchpoint • Usually current state • Usually an infographic

Slide 23

Slide 23 text

https://www.smashingmagazine.com/2015/01/all-about-customer-journey-mapping/

Slide 24

Slide 24 text

http://uxmastery.com/how-to-create-a-customer-journey-map/

Slide 25

Slide 25 text

https://labs.acmi.net.au/visitor-journey-mapping-at-acmi-286e985bf4ae#.mg9lspvvx

Slide 26

Slide 26 text

Personas • Representative users • Described as a narrative • Focus on the goals of users & describe their needs

Slide 27

Slide 27 text

All about goals • Focus on 3 types of goals: • Life goals – personal aspirations, beyond the design in question • Experience goals – how the person wishes to feel while using the product • End goals – the outcomes of using the product • Not demographics! • Designing for the Digital Age, by Kim Goodwin (Wiley)

Slide 28

Slide 28 text

http://www.uxbooth.com/articles/personas-putting-the-focus-back-on-the-user/

Slide 29

Slide 29 text

https://uxmag.com/articles/ personas-the-foundation-of-a- great-user-experience

Slide 30

Slide 30 text

Scenarios/stories

Slide 31

Slide 31 text

What is a scenario? • A short story that describes a person using a product • Not detailed click by click, but broad • Describes how it fits into their life • Focuses on: • main activities they do • where it will be used & how often • what else the person is doing • expected end result

Slide 32

Slide 32 text

Design methodology • Lots of different design methodologies, including agile and requirements-driven waterfall • The basic idea of telling stories fits into all of them - you just need to figure out how it fits you

Slide 33

Slide 33 text

Example On the walk to the shop, while talking with her daughter, Donna opens her meals app. She has already saved a lot of the recipes/meals that she cooks a lot. They talk about what they want tonight and the next 2 nights, and also about lunches. Donna chooses home-made pizza, nachos and chicken kiev. She also chooses a salad for lunch & their normal breakfast things. She looks at the shopping list it generates. The way she’s set it up is that the meals have a standard set of ingredients. So for pizza it has all the toppings that she usually uses; for kiev it has a bunch of vegetables. It also just includes regular things like milk, coffee, cheese and toilet paper - these are things that are easy to forget. She looks at the shopping list and unselects everything that she knows they have already and saves the remaining list. In the supermarket she first grabs everything by memory. She gives her phone to her daughter, who checks off what they have, and reminds her about what she hasn’t picked up - predictably, she forgot the milk again!

Slide 34

Slide 34 text

Extract content, functions • Content • Information needed to complete the task • Functions • What does the system need to do to the content • Context • Physical environment • Other • Business and technical requirements and constraints

Slide 35

Slide 35 text

Example • Content: • ingredients • recipes/meals

Slide 36

Slide 36 text

Example • Functions: • Select meals • Generate shopping list • Enter and save new meal • Enter and save standard items • Remove items from generated shopping list • Save shopping list • Clear purchased items

Slide 37

Slide 37 text

Example • Context needs: • Small screen • Used in the store (needs to be easy to see, and not use audio)

Slide 38

Slide 38 text

Tips • Don’t describe the interface • Describe use over time if relevant - coming back as needed
 • Document as a narrative, diagram or comic • Don’t forget to incorporate the business goals too

Slide 39

Slide 39 text

Story mapping • Used in Agile • The map tells a story of a type of person doing something to meet a goal • Always a narrative • Can be used to identify release slices • Story mapping, by Jeff Patton (O’Reilly) • http://jpattonassociates.com/wp-content/uploads/ 2015/03/story_mapping.pdf

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

Resources • Designing for the Digital Age, Kim Goodwin (Wiley)

Slide 42

Slide 42 text

Scenarios to sketches

Slide 43

Slide 43 text

Sketching • Great for getting started and exploring ideas • No software necessary • Great for working in a team • Think with a pen. Document with a computer
 • But I can’t draw!

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

Process • Sketch through one scenario • Not whole screens, just parts for the scenario • If you have two or more ideas, do all of them • Sketch through other scenarios • Identify similar & different elements • Start combining elements • Figure out the ‘glue’ - navigation and flow - only after all the elements are sorted out

Slide 46

Slide 46 text

After sketching • You will have deviated from your scenarios as different ideas come up • Go back and walk through your ‘screens’ for each scenario and see if it makes sense • Think about how things change with: • no information • little information • lots of information • Add any extras for ‘edge-cases’ • Design for errors & help

Slide 47

Slide 47 text

Prototyping and testing

Slide 48

Slide 48 text

Prototypes • Pretend versions of the design • Good for: • Exploring detail • Communicating the design • Testing • Can be: • Paper • Drawing program / presentation software • Prototyping tool • Basic version in final technology (e.g. HTML)

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

Given&name&Family&name *"Email"address *"Given"name *"Family"name Add&someone&to&your&account *"Email"address *"Password *"Given"name *"Family"name *"Repeat" password You"can"add"another"person"to"your"account."You"will"both"be"able"to"see" and"add"favourites,"edit"your"project"and"update"contact"details. Change"your"password or Cancel Save SAME AS ON JOIN CONFIRM PAGE About&you Avatar Change avatar Your"avatar"is"used"with"your"Q&A"and"Eps SAME AS ON JOIN CONFIRM PAGE Email&preferences Delete my account My&details Favourite&things Planner Calculators Favourites My&=ps My&account Home One Two Three Four Five LOGO Log"in"or"join"now""|""About"us""|""Q&A""|""Contact"us Find"us"on 1.1 1.2

Slide 51

Slide 51 text

balsamiq.com

Slide 52

Slide 52 text

Prototyping software • Balsamiq • Axure • InVision

Slide 53

Slide 53 text

Resources • https://del.icio.us/uxaustralia/prototype

Slide 54

Slide 54 text

Thanks • http://maadmob.com.au/ • +61 409-778-693 • donna@maadmob.net • Twitter etc: maadonna