Class Sessions – Design Perspectives

Do you have your Design Brief?
Do you have your Style Guide?
Do you have a project ‘cheat sheet’ with step-by-step instructions for implementing your project including urls, login credentials, etc?
Is your demo ready?
Is your team & presentation polished and ready?
Have you updated your project page?

The Alcove Presentation

Team Alcove will be presenting today.

Assignment

Reading

Do we need libraries?

Projects

Continue refining your prototypes, documentation and presentations

Announcements

This week, 4/30 – Revise Prototypes
Next week, 5/7 – Finalize prototypes & prep for final presentations
MediaTech Internships this Summer
IMM/Bonner Internships for Fall

Design Notebooks

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

Prototype Development

Break up into your teams and continue refining your prototypes based on the feedback you received last week.

Assignment

Delivery Plan

Meet with your group and discuss what the Ewing Branch will need in order to move forward with your prototype.
What equipment, materials, URLs, usernames & passwords will they need?
Write a one or two page “cheat sheet” that includes a list of these items.
Be prepared to package up this and the rest of your project deliverables next week in class.

Project Pages

Update your Project Page on the class blog, including a link to your Delivery Plan.

Design Notebooks

Create a final page in your Design Notebook and title it “Delivery Plan”.
Write a brief summary of your Delivery Plan and include a link to the document.

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

Announcements

This week, 4/23 – User Testing
Next week 4/30– Revise Prototypes
Final exam date – Final call for Monday, 5/18 11:00am – 1:50pm at the Ewing Branch

Design Notebooks

Let’s take a few minutes to review some of your Design Notebook entries for this week.

Project Pages

Let’s finish setting up your project pages and take a few minutes for you to post your project documents (User Personas, User Stories, Design Brief, Diagrams, etc).

Get into your groups and make sure you have access to your team’s page on the blog.
Edit your page, making sure all your team mates are listed and links to your project documents have been added to the page.
Once you’ve posted all your documents, we’ll take turns testing each other’s prototypes.

User Testing Workshop

Let’s break up into our teams, and take turns reviewing each others projects.

Review your User Stories with your team
Pick the two highest priority User Stories from your list
Match up those User Stories with their corresponding prototype implementations
Have your testers try out your prototypes and then share with them the User Stories
Ask the tester if the prototype fulfills the User Stories, how could it be improved?
Be sure to take notes on the feedback you receive.

Assignment

User Feedback

Create a new Google Spreadsheet called “User Feedback” and make a list of the suggestions and comments you received on your prototype during the User Testing Workshop.
Review the list with your team mates and make a plan for how to revise your prototype based on this feedback.

Design Notebooks

Each team member must submit their own Design Notebook entry
Create a new slide in your Design Notebooks and label it “User Feedback” and today’s date.
Summarize the feedback you received, and your plan for acting on it.

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

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.

Diagrams & Mockups

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

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

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.

User Personas, User Stories & Design Briefs

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.

Formal Group Presentations

Announcements

Midterm Papers due today (post as comment to last session’ s agenda page)
Visiting Ewing Public Library for Formal Group Presentations
Next week, April 2nd, User Personas & Design Briefs

Schedule for the Day

9:30 – Meet at TCNJ as usual

9:30 – Students complete Risk Notification Forms

9:40 – Board the vans for trip over to Ewing Public Library

10:00 – Presentations begin at Ewing Public Library with Opening Remarks by Susan Seidenburg, Ewing Youth Center Librarian

10:15 – Student presentations

12:00 – Wrap up and board vans for trip back to TCNJ

Assignment

Reading

Chapter 3, User Personas in Communicating Design
Chapter 9, Design Briefs in Communicating Design

Design Notebook

Meet with your group and compare notes regarding the feedback you received on your presentation today.
Create a new slide in your Design Notebook and label it “Presentation Feedback” and today’s date.
Make a list of the feedback you received on your team’s presentation
Every team member should add this new slide to their individual Design Notebooks

Team Project Workshop Redux

Announcements

This week, continue to develop team project concepts
Next week, Spring Break
March 26, Midterm Papers due, formal presentations at Ewing Public Library

Midterm Paper Discussion

Let’s review the expectations for your midterm papers.

What we’re looking for:

Your definition of HOMAGO (Hang Out, Mess Around, Geek Out)
Your vision of the library of the future
If you were given an empty room, striped bare to the walls, and a blank check, what would you build?
Be as descriptive as possible, including as many specifics as you can
Include specific hardware, software, devices, furniture, even paint (or writable surfaces)
How would you arrange these items? What purpose(s) would they serve for the patrons?
How does your design benefit librarians?

A General Outline for Your Midterm Paper

Here’s an example outline for your paper.

Sources for Your Midterm Papers

Room Arrangement, Chapter 2 of Technology Enhanced Libraries
HOMAGO (Hang Out Mess Around and Geek Out)
Library of the Future
Other sources that reflect your particular area of expertise

When citing your sources, please follow the MLA guidelines as outlined on OWL. Also, here are some guidelines for evaluating your sources.

Design Notebooks

Divide up into your teams and combine your Design Notebook entries for this week into your team intro presentation.
Let’s go around the room and have each group present their teams

Project Workshop

Stay in your groups and continue refining your project concepts. Develop a series of slides including:

Which partner has your group chosen to focus on?
What need does your project address?
What is the target audience of your project?
Describe the solution you want to develop.
How does your solution specifically benefit your partner organization?

Be sure to have at least one slide per each member of your team – every team member must present at least one slide.

Dry Run Presentations

Let’s go around the room again with each group presenting their refined project presentations. Be sure each team member presents at least one slide.

This is THE forum for constructive criticism ahead of our formal presentations.

Assignment

Midterm Papers

Continue researching your midterm papers, these are due before class on Thursday, March 26th. You should attach them as a link to a comment below on this page.

Formal Presentations

Meet with your group to refine and practice your formal presentations. Ensure that every member of the team presents at least one slide and that your presentations include:

a problem statement, what is the specific issue your project will address
a description of the relevant audience for your solution
a description of your solution to the problem, and how it specifically addresses the needs of the audience you have identified, as well as the needs of the partner organization for whom you’ve chosen to develop your solution
a description of how this solution can fit in with existing programs/projects and what would be required of your chosen partner organization

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

Team Project Workshop

Announcements

This week, continue to develop team project concepts
Next week March 12, record formal project presentations on video, begin working on Design Briefs
March 26, Midterm Papers due, continue working on Design Briefs, begin developing User Personas

Design Notebooks

Divide up into your teams and combine your Design Notebook entries for this week into your team intro presentation.
Let’s go around the room and have each group present their teams

Project Workshop

Stay in your groups and continue refining your project concepts. Develop a series of slides including:

Which partner has your group chosen to focus on?
What need does your project address?
What is the target audience of your project?
Describe the solution you want to develop.

Be sure to have at least one slide per each member of your team – every team member must present at least one slide.

Dry Run Presentations

Let’s go around the room again with each group presenting their refined project presentations. Be sure each team member presents at least one slide.

This is THE forum for constructive criticism ahead of our formal presentations.

Assignment

Midterm Papers

Continue researching your midterm papers.

Reading

Chapter 9, Design Briefs in Communicating Design

Design Notebook

Create a new slide in your Design Notebook and label it “Midterm Paper” and today’s date.
Write a brief description of your idea for your midterm paper and include at least 3 links to additional research you have done in support of your idea.

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