An introductory workshop on UX design, taught to design thinking students at the Hasso-Plattner-Institut School of Design Thinking in Potsdam, Germany. Companion website: http://paperandcode.weebly.com Software used in the workshop: Sketch, Invision

2. (is this engineer you?
that’s still a problem.)

4. Between Paper & Code
an introduction to UX design
and digital prototyping
Molly Wilson
HPI School of Design Thinking
July 2015

5. ORIENTATION
What is UX design? Is it the same as DT?
Kinds of prototypes
Training your designer’s eye
CREATE AN APP
Information Architecture
Interface Design with Sketch
Prototype Creation with InVision

6. what do we mean when we say
UX DESIGN?

7. What’s up with the users?RESEARCH
What do they need to do? What do we need them to do?PLAN
How should the product work? How should the product look?DESIGN
How are we doing?TEST
What is UX design?

8. What’s up with the users?RESEARCH
What do they need to do? What do we need them to do?PLAN
How should the product work? How should the product look?DESIGN
How are we doing?TEST
USER RESEARCH
What is UX design?

9. What’s up with the users?RESEARCH
What do they need to do? What do we need them to do?PLAN
How should the product work? How should the product look?DESIGN
How are we doing?TEST
INTERACTION DESIGN (IXD)
What is UX design?

10. What’s up with the users?RESEARCH
What do they need to do? What do we need them to do?PLAN
How should the product work? How should the product look?DESIGN
How are we doing?TEST
VISUAL (UI) DESIGN
What is UX design?

11. What’s up with the users?RESEARCH
What do they need to do? What do we need them to do?PLAN
How should the product work? How should the product look?DESIGN
How are we doing?TEST
USER TESTING
What is UX design?

12. What’s up with the users?RESEARCH
What do they need to do? What do we need them to do?PLAN
How should the product work? How should the product look?DESIGN
How are we doing?TEST
UX DESIGN
What is UX design?

13. how much
UX DESIGN
do design thinking students already know?

14. What do you already have?
• open-minded interviewing and testing
• getting a group of people on the same page
• constantly designing with a mind to testing
• quick iterative loops
• fast sketching
• cross-disciplinary teams
• not taking feedback personally
DT vs. UX

15. What else do you need?
• visual design software
• visual design sensibility (typography, composition,
color, etc.)
• geeky, tech-loving attitude
• familiarity with common UI patterns (comes with
experience)
• very organized
• HTML/CSS/JS certainly doesn’t hurt
DT vs. UX

16. Different kinds of
DIGITAL PROTOTYPES

17. Paper prototype
Tipple app, by Kyle Donnellon
Kinds of prototypes

18. Paper prototype
Pens or pencils
Paper or post-its
Scissors
Tape or glue
Kinds of prototypes

19. Interactive wireframe
Click-through prototype
Click dummy
Drug information app, by me
Kinds of prototypes

20. Interactive wireframe
Drug information app, by me
A way to draw images
A way to link images together
Sketch, Keynote, Powerpoint,
InDesign, Illustrator, Balsamiq…
Invision, Marvel, Pop…
Kinds of prototypes

21. Code prototype
Pizza Finder app, by Leigh Shevchik
Kinds of prototypes

22. Code prototype
A way to code the interface
A way to store and/or get data
HTML/CSS/JS (optionally with
a library like jQuery Mobile),
XCode, Swift…
This is not my department :)
Kinds of prototypes

23. Kinds of prototypes
? How does it feel to use?
? How should the app be organized?
? Where should stuff go on the screen?
? What actual words/images should I use?
PAPER
INTERACTIVE WIREFRAME
CODE PROTOTYPE
? What happens when people really use this?
? What are the potential technical challenges?
? How does the data you’re pulling look?
? Is this even a good idea?
? What features should it have?

24. YOU’RE DONE HERE…
Hard to change
Not realistic enough
Losing track of all the pieces of paper
Sick of drawing the same thing over and over
You need to share your idea with somebody outside your team
… BUT YOU’RE NOT READY FOR THIS
You don’t really know what you’re making yet
Specialized skill you might not have
May get you in an engineering mindset too early
Kinds of prototypes
WE’RE DOING THIS ONE.

25. train your
DESIGNER’S EYE

26. Train your designer’s eye

27. With a partner, “book a hotel” on
airbnb.com & booking.com
• What do you notice first? Second? Third?
• Do you care about the stuff you’re seeing? Why
or why not?
• What do you expect each click to do? Does it do
what you expect?
• How do you feel? Why?
• Bonus: Make some “mistakes” and see what the
website does.
10 minutesTrain your designer’s eye

28. you know where you are
you know where you can go
you know what you can do
the thing you want is right there
it looks familiar
it gives you feedback

29. YOUR CHALLENGE:
Design a mobile app that helps
individuals find and support local
businesses.

30. 1. Information Architecture
Task ID & organization; Navigation
2. Interaction Design
Tech setup & Sketch tutorial; Whirlwind tour of dos
and don’ts; Design session
3. Prototype Creation
Exploring InVision; A quick word about user testing
4. Share Out

