Robert Stribley presented on strategies for user experience design. He discussed principles of responsive design such as mobile-first design, breakpoints, grids, and handling navigation and images across devices. The presentation agenda included learning about user journeys and designing responsive pages and a mobile app in teams. Guidelines for the project were to design experiences for MoMA's website and mobile app that complement each other and help visitors during their museum visit.

1. Strategies for User Experience Design
School ofVisual Arts | 12 December, 2017 Robert Stribley

2. Today’s presentation will be available on SlideShare:
www.slideshare.net/stribs

3. Robert Stribley
@stribs
Introduction
My clients have included:
• Bank of America, PNC,Wachovia
• Citibank, JPMorgan, Morgan Stanley, Oppenheimer Funds, Prudential, Smith Barney,T. Rowe Price
• Boston Scientific, Nasonex
• AMResorts, Choice Hotels, RCI, Sotheby’s International Realty
• Computer Associates, EMC
• Ford, Lincoln, Mercedes-Benz, MBFS, Mercedes-BenzVans, smart
• FreshDirect
• AT&T, Nextel
• Day One, Red Cross, Smithsonian National Air & Space Museum
• Pearson,Travel Channel,Women’s Wear Daily

5. AboutYou
• What’s your name?
• What do you do for work?
• What do you do for fun?
• If you could see one museum exhibit, what would it be?
Introduction

6. Goals of this workshop
• Learn about principles for responsive design
• Learn about user journeys and create a detailed
user journey as a team
• Brainstorm and design a responsive home page as
a team
• Brainstorm and design a mobile app experience as
a team
Introduction

7. Agenda

8. Morning
• Responsive Design Principles
• Project
• User Journeys
• Lunch
Agenda

9. Afternoon
• Site Maps
• Team Exercise: Responsive Home Page
• Team Exercise: Mobile App
• Review & Feedback
• Q&A
Agenda

10. 43.6%percentage of web traffic via mobile globally in 2016
up from 35.1% in 2015
now half of all global pages served
65.1% of all traffic in Asia
59.5% in Africa

11. Responsive Design

12. Responsive web design is an
approach to web design which
makes web pages render well on a
variety of devices and window or
screen sizes. —Wikipedia
Responsive Design

14. “Rather than tailoring disconnected designs to each of an
ever-increasing number of web devices, we can treat them as
facets of the same experience.We can design for an optimal
viewing experience, but embed standards-based
technologies into our designs to make them not only more
flexible, but more adaptive to the media that renders them.
In short, we need to practice responsive web design.”
– Ethan Marcotte, Responsive Web Design,A List Apart
Self Study
Ethan Marcotte: Responsive Web Design
Responsive Design

15. Responsive Design
Responsive Web Design
by Ethan Marcotte

16. Responsive Design
The Responsive Web Design Podcast is co-hosted
by Karen McGrane and Ethan Marcotte.
In each episode, they interview the people who
make responsive redesigns happen.

17. Responsive Design Characteristics
• Mobile first
• Break points
• Grids
• Handling navigation
• Handling tables
• Maintain content and features
• Maintain hierarchies
• Images
• Text
• Dropping content or features
Responsive Design

18. Mobile First
• Design for “mobile first”—the smallest device first, then work up
from there
• The smallest device may no longer be a mobile phone
• “Mobile first” may encourage simple design, but it need not be
simplistic
Responsive Design

19. Responsive Design

20. Break Points
• Responsive designs adjust at different “break points” corresponding to the
dimensions of various devices, typically desktop, tablet and mobile
• However, they’re intended to be content, not device-specific
• Typically at least two:
– e.g. 320px for mobile, 768px for tablet (portrait), desktop
– e.g. 320px for mobile, 768px for tablet (portrait), 1280px for desktop
• May also add “minor breakpoints” to address specific issues at various
dimensions
Responsive Design

21. Responsive Design

22. Responsive Design
Responsive design distributing the same modules across desktop, tablet and mobile
Desktop Tablet Mobile

23. Responsive Design

24. Grids
• Grids are fluid within a responsive design—they change according to
screen dimensions
• For example, a desktop design might utilize a 12-column grid, tablet a
9-column grid, and mobile a 4-column grid
• Depending on the screen, modules may shift both in size and in
placement
Responsive Design

