1. Why UX is Important
UXDI Lunch Talk
Sep 17, 2015

2. Hi, I am Chris R. Becker - chris@100yea.rs
@cbecker
I have a background in
I have done projects for
Painting / Graphic Design - BFA : Colorado State Universi‫﬚‬
MFA - Art Center College of Design : Media Design Program
Teach at: Art Center College of Design, Loyola Marymount Universi‫﬚‬
UCLA-Extension
Mataxa, Art Center, JPL/NASA, VW, CB2, Adobe, Toyota, EA, Ma‫﬙‬el, Hyundai, Starwood Hotels, Fresh and Easy, HTC, OKGO, Hand Made Mobile,
Pearson, and More.
I am a
Sr. User Experience Designer at A Hundred Years
I have worked for
Red Design Consultants, JPL/NASA, Art Center, Schematic, Syynlabs, Saatchi & Saatchi, Phenomenon, Innocean, Blitz, DeutschLA, the Ayzenberg
Group, Handmade Mobile, Boombang, TBWA|Chiat|Day, Two Bit Circus, Yoi/Ferrazzi Greenlight & A Hundred Years
I
who dabbles in physical computing experiences
WHO IS THIS GUY?
2

3. 3
A Hundred Years is a design studio
committed to creating long-term impact
by imagining what's possible and driving
meaningful action today.
Who We Are

4. 4
Who We Are
DO GOOD BUSINESS

5. 5
Who We Are
DO GOOD BUSINESS

6. 6
A Hundred Years
is about what’s possible.
Who We Are

7. 7
Our Team
We are design thinkers, storytellers and
technologists with a sharp focus on
creating experiences that matter.

8. 8
Press & Awards
The Creative Force Behind The
World's Most Important Causes
Nonprofits, and Businesses, Can Be
Self-Sustaining. Just Think 100
Years Ahead
Webby
Awards8
W3
Awards6
Communicator
Awards3

9. 9
Who We’ve Helped
TEDEd
STATE OF CALIFORNIA
®
®®
Smithsonian
theintelligencegroup
A DIVISION OF

10. LEARNING OBJECTIVES
•Why UX ma‫﬙‬ers in modern businesses from startups to big corporations
•Who does UX
10

11. AGENDA
•What is UX (user experience)?
•Why UX ma‫﬙‬ers
•Who does UX?
•Q/A
11

12. ‫שּׂ‬mBL?
h‫﬙‬p?
‫שּׂ‬m Burners Lee
He made a proposal for an information management system in March 1989, and on 25
December 1990, with the help of Robert Cailliau and a young student at CERN, he
implemented the first successful communication between a Hypertext Transfer Protocol
(HTTP) client and server via the Internet.
‫שּׂ‬m Berners-Lee is the director of the World Wide Web Consortium (W3C), which oversees
the Web's continued development. He is also the founder of the World Wide Web
Foundation, which writes and creates standards for HTML 5.
1990!
Hypertext Protocol with a server
HTML Hypertext Markup Language
The Internet was Invented!
Year?
Anyone know who this is?
What did he do?
HISTORY LESSON
12

13. 13
1990 2000 2005 2010
HTML HTML5
2015
CSS
JavaScript
CSS3
HTML4
FLASH
timeline
You
Are
Here
Clients
might
be
here

14. A considered User Experience
But the Media Space Reali‫﬚‬ is :
Across Multi Platforms
WHAT IS THE PROBLEM?
14

15. 15
Title Page
Why UX Matters
A quick overview

16. 16
USER EXPERIENCE CONSIDERS :
Business Design
Technology
UX

17. Most people make the
mistake of thinking
design is what it looks
like. People think it’s
this veneer – that the
designers are handed
this box and told,
‘Make it look good!’
That’s not what we
think design is. It’s not
just what it looks like
and feels like. Design
is how it works.”
“
Steve Jobs, Apple CEO

18. UX TREATS COGNITIVE SCIENCE IS AN ART
18
Jacob
Gube
-­‐
h,p://uxdesign.smashingmagazine.com/2010/10/05/what-­‐is-­‐user-­‐experience-­‐design-­‐overview-­‐tools-­‐and-­‐resources/
Decision Maps & trees

19. UX IS MEASURABLE
19

20. PROCESS DIAGRAMS
20
h,p://www.jjg.net/elements/pdf/elements.pdf

21. USER EXPERIENCE TOUCH POINTS
21

22. “
Bruce Ediger
There is no intuitive
interface!
Not even the Nipple,
It’s all learned.”

23. 23
UX INFLUENCES “THE WHY” OF THE PROBLEM

24. 24
UX IS PROCESS : ITERATIVE + AGILE

25. 25
Title Page
Who Does UX
Section Title Subhead

26. 26Fig 1: Joey Roth

27. •User Researcher
–Identifies user behaviors, goals and needs through interviews, studies and surveys
–User testing & segmentation analysis
•Information Architect (IA)
–Defines the structure of a system, how content is described, organized and discovered
–Relates content and production
•Interaction Designer (IxD/UX Designer)
–Defines interactions, user flows, wireframes, and affordances of a system
–Creates proto‫﬚‬pes, defines interactions, user flows, time to task & outcomes
•Interface Designer / Visual Designer (UI / Design)
–Defines the User interface element (GUI sets), how content is described, organized and discovered
–Creates look and feel for systems with color, pa‫﬙‬ern, iconography, ‫﬚‬pography and structure
•UI Developer
–Builds the system by interpreting the functional specification, sitemaps, wireframes while working within technical constraints
–Creates working proto‫﬚‬pes, defines limitations to
WHO DOES UX: UR ･ IA ･ IXD･ UI ･ DEV
27

