SlideShare a Scribd company logo
1 of 86
Download to read offline
Case study: Designing for
EVERYONE, EVERYWHERE, AT ANY TIME
Polish IA Summit, Warsaw 2012




                                 Anna Dahlström
                                www.annadahlstrom.com
                                        annadahlstrom
“ DESIGN FOR EVERYONE &
YOU DESIGN FOR NO ONE “
“ DESIGN FOR EVERYONE &
YOU DESIGN FOR NO ONE “

  Why
“ DESIGN FOR EVERYONE &
YOU DESIGN FOR NO ONE “

  Why     What
“ DESIGN FOR EVERYONE &
YOU DESIGN FOR NO ONE “

  Why     What    How
A bit of HISTORY
     04
     15
     29
     03
     20
     17
04
15
29 June 2007
03
20
17
04 February 2004
15
29
03
20
17
04
15 July 2006
29
03
20
17
04
15
29
03 April 2010
20
17
04
15
29
03
20 April 2012
17
04
15
29
03
20
17 May 2014
04 February 2004 | Facebook
15 July 2006 | Twitter
29 June 2007 | iPhone
03 April 2010 | iPad
20 April 2012 | IASW
17 May 2014 | ?
Here is WALLY




http://www.findwaldo.com/fankit/graphics/
Where is WALLY?




http://www.findwaldo.com/fankit/graphics/
Everyone back THEN




www.guardian.co.uk/world/picture/2010/jun/01/eyewitness-world-record-wally
Everyone TODAY




www.robotshop.com/blog/where-is-wall-e-1391
Devices back THEN
Devices TODAY
Location back THEN
Location TODAY
Journeys back THEN
Journeys TODAY
Once upon
                                                                                 a time...



http://www.flickr.com/photos/excomedia/sets/72157622519563566/with/5233990438/
Flat in VACANT POSSESSION
A secret HATCH
Unwanted WALLS
Building works STARTED
Building works STARTED
Building works STARTED
Then came the DUST
And new LESSONS
Completely new WORLD




http://www.edexcel.com
A million QUESTIONS




http://www.northgeorgia.edu
With HIDDEN ANSWERS




http://www.northgeorgia.edu
Based on ASSUMED KNOWLEDGE




http://www.etsy.com/shop/kylespears?ref=top_trail
Endless RESEARCH
Unmet Expectations




http://keithmansfield.co.uk/2008/08/29/gone-fishing/
And Plan Bs ON THE GO
It was PAINFUL




http://www.tekspertise.com/
But, it could
 have been
  like this.
1. AUDIENCE | TAKING A CLOSER LOOK
2. CONTENT | WHAT IS REALLY NEEDED
3. DEVICES | HOW THEY ARE USED
1.
” Everything starts with the user “
                               Steve jobs
BROADER USER BASE
http://jhonman.wordpress.com
NEW & SAVVY USER
                                                                 NEW &
                           “TELL ME WHAT I                       SAVVY      RETURNING
                         SHOULD CONSIDER?”    RETURNING USERS                 EXPERT
       NEW &                                                    “NOT SURE
                                                                WHICH BUT     “A SPECIFIC
       NOVICE                                  “WE WANT TO      A THERMAL   THERMAL BATH”
      “WHAT IS                                COMPARE A FEW”       BATH”
      A BATH?”




                         MORE DIVERSE NEEDS
http://jhonman.wordpress.com
WELCOME!
                               HOW CAN WE HELP

     GO SOMEWHERE
          ELSE.
     WE DON’T CARE
      ABOUT YOU




              Not catering means
         A COMPROMISED EXPERIENCE
http://jhonman.wordpress.com
2.
  ” Serving up the same stale
content to everyone is without a
  question no longer enough “
                    Said by Sam Quayle, Smashing Magazine
ONE TO ONE EXPERIENCE
THE DRINKS          THE 5 COURSES
 ONLY GIRLS             GROUP



                      PRE-THEATRE
THE STARTER &
                        GROUP
DESERT GROUP




THE BIRTHDAY           TAKE AWAY
   PARTY                COUPLE
                      STRAIGHT TO
                      MAINS GROUP


  WHO | WHERE | WHAT | HOW
       & WHERE NEXT?
ACTUALLY, IT’S NOT      PEOPLE LOVE THESE. BUT
     JUST ABOUT COCKTAILS
       WE ALSO NEED WINE       WANT MORE BREADTH


      NOONE
     ORDERS THIS
                             NOONE
                            ORDERS THIS




        BEST
       SELLERS

     For each piece of content
BE CLEAR ON ITS IMPORTANCE &
            PURPOSE
3.
    ” Content needs to be
  choreographed to ensure the
 intended message is preserved
on any device and at any width “
                           By @trentwalton
USED FOR
                             USED FOR                  SHOPPING
                             SHOPPING




           USED FOR
           SHOPPING




  BEHAVIOUR ISN’T DETERMINED BY
      LOCATION OR DEVICE
http://desktopwallpaper-s.com/19-Computers/-/Future/
USED IN THE
         USED ON THE      SOFA
             GO




USED ON THE
   TOILET




PHYSICAL CONTEXT DOESN’T
       EQUAL TASK
THE WEB          THE
                       WEB
                               THE
                               WEB   THE WEB



                THE                  THE
        THE                          WEB
                WEB
        WEB
                         THE WEB
                THE
                WEB




      Users have an expectation of
EQUAL & CONTINUOS EXPERIENCE
What does
this all mean




   ?
“ DESIGN FOR EVERYONE &
YOU DESIGN FOR NO ONE “
DESIGN FOR EVERYONE
         ≠
DESIGN FOR NO ONE
1. AUDIENCE | BROADENING OUR VIEW
2. CONTENT | INSIGHT & PRIORITISING
3. DEVICES | EQUAL EXPERIENCE
Step 5
                           User needs

         Step 4                            Step 6
         UX lifecycle              Business needs



 Step 3                                              Step 7
 Key user journeys                       Competitor analysis


                                                          Step 8
Step 2                                        A few other steps
Formulating the vision                  incl. doing the sitemap


    Step 1                                        Step 9
    Defining the target audience               Wireframes
Step 5
                         User needs

         Step 4                     Step 6
         UX lifecycle             Business
                                    needs


 Step 3                                       Step 7
 Key user journeys                Competitor analysis


                                                   Step 8
Step 2                                 A few other steps
Formulating the vision           incl. doing the sitemap


    Step 1                              Step 9
    Defining the target             Wireframes
    audience
1. AUDIENCE | BROADENING OUR VIEW
Who out of EVERYONE


       Where do I start?     I have a vague idea




     I know what it should     I know exactly
        & shouldn't have         what I want
Who out of EVERYONE


       Where do I start?     I have a vague idea




     I know what it should     I know exactly
        & shouldn't have         what I want
Who out of EVERYONE


       Where do I start?     I have a vague idea




     I know what it should     I know exactly
        & shouldn't have         what I want
2. CONTENT | INSIGHT & PRIORITISING
Everyone & their NEEDS




  Awareness   Consideration    Confirmation            Purchase       Support




Where do I    I have a vague   I know what it       I know exactly
start?        idea             should & shouldn't   what I want
                               have
Everyone & their NEEDS



 BUSINESS NEEDS
• Ensure users aren't lost   • Provide the user with a   • Feature user reviews   • Provide a store locator   • FAQs that minimise the
  & converted on a             comparison tool             on the site                                          number of customer
  competitor's site                                                                                             services calls received



  Awareness                  Consideration                Confirmation                 Purchase                    Support




Where do I                   I have a vague              I know what it           I know exactly
start?                       idea                        should & shouldn't       what I want
                                                         have
Everyone & their NEEDS

 USER NEEDS
• Background information     • Clear route into the      • Reassurance that I     • Effortless                • Easy access to and help
  & advice on where to         products they are after     have made the right      completion of               in times of trouble
  start                                                    choice                   their order


 BUSINESS NEEDS
