Hi there!! Jess McMullin! 1996 – started doing web design & discovered UX! 2003 – my company nForm, co-founded IA Institute! 2009 – Left nForm to focus on citizen experience! 2012 – IA Summit co-chair, Rosenfeld Media Expert, UXCamp Ottawa & here today!Photo: Heather McMullin!
1. WHAT IS USER EXPERIENCE?"2. WHAT IS USER EXPERIENCE DESIGN?"3. CORE UX SKILLS."4. UX TOOLS AND TECHNIQUES."5. HOW TO GET STARTED."6. Q&A."!
The Double Diamond Design Process!!"#$%&( !)"* !#"+* !&,%- Gather Data! Frame the Problem! Explore Solutions! Evaluate Solutions! Create Concepts! Deﬁne Scope! Evaluate Solutions! Develop Solutions! Collaborative Codesign! Set Resources! Reﬁne Solutions! Document Solutions! Based on the UK Design Council’s in depth study of design and innovation approaches at leading ﬁrms such as Philips, Lego, and IDEO.!
“The Squiggle” Design Process!Damien Newman, http://v1.centralstory.com/about/squiggle/!
Exercise: Active Listening! ‣ Pair up! ‣ Ask your partner what they did over lunch! ‣ Use only open-ended questions (no yes or no answers).! ‣ Reﬂect your understanding by restating their statements!http://www.ﬂickr.com/photos/liquene!
Exercise: What Jumps Out?! ‣ Spend 30 seconds looking at the following picture without taking any notes. Just look at the different elements.! ‣ After 30 seconds, write down what you notice.! ‣ Compare notes with a partner.! ‣ Look at the photo again. What else do you notice?!
Exercise: The House that Jack (orJill) Drew!‣ Draw a House" (20 seconds)!‣ Draw your Dream House (20 sec)!‣ Pair Up: Explain Your Dream House (3 min)!‣ Draw your Dream Home again (2 min)!‣ Discussion: How did your house change?!
Field Research!What !! Why! ‣ Anthropological ‣ Provides rich insights approach focused on into behavior, individual and group experience, and behavior in context. expectations within a Uses contextual system and can reveal observation, unmet needs and interviews, diaries, and opportunities for teams artifact collection to to differentiate their investigate customs, products and services.! rituals, and myths.!
Exercise for Another Time: The Story of Stuff! ‣ Pair up! ‣ Rock paper scissors to decide who is interviewer & who is participant! ‣ Participant shares the contents of their bag / backpack / wallet / pockets! ‣ Interviewer asks open ended questions!http://www.ﬂickr.com/photos/biscotte!
Codesign!What! Why! ‣ An approach to design ‣ Codesign taps into people’s that actively involves sense of the future. Sessions enable people stakeholders in the with different expertise and design process as co- skills to contribute equally. creators. Exercises Helps articulate ideas and issues that will not surface help the group to in other ways. Can be an explore the problem efﬁcient way to get a wide space, current and range of input. May enhance user buy-in by ideal experiences, and making them feel more ways of achieving the included, and giving them a ideal.! greater sense of ownership.!
Ditch Focus Groups: Get Users and Stakeholders to Make Things!
Personas!What! Why! ‣ A composite character ‣ Creates empathy for created to personify a the speciﬁc user and speciﬁc segment of avoids self-referential users. Includes a name, design. Focus on picture, user quotes and accomplishing speciﬁc other info with a focus on goals, motivation, and goals allows the behavior. Based on user product to satisfy research, personas are many people with that often paired with goal, whether or not representative scenarios." they match a speciﬁc ! market segment.!
Exercise: Empathy Map! ‣ Draw a simple head" (circle, nose, and a dot for the eye)! ‣ Divide your page.! ‣ Write one thing that your client or citizen is:! • Thinking and Feeling! • Hearing! • Gains! • Pains! • Seeing! ‣ Share your map with your neighbor ! !XPLANE Empathy Map, via http://gogamestorm.com!
Journey Map!What! Why! ‣ Visualization of experience across ‣ A holistic view of locations, time, and experience through channels. Captures time with speciﬁc interactions between touchpoints promotes user and product or better coordination of service at touchpoints. cross-channel design May also show and reveals associated emotional opportunities for new states, business or improved objectives, or other layers.! interactions.!
Mental Model!What! Why! ‣ Provides gap analysis, ‣ Diagram that breaks shows product down user activities into opportunities, and helps discrete tasks, arranges develop task-based these activities in information architecture. columns, and then uses Serves as a roadmap, the same columns to and anchors align the product or conversations about service features, future features and functions, and content content in actual user that support these needs instead of activities. May also align individual stakeholder business objectives.! agendas.!
Card Sorting!What! Why! ‣ Often used to guide ‣ Activity where a participant sorts labeled navigation design, card cards into similar sorting analysis shows groups. May be an open how often participants sort, where piles are grouped speciﬁc cards created based on only together. Discussing on perceived similarity of why the cards are cards, or a closed sort placed in a particular pile where piles are grouped yields deeper insight into according to provided user expectations for categories.! content.!
Exercise: Three of These Things Belong Together!Please group the items below in at least twolists.!• red! • three! • macintosh!• peach! • iphone! • spartan!• apple! • house! • Athens!• adobe! • orange! • windows!• Arizona! • spruce! • Georgia!
You can use online card sortingtools like WebSort.net!
Site Map!What! Why! ‣ Diagram to show ‣ Document site overall site structure structure to ensure and relationships of that all content is content. For large sites accounted for. Guides may document navigation design, site index, and content patterns of migration. Good for organization that are hierarchical applied across similar organization, less sections, instead of effective visualizing accounting for every very large sites, facets single page.! or tags.!
IT’S EASIER TO FIX IT ON THEDRAFTING TABLE WITH ANERASER THAN WITH ASLEDGEHAMMER ON THECONSTRUCTION SITE "- FRANK LLOYD WRIGHT!
Wireframing!What !! Why! ‣ One step past ‣ Communicate the sketching-- shows the speciﬁcations for layout of an interface individual pages or screen. Describes each templates. Also used as element and behavior. prototype for usability Focus is on layout, testing. Prevents labels, and interactions. premature conversations Avoids ﬁnished design about surface issues like elements such as color color, instead focuses and photos, instead discussion on correct using placeholders for and complete content images, and sometimes and functionality.! copy.!
Usability Testing!What !! Why! ‣ Real users test drive a ‣ Understand what works prototype or and what doesn’t. Often production system. included in iterative Usually one-on-one, development with each with a participant and cycle so that the product moderator, the continually improves. participant thinks out Excels at ﬁnding speciﬁc loud as they complete interface problems, representative tasks. including layout, labeling, Typically 6-8 ﬂow, navigation and participants per user interaction.! segment.!
Books! ‣ Observing the User‣ The Elements of User Experience! Experience! ‣ Prototyping!‣ A Project Guide to UX Design! ‣ Designing for People!‣ Communicating ‣ The Design of Design! Everyday Things!‣ Information ‣ Web Form Design! Architecture: Blueprints for the ‣ Don’t Make Me Think! Web, 2nd. Ed.!
Where to Find Mentors?!‣ Among your peers!‣ Specialists within your organization (UofA)!‣ Local Community (UX Book Club, Startup Edmonton)!‣ Events!‣ Online Community (Associations, Discussion Groups, and Social Media)!