LoFi Prototyping

# LoFi Prototyping
Develop a storyboard for milestone 1

cse482a: Fall 2026; Jennifer Mankoff (Last Edited: 2026-10-12). <a href="/courses/cse482a/26au/slides/lofi.html">Live View: /slides/lofi.html</a>

Important Reminder: check zoom & captioning

---

<div class="slide-outline" style="margin: 1em 0; padding: 1em; background: #f5f5f5; border-radius: 5px;">
<h2 style="margin-top: 0;">
  
  
    Outline
  
  
</h2>
    
  <ul style="list-style-type: none; padding-left: 0;">
  
  
  
  
  
  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
      
        
        
      
    
      
        
        
          
            
            
              
              
                
                  
                  <li><a href="#3">Storyboarding</a> (Slide 3)</li>
                
                
              
            
          
        
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
    
    
    
    
  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
      
        
        
      
    
      
        
        
          
            
            
              
              
                
                  
                  <li><a href="#16">Feasibility Analysis</a> (Slide 16)</li>
                
                
              
            
          
        
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
    
    
    
    
  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
      
        
        
      
    
      
        
        
          
            
            
              
              
                
                  
                  <li><a href="#26">Lofi Prototyping</a> (Slide 26)</li>
                
                
              
            
          
        
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
    
    
    
    
  
  </ul>
</div>

---
class: center, middle, inverse
# Announcements

---
class: center, middle, inverse
# Storyboarding

---
## 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.

---
## Your first design task is scope

To fill in this sentence you need to decide on tasks to focus on.
- Each task should be specific
- Taken together your tasks should cover an interesting area of your overall design space
- You should aim for at least 3

---
## In class exercise: Pick a task for your project

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

---
## How to incorporate disability justice in design

- 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)
- Pick any other principal and ask similar questions

---
## Example: 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

---
## 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

---
## 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

As a team, pick a disability justice principal relevant to your project

How might it influence your design approach?

---
## Storyboarding

![:img "Sketches of five blank rectangles", 60%, height](img/studies/blank-storyboard.png)

---
## About five frames per task

![:img "Five frames. Each shows an image that captures one of the following sentences: A person passes by an advertisement board. The notice an announcement that says 'New!'. They hold up a flip phone and snap a photo of a barcode. The phone loads a webpage with information about the product. They put away the phone and leave. ", 60%, height](img/studies/sample-storyboard.png)

.footnote[from Sketching User Experiences: The Workbook. Chapter 4.4: Narrative Storyboards. by Greenberg, Carpendale, Marquardt, and Buxton]

---
## Storyboard

- Show the whole interaction
- Show the beginning and end
- Create one storyboard per task
- Document the specific AEIOU details for each storyboard
- Document any disability justice principals you considered (define, explain)

---
## Questions to ask about your designs

Storyboarding, via AEIOU and disability justice, should help you decide on form and functionality. But there are other things that matter. You should iterate on this

- What are related products that already exist? 
- What else could be great solutions?
- Is it feasible?

---
class: center, middle, inverse
# Feasibility Analysis

---
## Viability has many facets
Is the idea viable *within the constraints of the class*

- Technically
- Financially
- Socially appropriate
- Operationally
- Timeline

---
## Technical Feasibility

Can be built within about 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?"

- Beyond disability, is it something people will accept
- Ethical concerns?
- Capacity 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

- 10/19 Milestone 1 due (problem and design concept)
- 10/22 Start building your prototype [code on GitLab]
- 11/4 Milestone 2 due: working prototype and architecture; Demo Day in class
- 11/5 Start your study and accessibility findings
- 11/16 - 11/20 Individual accessibility audit (due 11/20)
- 11/18 Milestone 3 due: study and accessibility findings
- 12/2 Milestone 4 due: final concept and VPAT
- 12/7 Final poster due
- 12/9 Poster session

---
## 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

---
class: center, middle, inverse
# Lofi Prototyping

---
## Lofi iteration can be helpful

Not required, but your team may value dividing up the work 
- Some can start identifying coding approaches
- Others can define interface and workflow

---
## Example accessible lo-fi prototype

![:img A piece of cardboard is decorated with wiki sticks and play dough to create tactile indicators of an interface for a blind person, 60%, height](img/lofi/smartphone.jpg)

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

![:img A cardboard interface sits on a table. Surrounding it are screens (drawings on paper) that can rapidly be swapped out, 60%, height](img/lofi/woz-interface.png)

---
## Ar interface (1/2)

![:img A closeup of a person looking through a see-through screen made of cardboard. An arrow and text on the screen are pointing at a building in the background, 60%, height](img/lofi/woz-ar1.png)

---
## Ar interface (2/2)

![:img A different person is interacting with the cardboard. It is clear from this viewpoint that the screen is actually a roll of semi-transparent plastic that a wizard is sliding through the screen to update the image, 60%, height](img/lofi/woz-ar2.png)

---
## Kiosk experience

![:img Two panels. The first shows a person walking up to a kiosk made of paper and cardboard and interacting it. The second shows a wizard modifying the kiosk to make it react to the user, 60%, height](img/lofi/wizard-experience.png)

---
## Bike exercise interface

![:img A set of four panels shows a person riding a bike in a cardboard kiosk. a cardboard screen is visible with an image on it. A wizard updates and points at things to react to the users actions, 60%, height](img/lofi/woz-bike.png)

---
## 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