27 October 2016

To style before testing?

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 be acting on the offer 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.

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.

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 "I don't get it, no-one's going to use that". Show them a slick little search box in a classy muted palette with an adorable logo and they are on board for life!

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

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

(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". 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.)

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.

style-guide

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 books: Off-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.S. It's now the law that all logos contain cute animals. It's the tech industry's equivalent to the rules for dressing up for Halloween as described in Mean Girls.

Follow me on Twitter for updates on this project and other musings on the web industry. I'm @MartinJoiner.