Category: Class Sessions

Prep for Final Presentations

Announcements

  • Final Presentations – Thursday 12/10 8:00am-10:50am (time pending)
  • Course evaluations in PAWS

Presentations

Today we’re going to rehearse your final presentations.

Exercise

Together with your team, take 45 minutes or so to organize your materials for your presentation. Make sure you have the following materials:

  • Project concept elevator pitches
  • Project diagrams & content maps
  • Design Brief (your Knight Challenge Entry)
  • User Personas & User Stories
  • Administration documentation & Style Guide
  • Functional Prototype (derived from paper prototypes)

The Google Drive presentation you worked up last week should be based on the materials listed above.

Make sure each team member has at least one slide to present, and that you are covering off on each of the materials listed above.

Once your team has your presentation together, practice it together as team.

Exercise

Once all teams are prepared, we’ll do a formal dry run of the final presentations.

Assignment

  • Together with your team, continue to refine your project materials and your presentation based upon the feedback you received in class.
  • Individually, make sure you’re caught up on your Design Notebooks

Functional Prototypes

Announcements

  • Next week – Final Presentation Rehearsals
  • Final Presentations – Thursday 12/10 8:00am-10:50am

Design Notebooks

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

Functional Prototypes & Documentation

You should be in the final phase of developing your projects. Your team should have the following artifacts:

  • Project concept elevator pitches
  • Project diagrams & content maps
  • Design Brief (your Knight Challenge Entry)
  • User Personas & User Stories
  • Administration documentation & Style Guide
  • Functional Prototype (derived from paper prototypes)

Exercise

Break up into your teams and continue refining your prototypes & documentation:

  • Update your team blog page with the latest versions of the artifacts listed above
  • Break up your prototypes & documentation into parts – one part for each of your team members
  • Each team member is responsible for finalizing and presenting their part of the your project
  • Create a Google Drive Presentation for your final presentation, including at least one slide for each member of your team, labelled with the part of the project each team member will present
  • Each team member is responsible for creating and presenting their slide

Assignment

Have a great Thanksgiving & come prepared to rehearse your final presentations next week.

Design Guidelines

Announcements

  • Next Week – Finishing touches on functional prototypes & documentation
  • 11/30/15 – Last regular class, final presentation dress rehearsals
  • Final Exam – Thursday, 12/10 8:00-10:50
  • A new prototyping tool – floid.io

Design Notebooks

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

Design Guidelines

Why do you need Design Guidelines?

Some examples of Design Guidelines:

Exercise

Together with your team, review the example design guidelines listed above. Answer the following questions:

  • What guideline elements are common across most of the design guidelines?
  • Which guideline is most applicable as a template for your project?
  • What elements are present in your project that need to be documented that are not present in any of the guidelines listed above?

Discussion

Let’s take a few minutes review your analysis of the example design guidelines.

Workshop

Together with your team, create an outline for your project’s design guidelines. Include:

  • a title
  • subheads for each guidance section (logo, typography, color palette, layout, device responsiveness, message size, copy style, etc)

Assignment

Projects

With your team, continue refining your project’s design guidelines.

  • Fill out each section you created during class, including visuals where appropriate to demonstrate how to implement your design elements.

Design Notebook (Individually)

  • Create a new slide in your Design Notebook and title it “Design Guidelines”
  • Include a link to your team’s Design Guidelines document

Project Documentation

Announcements

  • 4 weeks left before final presentations

Design Notebooks

Let’s take a few minutes to review some of your design notebooks.

Documenting Your Prototypes

Why document your projects?

 

  • allows anyone new to the project to quickly get up to speed on how things work
  • allows you to refer back to how things work
  • allows you to refer to why you made certain decisions

What should include in your documentation?

  • a description of the problem your project is addressing
  • a description of how things work
  • specific “how to” tutorials on how to install & set up the system, update content etc.
  • anything else?

What format?

  • pdf
  • wiki
  • source code

Exercise

Organize into your teams and create an outline to document your project

  • What should it contain?
  • In what format should it be?

Create a list of steps the system administrator would need to follow to:

  • install the system OR
  • update the content

Assignment

Project

  • Meet up with your team and continue to refine your prototypes
  • Continue to refine your documentation by providing screenshots or other support visuals to document how to install, configure, and/or update content for your system.

Design Notebooks

  • Create a new slide in your Design Notebooks and title it “Progress for” and today’s date
  • Write a brief paragraph listing the progress your team has made this week on your prototype & its documentation
  • Write another brief paragraph describing your contribution to that progress

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 (Project Documentation), including a link to your Design Notebook.

Revise Prototypes

Announcements

  • Spring 2016 registration begins this week
  • TrentonWorks Internships. Interested? Email me @ thompsom@tcnj.edu
  • Interactive Design for Developing Communities class
  • Next week – Project Documentation

