Successful e-shops & User Experience Design

Slide 1

Slide 1 text

Successful e-shops & User Experience Design Yiannis Konstantakopoulos, porcupine.gr & porcupinecolors.com WORDCAMP THESSALONIKI 2018

Slide 2

Slide 2 text

“I have a dream…”

Slide 3

Slide 3 text

“I have a dream…” Business, Agencies & Startups   will care more about their users

Slide 4

Slide 4 text

“I have a dream…” Business, Agencies & Startups   will care more about the user experience of their users

Slide 5

Slide 5 text

“I have a dream…” Business, Agencies & Startups   will care more about the user experience of their users, so they will design better ones

Slide 6

Slide 6 text

Design != Art

Slide 7

Slide 7 text

What is User Experience Design? “Everything has a user experience. Our job is not to create the user experience. It is our job to make it good.” The Hipper Element http://thehipperelement.com/post/71886924188/daily-ux-crash-course-1-of-31

Slide 8

Slide 8 text

“A UX designer’s work should always be derived from people’s problems and aim at ﬁnding a pleasurable, seductive, inspiring solution. The results of that work should always be measurable through metrics describing user behaviour.” UX Design for Startups https://www.uxpin.com/studio/ebooks/ux-design-for-startups/ A scientiﬁc method (no, really)

Slide 9

Slide 9 text

UX vs. UI

Slide 10

Slide 10 text

UX vs. UI

Slide 11

Slide 11 text

UX vs. UI

Slide 12

Slide 12 text

The user is a _____   who wants to ____ Start with:

Slide 13

Slide 13 text

Design 4 versions of a TV remote control in 4’

Slide 14

Slide 14 text

UX Design Step by Step 1. Find your users 2. Pen & Paper (Wireframes) 3. Design Mockups 4. Create Prototypes (Launch) 5. Measure & Improve

Slide 15

Slide 15 text

Find your users • Learn how to think like your users do • Find and talk to them • Create personas

Slide 16

Slide 16 text

Find your users

Slide 17

Slide 17 text

Pen & Paper (Wireframes) • Sketch. Test ideas. Be quick. Trust low ﬁdelity. • Design User Flows/Storyboards • Prepare your Sitemap

Slide 18

Slide 18 text

Sketches

Slide 19

Slide 19 text

Wireframes

Slide 20

Slide 20 text

User Flows

Slide 21

Slide 21 text

Sitemaps

Slide 22

Slide 22 text

Design Mockups • UI Design • Attempt to make people trust you

Slide 23

Slide 23 text

UI Design

Slide 24

Slide 24 text

Create Prototypes • HTML, CSS, and JS & Back-End

Slide 25

Slide 25 text

Measure & Improve • Measure   (Analytics, Heatmaps, A/B Tests, Web Personalization e.t.c.) • Improve • Repeat

Slide 26

Slide 26 text

Heatmaps

Slide 27

Slide 27 text

A/B Testing

Slide 28

Slide 28 text

Recordings

Slide 29

Slide 29 text

A real case Made by Joinweb & porcupine colors Liolios Eyewear

Slide 30

Slide 30 text

A real case Market behaviour Look for sunglasses >   Go to skroutz.gr and ﬁnd the cheapest price >   Return to the e-shop and make a phone-call Don’t buy eye glasses A *very* seasonal market (better when the sun shines)

Slide 31

Slide 31 text

A real case Users Sex  Female: 60%  Male: 40% Ages  25-34: 42%  35-44: 25%  18-24: 17% Devices  Mobile: 52%  Desktop: 36%  Tablet: 12% Interests  - Sunglasses  - Value for Money  - Fashion  - Sports

Slide 32

Slide 32 text

Previous website issues User ﬂow Home > Sunglasses > Home 100 > 45 > 25 Women - Men Bounce Rate  Desktop: 49%  Mobile: 57% Other stats  Pages / Session: 3.30 Session Duration: 02:03

Slide 33

Slide 33 text

A real case

Slide 34

Slide 34 text

A real case

Slide 35

Slide 35 text

A real case

Slide 36

Slide 36 text

A real case

Slide 37

Slide 37 text

A real case

Slide 38

Slide 38 text

A real case

Slide 39

Slide 39 text

Small wins Bounce Rate  Desktop: 38% (-23%)  Mobile: 41% (-28%)

Slide 40

Slide 40 text

Other stats  Pages / Session: 6.79 (+106%) Session Duration: 03:22 (+64%) Small wins

Slide 41

Slide 41 text

Brand awareness Small wins

Slide 42

Slide 42 text

The aftermath WordPress+WooCommerce=?

Slide 43

Slide 43 text

The aftermath WordPress + WooCommerce Freaking free! Big user base = Known issues Familiar for Clients & Developers

Slide 44

Slide 44 text

The aftermath WordPress + WooCommerce Multilingual Filters People think it is simple/easy/free/whatever

Slide 45

Slide 45 text

WIRED: Designer TIRED: Project Manager

Slide 46

Slide 46 text

“If I could turn back time”

Slide 47

Slide 47 text

“If I could turn back time” 01.  Create a unique WP theme

Slide 48

Slide 48 text

“If I could turn back time” 02.  Use plugins only when you need them

Slide 49

Slide 49 text

“If I could turn back time” 03.  Test thoroughly

Slide 50

Slide 50 text

“If I could turn back time” 04. Kaizen Continuous Improvement

Slide 51

Slide 51 text

“If I could turn back time” 05.  Trust your hunches

Slide 52

Slide 52 text

Good products are made by good teams

Slide 53

Slide 53 text

Fundamentals of Team https://medium.com/david-hieatt/fundamentals-of-team-61061926f1a3

Slide 54

Slide 54 text

Fundamentals of Team https://medium.com/david-hieatt/fundamentals-of-team-61061926f1a3 01.  Radical honesty 02.  Kill The Ego 04.  A Safe Place 03.  Clear Purpose

Slide 55

Slide 55 text

Fundamentals of Team https://medium.com/david-hieatt/fundamentals-of-team-61061926f1a3 08.  Change a little. Change a lot. 06.  Follow Through 05.  Never Settle 07.  O Captain. My Captain

Slide 56

Slide 56 text

Fundamentals of Team https://medium.com/david-hieatt/fundamentals-of-team-61061926f1a3 09.  If You Fail, I Fail 11.  We Have Enough Of Your Time 12.  Fun 10.  Walk + Talk

Slide 57

Slide 57 text

Fundamentals of Team Dare to create real teams and skip workaholism* * How To Deal With Workaholism On Web Teams https://www.smashingmagazine.com/2014/01/dealing-with- workaholism-on-web-teams/

Slide 58

Slide 58 text

How to win

Slide 59

Slide 59 text

How to win Become your client

Slide 60

Slide 60 text

How to win Lead by example

Slide 61

Slide 61 text

How to win The time is now

Slide 62

Slide 62 text

Continuous Improvement   Slow and steady wins the race Μηδέν Άγαν How to win

Slide 63

Slide 63 text

Thank you! Yiannis Konstantakopoulos, porcupine.gr & porcupinecolors.com WORDCAMP THESSALONIKI 2018