Designing Cross-Channel Experiences

Tyler Tate
Tyler TateCo-founder & CEO at Crema.co
Designing Cross-
Channel Experiences
by @TylerTate
Designing Cross-Channel Experiences
Designing Cross-Channel Experiences
Designing Cross-Channel Experiences
Designing Cross-Channel Experiences
Designing Cross-Channel Experiences
Designing Cross-
  Channel Experiences
1. A story
2. Three design principles
3. Two design methods
Story time
Sketch and tweet your version of the story.
#UXOxford #storysketch
Google’s “Project Glass” prototype
Predicting
the
future
isn't
what
it
used
to
be.
Are there timeless approaches to designing
cross-channel ecosystems?
Mark Weiser
Adam Greenfield
“Most of the functionality we now associate
with these boxes on our desks, these slabs
that warm our laps, will be dispersed into
both the built environment and the wide variety
of everyday objects we typically use there.”
— Adam Greenfield in “Everyware”
Effective design is becoming less about
creating the end-all-be-all website, and more
about fostering a cohesive ecosystem where
the digital—such as web and mobile—works
in harmony with the physical—from print
media to the natural environment.
Design Principles
1. Division of labour
Adam Smith
“A lot of the functions that the devices tried
to do, such as editing the video or the
pictures, they did poorly because they had
small screens and could not easily
accommodate menus filled with lots of
functions. Computers could handle that
more easily.”
— Steve Jobs, quoted by Walter Isaacson
Designing Cross-Channel Experiences
Each channel within the ecosystem should
focus on what it does best.
Design Principles
1. Division of labour
2. Consistency
“Consistency is the agreement or harmony of
parts or features to one another or a whole.”
— Merriam-Webster Dictionary
Internal

Local

External




Dimension #1: Realm
Function
Organisation
Aesthetics




Dimension #2: Nature
1. The function of a channel should be optimized
   for its own comparative advantage.
2. Organizational consistency usually favor the
   external ecosystem over the local or internal.
3. Aesthetics. While the visual aspects that involve
   branding (such as color) should be consistent with
   the ecosystem, the overriding style of the user
   interface should match its local habitat.
Design Principles
1. Division of labour
2. Consistency
3. Continuity
Continuity is the principle of propagating the
user’s state across all channels of the
ecosystem.
Designing Cross-Channel Experiences
Design Methods
We must view the ecosystem as a cohesive
whole, as well as understand how users
traverse its many parts.
Design Methods
1. Cross-Channel Blueprint
The cross-channel blueprint provides an
overview of the ecosystem's two most
fundamental attributes: the channels of
which it's composed, and the user actions it
must facilitate.
A service blueprint created by Brandon Schauer.
Resmini and Rosati’s CHU cube diagram
Gianluca Brugnoli’s touchpoints matrix.
Lookup                     Explore                   Compare                  Organize                    Purchase

Print Catalog    Low priority               High priority             Low priority             N/A                         High priority
                 Table of contents          Immersive photography     Flip pages back/forth    Flip pages back/forth       Order by phone
                 Index                                                                                                     Order by mail
                                                                                                                           Order online


Website          High priority              High priority             High priority            High priority               High priority
                 Search box                 Browse by category        Table view of selected   Favorites                   Standard checkout
                                                                        items                  Wish list / gift registry   Expedited checkout
                                                                                                                           Order by phone


Tablet App       High priority              High priority             Medium priority          Medium priority             High priority
                 Search box                 Catalog-like browsing     Table view of selected   Favorites                   Expedited checkout
                 Voice input                 experience                 items                  Wish lists                  Standard checkout




Mobile App       High priority              Medium priority           N/A                      Low priority                High priority
                 Search box                 Browse by category        Impractical due to       Add items to favorites      Expedited checkout
                 Voice input                                            screen size             and wish list, but
                 Barcode scanner                                                                limited ability to edit


Physical Store   High priority              High priority             Medium priority          Low priority                High priority
                 Clear signage              Wander the aisles         Compare side by side     Gift registry / wish list   Attendant-assisted
                 Store map                                            Ask staff                                            Self-checkout
                 Helpful staff                                                                                             Scan-as-you-go


Shared Assets    Product taxonomy                                     Compare engine           Universal Favs
                 All channels powered by a single set of categories   Web & tablet powered     Favorites list shared by    Universal checkout
                                                                       by one component         web, tablet, mobile         process for web,
                                                                                                                            tablet, and mobile
Group time
Break into groups and get ready to create
your own cross-channel blueprint.
1. Identify user actions. What are the actions that
   users desire to perform throughout the ecosystem
   as a whole?
Lookup                     Explore                   Compare                  Organize                    Purchase

Print Catalog    Low priority               High priority             Low priority             N/A                         High priority
                 Table of contents          Immersive photography     Flip pages back/forth    Flip pages back/forth       Order by phone
                 Index                                                                                                     Order by mail
                                                                                                                           Order online


