I’m going to discuss methods of presenting your work through a case study of ‘Nextr‘, a German public transport live guide for iOS created by Marcus Wermuth.
The main purpose of this discussion is twofold; firstly (and primarily) to demonstrate methods of presenting your work via mediums other than the one a product is designed to run. In this instance the product is an iPhone app and yet you can see it working without accessing the actual app. Secondly, this particular product is a good example of how to promote digital work with a consistent footprint across a range of platforms designed to improve the visibility of your work.
We’ll start with the latter because it’s an easy one to discuss and the example used sets the context nicely for the first point.
Below is a list of all the paces I found Nextr on the web. All from a simple Google search:
- Web: http://www.nextr.info/
- Design Fridge: http://www.designfridge.co.uk/inspiration/clean/nextr
- Oberhaeuser.info: http://www.oberhaeuser.info/nextr-iphone-app
- Vimeo: https://vimeo.com/64794635
- Behance: http://www.behance.net/gallery/nextr-app-public-transportation-guidance/7121205
- Facebook: https://www.facebook.com/nextr.info
- Dribble: http://dribbble.com/shots/907743-nextr-app-landing-page
- Twitter: https://twitter.com/nextrinfo
The majority of this presence the creator (or owning company) has created themselves to promote the product. Each of the above presences does a slightly different job and has been listed in the order they appeared from the Google search.
Looking at the order you might be surprised at the bottom four. The big social networks of Facebook and Twitter are very low. So too are Behance and Dribble (similar to Behance). Whilst it is important to engage potential users on social networks as you have access to the largest people database in the world, you can not simply rely on it to market your product for you.
Clearly, the best presence you can have is your own website(s) that promote the product and do little else. This is because with a dedicated website you have the power to provide the websites metadata, content, structure & semantics which are all things the Google search engine and its web crawlers like. This process is known as SEO (Search Engine Optimisation) and this in itself is a subject that has companies setup just for sorting out other companies, brands, products and services ranking in search engine results!
There is a clear message here. Promote your work/product in as many places as appropriate (you decide which platforms to use based on who it’s for and what it is) but don’t just rely on social networking or showcase sites; you need take ownership of promotion with a bespoke website. This website can simply be a single page with a concise description, images, videos (is appropriate) and links to the other places it appears (social networks, showcase sites, etc.).
Obviously, if you didn’t create the dedicated web presence then the showcase and social network pages would be higher but consider for a moment that your product is called something less distinctive than ‘Nextr’. Take my ‘Experiment 2’ for example: It’s called Breeze.
There are going to be a LOT of web hits for this name. In fact, the domain ‘breeze.com’ and ‘breeze.co.uk’ have already been taken (unsurprisingly) and ‘breezeapp.com’ has actually gone too! Thankfully the domain name doesn’t have a detrimental effect on SEO but it would certainly be nice to have something short, relevant and memorable for marketing purposes.
Coming back to my original point, if your product is named after something else then the chances are, if you rely on social network and showcase sites, if searched for on Google, you probably wouldn’t make the first page.
There is a great deal more you can do but all this can be done for free (discounting the hosting for the web site/page) and doing these things will give your product good visibility and is your first step up the ladder!
Now onto the fun stuff. An example of how to present your work.
We’re going to use ‘Nextr’ as an example of how to present your concepts. Head over to Behance and check out the entry for this app.
I’ve broken this down into sections (to match the structure of the Behance portfolio), analyzed it and numbered them accordingly (see below):
Please note that this analysis is purely my opinion and is no way meant to reflect negatively on this portfolio. I actually think this is a wonderfully designed product and wish we had something similar here in the UK as London’s public transport can be a nightmare to navigate for the uninitiated.
I have categorised the sections based on importance, type of information being presented and whether or not this can be produced without producing the actual product:
1) Essential information – what the app is and what is does in 4 words (its tagline) supported by a nice visual. This is perfect. The less words required in your tagline the better. If you can not describe your product in less than sentence then you need to work on being more concise or your idea is probably too complicated for an app (in this instance). ALL PROJECTS REQUIRE THIS.
2) Supporting information – the video places the product in context which can be essential but difficult if you haven’t actually produced it yet. In this instance, the app being put to work is the focus of the narrative. If you haven’t got a product but are handy with tracking in AfterEffects and have enough of your design to animate, then you could try and fake it – but it had better be good!
3) Essential information – presentation of functionality which is especially essential if you weren’t able to demonstrate in context (video above). Also notice how in this presentation he has opted to use the white iPhone 5 to demonstrate a little variety.
4) Supporting information – this is clarifying the essential information above and wouldn’t necessarily be required, especially if time/space was at a premium.
5) Showing off – although the animated search feature is nice, it is not necessary to present the product and if this wasn’t in a design showcase context (such as Behance – which it is), then this would be quite vulgar.
6) Supporting / Unnecessary information – although this information is essential to the product, it is presented here in an unnecessary way as it takes up a lot of space and the map is kind of superfluous.
7) Unnecessary information – we expect that kind of functionality in our apps now and is nothing revolutionary.
8) Supporting information – a demonstration of what you can expect important functionality to look like within the app.
9) Supporting / Unnecessary information – although this information is important to the product, it is over-presented here.
10) Unnecessary information – ‘settings’ are not new or glamorous. Demonstrating them here suggest a potential complicated app to use (although I doubt it is), and ‘error’ is something we hope never to see!
11) Showing off – again, not a criticism here because the author wants to demonstrate all aspects of design by showing the clarity of text because it’s demonstrated on a retina display. It also suggests however, that the app won’t work on less than an iPhone 4 (and maybe not even on that). If this product did, seeing this might make owners of a non-retina display iPhone think “this won’t work on my stupid old phone”.
12) Unnecessary information – basically this is a long screen grab of the entire website. A link would have sufficed, especially considering all the imagery and information on the website is present in this presentation.
13) Essential information – where to the get the app from and who produced it (just in case the viewer wants to see what else you’ve produced if you’ve caught their eye).
As I have stressed many times previously, any criticism is based solely on the suitability for this a representation of a product for promotion, not as an entry on a showcase website. The reason I didn’t use the ‘Nextr’ website to deconstruct is because it doesn’t feature as many examples for types of presentation methods as the Behance profile. But it does its job very well.
So, a little summary:
If you discount for the moment the video element (2) , through the remaining presentations, you get a sense of what this product does, how it solves a problem, and, how it works from nothing more than some static screen grabs and a few blocks of copy.
You should see then, that even if you can not actually build the project, you can present it in a very meaningful way. The example we explored here also demonstrates how to present your work professionally with its design, style, layout and superb quality imagery. These little details are make the difference between a product that will be taken seriously, and one that isn’t.
I will follow up this post with a look at the different ways you can present a product that hasn’t yet been created.