• Ensure users aren't lost   • Provide the user with a   • Feature user reviews   • Provide a store locator   • FAQs that minimise the
  & converted on a             comparison tool             on the site                                          number of customer
  competitor's site                                                                                             services calls received



  Awareness                  Consideration                Confirmation                 Purchase                    Support




Where do I                   I have a vague              I know what it           I know exactly
start?                       idea                        should & shouldn't       what I want
                                                         have
Everyone & their NEEDS
 KEY ENTRY POINTS
• Search (to page)           • Search (to page)          • Bookmark               • Home page                 • Search (to page)
• Home page                  • Home page                                                                      • Home page
                             • Bookmark

 USER NEEDS
• Background information     • Clear route into the      • Reassurance that I     • Effortless                • Easy access to and help
  & advice on where to         products they are after     have made the right      completion of               in times of trouble
  start                                                    choice                   their order


 BUSINESS NEEDS
• Ensure users aren't lost   • Provide the user with a   • Feature user reviews   • Provide a store locator   • FAQs that minimise the
  & converted on a             comparison tool             on the site                                          number of customer
  competitor's site                                                                                             services calls received



  Awareness                  Consideration                Confirmation                 Purchase                    Support




Where do I                   I have a vague              I know what it           I know exactly
start?                       idea                        should & shouldn't       what I want
                                                         have
KEY DEVICES
• Laptop                     • Laptop                    • iPad                   • Computer                  • Mobile
• Mobile                                                                                                      • iPad
                                                                                                              • Laptop
 KEY ENTRY POINTS
 KEY ENTRY POINTS
• Search (to page)           • Search (to page)          • Bookmark               • Home page                 • Search (to page)
• Home page                  • Home page                                                                      • Home page
                             • Bookmark

 USER NEEDS
• Background information     • Clear route into the      • Reassurance that I     • Effortless                • Easy access to and help
  & advice on where to         products they are after     have made the right      completion of               in times of trouble
  start                                                    choice                   their order


 BUSINESS NEEDS
• Ensure users aren't lost   • Provide the user with a   • Feature user reviews   • Provide a store locator   • FAQs that minimise the
  & converted on a             comparison tool             on the site                                          number of customer
  competitor's site                                                                                             services calls received



  Awareness                  Consideration                Confirmation                 Purchase                    Support




Where do I                   I have a vague              I know what it           I know exactly
start?                       idea                        should & shouldn't       what I want
                                                         have
Action & Content PRIORITISATION
Action                                                        Content
   Explore       Research      Confirmation        Buy           Background           Tools          Related         Buying

                                                                                  Bathroom          Related
   Browse        Compare         Copy url     Add to basket    Types of bath                                     Our guarantee
                                                                                   planner         products

                                              Remove from                        Comparison
  Preview          Filter         Email                        Buying guides                      User reviews     Delivery
                                                 basket                             tool

                                                               What to look     10 questions to      Price
Find out more     Search       Read reviews   Locate store                                                       Store locator
                                                                   for          help you choose   comparisons

                                              Find contact                       Find the right   Alternative      Customer
 View range     Find related      Share                       About our baths
                                                  info                          bath accessory     products         support
Action & Content PRIORITISATION
Action                                                        Content
   Explore       Research      Confirmation        Buy           Background           Tools          Related         Buying

                                                                                  Bathroom          Related
   Browse        Compare         Copy url     Add to basket    Types of bath                                     Our guarantee
                                                                                   planner         products

                                              Remove from                        Comparison
  Preview          Filter         Email                        Buying guides                      User reviews     Delivery
                                                 basket                             tool

                                                               What to look     10 questions to      Price
Find out more     Search       Read reviews   Locate store                                                       Store locator
                                                                   for          help you choose   comparisons

                                              Find contact                       Find the right   Alternative      Customer
 View range     Find related      Share                       About our baths
                                                  info                          bath accessory     products         support
Action & Content PRIORITISATION
Action                                                        Content
  Explore        Research      Confirmation        Buy           Background
                                                                Background           Tools          Related         Buying

                                                                                  Bathroom         Related
   Browse        Compare         Copy url     Add to basket    Types of bath
                                                               Types of bath                                     Our guarantee
                                                                                   planner         products

                                              Remove from                        Comparison
  Preview          Filter         Email                        Buying guides
                                                               Buying guides                      User reviews     Delivery
                                                 basket                             tool

                                                               What to look
                                                               What to look     10 questions to      Price
Find out more     Search       Read reviews   Locate store                                                       Store locator
                                                                   for
                                                                   for          help you choose   comparisons

                                              Find contact                       Find the right   Alternative      Customer
 View range     Find related      Share                       About our baths
                                                              About our baths
                                                  info                          bath accessory     products         support
3. DEVICES | EQUAL EXPERIENCE
Page DESCRIPTIONS

Baths                    Logo                 Header               Individual product     Logo                Header
The purpose of this                                                page
page is to                                                         The purpose of this
 • educate the user                Bath section intro     Ad       page is to
                                                                                                            Bath A intro
     on the types of                                                • Provide an
     baths available      Nav
                                                                        overview of the    Nav
 • provide quick                                                        product
     access to specific                                              • Present detailed
     baths                                                              information                                          Ad
 • highlight offers &               Types of baths
                                                        Popular     • Provide access to
                                                        products                                    Spec for bath A &
     popular products     Store                                         user reviews       Store        reviews
                         locator                                                          locator
                                                                                                                           Related
                                                                                                                           products
                         Tools                                                            Tools



                                        Footer                                                           Footer
Behaviour ACROSS DEVICES
    Desktop/ Tablets                          Mobile
       1                   2                    1
                                                        2 Header
     Logo                Header               Logo

                                                       3
                     4                5               Nav
              Bath section intro     Ad
                                                  4
                                                Bath          5
      3                                        section        Ad
     Nav                                        intro



                                      7
                     6
                                   Related
               Types of baths
    8 Store                        products
    locator                                          6
                                               Types of baths

    9 Tools


                    10
                   Footer

                                                     7
                                              Related products



                                              8 Store
                                                          9 Tools
                                              locator


                                                      10
                                                     Footer
Wireframes & MODULE LIBRARIES
Desktop/ Tablets                                                  Mobile
   1                   2                                             1
                                          Module 4a   Module 4b              2 Header
 Logo                Header                                        Logo

                                                                            3
                 4               5                                         Nav
          Bath section intro     Ad
                                                                       4
                                                                     Bath          5
  3                                                                 section        Ad
 Nav                                                                 intro
                                          Module 6a   Module 6b


                                  7
                 6
                               Related
           Types of baths
8 Store                        products
locator                                                                   6
                                                                    Types of baths

9 Tools


                10
               Footer

                                                                          7
                                                                   Related products



                                                                   8 Store
                                                                               9 Tools
                                                                   locator


                                                                           10
                                                                          Footer
What about
   budgets,
  timelines,
mobile apps &
  websites




    ?
” Today's popular devices are not
    tomorrow's so building
  something which works on
any device is better than building
  something which works on
       today's devices “
            Combined wise words from @onextrapixel and @trentwalton
Different    WE NEED TO DESIGN FOR
devices are
 here to      THEM & IDENTIFY HOW BEST
   stay       TO DESIGN FOR THEM
THIS INCLUDES LOST
 Consider     CUSTOMERS, BUILDING &
alternative
   costs      MAINTAINING MULTIPLE
              VERSIONS
Take an   MORE COLLABORATION &
adaptive
approach   A FLEXIBLE TOOLBOX
THERE SHOULD BE AN EQUAL
Educate & be
 persistent    EXPERIENCE ACROSS ALL
               DEVICES
” Money spent developing a
  pretty but limited iPhone app
only benefits...the few, but money
 spent on the website UI would
   have benefitted everyone “
              Said by Gary Marshall on ‘The app trap’ in .net Magaizine
” Everytime you redesign
   God kills a kitten “
                  Wisely said by @louisrosenfeld
Thank you!
                                                     QUESTIONS?
                                                        annadahlstrom
                                                        annadahlstrom
                                                     www.annadahlstrom.com




