Announcements

• Ryan Laux visiting class today at 11:00 to shoot b-roll for “What it means to be IMM” promotional video
• Product Design Internship @ Etsy
• Design Internship @ Etsy
• Internship @ TCNJ School of Nursing
• Take Back the Street
• I’ll be submitting your Team Pages to Bonner and to your partners for review and feedback this week
• Next week – Revise Prototypes based on this week’s in-class user testing and Bonner/partner feedback

Team Pages

Let’s take a few minutes to review your team pages.

User Testing

How do you conduct a user test using your paper prototype?

Paper Prototype Testing

The User Testing Script

The test script is the foundation of your user testing session. It should include:

• A welcome message that thanks the user for participating, along with a reward offer for completing the test
• A high level overview of what the user will be testing (a website or app that does XYZ in very general, high level terms)
• A list of warm up questions (see below)
• A list of tasks the subject needs to complete (should be high level, without too much detail in terms of steps, the UI should lead them through the task – that’s what you’re testing)
• Lots of room to take notes on what questions the subject asks, what mistakes they make and what out loud thinking they do

Identify Your Test Subjects

You should have a test subject info sheet for each subject – in the real world, you’d probably want to get a signature on this for permission purposes as well.

• Write down their name, age, language preferences, and other demographic information important to your project

Qualify the Test Subject

• Ask the test subject a few simple warm up questions about what kinds of web sites or phone apps they’ve used before.
• Have they ever used an app that does XYZ before (where XYZ is what your app does)?
• Write down their answers on their test subject sheet

Lead the Test Subject through the Script

• For each scenario in your script, read the task to the test subject, and ask them to complete it using your paper prototype.
• Ask them to think out loud, and encourage them to ask questions if necessary.
• Write down what they think out loud, and make note of the questions they ask and any mistakes they make in using your interface. Don’t correct them unless they ask for help.
• Did they successfully complete the task?

Exercise

Let’s take 1/2 an hour or so to write up our user testing scripts.

1. Create three test scripts, one for each task your developed last week.

2. Each script should include:

• A high level description of what you will be testing (a website, a phone app, etc)
• Your qualifying warm up questions asking about what other websites or phone apps the test subject uses
• And the task the subject needs to complete

3. Identify three test facilitators from your team; one for each of the three test scripts

4. Identify three testers from your team, each will volunteer to test out the other teams’ prototypes

Break

Exercise

Break up into your teams.

• We’ll run three 20 minute tests. Test subjects from each team should visit the other teams to participate in their tests.
• Testers should run their tests using their test subject info sheets and test scripts, one at a time, one per test subject.

Assignment

Design Notebooks

• Review the remaining Knight News Challenge Semifinalist Projects
• Identify your favorite three projects
• Create a new slide in your Design Notebooks and title it “Favorite Knight News Challenge Semifinalists”
• List your three favorite semifinalists, and explain what it is you like about each; how are the projects presented? How do they impact their target communities? What communication technologies do they use to achieve their goals?

User Testing Materials

• Post your test script and test subject info sheets to your team page on the class blog

Prototypes

• Based upon your in-class user testing sessions, make a list of improvements you can make to your project’s user experience.
• Post this list on your team page on the class blog
• You’ll use this list, along with feedback from Bonner and your partner organizations to continue iterating on your prototypes over the remaining weeks of the class.

Announcements

• Knight News Challenge Feedback Phase ends, Refinement Phase begins on Tuesday
• If you have not yet done so, be sure to comment on the other teams’ entries before the feedback phase closes, I’m counting your comments for your grades
• Next week – User Testing

Design Notebooks

Let’s review one Design Notebook from each team to see your team Diagrams & Content Maps.

Diagrams and Content Maps

Let’s take a few minutes to review your team challenge entries and class blog pages:

News Challenge Entries

• Trenton Cycling Revolution
• T-Recs ROAR
• Waste Collection Data
• Trenton Business Revitalization Campaign

Team Blog Pages

Team Pages

Exercise

• Organize into your teams and update your News Challenge Entries with your diagrams and content maps
• After you’ve updated your challenge entry, update your team’s class blog page with links to your
• Be sure your team’s blog page includes a “Team” section at the top with the names, email addresses & roles of your team members

Paper Prototypes

What’s a paper prototype?

Some examples

