This document provides an overview of best practices for eCommerce design. It discusses designing for the user experience, why good design is important, and recommended design processes. It also covers key design elements like search, checkout, and forms. The document recommends optimizing the design after launch using analytics and user feedback. It suggests tools like Google Analytics, Feng GUI, Loop11, and Clicktale that can help with testing and optimization.

1. t practic e eComme rce design
Bes
By
George Ioannou
Hea d of Creative & Strategy

2. About me
 Ov er 13 years eCommerce industry experience
 Worked for w
ell know n solution providers
 Clients: Small to large retailers
 Experience in
m any industry verticals

3. What we are going to cover
• What a re we designing for?
• Why is good design so important?
• Recommen ded design process
• A look at variou s key design elements
• Design o ptimisation after go-live
• Tools that can help you

4. What are we designing for?

5. And don’t forget...

6. And...

7. Why is good design
so impor tant ?

8. Here are some reasons…
!
• It repres ents your brand, make your mark
ce a nd it s often a first impression a
• Design can reflect trust, confiden
user gets.
et ty, poor design is often one of
• The design isn t just making things apr low conversion
the big gest reasons in bounce rates nd
tion ality but without good design
• Y ou can have so many features/func
they may not be used sitive
a ke the user journey an easy and po
• Well thought out design cans m
experience to your customer
s can be familiar with your site, even
• Best practice means your usersit, increasing conversion and AOV
though it may be their first vi

9. Could it be any worse?

10. comm ended design
Re
p rocess

11. Personas

12. Wireframes

13. The creative process

14. look at vario us key
A
desi gn ele ments

15. Search examples

16. Basket examples

17. Form examples

18. Mini Basket examples

19. Progress tracker examples

20. Desig n optim isation
after go-live

21. Some optimisation pointers
• Look at your analytics and react
• Ask your users for their opin ions through polls,
feedb ack, usability labs
• Conduc t multivariate testing

22. Multivariate testing

23. s that can he lp you
Tool

24. Google
• Google Tools
• http://www.google.com/
 Analytucs & Reporting
 A/B & MVT testing
 Translation

25. Some online tools...
 Feng-GUI
 www.feng-gui.com
 Optimise layouts
 Identify weak spots & improve
performance
 Location of brand and branding
effectiveness

26. Some online tools...
 Loop11
 www.loop11.com
 Create professional usability tests
in minutes
 Conduct remote user testing
 See the results of your user test
online – instantly.

27. Some online tools...
 Clicktale
 www.clicktale.com
 Visitor recordings
 Mouse movement heatmaps
 Attention heatmaps
 Click heatmaps

28. Fivesecondtest
• Five Second Test
• http://fivesecondtest.com/
 UI feedback
 Fine tune design
 Extracts the frequent keywords places in
to graph

29. Thanks for listening!
Email : george@maginus.com
Twitter: @georgeioannou
L inked In: www.linkedin.c om/in/georgeioannou
Maginus : www.maginus.com