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 + Sale...
AGENDA
•

What is user experience?
•
•

How to start

•

How to continue

•

•

How to think

Demo


What’s new & happenin...
USER EXPERIENCE
Design, Look & Feel, Usability, Readability, Accessibility
Speed, Intuitiveness, Precision, Stability, Qua...
USER EXPERIENCE: 

HOW TO THINK
•

Building a digital store
•
•

•

Digital is not physical
You have more than one store l...
USER EXPERIENCE: 

HOW TO START
•

The site
•

•

What does it do?

The customer
•
•

•

Who is it?
Why is she here?

Scen...
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 rea...
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.bjorn...
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 s...
HOW?
WE WANT DESKTOP-







GRADE

BUT…

SO…

•

Content

•

Screen is smaller

•

Features

•

Sometimes portrait,

•

I...
MOBILE:
WHAT MUST WE DO?
•

Look & act like an app


•

Shed weight


•

Make everything available


•

Adapt content & la...
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.polarno...


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:...
THANK YOU!
www.vaimo.co.za
!

www.facebook.com/VaimoGlobal


www.twitter.com/vaimoglobal
!
Vaimo sa ecom seminar feb 27 2014   ecom & ux - PJ Utsi
Upcoming SlideShare
Loading in …5
×

Vaimo sa ecom seminar feb 27 2014 ecom & ux - PJ Utsi

636 views
463 views

Published on

PJ Utsi talks about e-commerce design

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
636
On SlideShare
0
From Embeds
0
Number of Embeds
75
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Vaimo sa ecom seminar feb 27 2014 ecom & ux - PJ Utsi

  1. 1. E-COMMERCE & USER EXPERIENCE Vaimo E-commerce Seminar February 27, 2014 Sage Technology Park, Pretoria
  2. 2. PJ UTSI CO-FOUNDER & CHIEF CREATIVE OFFICER Stockholm, Sweden Science + Development + Design + Innovation Business + Sales + Product + Digital + Web
 = Ecommerce!
  3. 3. AGENDA • What is user experience? • • How to start • How to continue • • How to think Demo
 What’s new & happening? • Mobile • Multi-channel • Demo
  4. 4. 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!
  5. 5. 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
  6. 6. 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?
  7. 7. CUSTOMER & SCENARIOS
  8. 8. THE BRAND LOYAL CONSUMER
  9. 9. THE CONVENIENCE CONSUMER
  10. 10. 
 PERSONAS 24-hour fashion lover Time-pressed optimizer
  11. 11. 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?
  12. 12. WHO IS IT REALLY?
  13. 13. WHAT IS ACTUALLY HAPPENING?
  14. 14. DEVICES, TRAFFIC & SALES?
  15. 15. DEVICES, TRAFFIC?
  16. 16. DEVICES, SALES?
  17. 17. 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
  18. 18. WHAT’S NEW & HAPPENING? Mobile Multi-channel
  19. 19. 
 MOBILE • What is it? • Is it important? • What’s the problem? • What must we do?
  20. 20. MOBILE: WHAT IS IT? • Are you mobile? • Are you desktop? • What’s the difference?
  21. 21. MOBILE: WHAT IS IT? • Smaller screen • • Sometimes a lot, sometimes a little
 Touch • No keyboard • No cursor
  22. 22. MOBILE: IS IT IMPORTANT? • The PC is dead • We only buy mobile devices
  23. 23. MOBILE: IT DOMINATES ALL…
  24. 24. MOBILE: …EXCEPT THE WEB
  25. 25. WHY? FROM NATIVE TO WEB
  26. 26. WHY? MEAT IN THE WAY
  27. 27. WHY? IT’S NOT THE SAME
  28. 28. WHY? IT’S SLOW
  29. 29. THE WEB ON MOBILE, 
 NOT EXACTLY A PARTY… …AND IT’S THOSE ☁#★!& NATIVES FAULT!
  30. 30. 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 •
  31. 31. 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
  32. 32. MOBILE: WHAT MUST WE DO? • Look & act like an app
 • Shed weight
 • Make everything available
 • Adapt content & layout to screen size
  33. 33. MOBILE: RESPONSIVE WEB DESIGN
  34. 34. MOBILE: RESPONSIVE WEB DESIGN
  35. 35. 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
  36. 36. 
 MULTI-CHANNEL • What is it? • Is it important? • What’s the problem? • What must we do?
  37. 37. 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
  38. 38. THANK YOU! www.vaimo.co.za ! www.facebook.com/VaimoGlobal 
 www.twitter.com/vaimoglobal !

×