Website          High priority              High priority             High priority            High priority               High priority
                 Search box                 Browse by category        Table view of selected   Favorites                   Standard checkout
                                                                        items                  Wish list / gift registry   Expedited checkout
                                                                                                                           Order by phone


Tablet App       High priority              High priority             Medium priority          Medium priority             High priority
                 Search box                 Catalog-like browsing     Table view of selected   Favorites                   Expedited checkout
                 Voice input                 experience                 items                  Wish lists                  Standard checkout




Mobile App       High priority              Medium priority           N/A                      Low priority                High priority
                 Search box                 Browse by category        Impractical due to       Add items to favorites      Expedited checkout
                 Voice input                                            screen size             and wish list, but
                 Barcode scanner                                                                limited ability to edit


Physical Store   High priority              High priority             Medium priority          Low priority                High priority
                 Clear signage              Wander the aisles         Compare side by side     Gift registry / wish list   Attendant-assisted
                 Store map                                            Ask staff                                            Self-checkout
                 Helpful staff                                                                                             Scan-as-you-go


Shared Assets    Product taxonomy                                     Compare engine           Universal Favs
                 All channels powered by a single set of categories   Web & tablet powered     Favorites list shared by    Universal checkout
                                                                       by one component         web, tablet, mobile         process for web,
                                                                                                                            tablet, and mobile
1. Identify user actions.
2. List the channels. What channels compose the
   ecosystem? Think both digital and physical.
Lookup                     Explore                   Compare                  Organize                    Purchase

Print Catalog    Low priority               High priority             Low priority             N/A                         High priority
                 Table of contents          Immersive photography     Flip pages back/forth    Flip pages back/forth       Order by phone
                 Index                                                                                                     Order by mail
                                                                                                                           Order online


Website          High priority              High priority             High priority            High priority               High priority
                 Search box                 Browse by category        Table view of selected   Favorites                   Standard checkout
                                                                        items                  Wish list / gift registry   Expedited checkout
                                                                                                                           Order by phone


Tablet App       High priority              High priority             Medium priority          Medium priority             High priority
                 Search box                 Catalog-like browsing     Table view of selected   Favorites                   Expedited checkout
                 Voice input                 experience                 items                  Wish lists                  Standard checkout




Mobile App       High priority              Medium priority           N/A                      Low priority                High priority
                 Search box                 Browse by category        Impractical due to       Add items to favorites      Expedited checkout
                 Voice input                                            screen size             and wish list, but
                 Barcode scanner                                                                limited ability to edit


Physical Store   High priority              High priority             Medium priority          Low priority                High priority
                 Clear signage              Wander the aisles         Compare side by side     Gift registry / wish list   Attendant-assisted
                 Store map                                            Ask staff                                            Self-checkout
                 Helpful staff                                                                                             Scan-as-you-go


Shared Assets    Product taxonomy                                     Compare engine           Universal Favs
                 All channels powered by a single set of categories   Web & tablet powered     Favorites list shared by    Universal checkout
                                                                       by one component         web, tablet, mobile         process for web,
                                                                                                                            tablet, and mobile
1. Identify user actions.
2. List the channels.
3. Prioritise and describe each channel-action.
   Determine the priority that each action should
   receive for a given channel. At the same time as
   setting priorities, also briefly describe how each
   action would be achieved.
Lookup                     Explore                   Compare                  Organize                    Purchase

Print Catalog    Low priority               High priority             Low priority             N/A                         High priority
                 Table of contents          Immersive photography     Flip pages back/forth    Flip pages back/forth       Order by phone
                 Index                                                                                                     Order by mail
                                                                                                                           Order online


Website          High priority              High priority             High priority            High priority               High priority
                 Search box                 Browse by category        Table view of selected   Favorites                   Standard checkout
                                                                        items                  Wish list / gift registry   Expedited checkout
                                                                                                                           Order by phone


Tablet App       High priority              High priority             Medium priority          Medium priority             High priority
                 Search box                 Catalog-like browsing     Table view of selected   Favorites                   Expedited checkout
                 Voice input                 experience                 items                  Wish lists                  Standard checkout




Mobile App       High priority              Medium priority           N/A                      Low priority                High priority
                 Search box                 Browse by category        Impractical due to       Add items to favorites      Expedited checkout
                 Voice input                                            screen size             and wish list, but
                 Barcode scanner                                                                limited ability to edit


Physical Store   High priority              High priority             Medium priority          Low priority                High priority
                 Clear signage              Wander the aisles         Compare side by side     Gift registry / wish list   Attendant-assisted
                 Store map                                            Ask staff                                            Self-checkout
                 Helpful staff                                                                                             Scan-as-you-go


Shared Assets    Product taxonomy                                     Compare engine           Universal Favs
                 All channels powered by a single set of categories   Web & tablet powered     Favorites list shared by    Universal checkout
                                                                       by one component         web, tablet, mobile         process for web,
                                                                                                                            tablet, and mobile
