Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
From Idea to Test
Rapidly prototyping & validating your concepts
by Nicole Capuana @ncapuana
Get the tools we will use today
Prototype on Paper
● Download & create an account
at popapp.in
InvisionApp
● Create an acc...
Good morning!
I’m relegated to being the baddies in TMNT
Every Monday I practice yoga in the
middle of an airport
I teach girls how to code
Founding member of HER Ideas in Motion - teaching girls coding, game design, filmmaking and robo...
I work on a boat
Take a virtual tour with Google Cardboard and the app at leandog.com/holiday/
For over 15 years, I help startups &
enterprises design great products
Goals &
Objectives
● you get to practice
● you experience how easy it is
● learn how to apply it in your
work
I ask that y...
About this workshop
● High school students, professionals with no background in UX &
seasoned UX folks have all found this...
Timetable - we’re going to move fast
● I’ll introduce key concepts and approach (30 mins)
● We will work in teams to:
○ Ge...
In the real
world
We’d actually
base our ideas on
what we learn in
customer
development &
user research
Introduction
● Approach - ideate, prototype
and test
● Review of prototyping tools
● Usability Test Scorecard
● Case study...
Why this approach can help you validate,
experiment and learn fast
● Anyone on the team can do it
● Validate if a concept ...
Design Studio Method
● Rapidly generate ideas
● Build upon the best ideas
● Cycles of sketch, pitch, critique (5 - 2 - 3)
...
Creating Prototypes
● Start lightweight with paper & marker
● Increase fidelity as you iterate
● Paper is powerful
● Use a...
Tools
Excellent review by
Cooper http://www.cooper.
com/prototyping-tools
Some tools:
● are free, some cost a bit but not
...
What I use
Always start with paper
Primarily Invision
● More than mobile
● Integration with Sketch for easy updating of mo...
User testing
● In-person preferred
● Informal or formal
● 4 people max - the test participant plus one moderator, one note...
The scorecard
● A means to help get
consensus & direction
● Does not replace other
scoring like SUS, time on
task, success...
Scorecard
All of this
in practice
Design Studio
Closeup of paper prototype
Building on the best ideas
Modular Paper Prototype
Testing Paper Prototype - Good, Better, Best
Higher fidelity prototype
Assessing the Design
Design 1 (testing the paper prototype) Design 2 (testing higher fidelity prototype)
Now it’s
your turn
1. Form teams of 2
2. Grab some post-its & markers
3. Find a spot to work together
Sample for workshop
Comedian Timer App
A simple timer to help comedians keep
track of how much time is left in their
set.
...
Exercise # 1
Generating ideas using Design
Studio Method
● Sketch concepts
● Pitch
● Critique
Design a mobile app
Come up with your own idea
● Pick something simple and
easy to tackle in our limited
time today
Or one...
Ready?
Instructions
Determine as a team what you want to design.
Define a goal for your design concept
Sketch screens - it...
Find another team
Each team will pitch & be critiqued by the other
team
Instructions
Pitch (2 mins)
● what your app is and...
Time for a quick break
Exercise # 2
Creating a prototype using
Invision or POP
● Refine concept
● Build a clickable prototype
Refine your sketches
Instructions
● Based on feedback you got, make
adjustments
● Determine what you’d like to test
● Crea...
Exercise # 3
Test your app with users &
making sense of your
observations
● Create test script
● Run user test
● Use the s...
Sample Test Script
Objective: User can set and use a cue timer
Scenario: You need to set up a cue timer for your upcoming ...
Get ready to test
Instructions
● Prepare a 5 minute test
● Write out your test objective
● Draft your scenario, participan...
Test your app - round 1
● Find another team
● Each person will have a chance to be a
moderator and a note taker - decide
w...
Test your app - round 2
● Find a different team
● Switch the moderator and note taker
roles
● Again,each test is 5 minutes...
Discuss your findings
● Score the users on the scorecard
● Discuss what you observed
● Summarize the key ways your app wor...
Show & Tell
Reflecting on this morning
What did you
learn?
What did you
want more
help with?
How can this
workshop be
better?
Learn More
Usability testing
● How to use SUS
● SUS Calculator
● How to combine UCD & Agile
● How to determine the right n...
Great Job!
@ncapuana
I’m happy to discuss and go into further detail on any of the
methods we used today - reach out via t...
From Idea to Test - Workshop at Convey UX 2016
Prochain SlideShare
Chargement dans…5
×

From Idea to Test - Workshop at Convey UX 2016

25 399 vues

Publié le

As UX practitioners, we don’t get always get the experience of what it is like to participate in our collaboration sessions. We also often face challenges with getting our teams to focus on the right aspect of our products.

In this workshop, you will collaborate in teams and practice methods to help you hone in on
improving your product. You will get hands-on practice in taking an idea all the way from its inception to testing it with users. We’ll start with an overview of the what, why and how of each step of the process. Then we’ll jump into hands-on practice where you will rapidly design a mobile app (of your own choosing) and test a clickable prototype with users.

