Δημιουργώντας επιτυχημένα e-shops μέσω του User Experience Design - Yiannis Konstantakopoulos

WordCamp Thessaloniki 2018

Στην ομιλία του θα μας αναλύσει τις βασικές αρχές του User Experience Design και πώς η εφαρμογή τους μας οδηγεί σε πιο επιτυχημένα ηλεκτρονικά καταστήματα. Όχι γενικά όμως. Γίνεται αναφορά σε συγκεκριμένο project το οποίο βελτίωσε σημαντικά όλους τους βασικούς του δείκτες και φυσικά τα κέρδη του. Καθώς η ανάπτυξη του έργου έγινε σε WordPress, θα αναφερθούν από την οπτική γωνία του design, τα πλεονεκτήματα και τα μειονεκτήματα της πλατφόρμας, αλλά και τα σωστά και τα λάθη της ομάδας που ανέλαβε το project.
Τέλος, κι επειδή πρόκειται για μεγάλο project, θα γίνει αναφορά στις αρχές που πρέπει να διέπουν τις αληθινές ομάδες που δουλεύουν για το Διαδίκτυο.

In his speech he will analyze the basic principles of User Experience Design and how their application leads us to more successful online stores. Not in general though. He will refer to a specific project that significantly improved all of its key indicators and, of course, its profits. As the development of the project was in WordPress, we will examine from the perspective of design, the advantages and disadvantages of the platform, but also the correct actions and mistakes of the team that took over the project.
Finally, and because it is a big project, there will be a reference to the principles that should govern the real groups working on the Internet.

Transcript

1. Successful e-shops & User Experience Design Yiannis Konstantakopoulos, porcupine.gr & porcupinecolors.com WORDCAMP THESSALONIKI 2018
2. “I have a dream…”
3. “I have a dream…” Business, Agencies & Startups 
 will care more about their users
4. “I have a dream…” Business, Agencies & Startups 
 will care more about the user experience of their users
5. “I have a dream…” Business, Agencies & Startups 
 will care more about the user experience of their users, so they will design better ones
6. Design != Art
7. 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
8. “A UX designer’s work should always be derived from people’s problems and aim at finding 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 scientific method (no, really)
9. UX vs. UI
10. UX vs. UI
11. UX vs. UI
12. The user is a _____ 
 who wants to ____ Start with:
13. Design 4 versions of a TV remote control in 4’
14. UX Design Step by Step 1. Find your users 2. Pen & Paper (Wireframes) 3. Design Mockups 4. Create Prototypes (Launch) 5. Measure & Improve
15. Find your users • Learn how to think like your users do • Find and talk to them • Create personas
16. Find your users
17. Pen & Paper (Wireframes) • Sketch. Test ideas. Be quick. Trust low fidelity. • Design User Flows/Storyboards • Prepare your Sitemap
18. Sketches
19. Wireframes
20. User Flows
21. Sitemaps
22. Design Mockups • UI Design • Attempt to make people trust you
23. UI Design
24. Create Prototypes • HTML, CSS, and JS & Back-End
25. Measure & Improve • Measure 
 (Analytics, Heatmaps, A/B Tests, Web Personalization e.t.c.) • Improve • Repeat
26. Heatmaps
27. A/B Testing
28. Recordings
29. A real case Made by Joinweb & porcupine colors
30. A real case
31. A real case Market behaviour Look for sunglasses > 
 Go to skroutz.gr and find 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)
32. 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
33. A real case Previous website issues User flow Home > Sunglasses > Home 100 > 45 > 25 Women - Men Bounce Rate
 Desktop: 49%
 Mobile: 57% Other stats
 Pages / Session: 3.30 Session Duration: 02:03
34. A real case New website stats Bounce Rate
 Desktop: 38% (-23%)
 Mobile: 41% (-28%) Other stats
 Pages / Session: 6.79 (+106%) Session Duration: 03:22 (+64%)
35. The aftermath WordPress+WooCommerce=?
36. The aftermath WordPress + WooCommerce Freaking free! Big user base = Known issues Clients know how to use it
37. The aftermath WordPress + WooCommerce Multilingual Filters People think it is easy
38. “If I could turn back time”
39. “If I could turn back time” 01.
 Create a unique WP theme
40. “If I could turn back time” 02.
 Use plugins only when you need them
41. “If I could turn back time” 03.
 Test thoroughly
42. “If I could turn back time” 04. Kaizen Continuous Improvement
43. “If I could turn back time” 05.
 Trust your hunches
44. Good products are made by good teams
45. Fundamentals of Team https://medium.com/david-hieatt/fundamentals-of-team-61061926f1a3
46. Fundamentals of Team https://medium.com/david-hieatt/fundamentals-of-team-61061926f1a3 01.
 Radical honesty 02.
 Kill The Ego 03.
 Clear Purpose 05.
 Never Settle 06.
 Follow Through 04.
 A Safe Place
47. Fundamentals of Team https://medium.com/david-hieatt/fundamentals-of-team-61061926f1a3 07.
 O Captain. My Captain 08.
 Change a little. Change a lot. 09.
 If You Fail, I Fail 11.
 We Have Enough Of Your Time 12.
 Fun 10.
 Walk + Talk
48. 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/
49. Thank you! WORDCAMP THESSALONIKI 2018 Yiannis Konstantakopoulos, porcupine.gr & porcupinecolors.com