The brief

Barcelona-based startup CityBlink is building an online cityguide based exclusively on HD-video content, and hired us to design and develop it, starting at the initial concept stage, then collaborating with them on design and layouts, and finally programming and launching the site.

What we did

CityBlink supplied some initial design ideas, including their logo designed in house and basic elements of their corporate ID. In these early layouts, the browsing experience was divided up in a more conventional way, into different pages: an index page showing a grids of thumbnails, leading to inner detail pages, one page for each place.

We felt instinctively that the experience could be made significantly quicker, more comfortable and more enjoyable, and presented a counter-proposal in which the map view and thumbnails were simultaneously available and active, and navigable by familiar controls, including drag and drop positioning for both. To keep everything within one view, we added a ‘modal’ display for the videos themselves, so that they appear overlaid on the rest of the page, allowing you to get back quickly to exactly where you were and continue browsing – which makes comparing hotels, say, a much simpler affair than if everything were split into multiple pages.

The result is more of a web application than a conventional website, in that the whole experience takes place within a single screen, so that you can browse places either by thumbnail image or by their position on a map of the city, and filter them and then watch videos and share them online, without the inconvenience of having to go backwards and forwards between different pages as on a conventional travel guide. In hushed tones, we’d say it’s a milestone in user-interface design.

We used WordPress for the content-management which, given the site’s complexity – and especially to those who think of WP as a blogging platform – might seem like a supreme example of the use of a golden hammer, but in fact, with the recently introduced custom post type and custom taxonomy functionality, and the superb qTranslate plugin to manage translations, it ended up being ideal for the job, and as ever, its simplicity, speed and ease of use for the actual content-management is a great advantage from the client’s point of view.