www.flickr.com/photos/matterphotography/2739799786/

More Related Content

Viewers also liked

Por qué los CIO deben modernizar su centro de contacto ahora
Por qué los CIO deben modernizar su centro de contacto ahoraPor qué los CIO deben modernizar su centro de contacto ahora
Por qué los CIO deben modernizar su centro de contacto ahoraCamilo Garcia
 
Nota técnica n1 ensayo de materiales dieléctricos ver 1 2
Nota técnica n1 ensayo de materiales dieléctricos ver 1 2Nota técnica n1 ensayo de materiales dieléctricos ver 1 2
Nota técnica n1 ensayo de materiales dieléctricos ver 1 2Leonardo O Guarco
 
Quintana 08 03_2013_rapallo
Quintana 08 03_2013_rapalloQuintana 08 03_2013_rapallo
Quintana 08 03_2013_rapalloPatrizia Ercole
 
Zaderah finalbookshape-130529123632-phpapp01
Zaderah finalbookshape-130529123632-phpapp01Zaderah finalbookshape-130529123632-phpapp01
Zaderah finalbookshape-130529123632-phpapp01Muhammad Nabeel Musharraf
 
Guia construccion dama
Guia construccion damaGuia construccion dama
Guia construccion damakoolafh
 
De Redes Sociales a Redes Profesionales
De Redes Sociales a Redes ProfesionalesDe Redes Sociales a Redes Profesionales
De Redes Sociales a Redes ProfesionalesMundo Contact
 
Ce Events Services Brief Overview 2016
Ce Events Services Brief Overview 2016Ce Events Services Brief Overview 2016
Ce Events Services Brief Overview 2016Marcus Jackson
 
Assessing and grading
Assessing and gradingAssessing and grading
Assessing and gradingdrucsamal
 
Eran Bertin Osborne, Antonio Banderas y el Fari...
Eran Bertin Osborne, Antonio Banderas y el Fari...Eran Bertin Osborne, Antonio Banderas y el Fari...
Eran Bertin Osborne, Antonio Banderas y el Fari...trocherias
 
Descubre tu Vocación: Licenciatura en Nutrición | Panorama laboral | ¿Cuánto ...
Descubre tu Vocación: Licenciatura en Nutrición | Panorama laboral | ¿Cuánto ...Descubre tu Vocación: Licenciatura en Nutrición | Panorama laboral | ¿Cuánto ...
Descubre tu Vocación: Licenciatura en Nutrición | Panorama laboral | ¿Cuánto ...Introspecta Taller Orientación Vocacional
 
Proyecto asociativo "Reforma AUGE/GES"
Proyecto asociativo "Reforma AUGE/GES"Proyecto asociativo "Reforma AUGE/GES"
Proyecto asociativo "Reforma AUGE/GES"Jorge Pacheco
 
Felicidad en el Trabajo - El rol del Jefe - Te quiero VER
Felicidad en el Trabajo - El rol del Jefe - Te quiero VERFelicidad en el Trabajo - El rol del Jefe - Te quiero VER
Felicidad en el Trabajo - El rol del Jefe - Te quiero VERrodrigo_saa
 
Ghidul solicitantului pentru_masura_313_-_versiunea_5_din_februarie_2011
Ghidul solicitantului pentru_masura_313_-_versiunea_5_din_februarie_2011Ghidul solicitantului pentru_masura_313_-_versiunea_5_din_februarie_2011
Ghidul solicitantului pentru_masura_313_-_versiunea_5_din_februarie_2011teodor0220
 
La 46 ala mixta de gando
La 46 ala mixta de gandoLa 46 ala mixta de gando
La 46 ala mixta de gandoHispaviacion
 

Viewers also liked (16)

Por qué los CIO deben modernizar su centro de contacto ahora
Por qué los CIO deben modernizar su centro de contacto ahoraPor qué los CIO deben modernizar su centro de contacto ahora
Por qué los CIO deben modernizar su centro de contacto ahora
 
Nota técnica n1 ensayo de materiales dieléctricos ver 1 2
Nota técnica n1 ensayo de materiales dieléctricos ver 1 2Nota técnica n1 ensayo de materiales dieléctricos ver 1 2
Nota técnica n1 ensayo de materiales dieléctricos ver 1 2
 
la navidad
la navidadla navidad
la navidad
 
Quintana 08 03_2013_rapallo
Quintana 08 03_2013_rapalloQuintana 08 03_2013_rapallo
Quintana 08 03_2013_rapallo
 
EVENT MARKETING SALES PR
EVENT MARKETING SALES PREVENT MARKETING SALES PR
EVENT MARKETING SALES PR
 
Zaderah finalbookshape-130529123632-phpapp01
Zaderah finalbookshape-130529123632-phpapp01Zaderah finalbookshape-130529123632-phpapp01
Zaderah finalbookshape-130529123632-phpapp01
 
Guia construccion dama
Guia construccion damaGuia construccion dama
Guia construccion dama
 
De Redes Sociales a Redes Profesionales
De Redes Sociales a Redes ProfesionalesDe Redes Sociales a Redes Profesionales
De Redes Sociales a Redes Profesionales
 
Ce Events Services Brief Overview 2016
Ce Events Services Brief Overview 2016Ce Events Services Brief Overview 2016
Ce Events Services Brief Overview 2016
 
Assessing and grading
Assessing and gradingAssessing and grading
Assessing and grading
 
Eran Bertin Osborne, Antonio Banderas y el Fari...
Eran Bertin Osborne, Antonio Banderas y el Fari...Eran Bertin Osborne, Antonio Banderas y el Fari...
Eran Bertin Osborne, Antonio Banderas y el Fari...
 
Descubre tu Vocación: Licenciatura en Nutrición | Panorama laboral | ¿Cuánto ...
Descubre tu Vocación: Licenciatura en Nutrición | Panorama laboral | ¿Cuánto ...Descubre tu Vocación: Licenciatura en Nutrición | Panorama laboral | ¿Cuánto ...
Descubre tu Vocación: Licenciatura en Nutrición | Panorama laboral | ¿Cuánto ...
 
Proyecto asociativo "Reforma AUGE/GES"
Proyecto asociativo "Reforma AUGE/GES"Proyecto asociativo "Reforma AUGE/GES"
Proyecto asociativo "Reforma AUGE/GES"
 
Felicidad en el Trabajo - El rol del Jefe - Te quiero VER
Felicidad en el Trabajo - El rol del Jefe - Te quiero VERFelicidad en el Trabajo - El rol del Jefe - Te quiero VER
Felicidad en el Trabajo - El rol del Jefe - Te quiero VER
 
Ghidul solicitantului pentru_masura_313_-_versiunea_5_din_februarie_2011
Ghidul solicitantului pentru_masura_313_-_versiunea_5_din_februarie_2011Ghidul solicitantului pentru_masura_313_-_versiunea_5_din_februarie_2011
Ghidul solicitantului pentru_masura_313_-_versiunea_5_din_februarie_2011
 
La 46 ala mixta de gando
La 46 ala mixta de gandoLa 46 ala mixta de gando
La 46 ala mixta de gando
 

More from Anna Dahlström

Optimising Landing Pages Through Narrative Structure - Digital Growth Unleash...
Optimising Landing Pages Through Narrative Structure - Digital Growth Unleash...Optimising Landing Pages Through Narrative Structure - Digital Growth Unleash...
Optimising Landing Pages Through Narrative Structure - Digital Growth Unleash...Anna Dahlström
 
Using Storytelling to Create Experiences that Convert - Conversion Elite, Lon...
Using Storytelling to Create Experiences that Convert - Conversion Elite, Lon...Using Storytelling to Create Experiences that Convert - Conversion Elite, Lon...
Using Storytelling to Create Experiences that Convert - Conversion Elite, Lon...Anna Dahlström
 
How To Use Storytelling To Craft Experiences That Engage - IIeX EU, Amsterda...
How To Use Storytelling To Craft Experiences That Engage  - IIeX EU, Amsterda...How To Use Storytelling To Craft Experiences That Engage  - IIeX EU, Amsterda...
How To Use Storytelling To Craft Experiences That Engage - IIeX EU, Amsterda...Anna Dahlström
 