1. Identify user actions.
2. List the channels.
3. Prioritise and describe each channel-action.
4. Identify shared components. Think about the
   behind-the-scenes components that will be
   necessary to empower each user action.
Lookup                     Explore                   Compare                  Organize                    Purchase

Print Catalog    Low priority               High priority             Low priority             N/A                         High priority
                 Table of contents          Immersive photography     Flip pages back/forth    Flip pages back/forth       Order by phone
                 Index                                                                                                     Order by mail
                                                                                                                           Order online


Website          High priority              High priority             High priority            High priority               High priority
                 Search box                 Browse by category        Table view of selected   Favorites                   Standard checkout
                                                                        items                  Wish list / gift registry   Expedited checkout
                                                                                                                           Order by phone


Tablet App       High priority              High priority             Medium priority          Medium priority             High priority
                 Search box                 Catalog-like browsing     Table view of selected   Favorites                   Expedited checkout
                 Voice input                 experience                 items                  Wish lists                  Standard checkout




Mobile App       High priority              Medium priority           N/A                      Low priority                High priority
                 Search box                 Browse by category        Impractical due to       Add items to favorites      Expedited checkout
                 Voice input                                            screen size             and wish list, but
                 Barcode scanner                                                                limited ability to edit


Physical Store   High priority              High priority             Medium priority          Low priority                High priority
                 Clear signage              Wander the aisles         Compare side by side     Gift registry / wish list   Attendant-assisted
                 Store map                                            Ask staff                                            Self-checkout
                 Helpful staff                                                                                             Scan-as-you-go


Shared Assets    Product taxonomy                                     Compare engine           Universal Favs
                 All channels powered by a single set of categories   Web & tablet powered     Favorites list shared by    Universal checkout
                                                                       by one component         web, tablet, mobile         process for web,
                                                                                                                            tablet, and mobile
1. A global view of important user actions
2. The possible channels through which users might
   attempt those actions
3. A set of task priorities for each channel
4. A set of channel priorities for each action
5. An overview of which components need to be
   shared across channels
Group time
Tweet your cross-channel blueprints.
#UXOxford #ccblueprint
Design Methods
1. Cross-Channel Blueprint
2. Experience Map
1. Outline the user’s journey. Start by creating a
   list of all the occurrences that constitute the user’s
   experience, not just within the ecosystem, but
   throughout the entire journey from beginning to
   end. These occurrences can then be arranged
   horizontally to form a timeline.
1. Outline the user’s journey.
2. List the channel and goal for each step of the
   user’s journey. Channel refers to the medium
   through which the action is performed. Goal
   describes the underlying motivation for performing
   the action. These components should be
   consistent with the channel and actions
   dimensions of the cross-channel blueprint.
1. Outline the user’s journey.
2. List the channel and goal.
3. Describe the user’s emotion and rate their
   satisfaction for every step of the process. In order
   to be useful, however, such reporting should be
   based on first-hand observation of the user.
Channel                                                  Web

Jouney     Amir is invited on a   He realizes he needs   He searches          He clicks on each of
           camping trip in two                           Google for "mens
           weeks time.            before the trip.       outdoor jackets".    browses the selection
                                                                              of several online
                                                                              retailers.

Goal                                                     Explore

Optimism




Emotion    Amir is excited        He doesn’t know        Amir doesn’t know    He is overwhelmed
           about the trip         much about jackets,    where to look—       at the hundreds of
                                  and is daunted by      too many different   jackets available.
                                  the task.              vendors.
Channel                                                                             Web

                        Jouney                      Amir is invited on a        He realizes he needs        He searches               He clicks on each of        Eventually, he              He returns to Google        He arrives on                Amir looks through       He adds 4 of the
                                                    camping trip in two                                     Google for "mens                                      determines that an          and searches for            EveryWare's outer            every page of results,   jackets to his
                                                    weeks time.                 before the trip.            outdoor jackets".         browses the selection       outer shell jacket          "mens outer shell           shell jackets landing        clicking on about a      favorites list.
                                                                                                                                      of several online           would be ideal for          jackets". EveryWare         page. There are over         dozen jackets along
                                                                                                                                      retailers.                  his trip.                   is the second link.         50 jackets listed.           the way.

                        Goal                                                                               Explore                                                                                                                                                              Organize

                        Optimism




                        Emotion                     Amir is excited             He doesn’t know             Amir doesn’t know         He is overwhelmed           Amir becomes much           He’s purchased              Amir is a bit                Most of the jackets      He’s reasonably
                                                    about the trip              much about jackets,         where to look—            at the hundreds of          more optimistic             something from              frustrated that              don’t match his          happy with his
                                                                                and is daunted by           too many different        jackets available.          once identifying the        EveryWare before.           there are so many            needs, so he’s           progress so far.
                                                                                the task.                   vendors.                                              type of jacket that                                     soft shell jackets           pleased that he can
                                                                                                                                                                                                                          to look through.             narrow his selection.




                      Catalog                  Catalog/Phone               Computer                                                                           Phone                                                  Store

