Slide 1

USER EXPERIENCE DESIGN DEMYSTIFIED April 29 th 2014 Nelly Mensah | Doug Van Wie

Slide 2

Agenda Introductions What is UX and Why Is It Important? UX Methodology UX in Practice Useful Resources Q&A

Slide 3

INTRODUCTIONS

Slide 4

Introductions Doug studied Graphic Design at Auburn University. After a career as a professional swimmer, he worked for a software company as an Interaction Designer developing prototypes and conducting user testing. He has also worked as a freelance web designer for the past eight years. Nelly has worked as a developer, UX designer, and product manager for Deloitte Digital for the last 5 years. She has also advised several start ups and is a freelance graphic designer and illustrator. She takes stock photo selection and white space very seriously.

Slide 5

WHAT IS UX?

Slide 6

What is User Experience? Usability Platform Design Brand Performance Accessibility UX

Slide 7

Benefits of Caring About UX Increased Adoption Customer Loyalty Brand Differentiation Productivity Gains Operational Efficiencies Reduced Development Costs Better morale and employee satisfaction 7

Slide 8

Learnability How easy is it for users to accomplish basic tasks the first time they encounter the design? Efficiency Once users have learned the design, how quickly can they perform tasks? Memorability When users return to the design after a period of not using it, how easily can they reestablish proficiency? Errors How many errors do users make, how severe are these errors, and how easily can they recover from the errors? Satisfaction How pleasant is it to use the design? What is Usability? 8

Slide 9

UX METHODOLOGY

Slide 10

Determine Your Objective Set Goals e.g. Reduce shopping cart abandonment by 15% Select Channel / Platform e.g. Android vs iOS vs Web Establish Audience e.g. Existing customers Determine Content Type e.g. Product descriptions

Slide 11

Personas Information Architecture Visual Design Wireframing UX Methodology Overview User Insights User Testing 11 User Experience and Style Guides

Slide 12

USER RESEARCH

Slide 13

User Research The User Research phase focuses on identifying key pain points and areas for improvement from the end-users perspective. The outputs of this phase of work are used as guidelines in designing the application. This phase lays the foundation for the design and sets guidelines for making design decisions. Field Observation User Interviews User Workshops Engage Users Conduct User Research Compile Requirements Requirements Compilation Scoping Requirements Prioritization Identify end users Write interview script Create Global Design Description Activities 13

Slide 14

PERSONAS

Slide 15

Persona Definition The objective of Persona Definition is to paint a clear picture of the typical target users and describe how/why they will be using the system. Personas should be able to invoke empathy by providing insights into the real behaviors, goals, pain points, skills, and environments of real users. Description Characterize user goals, preferences, and key tasks into personas Conduct Workshops Document User Personas Validate User Personas Validate interview findings with SMEs Present and validate user personas Identify key functions and content required for user tasks Determine high-level user goals, preferences, and pain-points Understand day in the life user scenarios Activities 15

Slide 16

Persona Definition Example 16

Slide 17

When you design for everyone, you design for no one. - Anonymous

Slide 18

INFORMATION ARCHITECTURE

Slide 19

Information Architecture Information Architecture (IA) is the analysis and design of the content structure of the application, as well as the interrelationships between the content. Essentially, it is a means by which to logically organize information in the app and involves modeling a top-down view of how users will interact with various pages, functions, and information across the application. Description Construct page/screen flows based on high- level site map Map page flows to content outline Develop High Level Site Map Draft Page Flows Annotate Page Flows Write detailed page flow annotations to provide user narratives. Review & iterate page flows w/ Process SMEs Draft high-level site map Review tasks flows from the users perspective Activities 19

Slide 20

Site Map Example Home Jobs Job ListJob Record Job Header DetailsWork Ticket List Work Ticket Record Work Ticket Header Details Work Ticket Line Items List Work Ticket Line Item Record CustomersCustomer ListCustomer Record Customer Header Detail Contacts List Contact Record Address List Address Record Hierarchy List Hierarchy Record Service LocationsService Locations List Service Location Record EmployeesEmployee ListEmployee Record AssetsAssets ListAsset Record Location/L1Location/L1 ListLocation/L1 Record Products & Pricing Products Product ListProduct Record PricingPricing ListPricing Record Pricing Header Details Pricing Line Item Admin 20

Slide 21

WIREFRAMING

Slide 22

Wireframe Development A proposed user interface design is articulated in wireframes. Wireframe development defines the standard structure, layout, and general real-estate for content and functions. Wireframes are developed in abstraction of visual, creative, and branding elements. Iterations Description Brainstorm and draw wireframe sketches Develop wireframes for unique page layout types Review and obtain agreement on standard wireframes Review Requirements Design Wireframes Validate and Update Wireframes Review and validate wireframes with process SMEs and stakeholders Update wireframes Document visual styles and guidelines Document UX Guidelines Review required fields Define controls and screen elements Activities 22

