USER EXPERIENCE DESIGN
DEMYSTIFIED
April 29th 2014
Nelly Mensah | Doug Van Wie
Agenda






Introductions
What is UX and Why Is It Important?
UX Methodology
UX in Practice
Useful Resources
Q&A
INTRODUCTIONS
Introductions
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.
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.
WHAT IS UX?
What is User Experience?
Usability
Platform
Accessibility
UX
Performance
Design
Brand
Benefits of Caring About UX







Increased Adoption
Customer Loyalty
Brand Differentiation
Productivity Gains
Operational Efficiencies
Reduced Development Costs
Better morale and employee satisfaction
7
What is Usability?
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?
8
UX METHODOLOGY
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
UX Methodology Overview
User Insights
Personas
Information
Architecture
Wireframing
Visual Design
User Experience and Style Guides
User Testing
11
USER RESEARCH
User Research
Description
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.
Activities
Engage Users
Conduct User Research
• Identify end users
• Write interview script
• Create Global Design
• Field Observation
• User Interviews
• User Workshops
Compile Requirements
• Requirements Compilation
• Scoping
• Requirements Prioritization
13
PERSONAS
Persona Definition
Description
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.
Activities
Conduct Workshops
• 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
Document User
Personas
• Characterize user goals,
preferences, and key tasks
into personas
Validate User Personas
• Validate interview
findings with SMEs
• Present and validate
user personas
15
Persona Definition Example
16
“When you design for everyone, you design for no one.”
- Anonymous
INFORMATION ARCHITECTURE
Information Architecture
Description
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.
Activities
Develop High Level Site
Map
• Draft high-level site map
• Review tasks flows from
the user’s perspective
Draft Page Flows
• Construct page/screen
flows based on highlevel site map
• Map page flows to
content outline
Annotate Page Flows
• Write detailed page
flow annotations to
provide user
narratives.
• Review & iterate
page flows w/
Process SMEs
19
Site Map Example
Job Header Details
Jobs
Job List
Work Ticket Header
Details
Job Record
Work Ticket List
Work Ticket Record
Work Ticket Line Items
List
Work Ticket Line Item
Record
Customer Header
Detail
Home
Customers
Customer List
Contacts List
Contact Record
Address List
Address Record
Hierarchy List
Hierarchy Record
Customer Record
Service Locations
Service Locations List
Service Location
Record
Employees
Employee List
Employee Record
Assets
Assets List
Asset Record
Location/L1
Location/L1 List
Location/L1 Record
Product List
Product Record
Products
Products & Pricing
Pricing
Pricing List
Pricing Record
Pricing Header
Details
Pricing Line
Item
Admin
20
WIREFRAMING
Wireframe Development
Description
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.
Activities
Review Requirements
Validate and Update
Wireframes
Design Wireframes
Iterations
• Review required fields
• Define controls and
screen elements
• Brainstorm and draw
wireframe sketches
• Develop wireframes for
unique page layout
types
• Review and obtain
agreement on standard
wireframes
• Review and validate
wireframes with process
SMEs and stakeholders
• Update wireframes
• Document visual styles
and guidelines
• Document UX Guidelines
22
Design Principles
1.
2.
3.
4.
5.
Hierarchy
Call to action
Contextual UI elements
Response to action
Appropriate language
23
Wireframe Development
Step 1: Get your thoughts on paper
24
Wireframe Development
Step 2: Prototype and test
25
Wireframe Example
Step 3: Refine and handoff
26
USABILITY TESTING
UX and Style Guides
Usability Testing
User Testing
Description
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.
Activities
Plan Usability Testing
Approach
• Determine participants
• Prepare test scenarios
• Set up testing
environment
Conduct Usability
Testing
• Brief participants
• Have participants
complete a set of
predetermined tasks
• Conduct satisfaction
survey
Review and Act On
Results
• Aggregate results
and analyze findings
• Prioritize findings
• Update design
based on findings
28
Usability Testing Example: Low Tech
UX and Style Guides
User Testing
29
Usability Testing Example: High Tech
UX and Style Guides
User Testing
30
VISUAL DESIGN
Visual Design
Description
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.
Activities
Develop Themes
Finalize Visual Design
• Develop visual themes that
• Narrow down design
adhere to visual style guide
options
and branding standards
• Finalize visual theme of
• Design or obtain iconography
the application
• Decide on typography
options
• Write copy
Approve and Hand Off
Design
• Clean up visual design
• Finalize visual style guide
• Hand over graphic assets
to developers
32
Visual Design Examples
Style Tiles
33
User Experience and Style Guidelines
UX and Style Guides
User Testing
Description
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.
Activities
Document Screen
Components
• Document global
components including:
• Header
• Footer
• Navigation Panel
• Content Area
Document UI Behavior
• Document standard UI
behavior, such as:
• Drop-downs
• Drag & Drop
• Modal boxes
Document Visual
Design Standards
• Create Visual Style
Guide to include visual
design standards:
• Color Palettes
• Typography
• Iconography
• Screen resolutions
• Branding
34
Visual Design Examples
Pattern Library
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.
Salesforce
BBC
Twitter Bootstrap
35
UX IN PRACTICE
UX Roles
Project Manager
Role Comparison
Responsibilities
UI/UX Designer
Web Designer
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
Web Developer





38
Size of Company Matters
Startup
Enterprise
Small or one-person team
Multiple responsibilities
Product focus essential
UX shapes strategy and product
development
 Limited time and resources
 Bootstrap testing
 Multiple practitioners
 Can be independent department or
part of development teams
 Varying levels of importance to
product
 Political challenges
 More time and resources available




Integration with Development
 Involve developers early
 Document everything
 Push the limits
Analytics: Goals Revisited
Measure Outcomes




Set Goals
Select Channel / Platform
Establish Audience
Determine Content Type
10 Dos and Don’ts of User Experience
DO evangelize user-centered design
and usability within the organization
DON’T forget the users
DO determine appropriate metrics to
measure user engagement and
success
DON’T let politics or trends dictate the
direction of design
DO involve stakeholders in workshops
and review sessions
DON’T leave out frequent user testing
DO stay in perpetual beta
DON’T rely on waterfall methodology
DO align change management efforts
with the usability approach
DON’T set unrealistic expectations of
what the UX will accomplish
42
RESOURCES
Wireframing & Prototyping Tools
Axure
Wireframing & Prototyping Tools
Balsamiq
Wireframing & Prototyping Tools
Mockingbird
Wireframing & Prototyping Tools
Proto.io
Wireframing & Prototyping Tools
Bootstrap
User Testing Tools
Remote Screenshare – GoToMeeting, Skype, Google Hangout, etc.
User Testing Tools
Silverback
User Testing Tools
A/B testing – Google Analytics, Optimizely
Inspiration
Dribbble
Inspiration
Behance
Inspiration
Abduzeedo
Blogs to follow
 http://www.smashingmagazine.com/
 http://uxmag.com/
 http://www.boxesandarrows.com
 http://www.useit.com/
 http://www.uxbooth.com/
Q&A