Strategies for User Experience Design
-
Upload
robert-stribley -
Category
Design
-
view
77 -
download
0
Transcript of Strategies for User Experience Design
![Page 1: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/1.jpg)
Strategies for User Experience DesignSchool of Visual Arts | 12 December, 2017 Robert Stribley
![Page 2: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/2.jpg)
Today’s presentation will be available on SlideShare:
www.slideshare.net/stribs
![Page 3: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/3.jpg)
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-Benz Vans, smart• FreshDirect• AT&T, Nextel• Day One, Red Cross, Smithsonian National Air & Space Museum• Pearson, Travel Channel, Women’s Wear Daily
![Page 4: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/4.jpg)
![Page 5: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/5.jpg)
About You
• 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
![Page 6: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/6.jpg)
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
![Page 7: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/7.jpg)
Agenda
![Page 8: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/8.jpg)
Morning• Responsive Design Principles• Project• User Journeys • Lunch
Agenda
![Page 9: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/9.jpg)
Afternoon• Site Maps• Team Exercise: Responsive Home Page• Team Exercise: Mobile App• Review & Feedback• Q&A
Agenda
![Page 10: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/10.jpg)
43.6%percentage of web traffic via mobile globally in 2016
up from 35.1% in 2015now half of all global pages served
65.1% of all traffic in Asia59.5% in Africa
![Page 11: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/11.jpg)
Responsive Design
![Page 12: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/12.jpg)
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
![Page 13: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/13.jpg)
![Page 14: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/14.jpg)
“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 StudyEthan Marcotte: Responsive Web Design
Responsive Design
![Page 15: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/15.jpg)
Responsive Design
Responsive Web Designby Ethan Marcotte
![Page 16: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/16.jpg)
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.
![Page 17: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/17.jpg)
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
![Page 18: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/18.jpg)
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
![Page 19: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/19.jpg)
Responsive Design
![Page 20: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/20.jpg)
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
![Page 21: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/21.jpg)
Responsive Design
![Page 22: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/22.jpg)
Responsive Design
Responsive design distributing the same modules across desktop, tablet and mobile
Desktop Tablet Mobile
![Page 23: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/23.jpg)
Responsive Design
![Page 24: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/24.jpg)
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
![Page 25: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/25.jpg)
Responsive Design
![Page 26: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/26.jpg)
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
![Page 27: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/27.jpg)
Responsive Design
![Page 28: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/28.jpg)
Responsive Design
![Page 29: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/29.jpg)
Responsive Design
Heavy mobile direction
![Page 30: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/30.jpg)
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
![Page 31: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/31.jpg)
Responsive Design
![Page 32: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/32.jpg)
Handling Tables
• 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
![Page 33: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/33.jpg)
Responsive Design
![Page 34: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/34.jpg)
Responsive Design
Desktop
Mobile - ScrollingMobile - Stacked
![Page 35: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/35.jpg)
Responsive Design
Not ideal for mobile
![Page 36: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/36.jpg)
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
![Page 37: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/37.jpg)
Responsive Design
![Page 38: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/38.jpg)
![Page 39: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/39.jpg)
Maintain Hierarchies
• Modules may be repositioned but hierarchies should be maintained
Responsive Design
![Page 40: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/40.jpg)
Responsive Design
![Page 41: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/41.jpg)
Responsive Design
![Page 42: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/42.jpg)
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
![Page 43: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/43.jpg)
Responsive Design
![Page 44: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/44.jpg)
Responsive Design
![Page 45: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/45.jpg)
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
![Page 46: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/46.jpg)
Responsive Design
![Page 47: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/47.jpg)
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
![Page 48: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/48.jpg)
Responsive Design
Avoidjustshrinkingcontent
![Page 49: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/49.jpg)
Our Project
![Page 50: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/50.jpg)
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
![Page 51: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/51.jpg)
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
![Page 52: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/52.jpg)
Personas
Our Project
![Page 53: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/53.jpg)
Competitive Review
![Page 54: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/54.jpg)
![Page 55: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/55.jpg)
![Page 56: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/56.jpg)
![Page 57: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/57.jpg)
![Page 58: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/58.jpg)
![Page 59: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/59.jpg)
![Page 60: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/60.jpg)
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
![Page 61: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/61.jpg)
User Journeys
![Page 62: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/62.jpg)
User Journeys
“Design is all about entrances and exits.”—Rem Koolhaas
![Page 63: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/63.jpg)
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 Using Visual Languages
![Page 64: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/64.jpg)
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
![Page 65: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/65.jpg)
User Journeys
![Page 66: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/66.jpg)
![Page 67: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/67.jpg)
User Journeys
![Page 68: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/68.jpg)
![Page 69: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/69.jpg)
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
![Page 70: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/70.jpg)
Features IdentifiedLet’s discuss some of the features your team identified.
User Journeys
![Page 71: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/71.jpg)
Lunch Break
![Page 72: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/72.jpg)
Afternoon• Site Maps• Team Exercise: Responsive Home Page• Team Exercise: Mobile App• Review & Feedback• Q&A
Agenda
![Page 73: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/73.jpg)
Site Maps
![Page 74: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/74.jpg)
Site Map
![Page 75: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/75.jpg)
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
![Page 76: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/76.jpg)
Review Site MapsLet’s review your site maps
Site Map
![Page 77: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/77.jpg)
Team Exercise:Design a Responsive
Home Page
![Page 78: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/78.jpg)
Design a Responsive Home PageIn your teams, design a responsive home page for MoMA’s web site
1) Discuss features needed for a homepage2) Sketch your ideas for a homepage individually3) Share your sketches with your team mates4) Collaborate on a single home page wireframe – for both
mobile and desktop
Team Exercise
![Page 79: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/79.jpg)
1) Discuss features needed for a homepage
Team Exercise 20mins
![Page 80: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/80.jpg)
2) Sketch your ideas for a homepage individually – Both desktop and mobile versions
Team Exercise 10mins
![Page 81: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/81.jpg)
3) Share your sketches with your team mates
Team Exercise 10mins
![Page 82: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/82.jpg)
4) Collaborate on a single home page wireframe – for both mobile and desktop
Team Exercise 20mins
![Page 83: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/83.jpg)
Team Exercise:Design a Mobile App
![Page 84: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/84.jpg)
Design a Mobile AppIn 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 screens3) Review your work as a team to determine what changes
should be made4) Make any necessary revisions
Team Exercise
![Page 85: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/85.jpg)
1) Discuss features needed for the app and determine the 3 key screens you want to develop
No sketching yet!
Team Exercise 20mins
![Page 86: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/86.jpg)
2) Collaborate to design 3 key screens
Team Exercise 20mins
![Page 87: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/87.jpg)
3) Review your work as a team to determine what changes should be made
4) Make any necessary revisions
Team Exercise 20mins
![Page 88: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/88.jpg)
Gather Your 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
![Page 89: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/89.jpg)
Team Exercise:Review & Feedback
![Page 90: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/90.jpg)
Q&A
![Page 91: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/91.jpg)
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 Everyday Things – Donald Norman
• Responsive Web Design – Ethan Marcotte
Video: • The Right Way to Wireframe by Russ Unger
Further Studies:• School of Visual 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
![Page 92: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/92.jpg)
My article on how to find a UX job:UX: Your Guerilla Guide to Breaking In
![Page 93: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/93.jpg)
My next class
![Page 95: Strategies for User Experience Design](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65eede7f8b9aaf638b6173/html5/thumbnails/95.jpg)
thank you