Rise of the Machines
For a large part of my career in UI/UX design I have worked for software-centric companies and much of that work has been on complex applications that offer solutions in the B2B space. My time at Glasswall is also part of that experience.
As a designer who is interested in the full lifecycle of products (and actually sometimes as the sole designer in a company), I’ve often found myself working on the promotion of the end-product and frequently pondered the difficulties of visual marketing for an offering that is, in its essence, pretty intangible.
Ok, so you can often show some screenshots on a pretty mockup of a laptop in a trendy coffee shop, but what if in the real world those screens need to be highly functional and don’t remotely work in an “I’ve got to have one of those” sense?
And how does that work if the product you’re selling is an API?
Recently, being involved in the launch of Glasswall’s new online store, these questions have once again come to the surface — how do we represent each of the products in an interesting and relevant manner? Some may have UIs, others not.
Mockups
One tried and tested approach is to use a graphical mockup of a cardboard box, with a logo on the outside to represent the product. I considered this but rejected it on the grounds that a) software is very rarely shipped this way these days (remember CDs, kids?), and b) the product pages would end up with a load of similar images in a grid pattern with very little interesting about them.
I was after a solution that would clearly define the products as a part of a suite, but equally give them their own “character”, whilst saying something about the functionality. Maybe an icon of some kind…
For the initial rollout of the store I utilised some screen grabs from a Glasswall marketing video, and whilst these were a little random they did the job and provided a colourful image to represent the product. But I needed something better.
The Solution
Gradually I hit upon a solution by asking myself “if these were physical products, what would they look like?”. We could represent each product as a fictional machine and display them in an illustrative style. We’d need a style that doesn’t lead a potential customer to believe they are buying an actual physical machine (!), but could create a design “language” that each product could be represented with, as a metaphor for the software.
To do this I decided to experiment with a style that mimics that of instruction/repair manuals, creating an isometric grid in Adobe Illustrator and building up each illustration with various parts to represent the functionality. These were created as line art originally and then fleshed out with colour and shadows.
The results can now be seen live on the Glasswall store.
My hope is that these images will provide visual character to somewhat intangible products and a way of demonstrating their functionality (albeit with a decent helping of artistic license).
Where to go from here? Well there’s always animation…
