Month: April 2015

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.

Announcements

• Coursify – a MOOC where you can run your own classes and charge for them.
• P2PU – an open source MOOC where you can beta test classes
• Hoopla – the Netflix of the Library world – perhaps you can distribute your 3D worlds and other content through it.
• Midterm Papers!
• Next week, 4/15 – Prototypes & Style Guides

Design Notebooks

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

Diagrams

Why use diagrams?

Types of Diagrams

• sitemaps
• sequence diagrams
• flow charts
• others?

Diagraming Tools

• Draw.io
• Balsamiq

Diagraming Workshop

Organize into your your teams and consider your project. What types of diagrams would be useful for documenting the organization of your content, flow of your process, or sequence of your users’ interactions?

Pick one of the tools above and try diagraming one aspect of your project. Keep in mind that your project may have multiple sub-projects (a video sub-project and a website sub-project).

Mockups

Why use mockups?

Types of Mockups

• Wireframes
• Storyboards
• Paper Prototypes
• Models
• Walkthroughs

Mockup Tools

• Draw.io
• Storyboard That
• POP
• Sketchup

Mockup Workshop

Organize into your teams again and discuss what aspects of your project need mockups. What types of mockups would help begin to prototype your project?

Pick one aspect of your project and create a mockup for it. Keep in mind that most of your projects have multiple sub-projects. Which one most fully identifies the ‘gist’ of your project? Using one (or more) of the tools listed above, create a mockup for that one.

Assignment

Diagrams & Mockups

• Meet with your team and create appropriate diagrams and mockups for each sub-project. For instance, if one team member is creating a video, storyboard that video, if another is creating a Youtube channel, create a sitemap and wireframe of the proposed Youtube channel.
• Remember to use your User Stories as inputs into your diagrams and mockups. If there’s a hole in your content, you probably need additional User Stories.
• Come to class next week to present your diagrams & mockups.

Reading

Creating Style Guides in A List Apart

Design Notebooks

• Create a new slide in your Design Notebook and name it “Diagrams & Mockups” and today’s date. Write a two or three sentence description of the diagrams and/or mockups you created for your team.
• Include links to those diagrams/mockups (or pictures of them if they’re paper or physical models).

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

Announcements

• Videos of your presentations from last week are available here
• We’ll receiving feedback from Susan & her team at the Ewing Branch over then next couple of weeks
• Today, User Personas, User Stories & Design Briefs
• Next week, April 9, Midterm paper discussion, Flowcharts & Wireframes

Design Notebooks

Let’s take a few moments to review some of your Design Notebook entries from last week.

User Personas

User Personas are a technique for capturing information about the different types of “users” for whom you will be developing your projects. In essence, User Personas help you to define your your audience(s).

Let’s take a look at a User Persona Template example.

Now, let’s create our own example together on Google Drive.

User Persona Workshop

Working together with your team, take 1/2 an hour to create at least three User Personas:

• two different personas for a users of your solution (e.g. two different teens with differing circumstances and/or needs)
• one persona for an administrator of your solution (e.g. a librarian)

User Stories

User Stories are a technique for identifying specifically what each user type wants to be able to accomplish using your system. User Stories give you a checklist of features you’ll need to implement in order to fulfill the needs of your different user groups.

Let’s take a look at an example of how to implement User Stories.

Let’s create a couple of example User Stories on Google Drive.

User Stories Workshop

Working together with your team, start a new Google Drive Spreadsheet and take a 1/2 hour to create at least two User Stories for each user type you identified with your User Personas.

Each User Story should follow this formula:

“As a user type X, I want to be able to Y, so that I can Z“

Design Briefs

Design Briefs are a technique for capturing the basic requirements of a project, including target audience, message & content, project architecture, budget and timeline.

Let’s take a look at a template Design Brief.

Assignment

Project Design Brief

• Working with your team, use your previous work in class including your project concepts, presentations from last week, user personas and user stories to create a design brief for your project. Include a budget and timeline, a weekly intervals for the remainder of the semester, to identify what you intend to accomplish on your project over the remaining weeks of the semester.
• Keep in mind that this is a living document. As you progress through your work and you learn more about your project, get additional feedback from the Ewing Branch, your classmates and instructors, you may need to make adjustments.
• Use the Design Brief Template as your starting point.

Reading

• “Site Maps” Chapter in Communicating Design
• “Wireframes” Chapter in Communicating Design

Design Notebook

Create a new slide in your Design Notebook and name it “Project Design Brief” and today’s date. Write a two or three sentence description of your project and provide a link to your team’s Project Design Brief.

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