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.
2. Using Drupal to deliver
beautiful ecommerce sites
www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com
3.
4. Chapter 1
How it all began...
www.deeson.co.uk/online Graeme Blackwood on www.themakingspot.com
5.
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
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
23.
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
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
31.
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
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
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
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