Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

From Idea to Test - Workshop at Convey UX 2016


Published on

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.

Published in: Design
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ ◀ ◀ ◀ ◀
    Are you sure you want to  Yes  No
    Your message goes here

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 InvisionApp ● Create an account online at Usability testing scorecard ● Download/make a copy of scorecard (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
  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 ● 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 (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
  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 (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, 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