PJ Utsi talks about e-commerce design

1. E-COMMERCE &
USER EXPERIENCE
Vaimo E-commerce Seminar
February 27, 2014
Sage Technology Park, Pretoria

2. PJ UTSI
CO-FOUNDER & CHIEF CREATIVE OFFICER
Stockholm, Sweden
Science + Development + Design + Innovation
Business + Sales + Product + Digital + Web
= Ecommerce!

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. 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. 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. 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. CUSTOMER & SCENARIOS

8. THE BRAND LOYAL CONSUMER

9. THE CONVENIENCE CONSUMER

10.
PERSONAS
24-hour fashion lover
Time-pressed optimizer

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. WHO IS IT REALLY?

13. WHAT IS ACTUALLY HAPPENING?

14. DEVICES, TRAFFIC & SALES?

15. DEVICES, TRAFFIC?

16. DEVICES, SALES?

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. WHAT’S NEW & HAPPENING?
Mobile
Multi-channel

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

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

22. MOBILE:
WHAT IS IT?
•
Smaller screen
•
•
Sometimes a lot, sometimes a little
Touch
•
No keyboard
•
No cursor

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

24. MOBILE:
IT DOMINATES ALL…

25. MOBILE:
…EXCEPT THE WEB

26. WHY?
FROM NATIVE TO WEB

27. WHY?
MEAT IN THE WAY

28. WHY?
IT’S NOT THE SAME

29. WHY?
IT’S SLOW

30. THE WEB ON MOBILE,
NOT EXACTLY A PARTY…
…AND IT’S THOSE
☁#★!& NATIVES FAULT!

31. 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
•

32. 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

33. MOBILE:
WHAT MUST WE DO?
•
Look & act like an app
•
Shed weight
•
Make everything available
•
Adapt content & layout to screen size

34. MOBILE:
RESPONSIVE WEB DESIGN

35. MOBILE:
RESPONSIVE WEB DESIGN

36. 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

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

38. 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

39. THANK YOU!
www.vaimo.co.za
!
www.facebook.com/VaimoGlobal
www.twitter.com/vaimoglobal
!