IxD @ rmcad

Look presentable for our client meeting. You should have a Google Calendar invitation with the details of our meeting. Please arrive promptly.

See the Google Doc for Tuesday's agenda.

Come prepared.

Read

Style Tiles as a Web Design Process Tool

Our New Responsive Design Deliverable: The Style Prototype

For Tuesday, create

3–4 polished comps, excluding homescreen

3 homescreen comps: desktop, tablet, mobile (see responsive design here and here)

Read

Style Tiles as a Web Design Process Tool

Our New Responsive Design Deliverable: The Style Prototype

Begin refining your mockups based on feedback you received in class. For Tuesday, create

3–4 polished comps, excluding homescreen

3 homescreen comps: desktop, tablet, mobile

UI style guide with various functional elements

Read about detailed design and the aesthetics of interaction:

Seductive Interaction Design* pp. 10b–24, 33 (Anderson)

Designing for the Digital Age pp. 551–556a, 571–579a (Goodwin)

*See Dropbox. Create detailed look+feel mockups** of your redesigned interface: 1. Make any necessary changes to your wireframes. 2. Choose two experience attributes (core values) from the list we brainstormed:

streamlined

approachable

trustworthy

effective

3. For each chosen experience attribute, design the look+feel for 2–3 screens of your interface: a screen containing a form, one containing a date+time picker, and—if you are feeling ambitious—the home screen.

Use your wireframes as the basis for your UI.

You should create two sets of mockups: the same 2 or 3 screens with 2 different look+feels.

Focus on one experience attribute at a time. Do not combine them.

Write a synopsis of the usability testing you conducted today:

two paragraphs on your process—what worked and what didn't

two to three paragraphs on the feedback you received—positive, neutral, and negative

A bulleted list (in full sentences) of changes you will make based on the feedback you received.

Read 'Developing Design Principles' (Wroblewski).

Refine your wireframes. The level of fidelity—both for content and how you render it—should be testable.

Complete your annotations. See here for a good example.

Create a paper prototype. Refer to the excerpt from Prototyping chapter 6 (Dropbox).

Read about usability testing at the end of chapter 23 in Designing for the Digital Age. A List Apart also has a good explanation on the value and process of usability testing here.

Write your testing plan and place it in a document:

1. Introduce yourself and the service.

2. Use the beginning of the scenario you wrote to bring your test participant into the service headspace and to introduce the user goal.

3. Guide your test participant through each step in the service process without giving them the answer.

Review Designing for the Digital Age chapter 15. Familiiarize yourself 

Print, review, and critique-with-a-pen your peer's wireframes, using the following guidelines:

Does the overall page flow support the overall taskflow?

Does each page layout support the current user task?

Does the page hierarchy (type, value, scale), support the current user task?

Are both the current step and next step obvious?

Where are there gaps (if any) in the wireframes as UI storyboard?

Email me your work so far.

Read Communicating Design chapter 6, 'Wireframes' (Brown).

Wireframe your redesign of the DMV 'Renew Driver's License' experience, supporting your scenario and taskflow. Include annotations and any digital interactions at the DMV branch.

Then read Designing for the Digital Age chapter 18. (Goodwin)

Export your wireframes as PDF

Print 3–5 key screens.

Here are some helpful resources:

examples here and here of the level of fidelity you’re aiming for

Review Designing for the Digital Age pp. 456-460 (Goodwin)

Read 'Designing Screens Using Cores and Paths' (Boxes and Arrows)

Consider:

What is the core of the DMV redesign?

What are the inward paths?

What are the outward paths?

Translate your user scenario into a sketched UI storyboard.*

Refer to Designing for the Digital Age pp. 456-460 (Goodwin)

Use broad pen tips and a few colors.

Each panel should be no larger than a post-it note.

Annotate functional UI elements. (Use arrows and label them. See book example.)

Each panel should represent the UI state that corresponds to one step in the process.

That step (from your user scenario) is the caption for the panel.

Enumerate either the panels or caption.

Read Designing for the Digital Age chapters 14 & 16 (Goodwin):

