Lofi Prototyping

Concept Specification and Low-Fidelity Prototyping

Jennifer Mankoff

University of Washington

2025-02-03

Announcements

Learning Goals

• Announcements

• Ideating from data

• Feasibility Analysis

• Low-fidelity prototyping

Quick Reminder

Link to these slides:

• Turn on captioning
• Turn on recording

Reminders

• As you move toward implementing any part of your project, your code must go in your team gitlab repository
• We have posted the slide deck you should add to on Ed

Ideating from data

Learning Goals

• Announcements

• Ideating from data

• Feasibility Analysis

• Low-fidelity prototyping

Understanding ends in insight

understand	create	deliver
Develop empathy –> define	ideate	prototype –> test

• What you just did

Creation ends in ideas

understand	create	deliver
Develop empathy –> define	ideate	prototype –> test

• Upcoming assignment: Design Proposal
• After that Deliver (Lofi prototyping)

How to think about what you have learned so far

[A user] needs [adjective] [need] in order to accomplish [goal]

Example:

Prospective students need up-to-date and trustworthy information about accessibility and student culture to decide on a college.

How to incorporate identity

• Who is this supporting?
• Is it supporting all of their identity?
• Is it oversimplifying (i.e. assumes every user has the same disability or identity)

Example of shallow approach to identity

• Including identity in your client sample
• Deploying to clients with varied identities

Example: Multilingual DHH people use captions just like anyone else

Example of medium-depth approach

• Solution is accessible
• Solution focuses on more than one identity

Example: Multilingual DHH people need captions in at least two languages to follow a conversation

Example of integrated, intersectional approach

• Solution explores how different identities influence each other

Example: Multilingual DHH people need to control features of captions so that captions match their expertise and preferencs when watching multilingual content

In class exercise

Write down 1-2 user needs that capture multiple aspects of identity based on your interviews

Tranlating Needs to Solutions

Does your solution idea

• Increase control and agency
• Avoid harm?
• Honor client knowledge?
  • Support the client community?

Identity Design dimensions

• Identity-based goals
  • Culture
  • Language
  • Access need
  • …
• Identity-based risks
  • Racism
  • Ableism
  • Privacy/security
  • Erasure
  • …

Interface Design dimensions

• public – intimate
• static – mobile
• tactile – visual
• sound – silent
• user-generated – curated
• fixed content – evolving content
• fast – slow
• ephemeral – repeating
• spectator – actor
• full body – hands only

Exercise

1. Pick two identity-based design dimensions

2. Come up with three ways they might interact

3. Pick one interface design dimension

4. Think about how that design dimension might interact with that goal or risk

Questions to ask about your designs

• Why this form and functionality?
• What are related products that already exist? (Is your idea really novel?)
• What else could be great solutions?
• Is it feasible?

Feasibility Analysis

Learning Goals

• Announcements

• Ideating from data

• Feasibility Analysis

• Low-fidelity prototyping

Feasibility

Is the idea viable within the constraints of the class

• Technically
• Financially
• Socially appropriate
• Operationally
• Timeline

Technical Feasibility

Can be built within 4 weeks

Built –> publically deployed

• What technologies will be used
• What is your backup if those don’t work
• How well do your group members know them?

Financial Feasibility

“What will it cost?”

We have close to $0. Let us know if you need something though and we’ll discuss

Social Appropriateness

“Will it be allowed and accepted?”

• Non ableist
• Something people will accept
• Other ethical concerns?

Operational Feasibility

“Will it be possible to maintain and support long-term?” (not a requirement)

• What skills would be needed?
• What tools would be needed?
• What documentation would be needed?

Timeline feasibility

“How does the team’s availability match the needs?”

• How many hours per week can each person put in?
• What are the major milestones and decision points?
• What are the preliminary deliverables and deliverable dates?

Time Feasibility

• 2/12 Peer testing (WoZ)
• 2/19 Design Spec due
• 2/20 Start implementation [code on gitlab]
• 3/07 Working prototype due
• 3/08 Accessibility Audit starts; Prototype refinements possbile
• 3/12 Final critique & Demo
• 3/14 Peer audit due
• 3/17 Showcase
• 3/19 Code and documentation due

Difficulties of feasibility studies

• Scope may be uncertain
• Approach may be ill defined (e.g. resource estimates too rough)
• Organizational changes may be needed
• Enthusiasm may cause you to downplay risks

In class exercise

For each aspect of feasibility: What will you need? What challenges do you forsee?

• Technically
• Financially
• Socially appropriate
• Operationally
• Timeline

Low-fidelity prototyping

Learning Goals

• Announcements

• Ideating from data

• Feasibility Analysis

• Low-fidelity prototyping

Example accessible lo-fi prototype

We will work on this next Monday

Low-fi prototyping definition

Turn design ideas into testable and tangible artifacts for collecting and analyzing the user demands at the early stage.

Physical Materials

• Cardboard
• Paper
• Legos
• Play dough
• Wiki sticks
• Foam
• Clay …

Digital Prototyping

• Figma
• HTML (“rapid web prototype”)
• Screen shots
• Videos
• Word document

Be wary of “overdesigning” –> more difficult to critique

Creating an experience

Wizard-of-Oz Prototyping

• Modular interface
• Update it as the user interacts

Basic Interface

Ar interface (1/2)

Ar interface (2/2)

Kiosk experience

Bike exercise interface

How to Wizard-of-oz Virtually

• share on zoom, swapping out screen shots
• use something like Figma (if you can do it accessibly)
• Use a survey (with images and ALT text, or survey pages that have all the key content)
• Test with a similar system if you need to