UX Prototyping:
Intro

Mick McQuaid

1/11/23

Week 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

What the heck does that mean? (Empathize, Define, Ideate, Prototype, Test)

• Empathize
• Define
• Ideate
• Prototype
• Test

That’s one view of the design thinking process. I’d like you to engage in that process today.

‹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?

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

I casually mention on this slide that you should write something in your sketchbook! If you don’t keep a sketchbook, consider these questions: Are you a designer? Do you aspire to be a designer? I refer you to Pink (2005), which is a book asking people to learn from designers. One of the recommendations in the book is to keep a sketchbook. In the sketchbook, you write and sketch but you don’t paste in elements like printouts of digitally created art. Instead, you develop your eye-hand coordination by doing manual sketching and writing. At least two fifths of a typical designer’s time is spent at the whiteboard, so this activity can support a lot of your work.

‹academic assistant›

‹intros›

‹syllabus›

‹canvas›

I’ve put a daunting amount of reading on Canvas. I typically expect grad students to pace themselves on reading, so I’m not going to say too much about it except that most of it can be read piecemeal. The exception is Baker (2017), which is a novel about UX in a world with zombies. I think she wrote it that way to keep your interest up, but the fact is that it is a single continuous story that you should probably read through in a linear manner. That’s not the case for a lot of the other books that can, for example, be consulted when you’re working on a particular kind of milestone.

I should add that the librarian told me that I’m only allowed to put three chapters of any book on Canvas, so I did that with all the books. You can find some of them on the library website and you may want to buy some, although a few of them are absurdly expensive. I can not advocate that you go to libgen and download the books for free, partially because it may be illegal to do so. The courts ruled at one time that you had to deprive someone of ownership for an act to be considered theft. That hasn’t stopped the music and publishing industries from labeling downloading as theft, though, and they have enjoyed some handsome out of court settlements over file sharing. Another reason you may disapprove of libgen (as well as scihub) is that it is hosted in Russia, not the most popular country right now. Further, you may feel that the academic publishing industry is not a bunch of parasitic gangsters and instead feel that they fairly compensate authors for their work. You may not feel that universities should cut out the middleman and take over academic publishing. For all these reasons, I do not endorse libgen and only mention it for the sake of raising issues about publishing.

A few of the books are the topics of lectures, namely Patton (2014), Greever (2020), Buxton (2007), Becker (2020), and Robert Stackowiak (2020). You may want to prioritize these in your reading.

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

I’m high on Framer because of its excellent JavaScript output, which cuts down on cycle time. You will often hear me say that cutting down cycle time is a high priority in rapid prototyping. Framer easily beats Figma in this regard, but Framer only recently acquired a free tier, so Figma has captured most of the mindshare. I want to expose you to Framer as well, but the Framer tutorial we will follow isn’t ready yet.

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