25. Responsive Design

26. Handling Navigation
• Navigation may be repositioned
• Often at tablet, especially mobile
• In desktop, elements of the navigation can be activated via hover instead
of click, since users are utilizing a cursor; whereas in tablet and mobile,
these main nav elements must be activated via touch
• Design navigation to be touch friendly—e.g. large, tactile targets
• Beware of the “hamburger menu”
Responsive Design

27. Responsive Design

28. Responsive Design

29. Responsive Design
Heavy mobile direction

30. Handling Navigation –Tabs
• Tabs may just reduced in size
• They can also be replaced with
– Accordions
– Dropdowns
– Carousel slides
• Consider the content to determine, which of these solutions
works best
Responsive Design

31. Responsive Design

32. HandlingTables
• Simplest solution for handling tables with multiples columns is to
reduce the number of columns (to one if necessary) and stack them
in mobile.
• You can also allow horizontal scrolling
• Or turn columns into individual slides users can swipe through
Responsive Design

33. Responsive Design

34. Responsive Design
Desktop
Mobile - Scrolling
Mobile - Stacked

35. Responsive Design
Not ideal for mobile

36. Maintain Content & Features
• The goal: Wherever possible, maintain content and features
across devices
• Must have a strong rationale for dropping any content or
features at the mobile level
• Also, reducing content can reduce keywords, which can reduce
your site’s ranking on Google
Responsive Design

37. Responsive Design

39. Maintain Hierarchies
• Modules may be repositioned but hierarchies should be maintained
Responsive Design

40. Responsive Design

41. Responsive Design

42. Images
• Generally, images should be “fluid”
• They will scale down in size as the screen resolution changes
• Additionally, they may maintain their size, but be cropped if
they’re primarily decorative
• In this case, images must be selected carefully so that important
elements of them aren’t automatically cropped out
• In some cases, if the image isn’t needed, it may be dropped
entirely for mobile devices
Responsive Design

43. Responsive Design

44. Responsive Design

45. Text
• Text size is maintained where possible, though headings and
headlines may be reduced in size
• Text blocks will change in width from desktop to mobile
• However, keep lines of text to a maximum of 70 or 80 characters
• Do not automatically hyphenate text
Responsive Design

46. Responsive Design

47. Dropping Content or Features
• Whenever possible, avoid dropping content or features
• Occasionally, content or features can be dropped to save screen
real estate or if they’re not device appropriate
• Establish a clear rationale and principles for making such changes
Responsive Design

48. Responsive Design
Avoid just shrinking content

49. Our Project

50. Develop a museum experience for MoMA which utilizes both
a responsive desktop design and a mobile app experience, so
users can engage with it both at home on their desktop
computer in preparation for their trip and during their visit via
mobile app.
Our Project

51. Guidelines
• Since the responsive website will display on a mobile phone,
the app must not simply repeat the website content
• Thought should be given specifically to how the app can help
visitors during their onsite visit, but provide some value to
users before and after their trip, too
• Visitors will have comprehensive access to Wi-Fi throughout
the entire museum space
Our Project

52. Personas
Our Project

53. Competitive Review

60. Key Findings
• Ability to highlight multiple exhibits
• Access to collections
• Display of upcoming events
• Focus on membership
• Visitor information
• Learning and education information
• Ability to view different locations
• Anything else?
• Any key differentiators?
Competitive Review

61. User Journeys

62. User Journeys
“Design is all about
entrances and exits.”
—Rem Koolhaas

63. User Journeys
Definition:
“A user journey, or journey map, visualizes a path or flow through
a Web site, application, or service experience—from a starting
point to an end objective—based on the user’s motivations and
experiences. Journey mapping helps us to create a mental model
of an experience that the user goes through to achieve a goal.
This valuable information lets us document and visualize existing
paths that the user takes and, in turn, analyze and improve upon
them.”
- Shean Malik, Mapping User Journeys UsingVisual Languages