28. USER RESEARCHER
• Identi﬌ user needs
and behaviors
– interviews
– surveys
– existing data
• Carry out user testing
– Paper proto‫﬚‬ping
– A/B testing
– Usabili‫﬚‬ / click tracking
28

29. INFORMATION ARCHITECTURE : STRUCTURE
29
+ + + + + +
2
Saved
Search
Starre
d
Followin
g
Recen
t
Popula
r
Nearb
y
Filte
r
Searc
h
Result
s
Projec
t
Galler
y
Submi
t
New
Project
My
Profile
Setting
s
Edit
Profile
Adv
Options
Edit
Notification
Edit
Sharing
Users
Starred
User
Profile
Users
Submits
My
Projects
Share
Logi
n
Home
Launch
Users
Projects
Edit
Projec
t
Download
Other
User
Not
Logge
d In
Hel
p
+
My
Submit
s
Process Flows & TemplatesSite Maps

30. INTERACTION DESIGN: AFFORDANCE
“A potential action that is made possible by a given object”
30h,p://www.jnd.org/dn.mss/affordances_and.html
DONALD NORMAN

31. USER INTERFACE: GUI / UI PATTERNS
31
GUI (graphical User Interface) - wireframe templates GUI - Design Sets

32. DEVELOPMENT: IMPLEMENTATION
32
Carrier 12:00 PM
MediaTask
Title
Description
#
Submit
sNew Task ProfileFeed
Title
Description
#
Title
Description
#
Title
Description
#
T7 Profile Page
Tap to view Profile
Page. Transitional
animation: no
animation
T8 Create Project
Tap to Create a New
Project. Transition: display
cut to new view w same
footer and new highlight
state, no animation
T2 Feed
Tap to view Feed Page (Home
Page). Transition: display cut to
new view w same footer and new
highlight state, no animation. Until
page contents loads display
header, footer, and a loading
spinner w message.
T5 Project Page
Tap to view Project Page.
Transitional animation: slide
left from right When a
project has no submissions
display a Submit button that
takes users directly to the
camera capture step. See
T5
Project List Item
Includes Image
from project
creator, Title,
Description, # of
Submissions, and
up to 5 of the most
recent submission
images.
Drag list down to refresh feed.
Display with animating arrow
or spinner and message:
"Pull down to Refresh"
"Release to Refresh"
"Updating"
"Not Connected to Interent"
T1 Info
Tap to view Info
page.
Transitional
animation: slide
up from bottom
T10 Search
Tap to view Search Page.
Transitional animation: slide
left from right When a project
has no submissions display a
Submit button that takes
users directly to the camera
capture step. See T5
M3 Filter
Tap to view Info
Filters.
Transitional
animation: slide
up from bottom
Carrier 12:00 PM
Title
Category ## photos ## videos submitted
User Name
My Projects Recent Popular
MediaTask
T8 Create Project
Tap to Create a New
Project. Transition: display
cut to new view w same
footer and new highlight
state, no animation
Pull down
to refresh.
Search
Title, by User Name
0/100
Category | ## | ## | ## Days left
Descriptio
n...
10/40
The Title of the
Prject, by User
Name Category | ## | ## | ## Days left
Descriptio
n...
10/40
The Title of the
Prject, by User
Name Category | ## | ## | ## Days left
Descriptio
n...
Swipe to navigate, tap to
select Feeds . Default feed is
Recent.
T5 Project Page
Tap to view Project Page.
Transitional animation: slide
left from right When a
project has no submissions
display a Submit button that
takes users directly to the
camera capture step. See
T5 This is a project with
no submissions.
M1 Project List Item
Includes Title, User Name,
Project Image, Category,
# of photos, # of videos, #
days left till project close,
Description, Goal Gauge,
optional gallery.
Drag list down to expose
search, and then refresh feed.
On release without reaching
refresh threshold keep search
visible. Upon reaching refresh
threshold display with
animating arrow or spinner
and message:
"Pull down to Refresh" >
"Release to Refresh"
"Updating"
"Not Connected to Interent"
T3 Profile Page
Tap to view Profile Page.
Transitional animation: no
animation
M3 Filter
Tap to view Filters.
Transitional animation: slide
down from top
For projects with
submissions, swipe
anywhere on a list item to
navigate a gallery of up to
10 recent entries. Swiping
also displays the
submissions button. See
M1 for full specification.
Feeds
My Submissions
Starred
My Projects
Following
Recent
Popular
Nearby
T10 Search
Tap to view Search.
Transitional animation: slide
keyboard up; expand the
height of search to include
the location field, slide up list
of recent searches. see
animation from Yelp Search.
Annotation & Functional Specs

33. 33
Title Page
Some UX Principles
Some of the Roles

34. 5 PRINCIPLES OF UX & USABILITY
• Learnable
• Efficient
• Memorable
• Good Error Management
• Satisfying
34

35. UX RESOURCES WEBSITE/APP
h‫﬙‬p://uxmag.com/
h‫﬙‬p://www.uxma‫﬙‬ers.com
h‫﬙‬p://www.uxbooth.com
h‫﬙‬p://uxdesign.smashingmagazine.com/
h‫﬙‬p://designmind.frogdesign.com/
h‫﬙‬p://www.dexigner.com/
h‫﬙‬p://wireframes.linowski.ca/
Human Centered Research
h‫﬙‬p://creativegood.com/blog/
h‫﬙‬p://www.experientia.com
h‫﬙‬p://labs.ideo.com/
Mobile talk
h‫﬙‬p://www.touchytalk.com/?p=174
35

36. 36
Title Page
Question and Answer

37. THANK YOU
37