Beautiful drupal-ecommerce

1,738 views
1,650 views

Published on

Design and user experience can make or break an e-commerce site–to turn site visitors into shoppers and repeat customers, they need to feel at home on your site.

When leading the design effort for The Making Spot, a community craft e-commerce portal, Graeme Blackwood, Creative Lead at Deeson Group, came up against a number of Drupal-specific and more general design and UX problems that needed working through. This webinar presents several of those issues and how they were solved as well as areas where Drupal gave the team real advantages during the design and implementation process. Topics that will be covered include:

- User testing and rapid prototyping

- Customizing Drupal's default output–tabs, forms, messages, etc.

- How to pick a tone and words to make your site appealing

- Solving technical design-issues like importing and resizing 40,000 product images, designing for Apache Solr Drupal integration, and making user wish lists and personal profiles

- Giving good feedback though design

Graeme Blackwood is Creative Lead at Deeson Online (www.deeson.co.uk/online), a digital agency specialising in Drupal, with clients including Jimmy Page, BBC Worldwide, The Royal Society and Future Publishing. Graeme was also Creative Director for DrupalCon London, and is involved in the design and mobile UX initiatives for Drupal 8.

Published in: Design, Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,738
On SlideShare
0
From Embeds
0
Number of Embeds
419
Actions
Shares
0
Downloads
16
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Beautiful drupal-ecommerce

  1. 1. Graeme BlackwoodCreative Lead, Deeson Onlinehttp://deeson.co.uk/online
  2. 2. Using Drupal to deliver beautiful ecommerce siteswww.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com
  3. 3. Chapter 1How it all began... www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com
  4. 4. We had to monetise the contentand make it easily searchable www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com
  5. 5. The website had to be beautifulBy this I mean going beyond the basic stuff we take for granted to deliver unexpected,delightful user experiences – http://baymard.com/blog/kano-model www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com
  6. 6. 83% Average return on investment for improving user experience Nielsen, http://www.useit.com/alertbox/roi.htmlwww.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com
  7. 7. Business value of usability anddelightful interfaces?Increased sales and loyalty! www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com
  8. 8. Chapter 2The designer’s urge www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com
  9. 9. http://theoatmeal.com/comics/design_changeswww.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com
  10. 10. http://theoatmeal.com/comics/design_changeswww.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com
  11. 11. We askedWhat is the content structureand who are our users? www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com
  12. 12. www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com
  13. 13. Chapter 3Don’t make me think! www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com
  14. 14. We wrote user stories basedon our user personashttp://www.disambiguity.com/persona-driven-user-stories-for-agile-ux/ www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com
  15. 15. Then started testing early byprototyping in DrupalWe used real prototypes instead of wireframes or static HTML for testing areas ofthe interface that required interaction www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com
  16. 16. At this stage, we just turned on modules like Apache Solr and Flag unthemed to begin user testing them
  17. 17. Ongoing user testingcontinuously informed thedesign processDeveloping and testing the prototype while designingthe interface meant no designing in the dark www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com
  18. 18. Our guiding principle wasDon’t make me think!Steve Krug, http://www.sensible.com – Good stuff!
  19. 19. Chapter 4Labelling and language www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com
  20. 20. Careful labelling helped toreduce ambiguity www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com
  21. 21. Not this sort oflabelling
  22. 22. Adjectives add clarity
  23. 23. What am I searching?
  24. 24. We tried to usenatural languageConcise, but with conjunctions like and, for etc www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com
  25. 25. That is, natural language for our audience,not developers (or robots)! www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com
  26. 26. This could be “Shawl returned 28 patterns and 1 how-tos” But who actually speaks like that?
  27. 27. Chapter 5Dealing with defaults www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com
  28. 28. Customising browser andDrupal defaults helpedharmonise the interfaceTabs, buttons, forms, pagers, messages etc, especially from contributed modules www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com
  29. 29. www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com
  30. 30. www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com
  31. 31. We used value and colour toassign meaning Read more Search Add to basket Active Lower value General functions Purchase functions Active states functions www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com
  32. 32. and tried to give good feedback Add to basket Add to basket + Add to basket In your basket Default Hover/focus AJAX pending AJAX success www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com
  33. 33. We used square crops tostandardise the variety ofaspect ratiosThere were far too many images to crop manually www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com
  34. 34. What happens to different images when sized to a fixed width Landscape images become very small Resize and square crop standardises bothPortrait images push the content below the fold
  35. 35. Chapter 6Completing theuser experience www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com
  36. 36. We used some novel interfacesthat didn’t have wellestablished mental modelsThey weren’t as well understood as search, vertical scroll and buttons etc www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com
  37. 37. Faceted search is becoming morepopular, but people aren’t as used to it as other search methods
  38. 38. So we made an effort to keepthings clear and uncluttered
  39. 39. www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com
  40. 40. We made it really easy tochange currency from thedefault £: www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com
  41. 41. Voila!
  42. 42. We built personal wishlists forregistered users to add any pattern to
  43. 43. Users can choose whether they want to display their downloaded patterns publicly...
  44. 44. On their profiles...
  45. 45. ...and on the project page
  46. 46. Summary• We worked at really understanding our content and audience• Basic prototypes were refined through regular testing• Good labelling improved understanding, and using the language of our audience made it feel like home• Drupal and browser defaults were styled to harmonise the interface• We focussed on getting the basics right, with extra touches to delight• Novel interfaces were tested and refined to ensure they were natural www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com
  47. 47. Thank you! Any questions? Luke Simmons will be happy to answer anything technical, and there’s also http://drupal.org/node/1352442www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com

×