# UX Prototyping:Intro

Mick McQuaid

1/11/23

Week ONE

How to Start?

(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 4)
• some colored sharpies (at least 2)
• a pen or pencil

Form Groups

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

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

what did we learn?

• 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 milestones.

1. Apple’s Human Interface Guidelines for iOS, macOS, and watchOS
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›

## File submission

• Create a website that will be used for the entire semester. You can use Framer to do so, or Github pages, or any other system
• Add seven pages to the website, one for each milestone (just the first one is needed now)
• The page for milestone 1 should contain a link to your prototype and an explanation of how it is accessible

# Form groups

‹Let’s look at the figjam file›

# 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