1. Designing the User Experience
Jason Wehmhoener and Nadine Schaeffer, Cloudforest Design
November 7, 2012

2. Designing the
User Experience
✤ Goals
✤ Methods
✤ Research
✤ Design
✤ Validation
✤ Engaging a Designer
✤ Resources

3. Goals
✤ Useful
✤ Usable
✤ Desirable
✤ Findable
✤ Accessible
✤ Credible
✤ Valuable Peter Morville’s User Experience Honeycomb
http://semanticstudios.com/publications/semantics/000029.php

4. Research

5. Research
✤ Who are our users?
✤ What are their tasks?
✤ How do our users think about
their tasks?
✤ Where do our user’s tasks
intersect with our product?
✤ How can our product make our
user’s tasks easier and more
enjoyable to accomplish?
Catching up on e-mail
http://www.flickr.com/photos/yourdon/2715583000/lightbox/

6. Who are our
users?
✤ A persona is a fictional person who represents
a major user group for your site. Personas
generally include the following attributes:
✤ Name & photo
✤ Demographics (age, education, ethnicity,
family status, income, etc)
✤ Job title & responsibilities
✤ Goals
✤ Tasks
✤ Work environment
✤ Characteristic quote

7. Surveys and
interviews
✤ Surveys are useful tools for
measuring attitudes or
collecting self-reported data.
✤ Interviews can offer greater
opportunity for dialog, deeper
exploration of issues.
✤ Both techniques rely on
participants to clearly
understand and honestly
report their perspective.

8. What are our
users’ tasks?
✤ Scenarios are a story or narrative
that describes a persona’s:
✤ goals and motivations
✤ tasks
✤ the steps of interaction
involved in carrying out those
tasks
✤ Enough detail to make the story
compelling, not overwhelming

9. Interested
Lead Gen Flow
What are our Required info?
Street Address?
Phone Number?
Annual kWh?
users’ tasks?
No Yes
Scr
Opportunity in Salesforce BB1 Scope Edit Ne
Mailing List
Opportunities
Cross-Reference with Home Ownership DB
Provisional Ranking
Projects Cu
Create Design Site Design
✤ User flows describe the Ranked
Rank Lead
interactions required by the
users’ tasks in greater detail No Above Threshold?
Yes
Contact Customer
✤ Emphasis is on decision points,
requirements for forward Discuss Pricing Pricing
progress, and potential error Designed
Select Offers & Generate Proposals
Yes
states
Present Proposals Proposals
Sold
Capture Signature Signature
Measured
Perform eAudit

10. Setup
User: Super
How do our users
Admin, Auditor
Tasks: Setup Logo/Colors
Users, Billing
think about their tasks?
Contexts, Groups, Portal IP Ranges Admin
Budget, and Portal
Configuration Users Role Developer
Groups ACL Auditor
Billing
Contexts Allocate Thresholds Email
Setup Budget Policies Triggers Digest
Reporting Notifications Method TXT
✤ A concept model can be used to Monitoring Key
Key Server
describe the structure of the Virtual Data Security/
Management
VPN
objects that make up a system
Center Network
Support Network /
Type Co
and their relationships with
Zones
Encryption IP Address Ba
one another
Region US West Firewall Cus
US East
✤ Concept models help designers
EU
frame the design problem and
understand the problem
domain
Provision Workloads Dashb
User: User: All Us
Developer Workload/Vapp Scope varie

11. How do our users
think about their tasks?
✤ A mental model is a set of
beliefs held by a particular user
about a system they are using.
✤ In a poorly designed system the
user’s mental model may vary
from the system’s underlying
concept model by a great deal
✤ By seeking to understand users’
mental models, we can adjust
the concepts our system is
based on in order to more
closely meet expectations.

12. Ethnography
✤ Ethnography is the process of
conducting user research in
natural real world settings with
the goal of gaining a
descriptive understanding of
the subject’s tasks from their
point of view.
✤ The ethnographer aims to take
a holistic perspective that
places the subject’s behavior in
context.

13. Customer journey map
A customer journey map describes the different touch points that characterize the customer’s interaction with the service.

14. Prototyping
✤ Prototyping is useful for
exploring potential solutions to
a problem in the context of a
tight feedback and iteration
loop
✤ Fidelity (low, medium, high)
✤ Visual
✤ Functional
✤ Content

