E-COMMERCE & USER EXPERIENCE

Vaimo E-commerce Seminar February 27, 2014

Sage Technology Park, Pretoria

CO-FOUNDER & CHIEF CREATIVE OFFICERPJ UTSI

Stockholm, Sweden

Science + Development + Design + Innovation Business + Sales + Product + Digital + Web

= Ecommerce!

AGENDA• What is user experience?

• How to think • How to start • How to continue • Demo

• What’s new & happening? • Mobile • Multi-channel • Demo

It’s everything!

USER EXPERIENCE

Design, Look & Feel, Usability, Readability, Accessibility

Speed, Intuitiveness, Precision, Stability, Quality, Reliability

Price, Discounts, Availability, Payment, Shipment, Returns

Delivery, Packaging, Products, Warranty, Brand, Marketing

USER EXPERIENCE: HOW TO THINK• Building a digital store

• Digital is not physical • You have more than one store layout

• People shop differently • Men vs. Women • Rational vs. Emotional

• People are right • We are probably only guessing • Digital means we have data

USER EXPERIENCE: HOW TO START• The site

• What does it do? • The customer

• Who is it? • Why is she here?

• Scenarios & journeys • What is going to happen?

• Prioritize • What is most important?

CUSTOMER & SCENARIOS

THE BRAND LOYAL CONSUMER

THE CONVENIENCE CONSUMER

PERSONAS

24-hour fashion lover Time-pressed optimizer

USER EXPERIENCE: HOW TO CONTINUE• The site

• Is it working? • The customer

• Who is it really? • Why is she really here?

• Scenarios & journeys • What is actually happening?

• Prioritize • What is most important, now that we know more?

WHO IS IT REALLY?

WHAT IS ACTUALLY HAPPENING?

DEVICES, TRAFFIC & SALES?

DEVICES, TRAFFIC?

DEVICES, SALES?

USER EXPERIENCE:DEMO• Gant - http://us.gant.com • Eton - http://www.etonshirts.com • Björn Borg - http://www.bjornborg.com • Bauhaus - http://www.bauhaus.se • JC - http://www.jc.se • P O. P - http://www.polarnopyret.com • Ridestore - http://www.ridestore.se • FCNY - http://www.flightclub.com • Konga - http://www.konga.com

WHAT’S NEW & HAPPENING?

Mobile

Multi-channel

MOBILE• What is it? • Is it important? • What’s the problem? • What must we do?

MOBILE: WHAT IS IT?• Are you mobile? • Are you desktop? • What’s the difference?

MOBILE: WHAT IS IT?• Smaller screen

• Sometimes a lot, sometimes a little

• Touch • No keyboard • No cursor

MOBILE: IS IT IMPORTANT?• The PC is dead • We only buy mobile devices

MOBILE: IT DOMINATES ALL…

MOBILE: …EXCEPT THE WEB

WHY? FROM NATIVE TO WEB

WHY? MEAT IN THE WAY

WHY? IT’S NOT THE SAME

WHY? IT’S SLOW

THE WEB ON MOBILE, NOT EXACTLY A PARTY…

…AND IT’S THOSE ☁#★!& NATIVES FAULT!

APPS SET THE BAR

HIGH • Touch • Sharp • Focus • Recognize me • Hardware • Performance

BUT… • We can’t replace

every site with an

app • Connection is slower • Browser is weak

SO WE HAVE TO • Look like an app • Act like an app • Shed weight

HOW?

WE WANT DESKTOP-

GRADE • Content • Features • Interface • Readability

BUT… • Screen is smaller • Sometimes portrait,

sometimes landscape • Different size

SO… • Everything must be

available • Content and layout

must adapt

HOW?

MOBILE: WHAT MUST WE DO?• Look & act like an app

• Shed weight

• Make everything available

• Adapt content & layout to screen size

MOBILE: RESPONSIVE WEB DESIGN

MOBILE: RESPONSIVE WEB DESIGN

MOBILE: DEMO• Eton - http://www.etonshirts.com • Björn Borg - http://www.bjornborg.com • P O. P - http://www.polarnopyret.com • Bauhaus - http://www.bauhaus.se • CUM Books - http://www.cumbooks.co.za • Konga - http://www.konga.com

MULTI-CHANNEL• What is it? • Is it important? • What’s the problem? • What must we do?

MULTI-CHANNEL: DEMO• CUM Books - http://www.cumbooks.co.za • Pavers - http://www.pavers.co.uk • Flight Club - http://www.flightclub.com • P O. P - http://www.polarnopyret.com • Bauhaus - http://www.bauhaus.se • Tilbords - http://www.tilbords.no

THANK YOU!www.vaimo.co.za

!

www.facebook.com/VaimoGlobal

www.twitter.com/vaimoglobal !