Prototypes

Announcements

• This week, 4/16 – Prototyping
• Next week, 4/23 – User Testing
• Final exam dates – 5/14 & 5/18, can we combine them into one of those days?
• Project pages – while you’re all working on your prototypes today, Warren and I will be creating project pages for you to begin posting your project artifacts to next week.

Design Notebooks

Let’s take a few minutes to review some of your mockups, wireframes and diagrams from last week. Classmates, do the diagrams clearly describe the flow of the presenting team’s concept? How could they be improved?

Prototyping

Why prototype?

“Measure twice, cut once”, “Fail Fast”, “First one’s for the trash”

• We prototype so we can quickly and inexpensively prove that our basic concept is valid.
• Prototyping also helps us get a better handle on the details of what’s needed to implement our concept.
• Sometimes, tinkering with a prototype can yield new insights that can improve our concept

Types of Prototypes

Models

Could be paper, cardboard, a sketchup model, 3D print, styrofoam, etc.

Walkthroughs

When creating a process, having each team member act out a role in the process can be an effective prototyping approach.

Click Dummies

An extension of wireframes, click dummies can really help identify help map out how a website or mobile app might “feel” – helping to validate content and identify alternative approaches .

LoRes versions

Especially useful for film, animations, VR, music, etc. Think garage band “demo tape”.

Prototyping Tools

• Paper
• Powerpoint
• HTML
• Invision
• Sketchup
• Arduino
• Others?

Prototype Workshop

• Break up into your groups
• Using our Concept Presentations, Design Briefs, diagrams and mockups as blueprints, create a rough prototype of your project
• Start with the most difficult, least understood or most uncertain part of your project and build out from there.
• Use whatever type of prototype, and whichever tools, are most appropriate for your project (if it’s a class or a scavenger hunt, try walking through the process, if it’s a video, try creating a clickthrough storyboard in Powerpoint. Not sure what to use? Ask another team what form of prototype they think would most effectively let them evaluate your project).

Assignment

Draft Style Guide

Create a new Google Document on Google Drive and title it “Style Guide”

• Working together with your team, review your Concept Presentation, User Personas, diagrams, mockups and prototype.
• Think about the purpose of your project, and the vibe you want it to create.
• Based on the reading from last week, create a draft style guide for your project.
• Including a section each on what typestyles, colors, images and general look and feel your project (or it’s documentation) should follow.
• This style guide convey’s your project’s “brand”.

Reading

“Usability Plans”, Chapter 11 in Communicating Design

Design Notebook

• Create a new slide in your Design Notebook and title it “Style Guide” and today’s date.
• Write a brief paragraph summarizing the “vibe” you want your project to convey. Include a link to your team’s style guide on Google Drive.
• After reading “Usability Plans” in Communicating Design, create a second new slide in your Design Notebook and title it “User Testing” and today’s date.
• Review your user stories from earlier in the semester and consider how your team can use these as a user testing checklist.
• Write a brief paragraph describing how you might approach testing your prototype with real users.

*Assignments are due before class begins on Thursdays. Be prepared to present your work in class for discussion.