15. Design

16. Information
Architecture
✤ Information architecture is....
✤ Information architecture
deliverables can include:
✤ Concept maps
✤ Site/application architecture
maps
✤ Navigation wireframes

17. Content
Strategy
✤ Good content is appropriate, useful,
user centered, clear, consistent, concise,
and supported
✤ Create Once Publish Everywhere
(COPE)
✤ Separate content from presentation
✤ Content strategy deliverables can
include:
✤ Content inventory
✤ Content analytics and search metrics
✤ Editorial style guide

18. Interaction
Design
✤ Interaction design (IxD) defines
the structure and behavior of
interactive systems.
✤ IxD deliverables can include:
✤ Wireframes
✤ Specifications
✤ Prototypes

19. Graphic Design
✤ Graphic designers use image and
typography as a foundation for
creating communication tools
that convey a message from a
client to an audience.
✤ Graphic design deliverables can
include:
✤ Photoshop or Fireworks comps
✤ Specifications
✤ Production graphics

20. Validation

21. Usability
Testing
✤ Usability testing is the process of observing
users as they attempt to successfully complete
the system’s tasks.
✤ Usability test goals can include:
✤ noticing user difficulty with specific tasks
or their interactions
✤ exploring alternative implementations of a
specific set of functionality, content or
appearance
✤ Observations should be recorded in detail for
later analysis
✤ Analysis should result in a set of clear
recommendations for actions that can be taken
to increase the system’s usability, or at
minimum suggest direction for future design
exploration.

22. A/B Testing & Other
Optimization
Techniques
✤ A/B or split testing compares the
effectiveness of two versions of a marketing
communication to determine which version
results in a better response or conversion
rate.
✤ A small percentage of users are shown an
alternate version and response/conversion
metrics are recorded.
✤ Advanced optimization software can make
the process of running through a series of
tests much faster by automating the
promotion of successful versions.
✤ A may perform better for one audience
segment, while B performs better for another,
opens the door to automated optimization
based on audience segmentation.

23. Analytics
✤ Click tracking can assist site owners in their efforts
to understand:
✤ navigation patterns
✤ terminology preferences (via search logs)
✤ the value of specific types of content or
individual content or advertising assets
✤ where customers are falling out of a
conversion funnel
✤ demographic usage patterns
✤ seasonal usage patterns
✤ lifetime value of individual customers or
customer types
✤ many other narratives unique to your business

24. The Design Team
Client Design Information Interaction
Engineering
Stakeholders Management Architecture Design
User Content Graphic
Users Analytics
Research Strategy Design

25. Engaging a designer
✤ Be prepared
✤ Are all team members in place at the start of the project?
✤ Do you have clearly defined personas and scenarios for your product? If not, are you prepared to engage in
an ethnographic research project in order to understand your users in the context in which they will be
carrying out their tasks?
✤ If our goal is to improve the design of an existing product, are you prepared to examine and address gaps
between the concept model underlying the design of your product and the mental model your users employ
as they complete their tasks? Is your product architecture capable of adapting to changing requirements?
✤ Plan to iterate
✤ Get feedback from actual users on changes in design direction.
✤ Systematically incorporate feedback in each revision of the design.
✤ There is always room for improvement. Don’t let perfect be the enemy of good.
✤ Pay attention to and learn from the behavior of your users.

26. Resources
✤ Shopping for Innovation: What you need to know before hiring a design firm
http://www.core77.com/reactor/11.05_shopping.asp
Note the “Hollywood Model” (our preferred method for team building)
✤ AIGA: How to hire a [graphic] designer
http://www.aiga.org/how-to-hire-a-designer/
✤ The User Experience Team Kit: How to hire a UX team and incorporate user-centered design methods into
your software development lifecycle process
http://ixda.org/sites/default/files/UX_Kit_Aug09.pdf
✤ The T-Model and strategies for hiring IA practictitioners
http://uxmatters.com/mt/archives/2011/10/the-t-model-and-strategies-for-hiring-ia-practitioners-
part-1.php
✤ Taking the mystery out of hiring UX talent
http://uxmag.com/articles/taking-the-mystery-out-of-hiring-user-experience-talent
✤ Designing the right team for UX: an art and a science
http://uxmag.com/articles/designing-the-right-team-for-ux

27. Thank you
http://cloudforestdesign.com