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