Design Notebooks

Let’s review some of your Design Notebooks.

Revise Prototypes

From Paper to Bits

  • Based on the feedback you received in class during user testing, update your project user stories, diagrams and content maps
  • Begin framing out your apps in a digital format. This could be HTML a Google Presentation, or some other digital prototyping framework

SMS Breakout Session

  • For those of you using SMS in your solutions, let’s group up into a separate discussion group to explore Twilio and Textit.in

Assignment

Prototypes

  • With your team, continue transitioning your paper prototype to digital
  • Begin mocking up your screens in Google Presentation or HTML
  • If you’re using SMS, try sending and receiving an SMS message using Twilio or Textit.in

Team Pages

  • Update your Team page with your progress on your prototypes
  • Continue to monitor for feedback from your classmates, our Bonner representatives and your Trenton partner organizations

Design Notebooks

  • Individually, create a new slide in your Design Notebook and title it “Progress for ” and today’s date
  • What progress has your team made this week on your prototypes?
  • What was your individual contribution?

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 (Revise Prototypes), including a link to your Design Notebook.

User Testing

Announcements

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.

Paper Prototypes

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

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

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

Diagrams and Content Maps

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

Knight News Challenge Entries

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

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.

Project Concepts

Announcements

Design Notebooks

Let’s take a few minutes to review your design notebooks.

Knight Challenge Entries

Organize into your groups and continue working on your Knight Challenge entries.

Assignment

Knight Challenge Entries

  • Review all three other teams’ Challenge Entries and comment on each of them
  • Scan the other entries in the Challenge, paying particular attention to how they present their projects
  • Pick three entries you believe present their case the best

Design Notebook

Challenge Feedback

  • Review the comments on your team’s Challenge Entry
  • Create a new slide in your Design Notebook and title it “Challenge Entry Feedback”
  • Write a paragraph or two summarizing the feedback your project has received and how you can improve your project accordingly

Best Submission Examples

  • Create another slide in your Design Notebook and title it “Best Entry Examples”
  • List the three Challenge entries you picked in the above exercise
  • Write a paragraph describing the one best Challenge entry and why you think their presentation is superior
  • Focus on the quality of their presentation, ignoring whether or not you agree with their specific 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 (Project Concepts), including a link to your Design Notebook.

Who’s Your Audience

Announcements

Design Notebooks

Let’s take a few minutes to review some of your Design Notebooks from last week.

Target Audiences

What is a “target audience”?

Depending on what you’re creating, you probably have several groups of people who you must consider when designing your projects, let’s consider an example from our session downtown last week:

Trenton Storefront Locater – An app that allows local entrepreneurs to find available commercial storefront space in Trenton.

What different kinds of people need to be a part of this system? These different groups are your target audiences.

User Personas

User personas are profiles you create to describe representative user groups of the system you are designing. You create user personas in order to discover the motivation a person may have for using your system.

Personas

User Stories

User stories differ from user personas in that they describe specific features user group requires from your system.

A user story follows the following formula:

“As a member of user group X, I want to be able to Y, so I can Z”

For a concrete example,  if you wanted to build a storefront availability app, a couple of user stories might be:

“As a Trenton entrepreneur, I want to be able to find an affordable storefront, so I can keep my costs manageable while servicing the community”

“As a Trenton entrepreneur, I want to be able to find a storefront with the best location for my services, so I will be conveniently accessible to my best customers”

How to write meaningful User Stories

Challenge Entries

Let’s go over the Knight News Challenge entry form to start getting a feel for what we’ll need for next week.

Knight News Challenge Entry Form

Assignment

User Personas & User Stories

  • With your group, create a Google Document and create at least 3 user personas representing the types of people who will be involved in your system
  • Include end users, system administrators and Trenton partners for whom you’re developing the system as they all have needs of and should receive benefits from your system
  • Create a Google Spreadsheet and title it  User Stories
  • For each User Persona user type, create at least  two user stories to identify features that group will need from your system
  • Create a new slide in your Design Notebooks and title it “User Personas & User Stories”
  • Add links to your group’s User Personas and User Stories documents

Project Concept Presentations

  • Meet with your group and work through the Knight News Challenge entry form.
  • Use this worksheet to prepare your answers before submitting them online next week
  • Fill it out as completely as possible, using the other existing entries for guidance on how to answer each question
  • I’ll be providing you with additional team member information for the second-to-last question; you’ll need to include the Trenton partner as a team member. You can also use their previous efforts to help answer the question “What progress have you made so far?”
  • Come to class with any questions that come up while working through your entry
  • Come prepared next week to present your draft entry

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 (Who’s Your Audience), including a link to your Design Notebook.