1.
UX

2.
WHAT IS UX?
ps: I’m not talking about UI : )
UX IS ABOUT SATISFACTION.
UI is about functionality.
UX IS DESIGNING FOR USER TO COME BACK THE SITE.
UI is designing for customer to reach their goal when on site.
UX FOCUSES ON THE STRUCTURE & LAYOUT OF
CONTENT, NAVIGATION AND HOW USERS INTERACT
WITH THEM.
UI focuses on functionality with nice look and feel.

3.
WHY UX? Let's talk about the return on investment, or ROI,
of doing user experience work.
BECAUSE UX MEASURES THE ROI OF USABILITY
TO LOOK FOR;
ROI
- more frequent visits to your Web site.
- increased return visits to your site.
- users staying longer on your site.
- increased sales.
- decreased user errors.
- decreased customer support costs.
- reduced word-of-mouth complaints.

4.
WHY UX?
Every dollar invested in UX brings
between 2 and 100 dollars in
return.
SOURCE: Pressman, R.S. (1992). Soſtware Engineering: A Practitioner’s Approach. McGraw-Hill: New York, NY
Gilb, T. (1988). Principles of Soſtware Engineering Management. Addison Wesley: Reading, Ma.

5.
WHY UX?
Recent survey of 735
internet companies,
shows they invest
11.5 %
of product
development budget
in UX resources and
UX investment areas and usability testing.
results are decrease in
the development costs, Real world example:
McAfee UI redesign saved
90% support costs.
increase in revenue and
decreased time to
market.
Real world example: IBM plans
a 1:10 return for usability testing
but gets returns as high as 1:100.
SOURCE: SDS Consulting (Strategic Data Consulting) report named „Special report: UX Business Impacts and ROI.

6.
WHY UX?
Foraker redesigned and redeveloped a community platform
IBM’s employees almost never accessed the company’s
for nonprofit organization Breastcancer.org, resulting in a
intranet because it was overly complex and complicated,
117% increase in traffic (visitors), a 41% increase in new making it nearly impossible to find needed information. Now
memberships, a 53% reduction in time taken to register, IBM has consolidated over “8,000 intranet sites, 680 ‘major’
and a 69% reduction in monthly help desk costs. This led sites, 11 million web pages, and 5,600 domain names,”
to tens of thousands of dollars in savings for the resulting in IBM Dynamic Workplaces, which employees
rate as the “number one source of information within
organization and opened up several new opportunities for
the company.”
outreach and the funding of operating expenses.
READ THE CASE STUDY READ THE CASE STUDY
CASES

7.
WE MAKE THE RIGHT PRODUCT
Users
1.Blah.
2.Blah.
Needs 3.Blah.
Why George can..
What
How
INSERT BUSINESS THINKING
Uses
Create sketches,
wireframes & UI Features
User Stories

8.
UX TEAM PROJECT MANAGER
PLANNING DIRECTOR
Research & delivery of the strategy, Management of complex projects
interpreting business & user requirements. involving large numbers of stakeholder
groups.
UX DESIGNER
Production of test plans, application testing TECHNICAL ARCHITECT
and supervision of external test resource, Evaluation and design of complex system
user tests, AB tests, personas, interviews, architectures.
analysis analytics & reports.
Works with UX Researcher
SENIOR DEVELOPER UI DESIGNER
Consultancy for initial application Production of graphical assets.
structures, development and review.

9.
UX SERVICES
1 Strategy
2 Information Architecture
3 Mock-up & Wireframing
4 Flowcharts
5 Test, Report & Finetuning

10.
Find the answers of questions
1 2 3 4 5
STRATEGY INFORMATION MOCKUP & FLOWCHARTS TEST, REPORT&
ARCHITECTURE WIREFRAMING FINETUNE
For Who?
Very very important question here. Every product is targeted to someone. If you understand who you talk to and
Planning Director
adapt your communication/language to this person, you’ll reach the goal.
For What?
The service description.
UX Designer
Why it is good?
The added value for the customer.
UX Researcher Is it a new product?
We absolutely need to understand why nobody has done it before. There has to be a reason. Try to find out why.
Is it an improvement of an existing product?
Highlight the pros & cons of the current product. Listen to the feedbacks from real user of the product.

11.
Make a study of the target
Personas, user interviews, benchmark presentations..
1 2 3 4 5
STRATEGY INFORMATION MOCKUP & FLOWCHARTS TEST, REPORT&
ARCHITECTURE WIREFRAMING FINETUNE
The user
i.e for who. We need to ask ourself this question. Who will use the product? We create
Planning Director
personas here.
The competition
UX Designer We create a benchmark with the main competitors. Highlights the features, the strengths
and the weaknesses.
UX Researcher
The market, the environment
We make research and find out data on the protential market the product is
addressing to.

12.
Create the feature list, highlight the details
Brainstormings, benchmarks, graphics...
1 2 3 4 5
STRATEGY INFORMATION MOCKUP & FLOWCHARTS TEST, REPORT&
ARCHITECTURE WIREFRAMING FINETUNE
Planning Director
Also know what is the
competition why Precisely know what
some are a succeed the product will do
UX Designer and other fail. and for who it will be
targeted.
Eventually have a
precise idea on what is
the killer feature and
Project Manager why it will be better than
the competitors.
Technical Architect