You may skim the Project Management sections (pp 385b-389 and 473b-476a)

Pay special attention to sections that discuss principles, process, roles, and challenges.

Complete the redesign of the key path (taskflow) for Renewing a Driver's License ('future now' not 'future next').

Create a vector version of the one we generated in class Thursday.

Sketch out the branch portion of the key path with (at minimum) 1. the taskflow mapped out and 2. requirements codes (from the Google doc) annotated where they apply in the taskflow.

Each requirement code should be annotated at least once in the whole key path.

Bring these to class and pin them up by 3:10 Tuesday.

Read

The Design of Design Studio

Bridging the Gap with Requirements Definition

Collaboratively create a single Requirements Document:

Compile each of your requirements in a Google doc.

Condense redundant requirements into single bullet points.

Use specific language to describe user needs in context (when + where) by using concrete nouns (what) and vivid verbs (how) .

Don't worry about design. Be sure to spellcheck and proofread!

Read

Thoughts on Interaction Design chapter 2: 'Managing Complexity' (Jon Kolko)

Better together; the practice of successful creative collaboration (Cooper Journal)

Introduction to Design Studio Methodology (UX Mag)

^^ Get it. Grok it.

Refine your taskflows. (Refer to Communicating Design ch. 6 in Dropbox.)

Complete your heuristic evaluation of the DMV website and Lakewood branch. 

Include an overview: What can the user do here? Does the interface support user goals?

Include strengths, weaknesses, opportunities (See whiteboard photo in Dropbox for what we discussed in class.)

Include your as-is taskflows

Include any explanatory or descriptive sketches

Should be more than one page.

Print and export as PDF.

Read

A Guide to Heuristic Website Reviews (Smashing Mag)

What You Really Get from a Heuristic Evaluation (UX Mag)

Review 10 Usability Heuristics (Nielsen Norman Group)

Conduct and document your heuristic evaluation of the Denver DMV website. Be sure to include

a high-level overview: What can a user do on the website? To what extent does the website support each goal?

high-level taskflows for each goal: register a vehicle (or renew registration), get/renew driver's license, submit a change of address, get/transfer vehicle title, find information about DMV services and operation

a high-level evaluation of the website for each of Nielsen's 10 Usability Heuristics

Print your heuristic evaluation document.

Create your SPIME poster. Pay attention to visual hierarchy.

Be sure to include

SPIME name

SPIME tagline

pitch (75–100 words: what is it, whom is it for, why is it valuable)

your storyboard!

your interaction model! (taskflow with relevant data attached to each task)

your object/ interface schematic!

boilerplate: your name, class name, instructor, semester/ date

Create your SPIME schematic.

This is a representation of the physical embodiment of your SPIME.

Use annotations where necessary.

Refine your storyboard and interaction model based on feedback you received in class.

Storyboard should depict a use case, in narrative form, of your SPIME from the perspective of the user.

Interaction model should represent the taskflow underlying the use case depicted in your storyboard. Attached to each discrete task in your taskflow, show the data necessary for carrying out of each task.

Lay out and print a draft poster (can be printed on the plotter) with the following criteria:

title

subtitle/ tagline

a descriptive pitch: what it does, who it's for, why it's useful (75–100 words)

your storyboard

Acquire

the required text

the required materials (See the course syllabus.)

Read "States of Design 04: Critical Design" by Antonelli (see Dropbox)

What is critical design?

What is its purpose?

How are SPIMEs a form of critical design?

What other examples of critical design have you seen?

Refine your storyboards based on feedback you received in class. Storyboards should

tell the story of your target user/ persona using your SPIME in your chosen context.

occur in a specific place over a certain period of time.

show what data comprises your SPIME and the interactive relationship between the  your user, the SPIME, and the data. (Is the data about the user, about the surrounding environment, or both?)

Create

an interaction model representing the taskflow that occurs in your storyboard as well as any related tasks you think are pertinent. Each task should correspond to a user-system interaction. (See second image below.)

a simple 11 x 17" layout for your storyboard and interaction model.