Published on March 4, 2014
E-COMMERCE & USER EXPERIENCE Vaimo E-commerce Seminar February 27, 2014 Sage Technology Park, Pretoria
PJ UTSI CO-FOUNDER & CHIEF CREATIVE OFFICER Stockholm, Sweden Science + Development + Design + Innovation Business + Sales + Product + Digital + Web = Ecommerce!
AGENDA • What is user experience? • • How to start • How to continue • • How to think Demo What’s new & happening? • Mobile • Multi-channel • Demo
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 It’s everything!
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?
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!
HOW? APPS SET THE BAR HIGH BUT… SO WE HAVE TO • Touch We can’t replace • Look like an app • Sharp every site with an • Act like an app • Focus app • Shed weight • Recognize me • Connection is slower • Hardware • Browser is weak • Performance •
HOW? WE WANT DESKTOP- GRADE BUT… SO… • Content • Screen is smaller • Features • Sometimes portrait, • Interface • Readability sometimes landscape • Different size • Everything must be available • Content and layout must adapt
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 !
UX, Service Design & Analytics Account Manager at ECOM Past UX, Service Design & Analytics Account Executive at ECOM, UX & ...
Download Director i of Ecom Box 2014. Transcript. X. Recommended. Anatomy of eCom Application