He clicks on a link   The EveryWare            He spots another two        Amir reviews his            Still unsure, Amir        Walking down the             Searching for the          Amir adds the jacket        Arriving at the store,       Having tried several
 o request a print    catalog arrives in the   jackets that he likes,      favorites list from his     decides to go to the      street, Amir sees            brand name in the          to his favorites list,      Amir makes his way           on, Amir pays for his
catalog, and then                              which he adds to his        computer, adding a          EveryWare store and       someone wearing an           EveryWare app, Amir        and shares it with a        to the jackets section.      new jacket—the one
signs off.            through it over          favorites list using his    comment to each             try the jackets on.       outer shell jacket that                                 friend along, asking                                     he had seen on the
                      breakfast.               phone.                      jacket.                                               he really likes.                                        for his friend’s opinion.   jackets on his list.         way to the store.

                      Explore                  Organize                                                                                                       Lookup                     Organize                    Lookup                       Purchase




Amir is weary of      Amir is pleased          He’s pleased to             There’s no clear            He’s a bit frustrated     That’s it! That’s            Amir is happy to           Amir is just a bit                                       Amir is pleased and
ooking.               when the catalog                                     winner, and Amir            that he has to            exactly what I want!         see that EveryWare         giddy and needs to                                       feels a weight lifted
                      arrives.                 possibilities, but          doesn’t love any            spend his afternoon       Amir’s optimism              carry the jacket.          share his excitement        the items on his             from his shoulders:
                                               feels even further          of them.                    going into the store.     immediately soars.                                      with someone.               favorites list in the        he can now look
                                               away from a decision.                                                                                                                                                 store itself.                forward to his trip.
Designing Cross-
  Channel Experiences
1. A story
2. Three design principles
   i. Division of Labour
   ii. Consistency
   iii. Continuity
3. Two design methods
   i. Cross-Channel Blueprint
   ii. Experience Map
Designing Cross-
Channel Experiences
by @TylerTate
1 of 56

Recommended

Cross channel 2 by
Cross channel 2Cross channel 2
Cross channel 2Tyler Tate
1.2K views55 slides
Mobile Commerce in Italy 2011 by
Mobile Commerce in Italy 2011Mobile Commerce in Italy 2011
Mobile Commerce in Italy 2011Gianluca Brugnoli
2K views12 slides
Mapping the customer experience: innovate using customer experience journey maps by
Mapping the customer experience: innovate using customer experience journey mapsMapping the customer experience: innovate using customer experience journey maps
Mapping the customer experience: innovate using customer experience journey mapsJoyce Hostyn
292.5K views133 slides
Juke: The Office Jukebox by
Juke: The Office JukeboxJuke: The Office Jukebox
Juke: The Office JukeboxTyler Tate
440 views20 slides
Rideshare: Improving Surge by
Rideshare: Improving SurgeRideshare: Improving Surge
Rideshare: Improving SurgeTyler Tate
389 views27 slides
Crema.co Pitch Deck by
Crema.co Pitch DeckCrema.co Pitch Deck
Crema.co Pitch DeckTyler Tate
341.3K views10 slides

More Related Content

More from Tyler Tate

Designing Mobile Search: A workshop for eBay Classifieds Group by
Designing Mobile Search: A workshop for eBay Classifieds GroupDesigning Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds GroupTyler Tate
1.5K views147 slides
Designing the search experience by tyler tate : twigkit by
Designing the search experience by tyler tate : twigkitDesigning the search experience by tyler tate : twigkit
Designing the search experience by tyler tate : twigkitTyler Tate
2.8K views121 slides
Information Wayfinding — EBI Interfaces Edition by
Information Wayfinding — EBI Interfaces EditionInformation Wayfinding — EBI Interfaces Edition
Information Wayfinding — EBI Interfaces EditionTyler Tate
1.3K views55 slides
Information seeking by
Information seekingInformation seeking
Information seekingTyler Tate
3.2K views19 slides
Designing Mobile Search, NYC Edition by
Designing Mobile Search, NYC EditionDesigning Mobile Search, NYC Edition
Designing Mobile Search, NYC EditionTyler Tate
2K views93 slides
Designing Mobile Search — Frankfurt Edition by
Designing Mobile Search — Frankfurt EditionDesigning Mobile Search — Frankfurt Edition
Designing Mobile Search — Frankfurt EditionTyler Tate
1K views103 slides

More from Tyler Tate(19)

