24
Instant Search API Instant Search API Alexandre COLLIN Customer Solutions Engineer [email protected] @alexandrecollin Office Hours - April 13 th 2015 Leveraging Search to Build an Engaging UX

Leveraging Search to Build an Engaging User Experience (CodeMentor - OfficeHours)

Embed Size (px)

Citation preview

Page 1: Leveraging Search to Build an Engaging User Experience (CodeMentor - OfficeHours)

Instant Search API

Instant Search API

Alexandre COLLINCustomer Solutions Engineer

[email protected]

@alexandrecollin

Office Hours - April 13th 2015

Leveraging Search to Build an Engaging UX

Page 2: Leveraging Search to Build an Engaging User Experience (CodeMentor - OfficeHours)

Instant Search API

Introduction (2min)

State of the Art of Search (20 min)

How to build a Instant Search and Navigation UX? (20 min)- Instant Search Result page

- Multi-category Autocomplete

Questions & Answers (20 min)

AGENDA

Page 3: Leveraging Search to Build an Engaging User Experience (CodeMentor - OfficeHours)

Instant Search API

WHO I AM?

Product Marketing

SoftwareEngineer

Traveler + Freelancer

Customer Solutions Engineer

My scope includes• Build prototypes

• Provide Technical support

• Provide implementation guidance

from the User Experience POV

• Share best practices among our

community

• Ensure that our users are

successful

Page 4: Leveraging Search to Build an Engaging User Experience (CodeMentor - OfficeHours)

Instant Search API

Dec 2013 Mobile offline Search SDK

Jan 2014

Nov 2014 Distributed Search Network

Oct 2012 Creation by 2 Search Veterans

Sept 2013 Hosted API Release

ALGOLIA’S IDENTITY CARD

E-commerce

Other

+500 customers

in +45 countries

Today it’s

A team in Paris & San Francisco

We're Hiring

Medias

Page 5: Leveraging Search to Build an Engaging User Experience (CodeMentor - OfficeHours)

Instant Search API

STATE OF THE ART OF SEARCH

Page 6: Leveraging Search to Build an Engaging User Experience (CodeMentor - OfficeHours)

Instant Search APITWO TYPES OF SEARCH

Site search / mobile app searchWebsite & document search

Page 7: Leveraging Search to Build an Engaging User Experience (CodeMentor - OfficeHours)

Instant Search API

HOW DOES SEARCH LOOKS LIKE ON POPULAR WEBSITES?

Ikea.com

CNN.com

Amazon.com

Page 8: Leveraging Search to Build an Engaging User Experience (CodeMentor - OfficeHours)

Instant Search APISEARCH HAS BECOME A CRITICAL UI / UX ELEMENT

2001 today

People start their web sessions with a search engine 88% of the time. Nielsen Norman Group 2004

43% of users jump immediately to the search function after landing for the first time on a website Marketing Sherpa 2007

Page 9: Leveraging Search to Build an Engaging User Experience (CodeMentor - OfficeHours)

Instant Search API

Half a second delaycaused 20% drop in traffic

Every 100ms of latencycosts them 1% in sales

SPEED MATTERS

Page 10: Leveraging Search to Build an Engaging User Experience (CodeMentor - OfficeHours)

Instant Search APIRELEVANCE IS CRITICAL

The lack of relevance and results (typo-tolerance,

synonyms support) creates disappointment to the

user.

=> Pogo sticking problem

- Bad User Experience

- High bounce rate & Investments in SEO/SEM get lost

Page 11: Leveraging Search to Build an Engaging User Experience (CodeMentor - OfficeHours)

Instant Search API

199 britnney spears

163 britnry spears

147 breatny spears

147 brittiney spears

147 britty spears

147 brotney spears

147 brutney spears

133 britteney spears

133 briyney spears

121 bittany spears

121 bridney spears

121 britainy spears

121 britmey spears

109 brietney spears

109 brithny spears

109 britni spears

109 brittant spears

98 bittney spears

98 brittiany spears

98 btitney spears

89 brietny spears

89 brinety spears

89 brintny spears

89 britnie spears

89 brittey spears

89 brittnet spears

89 brity spears

89 ritney spears

80 bretny spears

80 britnany spears

73 brinteny spears

73 brittainy spears

73 pritney spears

66 brintany spears

66 britnery spears

59 briitney spears

59 britinay spears

54 britneay spears

54 britner spears

54 britney’s spears

54 britnye spears

54 britt spears

54 brttany spears

48 bitany spears

48 briny spears

48 brirney spears

48 britant spears

48 britnety spears

48 brittanny spears

48 brttney spears

44 birttany spears

44 brittani spears

44 brityney spears

44 brtitney spears

488941 britney spears

40134 brittany spears

36315 brittney spears

24342 britany spears

7331 britny spears

6633 briteny spears

2696 britteny spears

1807 briney spears

