Successful e-shops & User Experience Design

How do you design experiences for e-commerce? And how do you do it in WordPress? What does it take to design a successful e-shop? My presentation aims to answer all these questions and not only: it might help amateur Project Managers to avoid the mistakes I did throughout the project. Last but not least come a few ideas on how to create teams that win.

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
    Liolios Eyewear
    

    View Slide

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

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

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

33. A real case
    

    View Slide

34. A real case
    

    View Slide

35. A real case
    

    View Slide

36. A real case
    

    View Slide

37. A real case
    

    View Slide

38. A real case
    

    View Slide

39. Small wins
    Bounce Rate

    Desktop: 38% (-23%)

    Mobile: 41% (-28%)
    

    View Slide

40. Other stats

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

    View Slide

41. Brand awareness
    Small wins
    

    View Slide

42. The aftermath
    WordPress+WooCommerce=?
    

    View Slide

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

    View Slide

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

    View Slide

45. WIRED: Designer
    TIRED: Project Manager
    

    View Slide

46. “If I could turn back time”
    

    View Slide

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

    Create a unique WP theme
    

    View Slide

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

    Use plugins only when you
    need them
    

    View Slide

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

    Test thoroughly
    

    View Slide

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

    View Slide

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

    Trust your hunches
    

    View Slide

52. Good products are made by
    good teams
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

58. How to win
    

    View Slide

59. How to win
    Become your client
    

    View Slide

60. How to win
    Lead by example
    

    View Slide

61. How to win
    The time is now
    

    View Slide

62. Continuous Improvement 

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

    View Slide

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

    View Slide