Beyond The Hamburger Menu - UX In The City Oxford, 21 Apr 2017
Beyond The Hamburger Menu - UX In The City Oxford, 21 Apr 2017Beyond The Hamburger Menu - UX In The City Oxford, 21 Apr 2017
Beyond The Hamburger Menu - UX In The City Oxford, 21 Apr 2017Anna Dahlström
 
Using Storytelling To Craft Multi-device Experiences That Convert - CXL Live,...
Using Storytelling To Craft Multi-device Experiences That Convert - CXL Live,...Using Storytelling To Craft Multi-device Experiences That Convert - CXL Live,...
Using Storytelling To Craft Multi-device Experiences That Convert - CXL Live,...Anna Dahlström
 
Storytelling In Design - SXSW, 13 March 2017
Storytelling In Design - SXSW, 13 March 2017Storytelling In Design - SXSW, 13 March 2017
Storytelling In Design - SXSW, 13 March 2017Anna Dahlström
 
Storytelling In Design - DXN, Nottingham, 8 Feb 2017
Storytelling In Design - DXN, Nottingham, 8 Feb 2017Storytelling In Design - DXN, Nottingham, 8 Feb 2017
Storytelling In Design - DXN, Nottingham, 8 Feb 2017Anna Dahlström
 
Storytelling In Design - Conversion Hotel, Texel NL, 20 Nov 2016
Storytelling In Design - Conversion Hotel, Texel NL, 20 Nov 2016Storytelling In Design - Conversion Hotel, Texel NL, 20 Nov 2016
Storytelling In Design - Conversion Hotel, Texel NL, 20 Nov 2016Anna Dahlström
 
Beyond The Hamburger Menu, UX Ireland, 10 Nov 2016
Beyond The Hamburger Menu, UX Ireland, 10 Nov 2016Beyond The Hamburger Menu, UX Ireland, 10 Nov 2016
Beyond The Hamburger Menu, UX Ireland, 10 Nov 2016Anna Dahlström
 
Bulding Device Agnostic UX Systems - Generate London, 23 Sep 2016
Bulding Device Agnostic UX Systems - Generate London, 23 Sep 2016Bulding Device Agnostic UX Systems - Generate London, 23 Sep 2016
Bulding Device Agnostic UX Systems - Generate London, 23 Sep 2016Anna Dahlström
 
Storytelling In Design - Funkas Tillgänglighetsdagar, 12 Apr 2016
Storytelling In Design - Funkas Tillgänglighetsdagar, 12 Apr 2016Storytelling In Design - Funkas Tillgänglighetsdagar, 12 Apr 2016
Storytelling In Design - Funkas Tillgänglighetsdagar, 12 Apr 2016Anna Dahlström
 
Storytelling For Multi-device Design - Bulgaria Web Summit, 20 Feb 2016
Storytelling For Multi-device Design - Bulgaria Web Summit, 20 Feb 2016Storytelling For Multi-device Design - Bulgaria Web Summit, 20 Feb 2016
Storytelling For Multi-device Design - Bulgaria Web Summit, 20 Feb 2016Anna Dahlström
 
Storytelling In A Multi Device Landscape - Amuse, Budapest 30 Oct 2015
Storytelling In A Multi Device Landscape - Amuse, Budapest 30 Oct 2015Storytelling In A Multi Device Landscape - Amuse, Budapest 30 Oct 2015
Storytelling In A Multi Device Landscape - Amuse, Budapest 30 Oct 2015Anna Dahlström
 
Designing Around Storytelling - Breaking Borders, Reading 18 August 2015
Designing Around Storytelling - Breaking Borders, Reading 18 August 2015Designing Around Storytelling - Breaking Borders, Reading 18 August 2015
Designing Around Storytelling - Breaking Borders, Reading 18 August 2015Anna Dahlström
 
Beyond the hamburger menu - Reasons:London, 20 Feb 2015
Beyond the hamburger menu - Reasons:London, 20 Feb 2015Beyond the hamburger menu - Reasons:London, 20 Feb 2015
Beyond the hamburger menu - Reasons:London, 20 Feb 2015Anna Dahlström
 
Responsivt - Inte bara för mobilen + Webbdagarna Växjö, 04 Dec 2014
Responsivt - Inte bara för mobilen + Webbdagarna Växjö, 04 Dec 2014Responsivt - Inte bara för mobilen + Webbdagarna Växjö, 04 Dec 2014
Responsivt - Inte bara för mobilen + Webbdagarna Växjö, 04 Dec 2014Anna Dahlström
 
Beyond the hamburger menu - Digital Doughnut, London 25 Nov 2014
Beyond the hamburger menu - Digital Doughnut, London 25 Nov 2014Beyond the hamburger menu - Digital Doughnut, London 25 Nov 2014
Beyond the hamburger menu - Digital Doughnut, London 25 Nov 2014Anna Dahlström
 
Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014
Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014
Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014Anna Dahlström
 
Device Agnostic Design - UCD2014, London 25 Oct 2014
Device Agnostic Design - UCD2014, London 25 Oct 2014Device Agnostic Design - UCD2014, London 25 Oct 2014
Device Agnostic Design - UCD2014, London 25 Oct 2014Anna Dahlström
 
Beyond The Hamburger Menu - MOBX, 13 Sep 2014
Beyond The Hamburger Menu - MOBX, 13 Sep 2014Beyond The Hamburger Menu - MOBX, 13 Sep 2014
Beyond The Hamburger Menu - MOBX, 13 Sep 2014Anna Dahlström
 

More from Anna Dahlström (20)

Optimising Landing Pages Through Narrative Structure - Digital Growth Unleash...
Optimising Landing Pages Through Narrative Structure - Digital Growth Unleash...Optimising Landing Pages Through Narrative Structure - Digital Growth Unleash...
Optimising Landing Pages Through Narrative Structure - Digital Growth Unleash...
 
Using Storytelling to Create Experiences that Convert - Conversion Elite, Lon...
Using Storytelling to Create Experiences that Convert - Conversion Elite, Lon...Using Storytelling to Create Experiences that Convert - Conversion Elite, Lon...
Using Storytelling to Create Experiences that Convert - Conversion Elite, Lon...
 
How To Use Storytelling To Craft Experiences That Engage - IIeX EU, Amsterda...
How To Use Storytelling To Craft Experiences That Engage  - IIeX EU, Amsterda...How To Use Storytelling To Craft Experiences That Engage  - IIeX EU, Amsterda...
How To Use Storytelling To Craft Experiences That Engage - IIeX EU, Amsterda...
 
Beyond The Hamburger Menu - UX In The City Oxford, 21 Apr 2017
Beyond The Hamburger Menu - UX In The City Oxford, 21 Apr 2017Beyond The Hamburger Menu - UX In The City Oxford, 21 Apr 2017
Beyond The Hamburger Menu - UX In The City Oxford, 21 Apr 2017
 
Using Storytelling To Craft Multi-device Experiences That Convert - CXL Live,...
Using Storytelling To Craft Multi-device Experiences That Convert - CXL Live,...Using Storytelling To Craft Multi-device Experiences That Convert - CXL Live,...
Using Storytelling To Craft Multi-device Experiences That Convert - CXL Live,...
 
Storytelling In Design - SXSW, 13 March 2017
Storytelling In Design - SXSW, 13 March 2017Storytelling In Design - SXSW, 13 March 2017
Storytelling In Design - SXSW, 13 March 2017
 
Storytelling In Design - DXN, Nottingham, 8 Feb 2017
Storytelling In Design - DXN, Nottingham, 8 Feb 2017Storytelling In Design - DXN, Nottingham, 8 Feb 2017
Storytelling In Design - DXN, Nottingham, 8 Feb 2017
 
