{"id":1185,"date":"2016-10-27T13:15:35","date_gmt":"2016-10-27T12:15:35","guid":{"rendered":"http:\/\/martinjoiner.co.uk\/blog\/?p=1185"},"modified":"2017-01-31T11:26:38","modified_gmt":"2017-01-31T11:26:38","slug":"to-style-before-testing","status":"publish","type":"post","link":"https:\/\/martinjoiner.co.uk\/blog\/2016\/10\/27\/to-style-before-testing\/","title":{"rendered":"To style before testing?"},"content":{"rendered":"

I've built an early working version of both the scanner end of the BookFetch project and the public-facing website part, but at this stage the visual styling is just Drupal's default out-the-box theme. But that doesn't matter right? Just get it out there, MVP man, stop wasting time yeah?! No.<\/p>\n

Because the next stage will be acting on the\u00a0offer to test the scanner in a real shop, it would be courteous to introduce the staff to the end product (the site) in the process. That means this will not just be a test of the physical tech, but a user's first introduction to the interface. Guerrilla usability testing.<\/p>\n

Now although I could quite feasibly demo the site dressed in the default Drupal style it would be a waste of an opportunity to make a great first impression.<\/p>\n

One has limited opportunities to show someone an idea before their attention is spent and their opinion irreversibly set. Walk in with a confusing ugly prototype and the staff will frown\u00a0\"I don't get it, no-one's going to use that\"<\/em>. Show them a slick little search box in a classy muted palette with an adorable logo and they are on board for life!<\/p>\n

This platform's success will depend on the enthusiasm of early adopters and with every interaction I am walking the thin line between industry innovator<\/em> --\u00a0here to make life easier -- and annoying-bloke-with-a-website-or-some-shit-I-don't-know-I-didn't-really-get it-can-you-leave-now-please-I've-got-customers-to-serve<\/em>.<\/p>\n

So... How \"M\" do we want our MVP (Minimum Viable Product)<\/em>? Does the \"V\" depend on visual\u00a0design? Yes, clearly! We know from studies that attractive things work better<\/a>. I'd be shooting myself in the foot to\u00a0only write the code that makes BookFetch literally perform the processes required, but\u00a0neglect the visual design that will actually make it work<\/em>.<\/p>\n

(Side note: A mistake that I see time and time again is product owners learning about this exciting concept of MVP, obsessing over the M and forgetting the V. They launch a non-functioning product, let it fail and go \"Oh well, it was a bad idea, good job I didn't spend any time on it\"<\/em>. Like throwing a piece of paper out the window and using it's poor aerodynamic performance as justification for not wasting time folding it into the shape of a plane.)<\/p>\n

In summary, we need some semblance of brand identity before taking version 1 out in the wild so I spent a day producing a logo with a bare-bones style guide and a basic CSS theme to boot.<\/p>\n

\"style-guide\"<\/a><\/p>\n

My style guide is just 1 page (BTW, the biggest style guide I've ever worked with was KIA's which was over 170 pages). Just enough to define a style that is clean, usable and memorable but evokes an association with\u00a0books:\u00a0Off-black text in a serif'd typeface on white background, limited selection of mid-tone colours used sparingly and a vectorised croot writtle poochie wroochie holding a paperback for a motif. It's a classic combo.<\/p>\n

P.S. It's now the law that all logos contain\u00a0cute animals. It's the tech industry's equivalent to the rules for dressing up for Halloween as described in Mean Girls<\/a>.<\/p>\n

Follow me on Twitter for updates on this project and other\u00a0musings on the web industry. I'm @MartinJoiner<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

I’ve built an early working version of both the scanner end of the BookFetch project and the public-facing website part, but at this stage the visual styling is just Drupal’s default out-the-box theme. But that doesn’t matter right? Just get it out there, MVP man, stop wasting time yeah?! No. Because the next stage will […]<\/p>\n","protected":false},"author":1,"featured_media":1229,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[75],"tags":[126,101],"class_list":["post-1185","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software","tag-bookfetch","tag-ux"],"_links":{"self":[{"href":"https:\/\/martinjoiner.co.uk\/blog\/wp-json\/wp\/v2\/posts\/1185","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/martinjoiner.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/martinjoiner.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/martinjoiner.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/martinjoiner.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=1185"}],"version-history":[{"count":10,"href":"https:\/\/martinjoiner.co.uk\/blog\/wp-json\/wp\/v2\/posts\/1185\/revisions"}],"predecessor-version":[{"id":1197,"href":"https:\/\/martinjoiner.co.uk\/blog\/wp-json\/wp\/v2\/posts\/1185\/revisions\/1197"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/martinjoiner.co.uk\/blog\/wp-json\/wp\/v2\/media\/1229"}],"wp:attachment":[{"href":"https:\/\/martinjoiner.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=1185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/martinjoiner.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=1185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/martinjoiner.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=1185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}