Designing Mobile Search: A workshop for eBay Classifieds Group

by @TylerTate

Designing Mobile Search

Desktop PCs

Laptop PCs

Smartphones

Tablets

2005 2006 2007 2008 2009 2010 2011 2012 2013

Forecast

800 million

“Beyond the PC” by The Economist, Oct 8th 2011. Sources: Cisco, Gartner, Informa Telecoms & Media, KPCB, Morgan Stanley, UN, Yankee Group, The Economist.

.

Problem 1: We didn't know exactly what we wanted.

Problem 1: We didn't know exactly what we wanted.

Problem 2: When we saved items on one device, we couldn't access them from others.

Problem 1: We didn't know exactly what we wanted.

Problem 2: When we saved items on one device, we couldn't access them from others.

Problem 3: We didn't have a good way to share what we'd found with one another.

Problem 1: We didn't know exactly what we wanted.

Problem 2: When we saved items on one device, we couldn't access them from others.

Problem 3: We didn't have a good way to share what we'd found with one another.

Problem 4: We had to perform the same searches everyday until we found just what we wanted.

Initiation

Initiation Selection

Initiation Selection Exploration

Initiation Selection Exploration Formulation

Initiation Selection Exploration Formulation Collection

Initiation Selection Exploration Formulation Collection Action

Initiation Selection Exploration Formulation Collection Actionhttp://alistapart.com/article/the-ux-of-learning

SearchMotive

Search Type

Casual

Casual Lookup

Casual Lookup Learn

Casual Lookup Learn Investigate

Informational

Informational Geographic

Informational Geographic Personal Info

Informational Geographic Personal Info Transactional

Casual Lookup Learn Investigate

Info

Geographic

PersonalInfo

Transaction

Casual Lookup Learn Investigate

Info

Geographic

PersonalInfo

TransactionPrice

ComparisonActing on

NotificationsOnline

ShoppingProduct

Monitoring

TriviaWindow

ShoppingInformationGathering

Research

DirectionsFriend

Check-insLocal Points of Interest

Travel Planning

CheckingCalendar

CheckingMessages

Situation Analysis

Lifestyle Planning

http://tinyurl.com/InfoNeedMatrix

Task

Physical

PersonalSocial

Environ

Task

Physical

PersonalSocial

Environ

Task

Physical

PersonalSocial

Environ

Task

Physical

PersonalSocial

Environ

Task

Physical

PersonalSocial

Environ

Task

Physical

PersonalSocial

Environ

1. Content Over Controls

The Search Box

SortSearch...In the navigation bar

Sort

Search...

In a secondary toolbar

SortSearch...Via a pull-to-reveal gesture

Sort

Search...Via a pull-to-reveal gesture

Sort

Search...

Via a pull-to-reveal gesture

Sort

Search...

Via a pull-to-reveal gesture

As-you-type suggestions

As-you-type suggestions

Other Input Methods

Location

Audio

Visual

Drawing

Display Formats

List

Grid

Map

Augmented Reality

Toggling the Display Format

Segmented control in a toolbar

List MapMap Images

Search...

Segmented control centered in the navigation bar

List MapMap Images

Single button in the navigation bar

Search... Map

2. Open-ended Exploration

Inline Controls

Dedicated Screen

Best Match Price DateRefine

Best Match Price DateRefine

Filter by

Category Acoustic

Condition

Price

Seller

Buying Formats

Location

Filtering

Best Match Price Date

New Refurb. Used Broken

Refine

Narrow by

Category Acoustic

Price

Buying Formats

Location

Filtering with a segmented control

Best Match Price Date

New Refurb. Used Broken

Refine

Narrow by

Category Acoustic

Seller

Price

Buying Formats

Location

Filtering with a slider

Best Match Price Date

Best Match Price Date

New Refurb. Used Broken

Refine

Sort by

Narrow by

Category Acoustic

Seller

Price

Buying Formats

Location

Sorting with a segmented control

Dedicated refinement screens

Accessing the Refinement Screen

Best Match Price DateRefineGuitarButton in the navigation bar

Best Match Price DateRefineGuitarBest Match Price Date

Best Match Price Date

Best Match Price Date

New Refurb. Used Broken

Refine

Sort by

Narrow by

Price

RefineSearch...Button in the navigation bar

Best Match Price DateRefineSearch...Best Match Price Date

Best Match Price Date

New Refurb. Used Broken

Refine

Sort by

Narrow by

Category Acoustic

Seller

Price

Buying Formats

Location

DoneButton in the navigation bar

Button in the navigation

Gesture