31. what is
INFORMATION ARCHITECTURE?

32. Content-based approach
vs.
Task-based approach
1. Information Architecture

33. TOO SPECIFIC
A DESIGN GOAL, NOT A TASK
List all the tasks a user should be able to do in your product.
Search for rooms by date/location
Choose an available room
Pay for room
Compare available rooms
Get confirmation from host
Leave a review
Read or reply to a host message
Change or cancel a reservation
Tell friends about my upcoming trip
Rent out my own room
Learn what Airbnb is
See upcoming reservations
7 minutes
Favorite a room
See favorite rooms
Decide where to travel
1. Information Architecture > Task identification
Feel relaxed about travel
Edit spelling of name
TOO GENERAL
Plan travel

34. cluster similar things
together
1. Information Architecture > Task organization

35. map out the happy path
1. Information Architecture > Task organization

36. Make clusters and paths.
• Cluster similar tasks near each other.
• Name each cluster.
• Are some of the clusters actually paths? If so,
clarify the path. Paths can have branches in
them. They can also connect to each other.
10 minutes1. Information Architecture > Task organization

37. Welcome to
The adventurous, social
way to travel.
Create an Account
Does this match our IA?

38. Browse Search
FavoritesMy Profile
Inbox My Trips
3
What about this?

39. Here’s the real design. Much better!

40. nav patterns
Top menu with overflow
Examples from Smashing Magazine
1. Information Architecture > Navigation

41. nav patterns
Bottom menu with options within buttons
Examples from Smashing Magazine
1. Information Architecture > Navigation

42. nav patterns
Vertical menus
Examples from Smashing Magazine
1. Information Architecture > Navigation

43. nav patterns
Examples from Smashing Magazine
Swipe navigation
1. Information Architecture > Navigation

44. 1. Information Architecture > Navigation
Do a couple Post-It sketches with different nav
patterns.
• Look at your IA. What’s the ideal starting point for your
user?
• In your IA, how many different screens/areas does your
app have? Are they all equal? Are some more
important?
• Look at similar apps and see what they do. No shame in
copying.
• You’ll also find pattern libraries on
paperandcode.weebly.com.
7 minutes

45. kindly point your internet-machine to
paperandcode.weebly.com

46. Time to get nerdy:
Download Sketch.
Download Font Awesome.
Download Tethr.
Links available on paperandcode.weebly.com.
Do the tutorial.
25 minutes

47. a whirlwind tour of
dos and don’ts

48. Buttons and Links
• Make clear what’s
clickable
• Colors mean something
– error, warning,
success
• You should never need
to write directions for
the user (like “click to
proceed”)
Is “Change PC Settings” a button?
Image via Jakob Nielsen.
this word is
lighter gray.
can you tell?
2. Interaction Design > Dos & Dont's

49. Mobile
• Minimize typing!
• Don’t have too many
obscure tap/swipe/long-
tap interactions – people
can’t remember them all
Image: Adobe Help Center
2. Interaction Design > Dos & Dont's

50. Search & Filter
• Filters let the user refine
the search results displayed
• Make it clear how the user
can start a new search
• Use the right filter… toggle?
check? radio button?
dropdown?
Yelp iOS app
2. Interaction Design > Dos & Dont's

51. Words
• Be consistent. Don’t say
“next” on one screen and
“OK” on another one
• Match the user’s feelings.
Welcome them when
they sign up, but be
serious when they’re
spending money.
mailchimp.com
2. Interaction Design > Dos & Dont's

52. Dashboards
• Think about what people
are actually curious
about. Don’t just show
data for the sake of data.
• Don’t imply % complete
when there’s nothing to
complete (for example,
energy usage).
Google Fit app
2. Interaction Design > Dos & Dont's

53. Use real content.
Wikimedia Commons
yours truly
2. Interaction Design > Dos & Dont's

54. Don’t be “creative.”
images from skeu.it
2. Interaction Design > Dos & Dont's

55. Don’t fuss too much with visuals!
dribbble / Haziq Mir
yours truly
2. Interaction Design > Dos & Dont's

56. Create your screens.
• Use Tethr as a starting point, but don’t be afraid to
mess with it.
• Remember: copying is totally fine.
2. Interaction Design > Design Session 45 minutes

57. Link your screens together.
• Create an account and start a project at
invisionapp.com.
• Export your screens as PDF, JPG, GIF, etc. Drag & drop
them into Invision.
• Link them together with hotspots.
• Click “share” to view your prototype.
3. Prototype Creation > Exploring Invision 25 minutes

58. Three kinds of remote testing
1. You do a videoconference with the user yourself
2. You use a service that recruits and surveys users
3. You use a service that collects data about a live website
3. Prototype Creation > User Testing

59. What did you make?
• How do our different design choices change the
meaning of the concept?
• How do our different design choices change the
behaviors people are likely to do?
4. Share Out whatever we have left

60. The end… for now ♥
Continue your UX design journey at
paperandcode.weebly.com.