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