Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Δημιουργώντας επιτυχημένα 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.

WordPress Greek Community

December 15, 2018

More Decks by WordPress Greek Community

Other Decks in Technology


  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 

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

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

    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%

 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