Best Match Price DateRefine

Used Broken

Acoustic

Gesture

Best Match Price Date

New Refurb. Used Broken

Narrow by

Category Acoustic

Seller

Price

Buying Formats

RefineGesture

Button or gesture

Button and popover

Breadcrumbs

Best Match Price DateRefineGuitar

Showing new, acoustic guitars. Sorting by price.

3. Cross-Channel Continuity

4. Collaborative Searching

5. Multi-session Tasks

Problem: We didn't know exactly what we wanted.

Problem: We didn't know exactly what we wanted.

Solution: Design for open-ended exploration.

Problem: When we saved items on one device, we couldn't access them from others.

Problem: When we saved items on one device, we couldn't access them from others.

Solution: Design for cross-channel continuity.

Problem: We didn't have a good way to share what we'd found with one another.

Problem: We didn't have a good way to share what we'd found with one another.

Solution: Design for collaborative search.

Problem: We had to perform the same searches everyday until we found just what we wanted.

Problem: We had to perform the same searches everyday until we found just what we wanted.

Solution: Design for multi-sessions tasks.

Mobile Search Workshop, Part 1

Developing a Cross-Channel Blueprint

13:45 - 14:45

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.

Print Catalog

Website

Tablet App

Mobile App

Physical Store

Lookup Explore Compare Organize Purchase

Shared Assets

Low priorityTable of contentsIndex

High prioritySearch box

High prioritySearch boxVoice input

High prioritySearch boxVoice inputBarcode scanner

High priorityClear signageStore mapHelpful staff

High priorityImmersive photography

High priorityBrowse by category

High priorityCatalog-like browsing experience

Medium priorityBrowse by category

High priorityWander the aisles

Low priorityFlip pages back/forth

High priorityTable view of selected items

Medium priorityTable view of selected items

N/AImpractical due to screen size

Medium priorityCompare side by sideAsk staff

N/AFlip pages back/forth

High priorityFavoritesWish list / gift registry

Medium priorityFavoritesWish lists

Low priorityAdd items to favorites and wish list, but limited ability to edit

Low priorityGift registry / wish list

High priorityOrder by phoneOrder by mailOrder online

High priorityStandard checkoutExpedited checkoutOrder by phone

High priorityExpedited checkoutStandard checkout

High priorityExpedited checkout

High priorityAttendant-assistedSelf-checkoutScan-as-you-go

Product taxonomyAll channels powered by a single set of categories

Compare engineWeb & tablet powered by one component

Universal FavsFavorites list shared by web, tablet, mobile

"GDBJNTS�VNQJlNVUniversal checkout 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?

Print Catalog

Website

Tablet App

Mobile App

Physical Store

Lookup Explore Compare Organize Purchase

Shared Assets

Low priorityTable of contentsIndex

High prioritySearch box

High prioritySearch boxVoice input

High prioritySearch boxVoice inputBarcode scanner

High priorityClear signageStore mapHelpful staff

High priorityImmersive photography

High priorityBrowse by category

High priorityCatalog-like browsing experience

Medium priorityBrowse by category

High priorityWander the aisles

Low priorityFlip pages back/forth

High priorityTable view of selected items

Medium priorityTable view of selected items

N/AImpractical due to screen size

Medium priorityCompare side by sideAsk staff

N/AFlip pages back/forth

High priorityFavoritesWish list / gift registry

Medium priorityFavoritesWish lists

Low priorityAdd items to favorites and wish list, but limited ability to edit

Low priorityGift registry / wish list

High priorityOrder by phoneOrder by mailOrder online

High priorityStandard checkoutExpedited checkoutOrder by phone

High priorityExpedited checkoutStandard checkout

High priorityExpedited checkout

High priorityAttendant-assistedSelf-checkoutScan-as-you-go

Product taxonomyAll channels powered by a single set of categories

Compare engineWeb & tablet powered by one component

Universal FavsFavorites list shared by web, tablet, mobile

"GDBJNTS�VNQJlNVUniversal checkout process for web, tablet, and mobile

1. Identify user actions.

2. List the channels. What channels compose the ecosystem? Think both digital and physical.

Print Catalog

Website

Tablet App

Mobile App

Physical Store

Lookup Explore Compare Organize Purchase

Shared Assets

Low priorityTable of contentsIndex

High prioritySearch box

High prioritySearch boxVoice input

High prioritySearch boxVoice inputBarcode scanner

High priorityClear signageStore mapHelpful staff

High priorityImmersive photography

High priorityBrowse by category

High priorityCatalog-like browsing experience

Medium priorityBrowse by category