Slide 23

Design Principles 23 1.Hierarchy 2.Call to action 3.Contextual UI elements 4.Response to action 5.Appropriate language

Slide 24

Wireframe Development 24 Step 1: Get your thoughts on paper

Slide 25

Wireframe Development 25 Step 2: Prototype and test

Slide 26

Wireframe Example 26 Step 3: Refine and handoff

Slide 27

USABILITY TESTING

Slide 28

Usability Testing Usability testing is a critical step in the user experience design process and must take place several times in the project lifecycle. It helps ensure that the design is going in the right direction and addresses the users needs. UX and Style Guides User Testing Description Brief participants Have participants complete a set of predetermined tasks Conduct satisfaction survey Plan Usability Testing Approach Conduct Usability Testing Review and Act On Results Aggregate results and analyze findings Prioritize findings Update design based on findings Determine participants Prepare test scenarios Set up testing environment Activities 28

Slide 29

Usability Testing Example: Low Tech UX and Style Guides User Testing 29

Slide 30

Usability Testing Example: High Tech UX and Style Guides User Testing 30

Slide 31

VISUAL DESIGN

Slide 32

Visual Design Visual design is the icing on the cake. It is the design of the final look and feel of the application and involves the selection of colors, fonts and icons for the interface. It has both practical and aesthetic implications for usability. Description Narrow down design options Finalize visual theme of the application Develop Themes Finalize Visual Design Approve and Hand Off Design Clean up visual design Finalize visual style guide Hand over graphic assets to developers Develop visual themes that adhere to visual style guide and branding standards Design or obtain iconography Decide on typography options Write copy Activities 32

Slide 33

Visual Design Examples 33 Style Tiles

Slide 34

User Experience and Style Guidelines A UX Guidelines document is expected to be a living record that will be developed over several iterations. It ensures that the interface is consistent across screens and releases. UX and Style Guides User Testing Description Document standard UI behavior, such as: Drop-downs Drag & Drop Modal boxes Document Screen Components Document UI Behavior Document Visual Design Standards Create Visual Style Guide to include visual design standards: Color Palettes Typography Iconography Screen resolutions Branding Document global components including: Header Footer Navigation Panel Content Area Activities 34

Slide 35

Visual Design Examples 35 A collection of front-end patterns or code-snippets that can be reused to form the building blocks of a website. Pattern libraries can include CSS and HTML code blocks and elements like headers, footers, form elements and list items as well as more complex elements such as responsive galleries. Pattern Library SalesforceBBCTwitter Bootstrap

Slide 36

UX IN PRACTICE

Slide 37

UX Roles Project Manager

Slide 38

Role Comparison 38 Responsibilities UI/UX DesignerWeb DesignerWeb Developer User engagement planning User research User personas UX guidelines creation Process design Information architecture Wireframe design Visual/graphic design Branding considerations Help content creation Usability testing Heuristic Evaluation CSS development HTML development Integration

Slide 39

Size of Company Matters Startup Small or one-person team Multiple responsibilities Product focus essential UX shapes strategy and product development Limited time and resources Bootstrap testing Enterprise Multiple practitioners Can be independent department or part of development teams Varying levels of importance to product Political challenges More time and resources available

Slide 40

Integration with Development Involve developers early Document everything Push the limits

Slide 41

Analytics: Goals Revisited Measure Outcomes Set Goals Select Channel / Platform Establish Audience Determine Content Type

Slide 42

10 Dos and Donts of User Experience 42 DO evangelize user-centered design and usability within the organization DO determine appropriate metrics to measure user engagement and success DO involve stakeholders in workshops and review sessions DO stay in perpetual beta DO align change management efforts with the usability approach DONT forget the users DONT let politics or trends dictate the direction of design DONT leave out frequent user testing DONT rely on waterfall methodology DONT set unrealistic expectations of what the UX will accomplish

Slide 43

RESOURCES

Slide 44

Wireframing & Prototyping Tools Axure

Slide 45

Wireframing & Prototyping Tools Balsamiq

Slide 46

Wireframing & Prototyping Tools Mockingbird

Slide 47

Wireframing & Prototyping Tools Proto.io

Slide 48

Wireframing & Prototyping Tools Bootstrap

Slide 49

User Testing Tools Remote Screenshare GoToMeeting, Skype, Google Hangout, etc.

Slide 50

User Testing Tools Silverback

Slide 51

User Testing Tools A/B testing Google Analytics, OptimizelyOptimizely

Slide 52

Inspiration Dribbble

Slide 53

Inspiration Behance

Slide 54

Inspiration Abduzeedo

Slide 55

Blogs to follow http://www.smashingmagazine.com/ http://www.smashingmagazine.com/ http://uxmag.com/ http://www.boxesandarrows.com http://www.boxesandarrows.com http://www.useit.com/ http://www.useit.com/ http://www.uxbooth.com/

Slide 56

Q&A