UX
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.
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.
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.
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.
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
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
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.
UX SERVICES
1 Strategy
2 Information Architecture
3 Mock-up & Wireframing
4 Flowcharts
5 Test, Report & Finetuning
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.
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.
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
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
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
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
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
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
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
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
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
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
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.
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.
Thank you

  Thank you mdercerle.fr for the inspiration

What is UX Design?

  • 1.
  • 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 dollarinvested 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 redesignedand 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 THERIGHT 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 2Information Architecture 3 Mock-up & Wireframing 4 Flowcharts 5 Test, Report & Finetuning
  • 10.
    Find the answersof 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 studyof 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 featurelist, 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 intounderstandable 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 needsin 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 needsin 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 needsin 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 theuser’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