Designing Mobile Search: A workshop for eBay Classifieds Group by Tyler Tate
Designing Mobile Search: A workshop for eBay Classifieds GroupDesigning Mobile Search: A workshop for eBay Classifieds Group
Designing Mobile Search: A workshop for eBay Classifieds Group
Tyler Tate1.5K views
Designing the search experience by tyler tate : twigkit by Tyler Tate
Designing the search experience by tyler tate : twigkitDesigning the search experience by tyler tate : twigkit
Designing the search experience by tyler tate : twigkit
Tyler Tate2.8K views
Information Wayfinding — EBI Interfaces Edition by Tyler Tate
Information Wayfinding — EBI Interfaces EditionInformation Wayfinding — EBI Interfaces Edition
Information Wayfinding — EBI Interfaces Edition
Tyler Tate1.3K views
Information seeking by Tyler Tate
Information seekingInformation seeking
Information seeking
Tyler Tate3.2K views
Designing Mobile Search, NYC Edition by Tyler Tate
Designing Mobile Search, NYC EditionDesigning Mobile Search, NYC Edition
Designing Mobile Search, NYC Edition
Tyler Tate2K views
Designing Mobile Search — Frankfurt Edition by Tyler Tate
Designing Mobile Search — Frankfurt EditionDesigning Mobile Search — Frankfurt Edition
Designing Mobile Search — Frankfurt Edition
Tyler Tate1K views
Designing Search - Presented at Ovum's Enterprise Search Event by Tyler Tate
Designing Search - Presented at Ovum's Enterprise Search EventDesigning Search - Presented at Ovum's Enterprise Search Event
Designing Search - Presented at Ovum's Enterprise Search Event
Tyler Tate1.5K views
The Dao of Learning: How content strategy supports learning on the web by Tyler Tate
The Dao of Learning: How content strategy supports learning on the webThe Dao of Learning: How content strategy supports learning on the web
The Dao of Learning: How content strategy supports learning on the web
Tyler Tate1.2K views
Cognitive Content Strategy by Tyler Tate
Cognitive Content StrategyCognitive Content Strategy
Cognitive Content Strategy
Tyler Tate3.7K views
Designing the Holistic Search Experience by Tyler Tate
Designing the Holistic Search ExperienceDesigning the Holistic Search Experience
Designing the Holistic Search Experience
Tyler Tate16.4K views
From Lookup to Learning: Search as a Long-term Activity – ECIR 2011 by Tyler Tate
From Lookup to Learning: Search as a Long-term Activity – ECIR 2011From Lookup to Learning: Search as a Long-term Activity – ECIR 2011
From Lookup to Learning: Search as a Long-term Activity – ECIR 2011
Tyler Tate998 views
Designing a Modern CRM by Tyler Tate
Designing a Modern CRMDesigning a Modern CRM
Designing a Modern CRM
Tyler Tate15.5K views
From Lookup to Learning by Tyler Tate
From Lookup to LearningFrom Lookup to Learning
From Lookup to Learning
Tyler Tate1.3K views
From Pattern to Component by Tyler Tate
From Pattern to ComponentFrom Pattern to Component
From Pattern to Component
Tyler Tate1.5K views
Dealing with Diverse Data by Tyler Tate
Dealing with Diverse DataDealing with Diverse Data
Dealing with Diverse Data
Tyler Tate1.3K views
The Scent of Search, Take 2 by Tyler Tate
The Scent of Search, Take 2The Scent of Search, Take 2
The Scent of Search, Take 2
Tyler Tate2.5K views
The Story for Complexity by Tyler Tate
The Story for ComplexityThe Story for Complexity
The Story for Complexity
Tyler Tate1.2K views
The Scent of Search by Tyler Tate
The Scent of SearchThe Scent of Search
The Scent of Search
Tyler Tate1.2K views
A History Of Colour by Tyler Tate
A History Of ColourA History Of Colour
A History Of Colour
Tyler Tate2.9K views

Recently uploaded

Presentation (1).pdf by
Presentation (1).pdfPresentation (1).pdf
Presentation (1).pdfhjksa
17 views5 slides
Anthelmintic Drugs-Medicinal Chemistry by
Anthelmintic Drugs-Medicinal ChemistryAnthelmintic Drugs-Medicinal Chemistry
Anthelmintic Drugs-Medicinal ChemistryNarminHamaaminHussen
6 views23 slides
polaris by
polarispolaris
polarisscribddarkened352
238 views13 slides
Here_Process book by
Here_Process bookHere_Process book
Here_Process booknykimstudio
16 views74 slides
Figma Prototype A to Z.pdf by
Figma Prototype A to Z.pdfFigma Prototype A to Z.pdf
Figma Prototype A to Z.pdfAtiqur Rahaman
18 views30 slides
TISFLEET WEB DESIGN PROJECT by
TISFLEET WEB DESIGN PROJECTTISFLEET WEB DESIGN PROJECT
TISFLEET WEB DESIGN PROJECTRabius Sany
39 views13 slides

Recently uploaded(20)