Storytelling In Design - Conversion Hotel, Texel NL, 20 Nov 2016
Storytelling In Design - Conversion Hotel, Texel NL, 20 Nov 2016Storytelling In Design - Conversion Hotel, Texel NL, 20 Nov 2016
Storytelling In Design - Conversion Hotel, Texel NL, 20 Nov 2016
 
Beyond The Hamburger Menu, UX Ireland, 10 Nov 2016
Beyond The Hamburger Menu, UX Ireland, 10 Nov 2016Beyond The Hamburger Menu, UX Ireland, 10 Nov 2016
Beyond The Hamburger Menu, UX Ireland, 10 Nov 2016
 
Bulding Device Agnostic UX Systems - Generate London, 23 Sep 2016
Bulding Device Agnostic UX Systems - Generate London, 23 Sep 2016Bulding Device Agnostic UX Systems - Generate London, 23 Sep 2016
Bulding Device Agnostic UX Systems - Generate London, 23 Sep 2016
 
Storytelling In Design - Funkas Tillgänglighetsdagar, 12 Apr 2016
Storytelling In Design - Funkas Tillgänglighetsdagar, 12 Apr 2016Storytelling In Design - Funkas Tillgänglighetsdagar, 12 Apr 2016
Storytelling In Design - Funkas Tillgänglighetsdagar, 12 Apr 2016
 
Storytelling For Multi-device Design - Bulgaria Web Summit, 20 Feb 2016
Storytelling For Multi-device Design - Bulgaria Web Summit, 20 Feb 2016Storytelling For Multi-device Design - Bulgaria Web Summit, 20 Feb 2016
Storytelling For Multi-device Design - Bulgaria Web Summit, 20 Feb 2016
 
Storytelling In A Multi Device Landscape - Amuse, Budapest 30 Oct 2015
Storytelling In A Multi Device Landscape - Amuse, Budapest 30 Oct 2015Storytelling In A Multi Device Landscape - Amuse, Budapest 30 Oct 2015
Storytelling In A Multi Device Landscape - Amuse, Budapest 30 Oct 2015
 
Designing Around Storytelling - Breaking Borders, Reading 18 August 2015
Designing Around Storytelling - Breaking Borders, Reading 18 August 2015Designing Around Storytelling - Breaking Borders, Reading 18 August 2015
Designing Around Storytelling - Breaking Borders, Reading 18 August 2015
 
Beyond the hamburger menu - Reasons:London, 20 Feb 2015
Beyond the hamburger menu - Reasons:London, 20 Feb 2015Beyond the hamburger menu - Reasons:London, 20 Feb 2015
Beyond the hamburger menu - Reasons:London, 20 Feb 2015
 
Responsivt - Inte bara för mobilen + Webbdagarna Växjö, 04 Dec 2014
Responsivt - Inte bara för mobilen + Webbdagarna Växjö, 04 Dec 2014Responsivt - Inte bara för mobilen + Webbdagarna Växjö, 04 Dec 2014
Responsivt - Inte bara för mobilen + Webbdagarna Växjö, 04 Dec 2014
 
Beyond the hamburger menu - Digital Doughnut, London 25 Nov 2014
Beyond the hamburger menu - Digital Doughnut, London 25 Nov 2014Beyond the hamburger menu - Digital Doughnut, London 25 Nov 2014
Beyond the hamburger menu - Digital Doughnut, London 25 Nov 2014
 
Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014
Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014
Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014
 
Device Agnostic Design - UCD2014, London 25 Oct 2014
Device Agnostic Design - UCD2014, London 25 Oct 2014Device Agnostic Design - UCD2014, London 25 Oct 2014
Device Agnostic Design - UCD2014, London 25 Oct 2014
 
Beyond The Hamburger Menu - MOBX, 13 Sep 2014
Beyond The Hamburger Menu - MOBX, 13 Sep 2014Beyond The Hamburger Menu - MOBX, 13 Sep 2014
Beyond The Hamburger Menu - MOBX, 13 Sep 2014
 

Recently uploaded

guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssNadaMohammed714321
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks CharlottePulte
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfLucyBonelli
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxKevinYaelJimnezSanti
 
PORTFOLIO 2024 ANASTASIYA KUDINOVA
PORTFOLIO 2024       ANASTASIYA KUDINOVAPORTFOLIO 2024       ANASTASIYA KUDINOVA
PORTFOLIO 2024 ANASTASIYA KUDINOVAAnastasiya Kudinova
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine CharlottePulte
 
City Hall London, Norman Foster building description with building details.pptx
City Hall London, Norman Foster building description with building details.pptxCity Hall London, Norman Foster building description with building details.pptx
City Hall London, Norman Foster building description with building details.pptxYaminiDabbara
 
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONPORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONAnastasiya Kudinova
 
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdfARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdfCristobalHeraud
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...Pranav Subramanian
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024digital learning point
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptJIT KUMAR GUPTA
 
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...Pranav Subramanian
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster1508 A/S
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppNadaMohammed714321
 
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...Yantram Animation Studio Corporation
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designersPixeldarts
 
Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioInterior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioRMG Project Studio
 
How Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives citiesHow Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives citiesThomas Schielke
 

Recently uploaded (20)

guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssss
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptx
 
PORTFOLIO 2024 ANASTASIYA KUDINOVA
PORTFOLIO 2024       ANASTASIYA KUDINOVAPORTFOLIO 2024       ANASTASIYA KUDINOVA
PORTFOLIO 2024 ANASTASIYA KUDINOVA
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine
 
City Hall London, Norman Foster building description with building details.pptx
City Hall London, Norman Foster building description with building details.pptxCity Hall London, Norman Foster building description with building details.pptx
City Hall London, Norman Foster building description with building details.pptx
 
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONPORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
 
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdfARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
 
ASME B31.4-2022 estandar ductos año 2022
ASME B31.4-2022 estandar ductos año 2022ASME B31.4-2022 estandar ductos año 2022
ASME B31.4-2022 estandar ductos año 2022
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
 
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 ppppppppppppppp
 
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers
 
Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioInterior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project Studio
 
How Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives citiesHow Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives cities
 

