Overview

Redesign two problem areas from your “Shame” site using patterns from Tidwell’s Designing Interfaces. You will build on Homework 1 – Fame & Shame where you analyzed exemplary and problematic websites.

Create low-fidelity sketches that show how your design solutions apply interface patterns. You’ll also reflect on how sketching and prototyping support design thinking and how user testing could validate your improvements.

Learning Outcomes

After completing, you will be able to...

Identify and analyze usability issues in real-world interfaces.
Apply Tidwell’s design patterns to propose effective interface solutions.
Use low-fidelity sketching and prototyping as communication and exploration tools.
Engage in constructive peer critique to refine design thinking.

Step-by-Step Instructions

Step 1 – Review videos

Bill Buxton (2007) – Sketching and Experience Design: Lecture for the Stanford HCI Seminar (CS 547) - Watch on YouTube
Low-Fidelity Mockups: Why and How - Watch on YouTube
Tidwell, J. (Designing Interfaces)
Review relevant chapters and patterns that align with your identified issues.
Saffer, D. (2010). Chapter 8: Prototyping, Testing, and Development.
Focus on how sketching and early prototypes lead to better design decisions.
Greenberg et al. (2012). Designing Interactive Systems, pp. 215–247.
Review user testing methods to understand how you would evaluate your redesigned sketches with actual users.

These materials together reinforce that sketching is an early form of prototyping, and that testing and iteration are essential to achieving effective interaction design.

Step 2 – Select Two Patterns

Review your Homework 1 – Fame & Shame results.
- Focus on two specific usability issues from your “Shame” site.
Browse Tidwell’s Designing Interfaces and find two design patterns that could fix those issues.
Do not use the Aesthetics and Minimalism principle — focus on structure, interaction, and user flow.
Make sure your chosen patterns directly align with the user problems you identified.

Example project:

Issue: The user gets lost in a multi-step process.
Tidwell Section: Getting Around: Navigation, Signposts, and Wayfinding (p. 77).
Pattern: Sequence Map (pp. 118–120).
Goal: Make progress through the tutorial more visible and intuitive.

Step 3 – Create Two Sketches

Create two sketches, one for each selected pattern. Each sketch should show how applying the pattern improves the interface.

Sketching Guidelines:

Use pen and paper (ideal), or any digital tool (PowerPoint, Word, Figma, Miro, etc.) where you can make super-fast changes.
Keep them low fidelity. These are quick, conceptual drawings that communicate layout and flow, not aesthetics.
Label key elements (buttons, menus, feedback cues, etc.) to clarify function.
Annotate briefly to explain the user’s interaction flow.

Each sketch must include:

Pattern Name (from Tidwell)
Brief Problem Statement (from your “Shame” site)
Short Explanation of how the pattern resolves the issue
(Optional) Note how you might test this redesign (drawing from Saffer or Greenberg).

Step 4 – Post and Discuss

Upload your work to the Homework 2 Forum as two separate posts, one per sketch.

Each post should:

Be titled with the pattern name and brief description (e.g., “Sequence Map – Improving Navigation Clarity”).
Contain:
- The sketch image
- A short write-up explaining:
  - The problem you identified
  - The pattern applied (with Tidwell reference)
  - How your redesign solves the problem
  - (Optional) How you might prototype or test this pattern with users

Step 5 – Comment on a Classmate’s Work

Read your classmates’ forum posts and comment on at least one other student’s sketches.

Provide specific, constructive feedback, such as:

How effectively the chosen pattern solves the problem
How clear the sketch and explanation are
Suggestions for improvement or potential user testing approaches

Combined Deliverables & Template

You will submit three total forum posts:

Post Type	Content	Example Title
Post 1	Sketch + explanation for first pattern	“Sequence Map – Progress Tracker Redesign”
Post 2	Sketch + explanation for second pattern	“Card Stack – Simplifying Onboarding Choices”
Post 3	Comment post providing peer feedback	“Feedback for Maria’s ‘Dashboard Overview’ Sketch”

Evaluation Criteria (Rubric)

Criteria	Description
Relevance of Patterns	Chosen patterns directly address the issues identified in Homework 1.
Application Accuracy	Sketches correctly and thoughtfully apply Tidwell’s principles.
Sketch Clarity	Sketches clearly communicate layout, flow, and functionality.
Integration of Theory	References Saffer and/or Greenberg concepts appropriately (e.g., prototyping, user testing).
Critical Thinking	Explanations connect design choices to usability outcomes.
Peer Engagement	Provides meaningful, specific feedback on classmates’ work.