Rapid Prototyping & Lean UX Methodology

Mick McQuaid

2022-08-25

Day ONE

How to Start?

Read the syllabus?

(eventually we’ll hafta, but it’s a boring way to start)

Go around the room saying our names?

(eventually we’ll hafta, but better if we’re energized)

Get the juices flowing!

WHY?

I think it’s better to start with an exercise that reminds us of what we do, no matter how proficient we are at it.

I need to know something about you and this is a very revealing exercise.

EDIPT

  • Empathize
  • Define
  • Ideate
  • Prototype
  • Test

‹watch video›

Now do what they did!

Materials

  • three pages
  • some index cards (about 6)
  • some colored sharpies (at least 2)
  • a pen or pencil

Form Groups

  • first form a pair with someone like you (that’s for today)
  • then form a group of four with a pair that identifies differently from you (gender, ethnicity, or other identity factors) (that’s for the design challenges and can be done at the end of class)
  • this gives you support (pair) and diversity (group of four)

Protocol

  • Empathize (interview)
  • Define (list of needs)
  • Ideate (storyboard sheet)
  • Prototype (cards)

‹interview›

  • break into pairs so everyone gets a chance to be interviewer and interviewee
  • interview is about supporting new year’s resolutions
  • if you’re a trio go 2-on-1 or 1-on-2 either way

‹make a list of needs›

  • analyze the interview
  • be sure to think about what they meant, not just what they said
  • think about how you could have gotten more from the interview

‹storyboard›

  • draw four panels of cartoons on the ideate page
  • show a successful interaction with an app
  • don’t worry about the app details
  • concentrate on the user experience—what did the user feel?

‹prototype›

  • now use the index cards
  • draw a few main app screens
  • focus on making it easy for the user
  • think about the circumstances of use

test

  • we’re skipping the test phase due to time constraints
  • but keep your cards so you can test later
  • it’s never too early to test
  • but testing is the focus of a different course

our focus: prototype

iterative cycle: design, prototype, evaluate

what did we learn?

  • give me your insights about each phase and write them in your sketchbook
  • phases were
    • empathize (interview)
    • define (list)
    • ideate (storyboard)
    • prototype (cards)

‹intros›

‹syllabus›

‹canvas›

design principles

I want you to familiarize yourselves with four sets of design principles to keep in mind during the design challenges and your final exam project:

  1. Apple’s Human Interface Guidelines for iOS, macOS, and watchOS
  2. Material Design from Google
  3. Fluent Design from Microsoft
  4. Inclusive Design from Microsoft

Use any one or any combination of these guidelines in developing your prototypes. Let’s look at their websites, which are always changing so I don’t want to make slides out of them. Instead, google the above names.

‹pause to view design principles›

‹skipping Framer for now›

design challenge 1

Njideka Akunyili Crosby

photo of the artist seated

Protocol

  1. Go to the Blanton Museum of Art on campus
  2. Obtain a small stool from one of the curators
  3. Find the room on the next slide
  4. Stare at the largest painting in the room for at least ten minutes
  5. Create a prototype of a digital artifact to satisfy some need of one of the two people in the painting
  6. Submit the prototype by Monday morning

The exhibit at Blanton

Photo of Blanton museum room with Crosby exhibit

The painting itself

Photo of painting by Crosby, depicting a seated woman with a small child on her lap

How can you approach this task?

  1. First just look at the painting for ten minutes without learning anything about it.
  2. Optionally learn about the painting and its background, using the plaque beside it and web or curatorial resources
  3. Think about the environment of these two people, their needs, and values
  4. Design a prototype that reflects what you know about them

File submission

  • How can you submit a prototype created in Framer, Figma, XD, etc., to Canvas?
  • There are several ways possible
  • My preference is that you create a narrated video of navigating the prototype
  • You may lack the skill to do so
  • Should we teach that skill as part of prototyping?

Form teams to do design challenges

‹Let’s look at the google doc›

References

Baker, Rebecca. 2017. Agile UX Storytelling: Crafting Stories for Better Software Development. New York, NY: Apress. https://doi.org/10.1007/978-1-4842-2997-2.
Becker, Christopher Reid. 2020. Learn Human-Computer Interaction: Solve Human Problems and Focus on Rapid Prototyping and Validating Solutions Through User Testing. Packt Publishing.
Buxton, Bill. 2007. Sketching User Experiences: Getting the Design Right and the Right Design. San Francisco: Morgan Kaufman.
Greever, Tom. 2020. Articulating Design Decisions: Communicate with Stakeholders, Keep Your Sanity, and Deliver the Best User Experience. 2nd ed. O’Reilly Media.
Patton, Jeff. 2014. User Story Mapping. Sebastopol, CA: O’Reilly Media.
Pink, Daniel E. 2005. A Whole New Mind: Moving from the Information Age to the Conceptual Age. New York, NY: Riverhead Books.
Robert Stackowiak, Tracey Kelly. 2020. Design Thinking in Software and AI Projects: Proving Ideas Through Rapid Prototyping. Apress. https://doi.org/10.1007/978-1-4842-6153-8.

END

Colophon

This slideshow was produced using quarto

Fonts are League Gothic and Lato