Downloaded 110 times
![WHAT IS USER EXPERIENCE DESIGN [UXD]?
“User experience design (UXD or UED) is the process of enhancing user
satisfaction by improving the usability, ease of use, and pleasure provided in the
interaction between the user and the product.” — Wikipedia
“The design of anything independent of medium or across [device] with human
experience as an explicit outcome and human engagement as an explicit goal”
— Jesse James Garrett, co-founder of Adaptive Path
“User experience encompasses all aspects of the end-user's interaction with the
company, its services, and its products.” — Nielsen Norman Group](https://image.slidesharecdn.com/uxbootcampseptember2015-150925222525-lva1-app6891/75/UX-Bootcamp-Fall-2015-General-Assembly-9-2048.jpg)
![TRADITIONAL UX PROCESS [“WATERFALL”]
‣ Discover
‣ Define
‣ Design
‣ Develop
‣ Deliver](https://image.slidesharecdn.com/uxbootcampseptember2015-150925222525-lva1-app6891/75/UX-Bootcamp-Fall-2015-General-Assembly-12-2048.jpg)
![TOPIC MAP EXERCISE! - 50 MINUTES
‣ You are going to do a user interview about grocery shopping in order to
better understand users’ habits + desires
‣ Prepare a topic map covering all subjects you want to know [20m]
‣ Split into groups of 3
‣ 1 person will interview, 1 will record notes on post it notes, 1 person
will be interviewed
‣ We will rotate every 10 minutes
‣ Be prepared to share!](https://image.slidesharecdn.com/uxbootcampseptember2015-150925222525-lva1-app6891/75/UX-Bootcamp-Fall-2015-General-Assembly-54-2048.jpg)
![PERSONAS: WHY THEY’RE IMPORTANT
‣ Communication tool
‣ Useful for summarizing what you know about your user
‣ Will help to highlight pain points + opportunities to tailor your product to
your user
‣ Keep your product focused on your key users rather than building for the
whole world.
‣ [Keep in mind it’s just a framework, not a roadmap]](https://image.slidesharecdn.com/uxbootcampseptember2015-150925222525-lva1-app6891/75/UX-Bootcamp-Fall-2015-General-Assembly-63-2048.jpg)
![PERSONAS: WHAT SHOULD BE INCLUDED
‣ Root it in reality not your imagination
‣ Goals / Needs
‣ Behaviors
‣ Biographical information [name, age, gender, location, income, etc]
‣ Optionally assign it personality traits [again, based on your research]](https://image.slidesharecdn.com/uxbootcampseptember2015-150925222525-lva1-app6891/75/UX-Bootcamp-Fall-2015-General-Assembly-64-2048.jpg)
![PROVISIONAL PERSONAS: EMPATHY MAP
‣ What does she Think or Feel? [What matters?]
‣ What does she See? [environment, friends, solutions in the market]
‣ What does she Say + Do? [appearance, activities, behaviors]
‣ What does she Hear? [What do friends, boss, colleagues say?]
‣ Challenges [barriers, fears, frustrations, obstacles]
‣ Needs [wants, needs, desires]](https://image.slidesharecdn.com/uxbootcampseptember2015-150925222525-lva1-app6891/75/UX-Bootcamp-Fall-2015-General-Assembly-75-2048.jpg)
Uploaded byJacklyn Burgan
UX Bootcamp Fall 2015 General Assembly
This document provides an overview of a UX design bootcamp. It begins with introductions from the instructor, Jacklyn Burgan. The bootcamp will cover the basics of UX design through building a mobile grocery shopping app, including competitive analysis, user research, wireframing, and user testing. Key topics that will be covered include defining UX design and usability, discussing the UX process and lean UX, conducting user interviews and analyzing research findings to create personas. Challenges with personas and an introduction to wireframing are also summarized.
More Related Content
Similar to UX Bootcamp Fall 2015 General Assembly
![UX + BA: Working Together In Harmony [updated]](https://cdn.slidesharecdn.com/ss_thumbnails/webafternoonuxedition-150831135046-lva1-app6892-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BROCHURE] Italy Tour Project | @SlideON](https://cdn.slidesharecdn.com/ss_thumbnails/brochure8-251215152319-2805af68-thumbnail.jpg?width=640&height=640&fit=bounds)
UX Bootcamp Fall 2015 General Assembly
- 1. UXD BOOTCAMP JACKLYN BURGAN, UXRESEARCHER + STRATEGIST
- 2. ‣ Jacklyn Burgan ‣UX Researcher + Strategist ‣ @playfulpixel // @LadiesThatUXATL HELLO
- 3. NOW, YOU! UXD BOOTCAMP 1- YOUR NAME 2 - YOUR JOB 3 - WHY YOU’RE HERE
- 4.
- 5. ‣ Previous UXBootcamp: http://bit.ly/19i4uvc ‣ Today’s slides: SLIDES!
- 6. ‣ Introduction touser experience design + usability ‣ Introduction to user experience exercises + outcomes WHAT WE’LL COVER TODAY
- 7. ‣ We aregoing to build the mobile experience for a grocery shopping app ‣ We’ll cover the basics of: ‣ competitive analysis ‣ user research ‣ wireframing ‣ user testing HOW WE’LL COVER IT
- 8. USER EXPERIENCE DESIGN +USABILITY UXD BOOTCAMP
- 9. WHAT IS USEREXPERIENCE DESIGN [UXD]? “User experience design (UXD or UED) is the process of enhancing user satisfaction by improving the usability, ease of use, and pleasure provided in the interaction between the user and the product.” — Wikipedia “The design of anything independent of medium or across [device] with human experience as an explicit outcome and human engagement as an explicit goal” — Jesse James Garrett, co-founder of Adaptive Path “User experience encompasses all aspects of the end-user's interaction with the company, its services, and its products.” — Nielsen Norman Group
- 10. WHAT IS USABILITY? “Usabilityis a quality attribute that assesses how easy user interfaces are to use. The word "usability" also refers to methods for improving ease-of-use during the design process.” — Nielsen Norman Group “Usability is the ease of use and learnability of a human-made object. The object of use can be a software application, website, book, tool, machine, process, or anything a human interacts with.” — Wikipedia
- 11.
- 12. TRADITIONAL UX PROCESS[“WATERFALL”] ‣ Discover ‣ Define ‣ Design ‣ Develop ‣ Deliver
- 13. DISCOVER ‣ Gather information ‣Brainstorming ‣ Competitive analysis ‣ Define the project scope ‣ UX deliverables: personas + user scenarios
- 14. DEFINE ‣ Developing interactionmodel ‣ Define the content + functionality requirements ‣ Define information architecture ‣ Create a project plan ‣ UX deliverables: product requirement document
- 15. DESIGN ‣ Create paperprototype / sketches ‣ Usability evaluation ‣ Create wireframes ‣ Visual design explorations ‣ Visual design approval ‣ UX deliverables: sitemap, user flows, wireframes + UI designs
- 16. DEVELOP ‣ Architecture design ‣UML diagram / class diagram ‣ Daily scrum ‣ Code iteration cycles ‣ Interim installers ‣ Release management ‣ Unit testing ‣ Code refactoring ‣ Documentation ‣ UX deliverables: No key UX deliverables at this stage.
- 17. DELIVER ‣ Use cases ‣Test cases ‣ Testing ‣ Regression testing ‣ Test reports ‣ Build releases ‣ UX deliverables: usability test report
- 18.
- 19. UX SHOULD BEITERATIVE Discover Define Develop Deliver Design
- 20.
- 21. LEAN UX STORYFLOW
- 22. THERE’S AN APP FORTHAT. UXD BOOTCAMP
- 23. COMPETITIVE ANALYSIS Your companyCompetitor 1 Competitor 2 Competitor 3 Overview & profile Competitive advantage Target market Market share Market strategies ‣ Download a competitive analysis template from Client Heartbeat.
- 24. ‣ What grocerystores have apps that you’ve seen? ‣ What makes a good/bad grocery shopping experience? ‣ What other activities surround grocery shopping? LET’S TALK ABOUT GROCERY APPS
- 33.
- 34. WHY UNDERSTAND OURUSERS? ‣ So you don’t build a snow machine for an eskimo ‣ Ensures you’re solving a problem that exists in peoples lives ‣ Key to building a product that is tailored to its audience
- 36. WHAT DO WENEED TO KNOW TO UNDERSTAND OUR USERS? ‣ Why? ‣ Who? ‣ What? ‣ Where? ‣ When? ‣ How?
- 37.
- 38. WHAT DO WENEED TO KNOW TO UNDERSTAND OUR USERS? ‣ Why are they coming to us? ‣ Goals? ‣ What are their needs?
- 39. WHAT DO WENEED TO KNOW TO UNDERSTAND OUR USERS? ‣ Who are our users? ‣ Businesses vs. consumers? ‣ Demographics? ‣ Background knowledge? ‣ Understanding of terminology?
- 40. WHAT DO WENEED TO KNOW TO UNDERSTAND OUR USERS? ‣ When are they visiting? ‣ Morning or evening? ‣ When they’re in a crisis? ‣ Daily? ‣ Monthly?
- 41. WHAT DO WENEED TO KNOW TO UNDERSTAND OUR USERS? ‣ What are their habits? ‣ Do they use social networks? ‣ Content producers or consumers? ‣ What you ask depends on the product
- 42. WHAT DO WENEED TO KNOW TO UNDERSTAND OUR USERS? ‣ How are they accessing? ‣ Desktop or mobile? ‣ Tablet? ‣ Over the phone or in person?
- 43. UX BOOTCAMP HOW TOGET THAT INFORMATION
- 44. HOW DO WEGET THAT INFORMATION? ‣ Research, Observe! ‣ Surveys ‣ User Interviews ‣ Focus Groups ‣ Existing data
- 45. UX RESEARCH: SURVEYS ‣+ Gather large numbers of responses very quickly ‣ + Get quantitative or qualitative feedback immediately ‣ - Hard to get rich responses ‣ - Often learn about problems but not why they occur
- 46. UX RESEARCH: USERINTERVIEWS ‣ + One-on-one discussion ‣ + Can gather rich targeted information ‣ + Flexible; can explore tangents or unexpected areas ‣ - Time consuming to organize, run + analyze
- 47. UX BOOTCAMP HOW TOCONDUCT USER INTERVIEWS
- 48. FINDING PARTICIPANTS ‣ Whereto find them: ‣ Coffee shops ‣ Asking your network ‣ Social networks and forums ‣ Craigslist ads
- 49. HOW TO ASKQUESTIONS ‣ Be wary of priming ‣ Don’t ask leading questions ‣ Never ask about intention, always probe behavior ‣ - “How many times do you plan to go to the gym?” ‣ + “How many times have in the last 3 months?”
- 50. FOCUS ON SPECIFICINSTANCES ‣ + “Have you ever had ________ problem”? ‣ + “Tell about the last time you ....” ‣ Avoid generalizations: ‣ - “What do you usually ...”
- 51. KEEP THEM TALKING ‣+ “Tell me more about that” ‣ + “What do you mean by...” ‣ + “Help me understand better..” ‣ Never put words into their mouth ‣ - “So do you mean...”
- 52. PREPARING AN INTERVIEW ‣Record interviews if possible ‣ Always ask permission ‣ Explain why + that it’s for private use ‣ Take notes but remain focussed on participant ‣ Focus on topics rather than list of questions ‣ Should be a conversation ‣ If you divert off topic: “That’s really interesting. Can you tell me more about ...”
- 53. TOPIC MAPS +DISCUSSION GUIDES
- 54. TOPIC MAP EXERCISE!- 50 MINUTES ‣ You are going to do a user interview about grocery shopping in order to better understand users’ habits + desires ‣ Prepare a topic map covering all subjects you want to know [20m] ‣ Split into groups of 3 ‣ 1 person will interview, 1 will record notes on post it notes, 1 person will be interviewed ‣ We will rotate every 10 minutes ‣ Be prepared to share!
- 55.
- 56.
- 57. CAPTURING INSIGHTS ‣ Straightafter interview ‣ Write down or identify the 3 most important insights ‣ When reviewing recording/notes ‣ Write out each interesting point on individual post it
- 58. IDENTIFYING TRENDS BYCREATING AFFINITY MAPS ‣ Once you have all of your data, it’s time to analyze ‣ Goal is to extract common trends / themes ‣ Post-Its are your friends
- 59. AFFINITY MAP EXERCISE!- 30 MINUTES ‣ Everyone should have a pile of post it notes ‣ One group will place their notes on the wall + read out the insight ‣ If another group has a similar insight they will place it on top ‣ Repeat until all the post it notes are placed on the wall ‣ Create themes from the grouped insights
- 60.
- 61.
- 62. PERSONAS ‣ An example,generally fictional, of a person within your user base ‣ Created by conducting user research + summarizing trends into one or more archetypes
- 63. PERSONAS: WHY THEY’REIMPORTANT ‣ Communication tool ‣ Useful for summarizing what you know about your user ‣ Will help to highlight pain points + opportunities to tailor your product to your user ‣ Keep your product focused on your key users rather than building for the whole world. ‣ [Keep in mind it’s just a framework, not a roadmap]
- 64. PERSONAS: WHAT SHOULDBE INCLUDED ‣ Root it in reality not your imagination ‣ Goals / Needs ‣ Behaviors ‣ Biographical information [name, age, gender, location, income, etc] ‣ Optionally assign it personality traits [again, based on your research]
- 65. PERSONAS: SCENARIOS ‣ Shortstories about a person using you product to achieve a goal ‣ Describes what they would do + why they would do it ‣ Independent of interface ‣ Gives the context in which its used
- 66.
- 67.
- 68.
- 69.
- 70. PROVISIONAL PERSONAS ‣ ProvisionalPersonas are personas created without primary research ‣ They can be created through empathy mapping techniques ‣ They need to be validated as soon as possible with real users as part of the build, measure, learn loop
- 71.
- 72. PROVISIONAL PERSONAS: EMPATHYMAP COMPLETED
- 73. What does thisperson THINK and FEEL? What does this person SEE? What does this person HEAR? What are this person’s NEEDS? What are this person’s CHALLENGES?
- 74. PROVISIONAL PERSONAS EXERCISE!- 30 MINUTES ‣ Treat your table as a team ‣ Draw an empathy map on your table ‣ Scenario: You’re hosting Thanksgiving at your house for 12 people. ‣ Begin filling out your empathy map based on insights from your interviewing exercise and conversations with your team.
- 75. PROVISIONAL PERSONAS: EMPATHYMAP ‣ What does she Think or Feel? [What matters?] ‣ What does she See? [environment, friends, solutions in the market] ‣ What does she Say + Do? [appearance, activities, behaviors] ‣ What does she Hear? [What do friends, boss, colleagues say?] ‣ Challenges [barriers, fears, frustrations, obstacles] ‣ Needs [wants, needs, desires]
- 76.
- 77. CHALLENGES OF PERSONAS ‣They can be artificial / abstract / fictitious ‣ They are a composite sketch of 10 people all rolled into 1 ‣ They don’t have opinions ‣ They can’t talk back, answer questions, or give feedback
- 78.
- 79.
- 80. ‣ Focus onStructure. ‣ Visualize Ideas. ‣ Define Project Scope. ‣ Clarify Hierarchy. ‣ Identify Content Needs. ‣ Promote Discussion. ‣ Reduce Problems Early. WHAT IS A WIREFRAME? http://themetaq.com/articles/wireframe-is-worth-a-thousand-spreadsheets-wireframing-101
- 81. WIREFRAMES ARE FUNFOR EVERYONE! ‣ Designers -> useful to understand patterns and visual hierarchy while creating awesome products. ‣ Developers -> inform the requirements of what they’re building. ‣ Clients -> as a tool to make sure their needs and goals are met. They are a great way to help everyone understand the project goals.
- 82. WHEN TO USEWIRES ‣ EVERY DAY. But specifically, when you’re having trouble agreeing with your stakeholder, when your design is more than two pages deep, etc.
- 83. HOW FLEXIBLE DOWIREFRAMES NEED TO BE? ‣ Once the wireframe has been approved, does the comp need to match pixel perfect? The answer is: IT DEPENDS!
- 84. EXERCISE: INTRO TOWIREFRAMES ‣ Using the reference on the board, sketch what you see on the next screen. ‣ Here’s an example of a wireframe.
- 86. EXERCISE: DESIGN AGROCERY APP HOME SCREEN - 30 MINUTES ‣ What makes a good/bad grocery app experience? ‣ What elements did people say they liked when you talked to them? ‣ What other activities surround grocery shopping and how can you design for them? ‣ What groups/themes did you identify in your affinity map? ‣ How does a user navigate from the home screen to create a shopping list? ‣ Make sure you conserve space on your desk for a second wireframe!
- 87. EXERCISE: DESIGN THESHOPPING LIST - 30 MINUTES ‣ How do people interact with shopping lists in the store? ‣ What makes a good/bad grocery app experience? ‣ What elements did people say they liked when you talked to them? ‣ What other activities surround grocery shopping and how can you design for them? ‣ What groups/themes did you identify in your affinity map?
- 88. UX BOOTCAMP LET’S TESTTHOSE WIREFRAMES!
- 89. BEGINNING A USERINTERVIEW ‣ Remind participants to be as candid as possible - your feelings won’t be hurt! ‣ Let them know that this is just a prototype so they’ll need to use their imagination ‣ Remind them to think out loud and ask questions ‣ I’ll give you some questions to get started with and you fill in the rest with ideas from your topic map. Ready?
- 90. USER TESTING QUESTIONS ‣Can you talk to me a little bit about your grocery shopping habits? ‣ Do you ever use mobile apps to help you with grocery shopping? ‣ Walk me through what you see here on this page. ‣ Based on what you see here, how likely are you to use this app? ‣ What, if anything, can be improved on this screen?
- 91. UX BOOTCAMP CONGRATULATIONS! YOU JUSTCOMPLETED YOUR FIRST UX DESIGN SPRINT!
- 92. TOOLS + SOFTWARE UXDBOOTCAMP
- 93. TOOLS + SOFTWARE:WIREFRAMES + PROTOTYPES ‣ UX Pin ‣ Wireframe.cc ‣ Solidify App ‣ Proto.io ‣ InVision ‣ P.O.P. app ‣ Axure ‣ Paper sketches ‣ Flinto ‣ Protoskecth ‣ Mockups.me ‣ Appery ‣ Realizer App ‣ Framer JS ‣ Easel ‣ Power Mockup ‣ Moqups ‣ Keynote Kung Fu ‣ Antetype ‣ AppSketcher ‣ HotGloo ‣ FlairBuilder ‣ Pidoco ‣ Pencil Project ‣ FileSquare ‣ Concept.ly ‣ MockingBird ‣ Mockflow ‣ iPlotz ‣ Balsamiq ‣ OmniGraffle ‣ Fluid ‣ Handcraft ‣ Composite
- 94. TOOLS + SOFTWARE:RESEARCH + TESTING ‣ Wufoo ‣ TypeForm ‣ Bagel Hint ‣ Verify App ‣ Usabilla ‣ Morae ‣ UX Recorder ‣ Google Hangouts ‣ PollDaddy ‣ SurveyGizmo ‣ SurveyMonkey ‣ WebNotes ‣ LiveChat ‣ Frelay ‣ iPerceptions ‣ Kampyle ‣ Qualaroo ‣ UserVoice ‣ Webreep ‣ Intuition HQ ‣ Usability Hub ‣ UsersThink ‣ Plain Frame ‣ Chalkmark ‣ Plunk ‣ SilverBack 2.0 ‣ Delight.io ‣ MagiTest ‣ Camtasia ‣ Jing ‣ Try my UI ‣ Qualtrics
- 95. TOOLS + SOFTWARE:ORGANIZING INFORMATION ‣ Lucid Chart ‣ MindMeister ‣ Coggle.it ‣ Optimal Sort ‣ Concept Codify ‣ WebSort ‣ Simple Card Sort ‣ Xsort
- 96. TOOLS + SOFTWARE:DIAGRAMS + SITEMAPS ‣ Gliffy ‣ Lovely Charts ‣ Creately ‣ Google Drawings ‣ Draw.io
- 97. TOOLS + SOFTWARE:MIND MAPS ‣ Xmind ‣ Mind Node ‣ Mindjet ‣ FreeMind
- 98. TOOLS + SOFTWARE:ANALYTICS + METRICS ‣ Crazy Egg ‣ Good Data ‣ KISSmetrics ‣ Mix Panel ‣ Google Analytics ‣ Lucky Orange ‣ Live Person ‣ Myna Web ‣ HiConversion ‣ Tableau ‣ Maxymiser ‣ App Annie ‣ Flurry ‣ Woopra ‣ Quantcast ‣ Piwik ‣ Clicky ‣ Attention Wizard ‣ Click Density ‣ Click Tale ‣ Inspectlet ‣ FullStory
- 99.
- 100. RESOURCES: READING ‣ UXBooth ‣ UX Magazine ‣ UX Matters ‣ UX Zeitgeist ‣ Smashing Magazine ‣ UIE ‣ A List Apart ‣ Transitioning Careers ‣ Medium Collection ‣ Boxes and Arrows ‣ Hints from the Lazy Bear ‣ 52 Weeks of UX ‣ UX Apprentice ‣ Usability First Glossary ‣ UX Beginner
- 101. RESOURCES: BOOKS ‣ SmashingUX Design ‣ Don’t Make Me Think, Revisited ‣ The Elements of User Experience ‣ The User Experience Team of One: A Research and Design Survival Guide ‣ It's Our Research: Getting Stakeholder Buy-in for User Experience Research Projects ‣ Designing Together: The collaboration and conflict management handbook for creative professionals
- 102. RESOURCES: UXERS YOUSHOULD KNOW ‣ Jakob Nielson ‣ Jared Spool ‣ Alan Cooper ‣ Dana Chisnell ‣ Nate Bolt ‣ Peter Morville ‣ Stephen Anderson ‣ Steve Krug ‣ Luke Wroblewski
- 103. RESOURCES: COMPANIES OFNOTE ‣ Nielsen Norman Group ‣ Adaptive Path ‣ IDEO ‣ Smart Design ‣ Frog Design ‣ Cooper Design
- 104. RESOURCES: LOCAL ORGANIZATIONS ‣Ladies that UX ‣ Atlanta Web Design Group ‣ IXDA ‣ CHI Atlanta
- 105. RESOURCES: CONFERENCES ‣ LeanUX NYC ‣ GIANT ‣ Madison+ UX 2015 ‣ Interaction 16 ‣ SIGCHI ‣ MX2015 ‣ IA Summit ‣ Gel Conference ‣ Enterprise UX ‣ #dareconf
- 106.
- 107.