• Text Messaging
• Web Mail Interface
• Mobile App

Paper Prototyping Tools

• Paper
• Cardboard
• Scissors
• Stickies
• Pen/Pencil
• POP

Exercise

• Organize into your teams
• Using your User Personas and User Stories, pick an example user and identify a specific task they need to be able to accomplish using your solution
• Write a a list of steps that user will need to take to complete the task
• Create a set of drawings on paper that represent these interactions; these could be screens, or text messages, or voice menus, etc
• Be sure to include descriptions of the specific content that will need to be present (just a description at the moment, you’ll need to develop the actual content later)

Assignment

Paper Prototypes

• Meet with your team and continue developing your paper prototypes
• Using your User Personas and User Stories, pick two additional example users (for three total, including the one you developed in class) and identify a specific task they need to be able to accomplish using your solution
• Write a a list of steps they’ll need to take to complete the task
• Create a set of drawings on paper that represent their interactions; these could be screens, or text messages, or voice menus, etc
• Be sure to include descriptions of the specific content that will need to be present (just a description at the moment, you’ll need to develop the actual content later)
• Take pictures of your paper prototype and upload them to both your News Challenge Entry and your Team Blog Page.

News Challenge Entries

• Update your News Challenge Entry with your Paper Prototype photos

Team Blog Pages

• Update your Team Blog Page with your Paper Prototype photos

Announcements

• 16 days left in the Feedback phase of the Knight News Challenge
• Midterm break next week – no class
• Midterm grades – make sure you’re caught up with your Design Notebook & contest entry comments entries, and that your Design Notebook is shared
• Next meeting October 19, when we’ll update our entries and team blog pages with User Personas, User Stories, Diagrams and Content Maps

Links

• Bike Commuting: Still On The Rise

Knight News Challenge Entries

• Trenton Cycling Revolution
• T-Recs ROAR
• Waste Collection Data
• Trenton Business Revitalization Campaign

Design Notebooks

Let’s take a few minutes to review your Design Notebooks

Team Pages on the Class Blog

• Group up into your teams and let’s create team pages on the blog where you will post your project deliverables for review by your Trenton Partners and classmates.

Design Briefs

• Add a heading to your team page called “Design Brief”.
• Let’s confirm that you can still update your entries on the Knight News Challenge platform.
• If so, add a link to your entry on your team’s page under “Design Brief”.

User Personas & User Stories

• Add another heading to your team’s page called “User Personas & User Stories”.

User Personas

• Use Google Drive to create a User Personas document.
• Together with your team, identify three example users and…
• Create user personas for them in your new document
• Share the document and add a link to it on your team page.

User Stories

• Use Google Drive to create a new spreadsheet and title it “User Stories”
• Together with your team, identify one task for each of your example users that that user would want to complete using your application
• in your new spreadsheet, list those tasks

Diagrams and Content Maps

Why do we diagram our applications?

Diagraming Tools

• Google Drawings
• MyBalsamiq
• Draw.io
• POP (Prototyping On Paper)

Exercise

• Group up in your teams and review your Design Briefs, User Personas and User Stories.
• For each task you identified for your example users, create a bullet pointed list of the steps each user will need to take to complete their tasks.
• Using one of the diagraming tools above, diagram each users’ steps to complete their task.

Assignment

Diagrams and Content Maps

• Read Chapter 2, “Diagram Basics” in Communicating Design
• Get together with you team and work through the following:
• Identify three example users for your application and list one task each user might want to complete using your application
• For each example user, create a bullet-pointed list of steps that each would need to follow using your team’s application to complete their task; think of it sort of like a recipe
• Create a visual diagram for each list of steps
• Based on your diagrams, create a basic content map (a map of screens/pages, like a site map you may have created in IMM 130); pay attention to steps that may be common to multiple users and steps that are unique to certain user types

Design Notebooks

• Individually, create a new slide in your Design Notebook and label it “Diagrams and Content Maps”
• Include links to your team’s User Stories, task lists, diagrams and content map

Knight News Challenge Entries

• Continue revising your challenge entries based on the feedback your receive.
• Post additional images and the diagrams you develop to better communicate your project concept.

Submitting Your Work

This week’s homework assignment is due next week before class. When you’ve completed them, post a comment on this page (Diagrams & Content Maps), including a link to your Design Notebook.