Storytrail made by Büro

Awwwards Site of the Day
CSS Design Awards Site of the Day
European Design Awards — Silver
The Lovie Awards — Gold
The Lovie Awards — People’s Choice
Clube Criativos de Portugal — Gold
Prémios Lusos — Bronze
Communication Arts — Shortlist
Communication Arts — Webpick of the Week

Art Direction Brand Extension Illustration Motion Graphics Strategy Website

Explore the world’s best cities through our curious stories uncovering the historic, quirky, fascinating, weird and wonderful! Rome first, Los Angeles, New York, S. Francisco and Lisbon would be next.

Storytrail is a website with carefully curated stories on the format of video guides. It features hundreds of small video stories per city that needed to be served through a browser without loosing fluidity and performance. The brief was to get a very straightforward and graphically simple with the key idea that the user never gets drowned with information and never gets lost. Juicy human affairs served by demand.

⮑ ● Visit website Storytrail.co

The approach

We crafted a website where the user first chooses a city/trail and has absolute control over what he wants next, always with a clear notion of where it’s located. The user has 2 important ways to navigate: on the timeline, that is an extension of the identity, and on the map if you never want to loose the geographic relation of the stories towards the city map. Almost like a close friend telling you where to go on the nigh before before you go to sleep.

Jason, the storyteller

Illustration has a key role in Storytrail’s experience. The brand extension was based on the thickness of the logo that became a living line across the website and Jason, World traveler & founder, illustration leads you the way and explains how everything properly works before he guides you through the must-sees. All animated through a PNG sprite because sometimes video isn't crisp enough for our eyes.

Fig 1.

Jason on a sprite animation in PNG sprite

Fig 2.

End result

Fig 3.

Storytrail logo animation in PNG sprite

Fig 4.

Storytrail logo animation in PNG

Mobile App

The website is profoundly optimized for mobile with lower quality videos, for obvious roaming bandwidth restrictions that a majority of tourists experience.

We also developed an app with an offline mode so that the users would have the city’s full contents right on the smartphone. Mapbox was the open-source mapping platform used for our custom-designed maps, we love it.

Play Pause

References

Drag me

Communication Arts

With a site design from Bürocratik, this collection of video tours features the quirky, hidden stories of cities around the world.

— Read the Article

Inspire Design

Storytrail is an awesome website that helps people find city to explore. The design features colorful and animated illustrations for the introduction.

— Read the Article