1635 brittny spears

1479 brintey spears

1479 britanny spears

1338 britiny spears

1211 britnet spears

1096 britiney spears

991 britaney spears

991 britnay spears

811 brithney spears

811 brtiney spears

664 birtney speas

664 brintney spears

664 briteney spears

601 bitney spears

601 brinty spears

544 brittaney spears

544 brittnay spears

364 britey spears

364 brittiny spears

329 brtney spears

269 bretney spears

269 britneys spears

244 britne spears

244 brytney spears

220 breatney spears

220 britiany spears

TYPO-TOLERANCE IS A MUST HAVE!

The 594 ways people type Britney Spears (Google data)

Page 12: Leveraging Search to Build an Engaging User Experience (CodeMentor - OfficeHours)

Instant Search API

What’s true on Desktop is even more true on Mobile

Need of Instant is amplified

“ 55% of consumers using

mobile to research want to

purchase within the hour. ”

Source: Nielsen & Google, Mobile Path to Purchase Five Key Findings, November 2013

WHAT ABOUT SEARCH ON MOBILE?

“Fat finger effect”

Page 13: Leveraging Search to Build an Engaging User Experience (CodeMentor - OfficeHours)

Instant Search API

Backend elite required

Requires a lot of skills

(hosting, scaling, coding,

tuning, …) and there is not

enough experts on the

market.

Inaccessible toUX designer/developer

Relevance is an important part

of UX and is inaccessible to

UX team.

Time gets out of control

A lot of iterations and tuning are

required to reach a correct

quality.

BUILDING A GOOGLE-LIKE SEARCH UX IS TOO HARD

Resulting in a poor search experience

Page 14: Leveraging Search to Build an Engaging User Experience (CodeMentor - OfficeHours)

Instant Search API

Ultra-fast search API

Most results computed in under 10msUp to 200x faster than the competition.

Exceptional user experience on any deviceDesigned for search-as-you-type UX.

Rich features set

Typo-tolerance, geo-search, all languages support, analytics, etc.

First class security

Fine-grained access control, even in javascript.

Available in 12 data centers

Full response time under 50ms in most parts of the world.

Highly available

SLA of 99.99%

Algolia relies on a high-end feature set to deliver its value to the End-Users and Developers

ALGOLIA’S VALUE PROPOSITION

Page 15: Leveraging Search to Build an Engaging User Experience (CodeMentor - OfficeHours)

Instant Search API

UX BUILT USING ALGOLIA’S API

Page 16: Leveraging Search to Build an Engaging User Experience (CodeMentor - OfficeHours)

Instant Search API

SPEED LEADS TO MORE ENGAGEMENT

- Search depth increased by 60%- Mobile sessions with search jump

250%- Bounce rate decreased by 17%

- Increase in their average order value by 12%- Increase in their conversion rate 9%

- Increase of the search volume by 5- Visitors who use search view 3 time more pages per session and spend 6 time longer

Page 17: Leveraging Search to Build an Engaging User Experience (CodeMentor - OfficeHours)

Instant Search API

HOW EASILY IMPLEMENT AN INSTANT UX?

Search & Navigation

Page 18: Leveraging Search to Build an Engaging User Experience (CodeMentor - OfficeHours)

Instant Search API

HOW DOES ALGOLIA WORK?

Import your datausing an API client

Customize Ranking& fine tune results

Build Search UXon Desktop & Mobile

Page 19: Leveraging Search to Build an Engaging User Experience (CodeMentor - OfficeHours)

Instant Search API

API CLIENTS: Backend VS Frontend

JDBC MongoDB

Backend API Clients

+ Connectors

Frontend API Clients

…+ Framework integrations

+ CMS integrations

+ UI components

• Components for FB React

• Twitter Typeahead

• Select2

• ..

Page 20: Leveraging Search to Build an Engaging User Experience (CodeMentor - OfficeHours)

Instant Search API

INTEGRATIONS WITH FRAMEWORKS, CMS, …

https://www.algolia.com/doc/integrations

Page 21: Leveraging Search to Build an Engaging User Experience (CodeMentor - OfficeHours)

Instant Search API

TWO APPROACHES / ARCHITECTURES

Backendimplementation

Frontendimplementation

Page 22: Leveraging Search to Build an Engaging User Experience (CodeMentor - OfficeHours)

Instant Search API

BENEFITS OF THE FRONTEND APPROACH

Page 23: Leveraging Search to Build an Engaging User Experience (CodeMentor - OfficeHours)

Instant Search API

LETS DO IT!

Page 24: Leveraging Search to Build an Engaging User Experience (CodeMentor - OfficeHours)

Instant Search API

QUESTIONS / ANSWERS

Instant Search API

Alexandre COLLINCustomer Solutions Engineer

[email protected]

@alexandrecollinOffice Hours

Don't wait! Try Algolia now!www.algolia.com