Presentation (1).pdf by hjksa
Presentation (1).pdfPresentation (1).pdf
Presentation (1).pdf
hjksa17 views
TISFLEET WEB DESIGN PROJECT by Rabius Sany
TISFLEET WEB DESIGN PROJECTTISFLEET WEB DESIGN PROJECT
TISFLEET WEB DESIGN PROJECT
Rabius Sany39 views
Doing Footwear - Footwear Factory by Doing Footwear
Doing Footwear - Footwear FactoryDoing Footwear - Footwear Factory
Doing Footwear - Footwear Factory
Doing Footwear11 views
217 Drive - All on upper.pptx by vidstor282
217 Drive - All on upper.pptx217 Drive - All on upper.pptx
217 Drive - All on upper.pptx
vidstor28215 views
Free World aids day Template from Best presentation design agency by slideceotemplates
Free World aids day Template from Best presentation design agencyFree World aids day Template from Best presentation design agency
Free World aids day Template from Best presentation design agency
Oregon Ducks 4 Spencer Webb Hoodie by brandshop1
Oregon Ducks 4 Spencer Webb HoodieOregon Ducks 4 Spencer Webb Hoodie
Oregon Ducks 4 Spencer Webb Hoodie
brandshop113 views
Design System in Figma A to Z.pdf by Atiqur Rahaman
Design System in Figma A to Z.pdfDesign System in Figma A to Z.pdf
Design System in Figma A to Z.pdf
Atiqur Rahaman22 views
IEC 600068-2-39 ENVIROMENT TESTING COMBINED TEMPERATURE LOW HUMIDTY.pdf by NirmalanGanapathy1
IEC 600068-2-39 ENVIROMENT TESTING COMBINED TEMPERATURE LOW HUMIDTY.pdfIEC 600068-2-39 ENVIROMENT TESTING COMBINED TEMPERATURE LOW HUMIDTY.pdf
IEC 600068-2-39 ENVIROMENT TESTING COMBINED TEMPERATURE LOW HUMIDTY.pdf
StratPlanning Manual 220713.pdf by Lakewalk Media
StratPlanning Manual 220713.pdfStratPlanning Manual 220713.pdf
StratPlanning Manual 220713.pdf
Lakewalk Media15 views