64. User Journeys
Methodology:
• Keep developed personas in mind
• Determine users’ primary needs
• Consider their pain points as well
• Brainstorm different ways to help their needs and address their pain points
• Develop a journey according to a time-based progression
• Consider the various moments within, which can be handled digitally
• Create relevant hooks and calls to action (CTAs)
• Strike a balance between freedom of movement and an ideal path
Self Study
“An introduction to user journeys” - Jason Hobbs, September 6, 2005, Boxes & Arrows

65. User Journeys

67. User Journeys

69. Class Exercise:
Develop a user journey, which incorporate features
applicable to Andy’s persona
• Divide into teams
• Discuss what you expect a typical user to do
– At home
– At the museum
– With a specific exhibit
– Back home
• Develop a high-level diagram, which depicts Andy’s
journey
User Journeys
20mins

70. Features Identified
Let’s discuss some of the features your team identified.
User Journeys

71. Lunch Break

72. Afternoon
• Site Maps
• Team Exercise: Responsive Home Page
• Team Exercise: Mobile App
• Review & Feedback
• Q&A
Agenda

73. Site Maps

74. Site Map

75. Class Exercise:
Develop 2 high-level site maps based on features you
discovered in your user journey, plus any additional
content needed to flesh out the experience.
• One for the MoMA web site
• One for the MoMA mobile app
Site Map
20mins

76. Review Site Maps
Let’s review your site maps
Site Map

77. Team Exercise:
Design a Responsive
Home Page

78. Design a Responsive Home Page
In your teams, design a responsive home page for MoMA’s web site
1) Discuss features needed for a homepage
2) Sketch your ideas for a homepage individually
3) Share your sketches with your team mates
4) Collaborate on a single home page wireframe – for both
mobile and desktop
Team Exercise

79. 1) Discuss features needed for a homepage
Team Exercise
20mins

80. 2) Sketch your ideas for a homepage individually
– Both desktop and mobile versions
Team Exercise
10mins

81. 3) Share your sketches with your team mates
Team Exercise
10mins

82. 4) Collaborate on a single home page wireframe
– for both mobile and desktop
Team Exercise
20mins

83. Team Exercise:
Design a Mobile App

84. Design a Mobile App
In your teams, design a mobile app for MoMA
1) Discuss features needed for the app and determine the
3 key screens you want to develop
2) Collaborate to design 3 keys screens
3) Review your work as a team to determine what changes
should be made
4) Make any necessary revisions
Team Exercise

85. 1) Discuss features needed for the app and determine the
3 key screens you want to develop
No sketching yet!
Team Exercise
20mins

86. 2) Collaborate to design 3 key screens
Team Exercise
20mins

87. 3) Review your work as a team to determine what changes
should be made
4) Make any necessary revisions
Team Exercise
20mins

88. GatherYour Materials
If you’re finished, start collecting your app and responsive
homepage wires so you can present them to the class as a
team
Team Exercise

89. Team Exercise:
Review & Feedback

90. Q&A

91. Books:
• Information Architecture for the World Wide
Web – Louis Rosenfeld, Peter Morville
• Information Architecture: Blueprints for the
Web – Christina Wodtke,Austin Govella
• The Elements of User Experience – Jesse
James Garrett
• Designing Web Navigation: Optimizing the
User Experience – James Kalbach,Aaron
Gustafson
• Design of EverydayThings – Donald
Norman
• Responsive Web Design – Ethan Marcotte
Video:
• The Right Way to Wireframe by Russ Unger
Further Studies:
• School ofVisual Arts
• Continuing Ed classes
• MFA in Interaction Design
• Pratt – Course in Information Design
• Rosenfeld Media
• General Assembly
• Skillshare
• The Information Architecture Institute
• The IA Summit
• Nielsen Norman Group
• User Interface Engineering
Additional Resources
Local Events:
• IA Meetup
• Brooklyn UX
• Content Strategy Meetup
Web Sites:
• Alertbox
• A List Apart
• Boxes & Arrows
• wireframes.tumblr.com

92. My article on how to find a UX job:
UX: Your Guerilla Guide to Breaking In

93. My next class

94. Slideshare address:
http://www.slideshare.net/stribs
@stribs
@stribley@outlook.com

95. thank you