For the testing portion, you will use a scorecard to determine how well your design performs. This scorecard allows individuals and teams to objectively assess the effectiveness of a design so that it is clear what areas of the design need further refinement or focus for improvement.

Participants will learn how to:
+ foster collaboration and generate ideas rapidly using Design Studio
create a clickable prototype without coding
+ construct a usability test (for the participant and the facilitator)
+ conduct a usability test
+ setup and use a scorecard to objectively assess your test’s components across participants
+ work quickly with light-weight methods

The session will arm you with practical ways to iterate through concepts and designs and foster collaboration that you can start using right-away with your projects and teams. When the whole team participates there is greater buy-in and support to deliver meaningful product experiences with the added bonus of demystifying UX.

You will need to bring your smartphone/tablet and laptop.

Publié dans : Design
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1lite.top/6jRME ◀ ◀ ◀ ◀
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

From Idea to Test - Workshop at Convey UX 2016

  1. 1. From Idea to Test Rapidly prototyping & validating your concepts by Nicole Capuana @ncapuana
  2. 2. Get the tools we will use today Prototype on Paper ● Download & create an account at popapp.in InvisionApp ● Create an account online at invisionapp.com Usability testing scorecard ● Download/make a copy of scorecard http://bit.ly/1IYbRXC (that’s a capital I not a lower case L)
  3. 3. Good morning!
  4. 4. I’m relegated to being the baddies in TMNT
  5. 5. Every Monday I practice yoga in the middle of an airport
  6. 6. I teach girls how to code Founding member of HER Ideas in Motion - teaching girls coding, game design, filmmaking and robotics
  7. 7. I work on a boat Take a virtual tour with Google Cardboard and the app at leandog.com/holiday/
  8. 8. For over 15 years, I help startups & enterprises design great products
  9. 9. Goals & Objectives ● you get to practice ● you experience how easy it is ● learn how to apply it in your work I ask that you: ● be open & curious ● respect one another - there are no bad ideas
  10. 10. About this workshop ● High school students, professionals with no background in UX & seasoned UX folks have all found this helpful ● I continually adapt and improve based on feedback (I’d love to hear how it can be better) ● It’s hands-on in pairs ● You’ll probably want more time for each step but I’m going to be strict on time - 3 hours will fly by before we know it
  11. 11. Timetable - we’re going to move fast ● I’ll introduce key concepts and approach (30 mins) ● We will work in teams to: ○ Generate a concept for a mobile app (30 mins) ○ Turn the concept into a clickable prototype (30 mins) ○ Test the concept with users and use a scorecard to surface areas to improve (1 hr) ● Show & Tell (15 mins) ● We will reflect on what we learned (15 mins)
  12. 12. In the real world We’d actually base our ideas on what we learn in customer development & user research
  13. 13. Introduction ● Approach - ideate, prototype and test ● Review of prototyping tools ● Usability Test Scorecard ● Case study - how I use this approach with my product teams
  14. 14. Why this approach can help you validate, experiment and learn fast ● Anyone on the team can do it ● Validate if a concept is worth pursuing ● Easily experiment more ● Your 1st design is never perfect ● Cheap way to determine what to develop ● Quick & objective ● You will always learn something
  15. 15. Design Studio Method ● Rapidly generate ideas ● Build upon the best ideas ● Cycles of sketch, pitch, critique (5 - 2 - 3) ● Based on solving a user scenario or persona goal ● Just enough to convey the concept ● Do it with the whole team - great ideas come from everyone ● Everyone loves it
  16. 16. Creating Prototypes ● Start lightweight with paper & marker ● Increase fidelity as you iterate ● Paper is powerful ● Use a tool to string the screens or interactions together ○ helps you test idea ○ and get buy-in or understanding across the team & stakeholders ● Focused in on what you want to learn - keep it small ● What is the most valuable thing you want to learn from your prototype?
  17. 17. Tools Excellent review by Cooper http://www.cooper. com/prototyping-tools Some tools: ● are free, some cost a bit but not much ● most have a trial or free version for 1 project ● are for mobile design only, others cover complex interactions & animations ● have extensive UI libraries or building kits to get you started quickly ● allow on device testing ● allow for real-time collaboration and annotations
  18. 18. What I use Always start with paper Primarily Invision ● More than mobile ● Integration with Sketch for easy updating of mockups in your prototype ○ (I also use Zeplin because it integrates with Sketch) ● Promising recording of mobile user testing with Lookback.io ● Acquired Macaw to bridge design & development Exploring tools with more interactivity
  19. 19. User testing ● In-person preferred ● Informal or formal ● 4 people max - the test participant plus one moderator, one note taker, one observer ● Set test objectives, create scripts, set up a scorecard ● Do a dry-run ● Don’t ask leading questions ● Consider having another UX person outside the project team to moderate the test to reduce bias
  20. 20. The scorecard ● A means to help get consensus & direction ● Does not replace other scoring like SUS, time on task, success rate, etc. ● Binary scoring (0-1) Get it at http://bit.ly/1IYbRXC (that’s a capital I not a lower case L) ● Calculates a score for each action and an overall score of the scenario - highlights opportunities for improvement
  21. 21. Scorecard
  22. 22. All of this in practice
  23. 23. Design Studio
  24. 24. Closeup of paper prototype
  25. 25. Building on the best ideas
  26. 26. Modular Paper Prototype
  27. 27. Testing Paper Prototype - Good, Better, Best
  28. 28. Higher fidelity prototype
  29. 29. Assessing the Design Design 1 (testing the paper prototype) Design 2 (testing higher fidelity prototype)
  30. 30. Now it’s your turn
  31. 31. 1. Form teams of 2 2. Grab some post-its & markers 3. Find a spot to work together
  32. 32. Sample for workshop Comedian Timer App A simple timer to help comedians keep track of how much time is left in their set. Try it yourself - on your phone, open up http://invis.io/XD1C59U8H
  33. 33. Exercise # 1 Generating ideas using Design Studio Method ● Sketch concepts ● Pitch ● Critique
  34. 34. Design a mobile app Come up with your own idea ● Pick something simple and easy to tackle in our limited time today Or one of these ideas: ● Grocery list app ● Period tracker ● Grill timer ● When to water the plants ● Pet medication tracker/reminder ● Conference planner
  35. 35. Ready? Instructions Determine as a team what you want to design. Define a goal for your design concept Sketch screens - it doesn’t have to be the app in it’s entirety but just a path that we can test. You will have: ● 5 minutes to come up with an idea ● 10 minutes to sketch 15 minutes
  36. 36. Find another team Each team will pitch & be critiqued by the other team Instructions Pitch (2 mins) ● what your app is and ● how you addressed the goals you defined Critique (3 mins) ● 2-3 ways solves problem or meets goals ● 1-2 ways to improve ● Not what you like 5 minutes then switch
  37. 37. Time for a quick break
  38. 38. Exercise # 2 Creating a prototype using Invision or POP ● Refine concept ● Build a clickable prototype
  39. 39. Refine your sketches Instructions ● Based on feedback you got, make adjustments ● Determine what you’d like to test ● Create at least 1 path or task in your app - you may have to sketch a few more screens to complete it ● Create your account ● Take photos of your sketches 20 minutes ● Upload photos to the app (if you choose Invision and you run into image rotation issues, let me know, there’s a way around it) ● Link the screens together with hotspots
  40. 40. Exercise # 3 Test your app with users & making sense of your observations ● Create test script ● Run user test ● Use the scorecard
  41. 41. Sample Test Script Objective: User can set and use a cue timer Scenario: You need to set up a cue timer for your upcoming gig. You’ll have the stage for 5 minutes. Your tasks: ● Launch the Stage Timer app and set up your timer. You want to know when you hit the 4 minute and 4:30 marks. ● Answer the facilitator’s questions. For the facilitator: 1. How do you create a new timer? 2. How do you play/activate a timer? 3. What do the colors mean?
  42. 42. Get ready to test Instructions ● Prepare a 5 minute test ● Write out your test objective ● Draft your scenario, participant tasks & facilitator questions ● Make a copy of the scorecard and set it up for your test http://bit.ly/1IYbRXC (that’s a capital I not a lower case L) 10 minutes
  43. 43. Test your app - round 1 ● Find another team ● Each person will have a chance to be a moderator and a note taker - decide who will do what this round ● Each test is 5 minutes ● Switch team’s test 10 minutes
  44. 44. Test your app - round 2 ● Find a different team ● Switch the moderator and note taker roles ● Again,each test is 5 minutes ● Switch team’s test 10 minutes
  45. 45. Discuss your findings ● Score the users on the scorecard ● Discuss what you observed ● Summarize the key ways your app worked and what needs improvement ● If you were to do more, what would you do next? Is there something you still need to explore? What do you need answered? 5 minutes
  46. 46. Show & Tell
  47. 47. Reflecting on this morning What did you learn? What did you want more help with? How can this workshop be better?
  48. 48. Learn More Usability testing ● How to use SUS ● SUS Calculator ● How to combine UCD & Agile ● How to determine the right number of participants Prototyping ● Five app prototyping tools compared Proto.io, Pixate, Origami, Framer & Form ● How Prototyping is Replacing Documentation ● Vive le Prototype ● Building Clickthrough Prototypes To Support Participatory Design Design Studio Method ● The Design Studio Method - Todd Zaki Warfel (video) ● Design Studio: A Method for Concepting, Critique & Iteration Agile Retrospectives ● Iteration Retrospective ● Agile Retrospective Resource Wiki ● Retrospective Toolbox Invision ● Getting started with Invision (video) ● 7 reasons to use InvisionApp for rapid prototyping
  49. 49. Great Job! @ncapuana I’m happy to discuss and go into further detail on any of the methods we used today - reach out via twitter or email me (nicole.capuana at leandog.com)

×