Polish IA Summit 2012 - Designing for everyone, everywhere, at anytime

  • 1. Case study: Designing for EVERYONE, EVERYWHERE, AT ANY TIME Polish IA Summit, Warsaw 2012 Anna Dahlström www.annadahlstrom.com annadahlstrom
  • 2. “ DESIGN FOR EVERYONE & YOU DESIGN FOR NO ONE “
  • 3. “ DESIGN FOR EVERYONE & YOU DESIGN FOR NO ONE “ Why
  • 4. “ DESIGN FOR EVERYONE & YOU DESIGN FOR NO ONE “ Why What
  • 5. “ DESIGN FOR EVERYONE & YOU DESIGN FOR NO ONE “ Why What How
  • 6. A bit of HISTORY 04 15 29 03 20 17
  • 13. 04 February 2004 | Facebook 15 July 2006 | Twitter 29 June 2007 | iPhone 03 April 2010 | iPad 20 April 2012 | IASW 17 May 2014 | ?
  • 24. Once upon a time... http://www.flickr.com/photos/excomedia/sets/72157622519563566/with/5233990438/
  • 25. Flat in VACANT POSSESSION
  • 36. Based on ASSUMED KNOWLEDGE http://www.etsy.com/shop/kylespears?ref=top_trail
  • 39. And Plan Bs ON THE GO
  • 41. But, it could have been like this.
  • 42. 1. AUDIENCE | TAKING A CLOSER LOOK 2. CONTENT | WHAT IS REALLY NEEDED 3. DEVICES | HOW THEY ARE USED
  • 43. 1. ” Everything starts with the user “ Steve jobs
  • 45. NEW & SAVVY USER NEW & “TELL ME WHAT I SAVVY RETURNING SHOULD CONSIDER?” RETURNING USERS EXPERT NEW & “NOT SURE WHICH BUT “A SPECIFIC NOVICE “WE WANT TO A THERMAL THERMAL BATH” “WHAT IS COMPARE A FEW” BATH” A BATH?” MORE DIVERSE NEEDS http://jhonman.wordpress.com
  • 46. WELCOME! HOW CAN WE HELP GO SOMEWHERE ELSE. WE DON’T CARE ABOUT YOU Not catering means A COMPROMISED EXPERIENCE http://jhonman.wordpress.com
  • 47. 2. ” Serving up the same stale content to everyone is without a question no longer enough “ Said by Sam Quayle, Smashing Magazine
  • 48. ONE TO ONE EXPERIENCE
  • 49. THE DRINKS THE 5 COURSES ONLY GIRLS GROUP PRE-THEATRE THE STARTER & GROUP DESERT GROUP THE BIRTHDAY TAKE AWAY PARTY COUPLE STRAIGHT TO MAINS GROUP WHO | WHERE | WHAT | HOW & WHERE NEXT?
  • 50. ACTUALLY, IT’S NOT PEOPLE LOVE THESE. BUT JUST ABOUT COCKTAILS WE ALSO NEED WINE WANT MORE BREADTH NOONE ORDERS THIS NOONE ORDERS THIS BEST SELLERS For each piece of content BE CLEAR ON ITS IMPORTANCE & PURPOSE
  • 51. 3. ” Content needs to be choreographed to ensure the intended message is preserved on any device and at any width “ By @trentwalton
  • 52. USED FOR USED FOR SHOPPING SHOPPING USED FOR SHOPPING BEHAVIOUR ISN’T DETERMINED BY LOCATION OR DEVICE http://desktopwallpaper-s.com/19-Computers/-/Future/
  • 53. USED IN THE USED ON THE SOFA GO USED ON THE TOILET PHYSICAL CONTEXT DOESN’T EQUAL TASK
  • 54. THE WEB THE WEB THE WEB THE WEB THE THE THE WEB WEB WEB THE WEB THE WEB Users have an expectation of EQUAL & CONTINUOS EXPERIENCE
  • 56. “ DESIGN FOR EVERYONE & YOU DESIGN FOR NO ONE “
  • 57. DESIGN FOR EVERYONE ≠ DESIGN FOR NO ONE
  • 58. 1. AUDIENCE | BROADENING OUR VIEW 2. CONTENT | INSIGHT & PRIORITISING 3. DEVICES | EQUAL EXPERIENCE
  • 59. Step 5 User needs Step 4 Step 6 UX lifecycle Business needs Step 3 Step 7 Key user journeys Competitor analysis Step 8 Step 2 A few other steps Formulating the vision incl. doing the sitemap Step 1 Step 9 Defining the target audience Wireframes
  • 60. Step 5 User needs Step 4 Step 6 UX lifecycle Business needs Step 3 Step 7 Key user journeys Competitor analysis Step 8 Step 2 A few other steps Formulating the vision incl. doing the sitemap Step 1 Step 9 Defining the target Wireframes audience
  • 61. 1. AUDIENCE | BROADENING OUR VIEW
  • 62. Who out of EVERYONE Where do I start? I have a vague idea I know what it should I know exactly & shouldn't have what I want
  • 63. Who out of EVERYONE Where do I start? I have a vague idea I know what it should I know exactly & shouldn't have what I want
  • 64. Who out of EVERYONE Where do I start? I have a vague idea I know what it should I know exactly & shouldn't have what I want
  • 65. 2. CONTENT | INSIGHT & PRIORITISING
  • 66. Everyone & their NEEDS Awareness Consideration Confirmation Purchase Support Where do I I have a vague I know what it I know exactly start? idea should & shouldn't what I want have
  • 67. Everyone & their NEEDS BUSINESS NEEDS • Ensure users aren't lost • Provide the user with a • Feature user reviews • Provide a store locator • FAQs that minimise the & converted on a comparison tool on the site number of customer competitor's site services calls received Awareness Consideration Confirmation Purchase Support Where do I I have a vague I know what it I know exactly start? idea should & shouldn't what I want have
  • 68. Everyone & their NEEDS USER NEEDS • Background information • Clear route into the • Reassurance that I • Effortless • Easy access to and help & advice on where to products they are after have made the right completion of in times of trouble start choice their order BUSINESS NEEDS • Ensure users aren't lost • Provide the user with a • Feature user reviews • Provide a store locator • FAQs that minimise the & converted on a comparison tool on the site number of customer competitor's site services calls received Awareness Consideration Confirmation Purchase Support Where do I I have a vague I know what it I know exactly start? idea should & shouldn't what I want have
  • 69. Everyone & their NEEDS KEY ENTRY POINTS • Search (to page) • Search (to page) • Bookmark • Home page • Search (to page) • Home page • Home page • Home page • Bookmark USER NEEDS • Background information • Clear route into the • Reassurance that I • Effortless • Easy access to and help & advice on where to products they are after have made the right completion of in times of trouble start choice their order BUSINESS NEEDS • Ensure users aren't lost • Provide the user with a • Feature user reviews • Provide a store locator • FAQs that minimise the & converted on a comparison tool on the site number of customer competitor's site services calls received Awareness Consideration Confirmation Purchase Support Where do I I have a vague I know what it I know exactly start? idea should & shouldn't what I want have
  • 70. KEY DEVICES • Laptop • Laptop • iPad • Computer • Mobile • Mobile • iPad • Laptop KEY ENTRY POINTS KEY ENTRY POINTS • Search (to page) • Search (to page) • Bookmark • Home page • Search (to page) • Home page • Home page • Home page • Bookmark USER NEEDS • Background information • Clear route into the • Reassurance that I • Effortless • Easy access to and help & advice on where to products they are after have made the right completion of in times of trouble start choice their order BUSINESS NEEDS • Ensure users aren't lost • Provide the user with a • Feature user reviews • Provide a store locator • FAQs that minimise the & converted on a comparison tool on the site number of customer competitor's site services calls received Awareness Consideration Confirmation Purchase Support Where do I I have a vague I know what it I know exactly start? idea should & shouldn't what I want have
  • 71. Action & Content PRIORITISATION Action Content Explore Research Confirmation Buy Background Tools Related Buying Bathroom Related Browse Compare Copy url Add to basket Types of bath Our guarantee planner products Remove from Comparison Preview Filter Email Buying guides User reviews Delivery basket tool What to look 10 questions to Price Find out more Search Read reviews Locate store Store locator for help you choose comparisons Find contact Find the right Alternative Customer View range Find related Share About our baths info bath accessory products support
  • 72. Action & Content PRIORITISATION Action Content Explore Research Confirmation Buy Background Tools Related Buying Bathroom Related Browse Compare Copy url Add to basket Types of bath Our guarantee planner products Remove from Comparison Preview Filter Email Buying guides User reviews Delivery basket tool What to look 10 questions to Price Find out more Search Read reviews Locate store Store locator for help you choose comparisons Find contact Find the right Alternative Customer View range Find related Share About our baths info bath accessory products support
  • 73. Action & Content PRIORITISATION Action Content Explore Research Confirmation Buy Background Background Tools Related Buying Bathroom Related Browse Compare Copy url Add to basket Types of bath Types of bath Our guarantee planner products Remove from Comparison Preview Filter Email Buying guides Buying guides User reviews Delivery basket tool What to look What to look 10 questions to Price Find out more Search Read reviews Locate store Store locator for for help you choose comparisons Find contact Find the right Alternative Customer View range Find related Share About our baths About our baths info bath accessory products support
  • 74. 3. DEVICES | EQUAL EXPERIENCE
  • 75. Page DESCRIPTIONS Baths Logo Header Individual product Logo Header The purpose of this page page is to The purpose of this • educate the user Bath section intro Ad page is to Bath A intro on the types of • Provide an baths available Nav overview of the Nav • provide quick product access to specific • Present detailed baths information Ad • highlight offers & Types of baths Popular • Provide access to products Spec for bath A & popular products Store user reviews Store reviews locator locator Related products Tools Tools Footer Footer
  • 76. Behaviour ACROSS DEVICES Desktop/ Tablets Mobile 1 2 1 2 Header Logo Header Logo 3 4 5 Nav Bath section intro Ad 4 Bath 5 3 section Ad Nav intro 7 6 Related Types of baths 8 Store products locator 6 Types of baths 9 Tools 10 Footer 7 Related products 8 Store 9 Tools locator 10 Footer
  • 77. Wireframes & MODULE LIBRARIES Desktop/ Tablets Mobile 1 2 1 Module 4a Module 4b 2 Header Logo Header Logo 3 4 5 Nav Bath section intro Ad 4 Bath 5 3 section Ad Nav intro Module 6a Module 6b 7 6 Related Types of baths 8 Store products locator 6 Types of baths 9 Tools 10 Footer 7 Related products 8 Store 9 Tools locator 10 Footer
  • 78. What about budgets, timelines, mobile apps & websites ?
  • 79. ” Today's popular devices are not tomorrow's so building something which works on any device is better than building something which works on today's devices “ Combined wise words from @onextrapixel and @trentwalton
  • 80. Different WE NEED TO DESIGN FOR devices are here to THEM & IDENTIFY HOW BEST stay TO DESIGN FOR THEM
  • 81. THIS INCLUDES LOST Consider CUSTOMERS, BUILDING & alternative costs MAINTAINING MULTIPLE VERSIONS
  • 82. Take an MORE COLLABORATION & adaptive approach A FLEXIBLE TOOLBOX
  • 83. THERE SHOULD BE AN EQUAL Educate & be persistent EXPERIENCE ACROSS ALL DEVICES
  • 84. ” Money spent developing a pretty but limited iPhone app only benefits...the few, but money spent on the website UI would have benefitted everyone “ Said by Gary Marshall on ‘The app trap’ in .net Magaizine
  • 85. ” Everytime you redesign God kills a kitten “ Wisely said by @louisrosenfeld
  • 86. Thank you! QUESTIONS? annadahlstrom annadahlstrom www.annadahlstrom.com www.flickr.com/photos/matterphotography/2739799786/