Designing Cross-Channel Experiences

  • 7. Designing Cross- Channel Experiences 1. A story 2. Three design principles 3. Two design methods
  • 8. Story time Sketch and tweet your version of the story. #UXOxford #storysketch
  • 11. Are there timeless approaches to designing cross-channel ecosystems?
  • 14. “Most of the functionality we now associate with these boxes on our desks, these slabs that warm our laps, will be dispersed into both the built environment and the wide variety of everyday objects we typically use there.” — Adam Greenfield in “Everyware”
  • 15. Effective design is becoming less about creating the end-all-be-all website, and more about fostering a cohesive ecosystem where the digital—such as web and mobile—works in harmony with the physical—from print media to the natural environment.
  • 18. “A lot of the functions that the devices tried to do, such as editing the video or the pictures, they did poorly because they had small screens and could not easily accommodate menus filled with lots of functions. Computers could handle that more easily.” — Steve Jobs, quoted by Walter Isaacson
  • 20. Each channel within the ecosystem should focus on what it does best.
  • 21. Design Principles 1. Division of labour 2. Consistency
  • 22. “Consistency is the agreement or harmony of parts or features to one another or a whole.” — Merriam-Webster Dictionary
  • 25. 1. The function of a channel should be optimized for its own comparative advantage.
  • 26. 2. Organizational consistency usually favor the external ecosystem over the local or internal.
  • 27. 3. Aesthetics. While the visual aspects that involve branding (such as color) should be consistent with the ecosystem, the overriding style of the user interface should match its local habitat.
  • 28. Design Principles 1. Division of labour 2. Consistency 3. Continuity
  • 29. Continuity is the principle of propagating the user’s state across all channels of the ecosystem.
  • 31. Design Methods We must view the ecosystem as a cohesive whole, as well as understand how users traverse its many parts.
  • 33. The cross-channel blueprint provides an overview of the ecosystem's two most fundamental attributes: the channels of which it's composed, and the user actions it must facilitate.
  • 34. A service blueprint created by Brandon Schauer.
  • 35. Resmini and Rosati’s CHU cube diagram
  • 37. Lookup Explore Compare Organize Purchase Print Catalog Low priority High priority Low priority N/A High priority Table of contents Immersive photography Flip pages back/forth Flip pages back/forth Order by phone Index Order by mail Order online Website High priority High priority High priority High priority High priority Search box Browse by category Table view of selected Favorites Standard checkout items Wish list / gift registry Expedited checkout Order by phone Tablet App High priority High priority Medium priority Medium priority High priority Search box Catalog-like browsing Table view of selected Favorites Expedited checkout Voice input experience items Wish lists Standard checkout Mobile App High priority Medium priority N/A Low priority High priority Search box Browse by category Impractical due to Add items to favorites Expedited checkout Voice input screen size and wish list, but Barcode scanner limited ability to edit Physical Store High priority High priority Medium priority Low priority High priority Clear signage Wander the aisles Compare side by side Gift registry / wish list Attendant-assisted Store map Ask staff Self-checkout Helpful staff Scan-as-you-go Shared Assets Product taxonomy Compare engine Universal Favs All channels powered by a single set of categories Web & tablet powered Favorites list shared by Universal checkout by one component web, tablet, mobile process for web, tablet, and mobile
  • 38. Group time Break into groups and get ready to create your own cross-channel blueprint.
  • 39. 1. Identify user actions. What are the actions that users desire to perform throughout the ecosystem as a whole?
  • 40. Lookup Explore Compare Organize Purchase Print Catalog Low priority High priority Low priority N/A High priority Table of contents Immersive photography Flip pages back/forth Flip pages back/forth Order by phone Index Order by mail Order online Website High priority High priority High priority High priority High priority Search box Browse by category Table view of selected Favorites Standard checkout items Wish list / gift registry Expedited checkout Order by phone Tablet App High priority High priority Medium priority Medium priority High priority Search box Catalog-like browsing Table view of selected Favorites Expedited checkout Voice input experience items Wish lists Standard checkout Mobile App High priority Medium priority N/A Low priority High priority Search box Browse by category Impractical due to Add items to favorites Expedited checkout Voice input screen size and wish list, but Barcode scanner limited ability to edit Physical Store High priority High priority Medium priority Low priority High priority Clear signage Wander the aisles Compare side by side Gift registry / wish list Attendant-assisted Store map Ask staff Self-checkout Helpful staff Scan-as-you-go Shared Assets Product taxonomy Compare engine Universal Favs All channels powered by a single set of categories Web & tablet powered Favorites list shared by Universal checkout by one component web, tablet, mobile process for web, tablet, and mobile
  • 41. 1. Identify user actions. 2. List the channels. What channels compose the ecosystem? Think both digital and physical.
  • 42. Lookup Explore Compare Organize Purchase Print Catalog Low priority High priority Low priority N/A High priority Table of contents Immersive photography Flip pages back/forth Flip pages back/forth Order by phone Index Order by mail Order online Website High priority High priority High priority High priority High priority Search box Browse by category Table view of selected Favorites Standard checkout items Wish list / gift registry Expedited checkout Order by phone Tablet App High priority High priority Medium priority Medium priority High priority Search box Catalog-like browsing Table view of selected Favorites Expedited checkout Voice input experience items Wish lists Standard checkout Mobile App High priority Medium priority N/A Low priority High priority Search box Browse by category Impractical due to Add items to favorites Expedited checkout Voice input screen size and wish list, but Barcode scanner limited ability to edit Physical Store High priority High priority Medium priority Low priority High priority Clear signage Wander the aisles Compare side by side Gift registry / wish list Attendant-assisted Store map Ask staff Self-checkout Helpful staff Scan-as-you-go Shared Assets Product taxonomy Compare engine Universal Favs All channels powered by a single set of categories Web & tablet powered Favorites list shared by Universal checkout by one component web, tablet, mobile process for web, tablet, and mobile
  • 43. 1. Identify user actions. 2. List the channels. 3. Prioritise and describe each channel-action. Determine the priority that each action should receive for a given channel. At the same time as setting priorities, also briefly describe how each action would be achieved.
  • 44. Lookup Explore Compare Organize Purchase Print Catalog Low priority High priority Low priority N/A High priority Table of contents Immersive photography Flip pages back/forth Flip pages back/forth Order by phone Index Order by mail Order online Website High priority High priority High priority High priority High priority Search box Browse by category Table view of selected Favorites Standard checkout items Wish list / gift registry Expedited checkout Order by phone Tablet App High priority High priority Medium priority Medium priority High priority Search box Catalog-like browsing Table view of selected Favorites Expedited checkout Voice input experience items Wish lists Standard checkout Mobile App High priority Medium priority N/A Low priority High priority Search box Browse by category Impractical due to Add items to favorites Expedited checkout Voice input screen size and wish list, but Barcode scanner limited ability to edit Physical Store High priority High priority Medium priority Low priority High priority Clear signage Wander the aisles Compare side by side Gift registry / wish list Attendant-assisted Store map Ask staff Self-checkout Helpful staff Scan-as-you-go Shared Assets Product taxonomy Compare engine Universal Favs All channels powered by a single set of categories Web & tablet powered Favorites list shared by Universal checkout by one component web, tablet, mobile process for web, tablet, and mobile
  • 45. 1. Identify user actions. 2. List the channels. 3. Prioritise and describe each channel-action. 4. Identify shared components. Think about the behind-the-scenes components that will be necessary to empower each user action.
  • 46. Lookup Explore Compare Organize Purchase Print Catalog Low priority High priority Low priority N/A High priority Table of contents Immersive photography Flip pages back/forth Flip pages back/forth Order by phone Index Order by mail Order online Website High priority High priority High priority High priority High priority Search box Browse by category Table view of selected Favorites Standard checkout items Wish list / gift registry Expedited checkout Order by phone Tablet App High priority High priority Medium priority Medium priority High priority Search box Catalog-like browsing Table view of selected Favorites Expedited checkout Voice input experience items Wish lists Standard checkout Mobile App High priority Medium priority N/A Low priority High priority Search box Browse by category Impractical due to Add items to favorites Expedited checkout Voice input screen size and wish list, but Barcode scanner limited ability to edit Physical Store High priority High priority Medium priority Low priority High priority Clear signage Wander the aisles Compare side by side Gift registry / wish list Attendant-assisted Store map Ask staff Self-checkout Helpful staff Scan-as-you-go Shared Assets Product taxonomy Compare engine Universal Favs All channels powered by a single set of categories Web & tablet powered Favorites list shared by Universal checkout by one component web, tablet, mobile process for web, tablet, and mobile
  • 47. 1. A global view of important user actions 2. The possible channels through which users might attempt those actions 3. A set of task priorities for each channel 4. A set of channel priorities for each action 5. An overview of which components need to be shared across channels
  • 48. Group time Tweet your cross-channel blueprints. #UXOxford #ccblueprint
  • 49. Design Methods 1. Cross-Channel Blueprint 2. Experience Map
  • 50. 1. Outline the user’s journey. Start by creating a list of all the occurrences that constitute the user’s experience, not just within the ecosystem, but throughout the entire journey from beginning to end. These occurrences can then be arranged horizontally to form a timeline.
  • 51. 1. Outline the user’s journey. 2. List the channel and goal for each step of the user’s journey. Channel refers to the medium through which the action is performed. Goal describes the underlying motivation for performing the action. These components should be consistent with the channel and actions dimensions of the cross-channel blueprint.
  • 52. 1. Outline the user’s journey. 2. List the channel and goal. 3. Describe the user’s emotion and rate their satisfaction for every step of the process. In order to be useful, however, such reporting should be based on first-hand observation of the user.
  • 53. Channel Web Jouney Amir is invited on a He realizes he needs He searches He clicks on each of camping trip in two Google for "mens weeks time. before the trip. outdoor jackets". browses the selection of several online retailers. Goal Explore Optimism Emotion Amir is excited He doesn’t know Amir doesn’t know He is overwhelmed about the trip much about jackets, where to look— at the hundreds of and is daunted by too many different jackets available. the task. vendors.
  • 54. Channel Web Jouney Amir is invited on a He realizes he needs He searches He clicks on each of Eventually, he He returns to Google He arrives on Amir looks through He adds 4 of the camping trip in two Google for "mens determines that an and searches for EveryWare's outer every page of results, jackets to his weeks time. before the trip. outdoor jackets". browses the selection outer shell jacket "mens outer shell shell jackets landing clicking on about a favorites list. of several online would be ideal for jackets". EveryWare page. There are over dozen jackets along retailers. his trip. is the second link. 50 jackets listed. the way. Goal Explore Organize Optimism Emotion Amir is excited He doesn’t know Amir doesn’t know He is overwhelmed Amir becomes much He’s purchased Amir is a bit Most of the jackets He’s reasonably about the trip much about jackets, where to look— at the hundreds of more optimistic something from frustrated that don’t match his happy with his and is daunted by too many different jackets available. once identifying the EveryWare before. there are so many needs, so he’s progress so far. the task. vendors. type of jacket that soft shell jackets pleased that he can to look through. narrow his selection. Catalog Catalog/Phone Computer Phone Store He clicks on a link The EveryWare He spots another two Amir reviews his Still unsure, Amir Walking down the Searching for the Amir adds the jacket Arriving at the store, Having tried several o request a print catalog arrives in the jackets that he likes, favorites list from his decides to go to the street, Amir sees brand name in the to his favorites list, Amir makes his way on, Amir pays for his catalog, and then which he adds to his computer, adding a EveryWare store and someone wearing an EveryWare app, Amir and shares it with a to the jackets section. new jacket—the one signs off. through it over favorites list using his comment to each try the jackets on. outer shell jacket that friend along, asking he had seen on the breakfast. phone. jacket. he really likes. for his friend’s opinion. jackets on his list. way to the store. Explore Organize Lookup Organize Lookup Purchase Amir is weary of Amir is pleased He’s pleased to There’s no clear He’s a bit frustrated That’s it! That’s Amir is happy to Amir is just a bit Amir is pleased and ooking. when the catalog winner, and Amir that he has to exactly what I want! see that EveryWare giddy and needs to feels a weight lifted arrives. possibilities, but doesn’t love any spend his afternoon Amir’s optimism carry the jacket. share his excitement the items on his from his shoulders: feels even further of them. going into the store. immediately soars. with someone. favorites list in the he can now look away from a decision. store itself. forward to his trip.
  • 55. Designing Cross- Channel Experiences 1. A story 2. Three design principles i. Division of Labour ii. Consistency iii. Continuity 3. Two design methods i. Cross-Channel Blueprint ii. Experience Map