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

Successful e-shops & User Experience Design

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.

Yiannis Konstantakopoulos

December 17, 2018

More Decks by Yiannis Konstantakopoulos

Other Decks in Design


  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 Liolios

  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)
  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
  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
  33. A real case

  34. A real case

  35. A real case

  36. A real case

  37. A real case

  38. A real case

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

  40. Other stats
 Pages / Session: 6.79 (+106%) Session Duration: 03:22

    (+64%) Small wins
  41. Brand awareness Small wins

  42. The aftermath WordPress+WooCommerce=?

  43. The aftermath WordPress + WooCommerce Freaking free! Big user base

    = Known issues Familiar for Clients & Developers
  44. The aftermath WordPress + WooCommerce Multilingual Filters People think it

    is simple/easy/free/whatever
  45. WIRED: Designer TIRED: Project Manager

  46. “If I could turn back time”

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

    WP theme
  48. “If I could turn back time” 02.
 Use plugins only

    when you need them
  49. “If I could turn back time” 03.
 Test thoroughly

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

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

  52. Good products are made by good teams

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

  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
  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
  56. Fundamentals of Team https://medium.com/david-hieatt/fundamentals-of-team-61061926f1a3 09.
 If You Fail, I Fail

 We Have Enough Of Your Time 12.
 Fun 10.
 Walk + Talk
  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/
  58. How to win

  59. How to win Become your client

  60. How to win Lead by example

  61. How to win The time is now

  62. Continuous Improvement 
 Slow and steady wins the race Μηδέν

    Άγαν How to win
  63. Thank you! Yiannis Konstantakopoulos, porcupine.gr & porcupinecolors.com WORDCAMP THESSALONIKI 2018