beautiful drupal-ecommerce
TRANSCRIPT
![Page 1: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/1.jpg)
Graeme BlackwoodCreative Lead, Deeson Onlinehttp://deeson.co.uk/online
![Page 2: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/2.jpg)
Using Drupal to deliver beautiful ecommerce sites
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
![Page 3: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/3.jpg)
![Page 4: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/4.jpg)
Chapter 1
How it all began...
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
![Page 5: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/5.jpg)
![Page 6: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/6.jpg)
We had to monetise the content and make it easily searchable
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
![Page 7: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/7.jpg)
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
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
![Page 8: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/8.jpg)
Average return on investment for improving user experienceNielsen, http://www.useit.com/alertbox/roi.html
83%Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
![Page 9: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/9.jpg)
Business value of usability and delightful interfaces?
Increased sales and loyalty!
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
![Page 10: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/10.jpg)
Chapter 2
The designer’s urge
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
![Page 11: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/11.jpg)
http://theoatmeal.com/comics/design_changes
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
![Page 12: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/12.jpg)
http://theoatmeal.com/comics/design_changes
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
![Page 13: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/13.jpg)
What is the content structure and who are our users?
We asked
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
![Page 14: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/14.jpg)
![Page 15: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/15.jpg)
![Page 16: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/16.jpg)
![Page 17: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/17.jpg)
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
![Page 18: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/18.jpg)
Chapter 3
Don’t make me think!
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
![Page 19: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/19.jpg)
We wrote user stories based on our user personashttp://www.disambiguity.com/persona-driven-user-stories-for-agile-ux/
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
![Page 20: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/20.jpg)
Then started testing early by prototyping in DrupalWe used real prototypes instead of wireframes or static HTML for testing areas of the interface that required interaction
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
![Page 21: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/21.jpg)
At this stage, we just turned on modules like Apache Solr and Flag unthemed
to begin user testing them
![Page 22: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/22.jpg)
Ongoing user testing continuously informed the design processDeveloping and testing the prototype while designing the interface meant no designing in the dark
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
![Page 23: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/23.jpg)
![Page 24: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/24.jpg)
Don’t make me think!Steve Krug, http://www.sensible.com – Good stuff!
Our guiding principle was
![Page 25: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/25.jpg)
Chapter 4
Labelling and language
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
![Page 26: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/26.jpg)
Careful labelling helped to reduce ambiguity
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
![Page 27: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/27.jpg)
Not this sort of labelling
![Page 28: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/28.jpg)
Adjectives add clarity
![Page 29: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/29.jpg)
What am I searching?
![Page 30: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/30.jpg)
We tried to use natural languageConcise, but with conjunctions like and, for etc
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
![Page 31: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/31.jpg)
![Page 32: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/32.jpg)
That is, natural language for our audience, not developers (or robots)!
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
![Page 33: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/33.jpg)
This could be “Shawl returned 28 patterns and 1 how-tos”But who actually speaks like that?
![Page 34: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/34.jpg)
Chapter 5
Dealing with defaults
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
![Page 35: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/35.jpg)
Customising browser and Drupal defaults helped harmonise the interfaceTabs, buttons, forms, pagers, messages etc, especially from contributed modules
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
![Page 36: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/36.jpg)
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
![Page 37: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/37.jpg)
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
![Page 38: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/38.jpg)
We used value and colour to assign meaning
Read more Search ActiveAdd to basket
General functions Purchase functions Active statesLower value functions
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
![Page 39: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/39.jpg)
and tried to give good feedback
Add to basket Add to basket + In your basket Add to basket
Hover/focus AJAX pending AJAX successDefault
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
![Page 40: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/40.jpg)
We used square crops to standardise the variety of aspect ratiosThere were far too many images to crop manually
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
![Page 41: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/41.jpg)
Portrait images push the content below the fold
What happens to different images when sized to a fixed width
Landscape images become very small
Resize and square crop standardises both
![Page 42: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/42.jpg)
Chapter 6
Completing the user experience
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
![Page 43: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/43.jpg)
We used some novel interfaces that didn’t have wellestablished mental modelsThey weren’t as well understood as search, vertical scroll and buttons etc
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
![Page 44: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/44.jpg)
Faceted search is becoming more popular, but people aren’t as used to it
as other search methods
![Page 45: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/45.jpg)
So we made an effort to keep things clear and uncluttered
![Page 46: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/46.jpg)
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
![Page 47: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/47.jpg)
We made it really easy to change currency from the default £:
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online
![Page 48: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/48.jpg)
![Page 49: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/49.jpg)
Voila!
![Page 50: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/50.jpg)
We built personal wishlists for registered users to add any pattern to
![Page 51: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/51.jpg)
![Page 52: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/52.jpg)
Users can choose whether they want to display their downloaded patterns publicly...
![Page 53: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/53.jpg)
On their profiles...
![Page 54: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/54.jpg)
...and on the project page
![Page 55: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/55.jpg)
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 www.themakingspot.comwww.deeson.co.uk/online
![Page 56: Beautiful drupal-ecommerce](https://reader031.vdocuments.mx/reader031/viewer/2022022200/58a72fe41a28ab0d0d8b6821/html5/thumbnails/56.jpg)
Thank you!Any questions?Luke Simmons will be happy to answer anything technical, and there’s also http://drupal.org/node/1352442
Graeme Blackwood on www.themakingspot.comwww.deeson.co.uk/online