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.

1. Graeme Blackwood
Creative Lead, Deeson Online
http://deeson.co.uk/online

2. Using Drupal to deliver
beautiful ecommerce sites
www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com

4. Chapter 1
How it all began...
www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com

6. We had to monetise the content
and make it easily searchable
www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com

7. The website had to be beautiful
By 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

8. 83%
Average return on
investment for improving
user experience
Nielsen, http://www.useit.com/alertbox/roi.html
www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com

9. Business value of usability and
delightful interfaces?
Increased sales and loyalty!
www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com

10. Chapter 2
The designer’s urge
www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com

11. http://theoatmeal.com/comics/design_changes
www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com

12. http://theoatmeal.com/comics/design_changes
www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com

13. We asked
What is the content structure
and who are our users?
www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com

17. www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com

18. Chapter 3
Don’t make me think!
www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com

19. We wrote user stories based
on our user personas
http://www.disambiguity.com/persona-driven-user-stories-for-agile-ux/
www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com

20. Then started testing early by
prototyping in Drupal
We used real prototypes instead of wireframes or static HTML for testing areas of
the interface that required interaction
www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com

21. At this stage, we just turned on modules
like Apache Solr and Flag unthemed
to begin user testing them

22. Ongoing user testing
continuously informed the
design process
Developing and testing the prototype while designing
the interface meant no designing in the dark
www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com

24. Our guiding principle was
Don’t make me think!
Steve Krug, http://www.sensible.com – Good stuff!

25. Chapter 4
Labelling and language
www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com

26. Careful labelling helped to
reduce ambiguity
www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com

27. Not this sort of
labelling

28. Adjectives add clarity

29. What am I searching?

30. We tried to use
natural language
Concise, but with conjunctions like and, for etc
www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com

32. That is, natural language for our audience,
not developers (or robots)!
www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com

33. This could be “Shawl returned 28 patterns and 1 how-tos”
But who actually speaks like that?

34. Chapter 5
Dealing with defaults
www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com

35. Customising browser and
Drupal defaults helped
harmonise the interface
Tabs, buttons, forms, pagers, messages etc, especially from contributed modules
www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com

36. www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com

37. www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com

38. We used value and colour to
assign 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

39. 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

40. We used square crops to
standardise the variety of
aspect ratios
There were far too many images to crop manually
www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com

41. What happens to different images when sized to a fixed width
Landscape images
become very small
Resize and square crop
standardises both
Portrait images push the
content below the fold

42. Chapter 6
Completing the
user experience
www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com

43. We used some novel interfaces
that didn’t have well
established mental models
They weren’t as well understood as search, vertical scroll and buttons etc
www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com

44. Faceted search is becoming more
popular, but people aren’t as used to it
as other search methods

45. So we made an effort to keep
things clear and uncluttered

46. www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com

47. We made it really easy to
change currency from the
default £:
www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com

49. Voila!

50. We built personal wishlists for
registered users to add any pattern to

52. Users can choose whether they want to display
their downloaded patterns publicly...

53. On their profiles...

54. ...and on the project page

55. 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

56. Thank you!
Any questions?
Luke Simmons will be happy to answer anything technical,
and there’s also http://drupal.org/node/1352442
www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com