When developing a new product, it’s easy for companies to buy into taking a User-Centered Design (UCD) approach. Through user research and discovery, the user requirements, overall architecture and core user interactions are defined prior to developing and applying the visual skin. However, when companies think about redesigning their products, the core focus tends to be on ‘freshening up’ the interface. Often companies will want to “update” their products without making changes to the back-end software architecture, but many fall short because they focus solely on improving the look-and-feel. This is where a UCD approach can have a tremendous impact in improving the user experience. Lead by Martin Ho, Associate Director at User Centric, this webinar will discuss UCD in theory and in practice. In this 60-minute webinar, Martin will provide: • Delineation between the Information Architect, Interaction Designer and Visual Designer • An overview of the UCD process • Discussion on the benefits and applicability of different UCD activities • Tips on how to leverage the UCD process within constraints

1. #uxlunch

2. User-Centered Design (UCD) Model

3. User-Centered Design (UCD) Components
Information architecture (IA) Interaction Design Visual Design
IA is the blueprint to interface Interaction Design defines the Visual Design defines the look-
design and serves as the user interactions – how the user and-feel that enhances the user
foundation for interface design will complete tasks experience
Focus: Focus: Focus:
 Structure  Intuitive layout and controls  Enhance usability and user
 Organization (e.g., buttons) experience
 Navigation  Optimize user tasks and  Incorporate branding
 Labels functions elements
 Meet user needs and
expectations
FOUNDATION: User Research / Testing

5. Common Scenarios
Current Situation: Solution:

6. Common Scenarios
Current Situation: Constraint:

7. User-Centered Design (UCD) Components
Information architecture (IA) Interaction Design Visual Design
IA is the blueprint to interface Interaction Design defines the Visual Design defines the look-
design and serves as the user interactions – how the user and-feel that enhances the user
foundation for interface design will complete tasks experience
Focus: Focus: Focus:
 Structure  Intuitive layout and controls  Enhance usability and user
 Organization (e.g., buttons) experience
 Navigation  Optimize user tasks and  Incorporate branding
 Labels functions elements
 Meet user needs and
expectations
FOUNDATION: User Research / Testing

8. User-Centered Design (UCD) Components
Information architecture (IA) Interaction Design Visual Design
IA is the blueprint to interface Interaction Design defines the Visual Design defines the look-
design and serves as the user interactions – how the user and-feel that enhances the user
foundation for interface design will complete tasks experience
Focus: Focus: Focus:
 Structure  Intuitive layout and controls  Enhance usability and user
 Organization (e.g., buttons) experience
 Navigation  Optimize user tasks and  Incorporate branding
 Labels functions elements
 Meet user needs and
expectations
FOUNDATION: User Research / Testing

9. Does order matter?

10. Behaviors first, colors second…
Information architecture (IA) Interaction Design Visual Design
IA is the blueprint to interface Interaction Design defines the Visual Design defines the look-
design and serves as the user interactions – how the user and-feel that enhances the user
foundation for interface design will complete tasks experience
Focus: Focus: Focus:
 Structure  Intuitive layout and controls  Enhance usability and user
 Organization (e.g., buttons) experience
 Navigation  Optimize user tasks and  Incorporate branding
 Labels functions elements
 Meet user needs and
expectations
FOUNDATION: User Research / Testing

11. When visual design comes first…
What’s Driving the Mini Cooper? Not the User Experience.
http://www.usercentric.com/news/2009/01/21/whats-driving-mini-cooper-not-user-experience

12. When visual design comes first…

13. Questions…

14. User Centric’s User-Centered Design (UCD) Model

15. User Centric’s User-Centered Design (UCD) Activities
Existing Context Mental Iterative Validation
Development
interface? for use model design and testing
Identify areas for How/why is it used Identify key user Collaboratively design, review, validate, Preserve the
improvement and by whom? goals and approach and repeat to refine the user experience design's integrity
• Usability • User research • Goals analysis Navigation & • User interface
evaluation/ interviews screen flow specifications
expert review • Task analysis
• Field Review & revision • Style & branding
• User surveys observation • Interaction guides
models & Low-fidelity
• Content/ • Site visits storyboards wireframes • Graphic design
feature implementation
mapping • Card sorting Review & revision guides or notes
• Information Prototype • Icons & other
architecture image assets
Usability testing
& user interviews • Templates
Visual design (HTML, CSS,
(icons, colors, b Javascript,
randing) XAML, etc.)
Usability testing
& A/B testing

16. Utopia… with rainbows and unicorns

17. Our Perception of Reality

18. Constraints, constraints, and more constraints…

19. Constraints, constraints, and more constraints…

20. Constraints ≠ Compromise
Constraint: “No access to users”
Solutions: Talk with Subject Matter Experts (SMEs)
Review customer call logs (not just from a call center)
Identify a „friendly‟
Constraint: “We have a highly segmented user base, but we don‟t have time/money to
access all segments”
Solutions: Identify and focus on the role(s) that will be most impacted
Conduct interviews vs. conduct a usability test to broaden reach
Constraint: “Resources/timeline limited, reduce # rounds of validation (to 1, maybe 2)”
Solutions: Replace user validation with internal reviews (with SMEs)
Identify the best opportunity to validate designs with users

21. Constraints = Opportunity, Innovation
Constraint: “Can‟t make changes to the back-end system”
“Must run on a combination of new and old platforms”
“Interface must work with both large and small displays”
“Physical form factor must stay the same”

22. Our biggest success stories
• Access users early and often
• Ground design decisions on
user research
• View compromises as
opportunities
• High level of engagement
and participation from the
client stakeholder team
• Engage visual designers,
marketers, and developers
early in the design cycle so
they understand design
intent
• Collaborate with the
development team to ensure
designs can be implemented

23. Presenter:
Martin Ho
Associate Director
User Centric, Inc.
mho@usercentric.com
a global user experience research and design firm.
We believe experiences matter.TM
www.usercentric.com
Oakbrook Terrace  Chicago  Atlanta
630-320-3900
Connect with us: @UserCentricInc
Webinar Schedule (www.usercentric.com/webinars):
Medical Devices: Catching up to the FDA
Tuesday, March 27
No, But Really, Do I Need Eye Tracking?
Tuesday, March 27