Editor's Notes

  1. \n\n
  2. I'm sure you've heard it, been told it and said it yourself. I certainly have - "Design for everyone and you design for no one"\nThe phrase has traditionally been used referring to that by including all the requirements of your different target audiences, stakeholders and the business you end up with a product that is trying to satisfy everyone and by doing so satisfies no one.\n
  3. I'm Anna, I’m a freelance IA/UX designer and I'm here today to talk to you about:Why - the old saying doesn’t necessarily hold true any more\n
  4. What - that means for us as IAs\n
  5. How - we can address it and the ever increasingly complex and unknown world that we design for\n
  6. \n
  7. 29 June 2007 saw the first iPhone released and with that everything change. For the first time we were able to experience the web in our hands, the way the web was supposed to look \n\n
  8. 4 February 2004 - Zuckerberg launched Facebook\n
  9. 15 July 2006 - Twitter launched\n
  10. 3 April 2010 - saw the first iPad\n
  11. 20 April 2012 - It’s the Polish IA Summit and the internet is everywhere. It's a 24-7 party and everyone wants to join in\n
  12. 17 May 2014 - Apart from being the national day of Norway and the day I turn 35 we don’t really know what the future holds for us here\n
  13. But a lot has happened in the last few years alone so it’s a pretty safe guess that a lot will happen in the next few years to come.\n
  14. This is Wally. \nImage from http://www.findwaldo.com/fankit/graphics/\n
  15. He normally appears in this type of pictures\nImages from http://www.findwaldo.com/fankit/graphics/\n
  16. They were a bit like Wally. Everyone came in a few different disguises but we could fairly easily narrow down who our main target audiences were and what they needed\n\nImage from www.guardian.co.uk/world/picture/2010/jun/01/eyewitness-world-record-wally \n
  17. Today everyone has changed. Where as the web was much more deterministic back “then” it’s turned animalistic and everything is up for grabs.\nMore diverse user base with more people than ever online, each one expecting the internet to work for them and them specifically\n\nImage from www.robotshop.com/blog/where-is-wall-e-1391\n\n\n\n
  18. Back then we could fairly easily narrow down:\n\n what they’d be using to access the services we designed\n devices were limited, screen sizes and types of browsers more uniform and easier do develop for\nIt was much more of a one to one relationship\n
  19. Today browsers have multiplied and to add to that designing for different devices is the new designing for different browsers.\n
  20. Back then we could fairly easily narrow down where they’d be using our service, e.g. at home, office and with that their internet speed. \nSome times it would be on the go but for very limited tasks, mainly due to devices not being able to deliver the full experience\n
  21. Today what we design can be access from anywhere and at any time\n\n\n
  22. Before we could fairly easily narrow down how they would get there and where they would go. \n Most arrived via the home page. \n Perhaps one or two landing pages were made for key searches\n\n
  23. \n Search is one of the key routes into the services that we design putting greater expectations on the pages we define as we no longer can rely on the home page providing users with the context they need\n Access and entry points have multiplied with the use of social media\n And the means or route we take is less important. As long as we get there and find what we are after\n\n\n\n
  24. Let me tell you a story\n\nImage thanks to @excomedia http://www.flickr.com/photos/excomedia/sets/72157622519563566/with/5233990438/\n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. Image from http://www.etsy.com/shop/kylespears?ref=top_trail\n
  36. \n
  37. Image from http://keithmansfield.co.uk/2008/08/29/gone-fishing/\n
  38. \n
  39. Image from http://www.tekspertise.com/\n
  40. \n
  41. And it has to do with these three points\n
  42. \n
  43. With more people online there is a potentially much broader user base and target audience meaning...\n\nImage from http://jhonman.wordpress.com/\n
  44. ...more diverse needs, from tasks to the level of information they need, that we need to accommodate and cater for\n\nImage from http://jhonman.wordpress.com/\n
  45. Having a solid understanding of who our users are, how and where they typically access the services we design and what they want from them becomes key in ensuring that we don't alienate certain groups or provide a compromised experience \n\nImage from http://jhonman.wordpress.com/\n
  46. \n
  47. Our experience on the web often feels like a one to one experience. We know that we aren't the only ones using the Internet but when we use it we expect it to work for us\n\nImage from http://www.barbecoa.com/assets/images/food-menu.jpg\n\n
  48. Tailoring an experience for a user is based on knowing what that user wants.\nIt's about knowing who they are and where in their journey they are and what they need at that stage\nIt’s about knowing how they get there and where they want to go\n\nImage from http://www.barbecoa.com/assets/images/food-menu.jpg\n\n
  49. It’s about finding the right level of detail at the right time and in order to do this we need to have the importance and the purpose of each piece of content clear to us.\n\nImage from http://www.barbecoa.com/assets/images/food-menu.jpg\n\n
  50. \n
  51. Users are more and more accessing the web in the same way on their portable devices as they are on computers.Behaviour is no longer determined by location or device\n
  52. Previously we could assume, based on lack of devices that could provide the experience, that if a user accessed a service on the go it would be for a particular and quite narrow task. But that isn't the case any more. The physical context the user is in doesn't by default equal the task they want to carry out, meaning serving up different content just because they are on their mobile isn't always right\n\n\n
  53. Instead there is an increased expectation that we will have an equal and continues experience across and irrespectively of the devices that we are using.\nThe reason so many users click "desktop version please” is because they feel or worry they are missing out.\n\n\n
  54. \n
  55. So where as there of course still is truth in the old saying ‘Design for everyone and you design for no one’...\n\n\n
  56. ...the changes that have happened in the last few years means that it has to be taken with a pinch of salt and everyone now is just as much about every device and the devices being used everywhere\n\n\n
  57. So what do we need to do?\n
  58. If we look at a typical process it may look somewhat like this (shortened for illustrative purposes)In its basic form this isn't changed by the new landscape that we design for, but there are some additional measure that needs to be taken at the planning and defining stage to address and ensure we cover the different aspects that designing for everyone, everywhere, at any time poses\n
  59. In the next few slides I’m going to talk through some ideas I have on how we can start addressing this in the steps highlighted. They are by no means the only way to do it but builds on tools that I use today and which I find work and which I believe with a slight modification can help us address designing for everyone, everywhere, at any time.\n
  60. This is about really making sure that we know who our users are, both our primary and secondary audience and that we understand their needs and what devices they will be using when. In the next few slides I’m going to walk through some tools that can help us.\n
  61. In the case of users wanting to buy a bath you can group them into these four groups\n1) The “Where do I start user?” who doesn't have a clue where to begin (that was me and D by the way)\n2) The “I have a vague idea” user who have done a bit of research\n3) The “I know what it should and shouldn’t have” user who, e.g. know that they are not after a steel bath because that’s too expensive\n4) The “I know exactly what I want user” who is ready to click ‘buy’ or hand over their credit card\n\n
  62. From a business point of view it may be preferential to focus on the bottom two target audiences as they are the ones that is easiest to convert. \nBy only focusing on them you end up excluding or compromising the experience for the top two groups, which is what happened in our case. We weren’t taken care of. \n
  63. Instead what you need to do as a a business, and what we should ensure happens, is that you also, in one form or another address the needs of the top two groups and broaden your focus so some light falls on your second or tertiary target audiences.\n\n
  64. And this ties in with content and understanding what the content needs are and prioritising the content accordingly, keeping different devices in mind.\n
  65. I utilise lifecycles a lot. For the given product or service I work on I start by defining the different stages of the lifecycle and what each stage means. . In the case of buying a bath I’ve used awareness, consideration, confirmation, purchase and support which map quite nicely with our four user groups that I defined in the previous slide. The start of the awareness stage sees the ‘Where do I start?’ user who as they move into the consideration stage turns into the ‘I’ve got a vague idea’ user. As they move through the consideration stage they form an idea of what the bath should and shouldn’t have (or be) for then by the end of that stage and in the purchase stage know exactly what they want.\n
  66. Most projects are often initiated by the business coming with either a problem or something they want so let’s map what our fictive business has in terms of needs for the bath section of their site. \n\n
  67. Now that we have the business needs clear the next step is to lay the user needs on top (simplified for illustrative purposes). Once that is done you start to have a good overview of both the user and the business side of things but in order to address the ‘designing for everywhere, at any time’ aspect there are two more aspects that we can lay on top.\n\n
  68. The first one is the key entry points. Analytics and path analysis help us identify these patterns, or if you don’t yet have access to it base it on research. \n\n\n
  69. The same thing can be done with devices and looking at traffic data. What device are users actually using the most at each stage? Once you’ve got this all mapped you have a summary view that not only is great as a reference point for the internal team but also to communicate diversity and complexity to stakeholders. \n\nNote. In real life I normally carry out start with the user needs and then move on to the business needs to ensure that the business have the user in mind when identifying what they need at each stage.\n\n
  70. This framework is one I developed after having seen a talk at EuroIA in Amsterdam a few years back.\nIt’s simple and works great in stakeholder workshops by involving them in the process.\n\nStart by brainstorming actions and content that would go on a given page or in a given section. This should be done before the stakeholder workshop and can be based on an internal team discussion or kick off meeting with the client. \nType in the result of the brainstorm in a format as above and print out A3 or A4 version and give a copy to each of your stakeholders. \n\n
  71. Provide them with a pen and ask them to circle the content they would like to see on the page/section and the actions that a user should be able to do (highlighted)\n\n
  72. Once that’s done have a discussion about what they’d circled before getting everyone to mark the things, out of what they circled, that they think are the most important and critical to the project. Both from a user and from a business point of view (stars).\nDiscuss and then talk through what content and what actions that require a slightly different approach based on if the interface the user will be using is touch based or if it’s on a smaller device (white corners).\n\nThe end result is a visual overview which is easy to grasp both for the internal team to communicate the outcome of the workshop, but also for the stakeholders. And it becomes a great reference point up front for what will be different on touch or smaller devices.\n\n
  73. Once we got a clearer understanding of the content and we can start fleshing out how the content and functionality should come together and work across devices\n
  74. It’s a preference of style but I start with doing sketches and then page description diagrams of all key pages before going into wireframing. The reason being that it allows me to \n1) think through and get a holistic view of the content and get it organised up front before going into the detail.\n2) to identify patterns between pages and where modules can be reused and \n3) by writing down what the purpose of each page is next to the page description diagram it forces me to think and be clear on who it’s for and what it should be doing\n4) useful tool for responsive design and designing for multiple devices\n\n\n
  75. Page description diagrams, whether done for mobile first or desktop version first (as in this case) give you an overview of the content that goes on each page and in each coloumn. \n\nNormal content stacking, used to identify how the content will behave and move when the screen size decreases often go by the rule of left column on the top, followed by the middle coloumn followed by the right hand coloumn, but that doesn’t always correspond with the importance of the content.\n\nThe first step in defining your content stacking strategy is to priorites your content (see the little numbers). Once that is done you’ve got a guide to how the content should adapt and in which order it should come in when the screensize changes. In this case you can see that the ad (5) was rated more important than the store locator (8) and the tools (9) and so was related products (7), but had we followed normal content stacking principles the ad and related products would have been in the bottom three modules when looked at on a mobile phone. \n\nWhether you’re a believer in responsive design and designing for mobile first, principles from both of these methods helps us prioritise content and serve as sound check points ensuring that we know why each piece of content is there and how, as Trent Walton talks about, it should be choreographed across devices (http://trentwalton.com/2011/07/14/content-choreography/).\n\n\n
  76. I don’t believe we should or have to wireframe everything. It’s not always feasible or needed. \nWhen it comes to designing for multiple devices or doing responsive design it would be a nightmare if we had to do wireframes for each device and as for responsive design it would kind of defeat the point. \n\nIdentify key pages (as we do already) and key devices (if needed) and do wireframes for them. \nThen try to work at a modular level and whether you sketch it or do low fidelity module definitions, work together with design and development to identify how a module should change from the normal desktop version to the mobile version or vice versa. \n\nThe good thing about module libraries is that those can’t just be used to define content across devices but also to be re-used across pages, e.g. to provide the right content at the right time to the user using dynamic publishing or be contextual based on where the user is coming from.\n
  77. \n
  78. \n\n\n
  79. Whether you believe in responsive design or not different devices are here to stay and we need to design for them, but more importantly identify how we design for them.\n\n
  80. Doing responsive or adaptive design is not always the answer and there are definitely cases where a bespoke app is needed. Or, for reasons related to technical limitations a bespoke mobile website is needed. However, where possible we should opt for an adaptive solution. It will require a bit more cost up front, particularly as we are still getting our heads around how to work with these new challenges, but this needs to be weighed up against:\n\nthe cost of loss of customers\nthe cost and pain of doing 20 different wireframes/designs for each device\nthe cost of building and maintaining besoke versions and content for different devices\nthe cost of having to rebuild in the not to distant future\n
  81. Responsive design is not a linear process. We need to adapt new processes where we work more collaboratively, across disciplines and where we as IAs have a flexible toolboox that we can draw from and which helps us assess designing for everyone, everywhere at any time. As we have done up until now it’s about applying the right tool for the right situation and having a pre-defined toolbox to use can help make the process less time consuming and complex.\n
  82. And finally, it’s partly our responsibility to educate internal stakeholders, our teams and our clients on what the impacts are for the business (both the client’s and our own) and the users if we keep offering separate experiences for different devices. We need to convince them why we should invest upfront in doing it in a way that can adapt to the future and lead the way in how best to work together across disciplines and in involving the client so they understand the complexities.\n
  83. As I’ve mentioned before are definitely times when an app is the right approach, but this quote is a good reminder to ask yourself -”Would the majority of our users benefit more from investment in the desktop UI to make it work for mobile, or from us doing an app?” \n\nGary Marshall argues in the above reference article that in many banking cases the reason they do have a mobile app is because their current websites do not work for mobile. However, had they invested more in the desktop UI to make it adapt to mobile an app may be less needed.\n
  84. \n
  85. http://www.flickr.com/photos/matterphotography/2739799786/\n\n\n\n