Beautiful drupal-ecommerce


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 (, 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
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Beautiful drupal-ecommerce

  1. 1. Graeme BlackwoodCreative Lead, Deeson Online
  2. 2. Using Drupal to deliver beautiful ecommerce Graeme Blackwood on
  3. 3. Chapter 1How it all began... Graeme Blackwood on
  4. 4. We had to monetise the contentand make it easily searchable Graeme Blackwood on
  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 – Graeme Blackwood on
  6. 6. 83% Average return on investment for improving user experience Nielsen, Graeme Blackwood on
  7. 7. Business value of usability anddelightful interfaces?Increased sales and loyalty! Graeme Blackwood on
  8. 8. Chapter 2The designer’s urge Graeme Blackwood on
  9. 9. Graeme Blackwood on
  10. 10. Graeme Blackwood on
  11. 11. We askedWhat is the content structureand who are our users? Graeme Blackwood on
  12. 12. Graeme Blackwood on
  13. 13. Chapter 3Don’t make me think! Graeme Blackwood on
  14. 14. We wrote user stories basedon our user personas Graeme Blackwood on
  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 Graeme Blackwood on
  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 Graeme Blackwood on
  18. 18. Our guiding principle wasDon’t make me think!Steve Krug, – Good stuff!
  19. 19. Chapter 4Labelling and language Graeme Blackwood on
  20. 20. Careful labelling helped toreduce ambiguity Graeme Blackwood on
  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 Graeme Blackwood on
  25. 25. That is, natural language for our audience,not developers (or robots)! Graeme Blackwood on
  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 Graeme Blackwood on
  28. 28. Customising browser andDrupal defaults helpedharmonise the interfaceTabs, buttons, forms, pagers, messages etc, especially from contributed modules Graeme Blackwood on
  29. 29. Graeme Blackwood on
  30. 30. Graeme Blackwood on
  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 Graeme Blackwood on
  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 Graeme Blackwood on
  33. 33. We used square crops tostandardise the variety ofaspect ratiosThere were far too many images to crop manually Graeme Blackwood on
  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 Graeme Blackwood on
  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 Graeme Blackwood on
  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. Graeme Blackwood on
  40. 40. We made it really easy tochange currency from thedefault £: Graeme Blackwood on
  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 Graeme Blackwood on
  47. 47. Thank you! Any questions? Luke Simmons will be happy to answer anything technical, and there’s also Graeme Blackwood on