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
Tweet

More Decks by WordPress Greek Community

Other Decks in Technology

Transcript

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

    View Slide

  2. “I have a dream…”

    View Slide

  3. “I have a dream…”
    Business, Agencies & Startups 

    will care more about their users

    View Slide

  4. “I have a dream…”
    Business, Agencies & Startups 

    will care more about the user experience of
    their users

    View Slide

  5. “I have a dream…”
    Business, Agencies & Startups 

    will care more about the user experience of
    their users, so they will design better ones

    View Slide

  6. Design != Art

    View Slide

  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

    View Slide

  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)

    View Slide

  9. UX vs. UI

    View Slide

  10. UX vs. UI

    View Slide

  11. UX vs. UI

    View Slide

  12. The user is a _____ 

    who wants to ____
    Start with:

    View Slide

  13. Design 4 versions of a TV remote control in 4’

    View Slide

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

    View Slide

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

    View Slide

  16. Find your users

    View Slide

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

    View Slide

  18. Sketches

    View Slide

  19. Wireframes

    View Slide

  20. User Flows

    View Slide

  21. Sitemaps

    View Slide

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

    View Slide

  23. UI Design

    View Slide

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

    View Slide

  25. Measure & Improve
    • Measure 

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

    View Slide

  26. Heatmaps

    View Slide

  27. A/B Testing

    View Slide

  28. Recordings

    View Slide

  29. A real case
    Made by
    Joinweb & porcupine colors

    View Slide

  30. A real case

    View Slide

  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)

    View Slide

  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

    View Slide

  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

    View Slide

  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%)

    View Slide

  35. The aftermath
    WordPress+WooCommerce=?

    View Slide

  36. The aftermath
    WordPress + WooCommerce
    Freaking free!
    Big user base = Known issues
    Clients know how to use it

    View Slide

  37. The aftermath
    WordPress + WooCommerce
    Multilingual
    Filters
    People think it is easy

    View Slide

  38. “If I could turn back time”

    View Slide

  39. “If I could turn back time”
    01.

    Create a unique WP theme

    View Slide

  40. “If I could turn back time”
    02.

    Use plugins only when you
    need them

    View Slide

  41. “If I could turn back time”
    03.

    Test thoroughly

    View Slide

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

    View Slide

  43. “If I could turn back time”
    05.

    Trust your hunches

    View Slide

  44. Good products are made by
    good teams

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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/

    View Slide

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

    View Slide