13.
Translate informations into understandable
things Mindmaps, sitemaps, graphics...
1 2 3 4 5
STRATEGY INFORMATION MOCKUP & FLOWCHARTS TEST, REPORT&
ARCHITECTURE WIREFRAMING FINETUNE
UX Designer
Informations for the
different parties
(copywriters, developers,
Project Manager project managers, clients).
We summarize, organize, categorize and unify all the content and the
way to represent it before translating into a user interface. It is not just
a sitemap of a website.
Technical Architect
Many more information will be included here. It is very important to
create a solid taxonomy in order to be understandable by the other.
Senior Developer

14.
Translate the needs in the UI language.
Creating mock-ups. Again and again..
1 2 3 4 5
STRATEGY INFORMATION MOCKUP & FLOWCHARTS TEST, REPORT&
ARCHITECTURE WIREFRAMING FINETUNE
Create mockups
& detailed UX Designer
Our objective is to get a rough
wireframes. idea and translate the needs in
We try to review them with some fresh eyes
the UI language.
and ask those questions;
Project Manager
1- Does the mockup highlight the main
objective of the product? 2- Is that clearly
understandable? 3- Does the secondary
features pollute the interface?
If not just redo. Again and again..
UI Designer

15.
Translate the needs in the UI language.
Creating mock-ups. Again and again..
1 2 3 4 5
STRATEGY INFORMATION MOCKUP & FLOWCHARTS TEST, REPORT&
ARCHITECTURE WIREFRAMING FINETUNE
Wireframes are If the Information
more precise than UX Designer
Architecture is the
the mockups. foundation of the app, the
So even there are no graphic design yet, the wireframes will be the rooms
layout you will get in the final design will be and the living area (and the
mostly the same as in the wireframe. So the design will be the paintings,
Project Manager
furniture and decoration).
front-end developers can begin to html-ize
some wireframes without waiting for the
final design compositions.
UI Designer

16.
Translate the needs in the UI language.
Creating mock-ups. Again and again..
1 2 3 4 5
STRATEGY INFORMATION MOCKUP & FLOWCHARTS TEST, REPORT&
ARCHITECTURE WIREFRAMING FINETUNE
In the end
wireframe will UX Designer
become a kind of
visual-functional Developers/Clients/Marketing loves it. : )
specification Project Manager
document.
Extremely useful and really more
understandable than the usual 40 pages
functional specification word document.
UI Designer

17.
Describe interactions.
Highlight the user’s journey into the app.
1 2 3 4 5
STRATEGY INFORMATION MOCKUP & FLOWCHARTS TEST, REPORT&
ARCHITECTURE WIREFRAMING FINETUNE
Describe interactions (All UX Designer
dynamic areas) by flowcharts.
Flowcharts are used for generic interactions. It is basically the wireframes
(or the design) mixed with a flowchart with some annotations.
Project Manager
Technical Architect

18.
Plan usability tests, create scenarios, conduct
tests, analyze analytics and create reports.
1 2 3 4 5
STRATEGY INFORMATION MOCKUP & FLOWCHARTS TEST, REPORT&
ARCHITECTURE WIREFRAMING FINETUNE
We create personas and make interviews, use screencapturing tests, heatmaps & analyze, A/B tests.
Interviews UX Designer
Personas
Project Manager
Usability Tests
A/B Testing UX Researcher
Heatmap

19.
Plan usability tests, create scenarios, conduct
tests, analyze analytics and create reports.
1 2 3 4 5
STRATEGY INFORMATION MOCKUP & FLOWCHARTS TEST, REPORT&
ARCHITECTURE WIREFRAMING FINETUNE
Interviews The idea is to get users to talk to
UX Designer
you about their previous experiences
Personas when trying to complete goals
relevant to the system.
Project Manager
Usability Tests
A/B Testing UX Researcher
Heatmap

20.
Plan usability tests, create scenarios, conduct
tests, analyze analytics and create reports.
1 2 3 4 5
STRATEGY INFORMATION MOCKUP & FLOWCHARTS TEST, REPORT&
ARCHITECTURE WIREFRAMING FINETUNE
Interviews UX Designer
Persona describes the ways in
Personas which certain types of people will
use the digital product.
Project Manager
Usually one persona is created for
Usability Tests each type of user.
Personas are used to show the
A/B Testing goals that users will be trying to
UX Researcher
achieve on the product.
Heatmap

21.
Plan usability tests, create scenarios, conduct
tests, analyze analytics and create reports.
1 2 3 4 5
STRATEGY INFORMATION MOCKUP & FLOWCHARTS TEST, REPORT&
ARCHITECTURE WIREFRAMING FINETUNE
Interviews UX Designer
Personas
A usability test report showing an Project Manager
Usability Tests interface, the problems
uncovered, and suggestions for
improvements.
A/B Testing UX Researcher
Heatmap

22.
Plan usability tests, create scenarios, conduct
tests, analyze analytics and create reports.
1 2 3 4 5
STRATEGY INFORMATION MOCKUP & FLOWCHARTS TEST, REPORT&
ARCHITECTURE WIREFRAMING FINETUNE
Interviews UX Designer
Personas
Project Manager
Usability Tests
A/B testing allows you to test the
real-world performance of two
A/B Testing design variables against each UX Researcher
other to uncover which variable is
Heatmap most effective for the completion
of tasks.

23.
Plan usability tests, create scenarios, conduct
tests, analyze analytics and create reports.
1 2 3 4 5
STRATEGY INFORMATION MOCKUP & FLOWCHARTS TEST, REPORT&
ARCHITECTURE WIREFRAMING FINETUNE
Interviews UX Designer
Personas
Project Manager
Usability Tests
A/B Testing UX Researcher
Heatmaps let us visualize where
Heatmap our visitors are clicking and where
they aren’t.

24.
Thank you
Thank you mdercerle.fr for the inspiration