High priorityWander the aisles

Low priorityFlip pages back/forth

High priorityTable view of selected items

Medium priorityTable view of selected items

N/AImpractical due to screen size

Medium priorityCompare side by sideAsk staff

N/AFlip pages back/forth

High priorityFavoritesWish list / gift registry

Medium priorityFavoritesWish lists

Low priorityAdd items to favorites and wish list, but limited ability to edit

Low priorityGift registry / wish list

High priorityOrder by phoneOrder by mailOrder online

High priorityStandard checkoutExpedited checkoutOrder by phone

High priorityExpedited checkoutStandard checkout

High priorityExpedited checkout

High priorityAttendant-assistedSelf-checkoutScan-as-you-go

Product taxonomyAll channels powered by a single set of categories

Compare engineWeb & tablet powered by one component

Universal FavsFavorites list shared by web, tablet, mobile

"GDBJNTS�VNQJlNVUniversal checkout 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.

Print Catalog

Website

Tablet App

Mobile App

Physical Store

Lookup Explore Compare Organize Purchase

Shared Assets

Low priorityTable of contentsIndex

High prioritySearch box

High prioritySearch boxVoice input

High prioritySearch boxVoice inputBarcode scanner

High priorityClear signageStore mapHelpful staff

High priorityImmersive photography

High priorityBrowse by category

High priorityCatalog-like browsing experience

Medium priorityBrowse by category

High priorityWander the aisles

Low priorityFlip pages back/forth

High priorityTable view of selected items

Medium priorityTable view of selected items

N/AImpractical due to screen size

Medium priorityCompare side by sideAsk staff

N/AFlip pages back/forth

High priorityFavoritesWish list / gift registry

Medium priorityFavoritesWish lists

Low priorityAdd items to favorites and wish list, but limited ability to edit

Low priorityGift registry / wish list

High priorityOrder by phoneOrder by mailOrder online

High priorityStandard checkoutExpedited checkoutOrder by phone

High priorityExpedited checkoutStandard checkout

High priorityExpedited checkout

High priorityAttendant-assistedSelf-checkoutScan-as-you-go

Product taxonomyAll channels powered by a single set of categories

Compare engineWeb & tablet powered by one component

Universal FavsFavorites list shared by web, tablet, mobile

"GDBJNTS�VNQJlNVUniversal checkout 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.

Print Catalog

Website

Tablet App

Mobile App

Physical Store

Lookup Explore Compare Organize Purchase

Shared Assets

Low priorityTable of contentsIndex

High prioritySearch box

High prioritySearch boxVoice input

High prioritySearch boxVoice inputBarcode scanner

High priorityClear signageStore mapHelpful staff

High priorityImmersive photography

High priorityBrowse by category

High priorityCatalog-like browsing experience

Medium priorityBrowse by category

High priorityWander the aisles

Low priorityFlip pages back/forth

High priorityTable view of selected items

Medium priorityTable view of selected items

N/AImpractical due to screen size

Medium priorityCompare side by sideAsk staff

N/AFlip pages back/forth

High priorityFavoritesWish list / gift registry

Medium priorityFavoritesWish lists

Low priorityAdd items to favorites and wish list, but limited ability to edit

Low priorityGift registry / wish list

High priorityOrder by phoneOrder by mailOrder online

High priorityStandard checkoutExpedited checkoutOrder by phone

High priorityExpedited checkoutStandard checkout

High priorityExpedited checkout

High priorityAttendant-assistedSelf-checkoutScan-as-you-go

Product taxonomyAll channels powered by a single set of categories

Compare engineWeb & tablet powered by one component

Universal FavsFavorites list shared by web, tablet, mobile

"GDBJNTS�VNQJlNVUniversal checkout process for web, tablet, and mobile

1. A global view of important user actions

1. A global view of important user actions

2. The possible channels through which users might attempt those actions

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

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

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

Mobile Search Workshop, Part 2

User Interface Sketching

15:00 - 16:00

Inputting the query

Viewing search results

Refining the query

Advanced features

Combine the best ideas

Share

Inputting the query

Viewing search results

Refining the query

Advanced features

Combine the best ideas

Share

Inputting the query

Viewing search results

Refining the query

Advanced features

Combine the best ideas

Share

Inputting the query

Viewing search results

Refining the query

Advanced features

Combine the best ideas

Share

Inputting the query

Viewing search results

Refining the query

Advanced features

Combine the best ideas

Share

Inputting the query

Viewing search results

Refining the query

Advanced features

Combine the best ideas

Share

by @TylerTate

Designing Mobile Search