JTI's Global Leaf: Annual Report app

App for JTI; their annual report. Zoom the map or tap the leaves to know stuff about the tobacco leaf supply chain. This was huge, then very compressed, now it’s totally light. With impressive design.
One Annual Report to rule them all.

The Global Leaf App

App, UX design, Digital product, Information Architecture, Concept

iTunes store
Google Play

The brief

An Annual Report to Rule Them All

It wasn’t until recent years that corporate annual reports gained interest as brand communication tools. What yesterday was a huge technical tome full of pie charts and corporate nonsense only to be read by devoted managers with eccentric literary tastes, today can be browsed as an entertaining online artifact decorated with the finest designs and the most entertaining copy.

One of the managers at the Swiss headquarters of the megacorporation Japan Tobacco International (JTI) thought it would great to have one of those as a give-away for stakeholders, the press, even for potential new employees.

We proposed an app to provide the user not only with JTI’s “facts and figures”, but also showing the human stories behind the tobacco growing process, how the leaf is transported, and how JTI addresses social and environmental challenges during the tobacco leafs supply process.

The value proposition

Culturally responsive digital storytelling

The subtitle might sound a bit over the top, yet that was exactly what we had in mind. We had to explain a quite complex story to several targets with radically different cultural backgrounds. Like explaining to a farmer in central Africa how strategically valuable is his job for a top-manager in Switzerland, the same but the other way around, and making them both fact-checked and playful.

Now, where to start?

Why not with a overhead shot of planet Earth, like in Hollywood!? #🚀

JTI Global Leaf App Annual report - Illustration Start screen

The concept

It’s the leaf, stupid

What visual metaphor would work for an app packed with stories about the tobacco leaf? 🤔 You guessed it.

Sometimes the most obvious solutions are also the best, and this case required high doses of simplification and self-explanatory mise-en-scène, as our assignment was basically to transform an impenetrable corporate annual report into a clickable story suitable for all audiences.

JTI Global Leaf App Annual report - Navigation

The design and the navigation

Two ways to browse the planet

At the beginning, we were so absorbed with simplifying the tons of crossed-referenced information that we couldn’t see the Big Picture. And I mean literally.

We began by concentrating the entire report in 8 chapters, with 3 elements of interactive content per chapter. Each chapter was represented by a leaf, and the 8 leaves formed a curved stem. That was our main logic and practical navigation thread. We did our job in terms of Information Architecture, but it takes more than IA to explain a story about leaves.

Then Sarah, the Art Director, joined the project. She realized that there wasn’t a proper context for those leafs, and she proposed to use a zoomable map with highlighted locations as a visual background, which later became the alternative navigation system that a digital artifact requires.

The rest was a matter of filling up the map with interactive elements to improve the overall UX: swipeable clouds, ships that made tooooot when touched and several other layers of playful interactivity.

In the end we had basically distributed hundreds of pages of technical information across multiple action points, divided into two different navigational systems; a time line and a map. The content ranged from corporate videos to beautiful infographics, from informative texts to photo slideshows… Now it was the turn of Comerge to pack it all up and take it up into the clouds…

JTI Global Leaf App Annual report - Illustration interactive World map

The technical challenge

Pack it all in!

After successfully overcoming the eternal question of “Native VS Hybrid” (Native won, for connectivity and security reasons) the Swiss software development company Comerge assigned a fully-dedicated Beautiful Mind (David, we love you!!) to our project, not only for writing both Apple and Android codes, but also in solving the biggest technical issue we had to face: creating a lightweight app containing 8 embedded videos and a zoomable world map. After several “content shrinking” reviews, including a new version of the map, Comerge came up with an extraordinary file-compressing system that solved our overweight problems. In 2016, the tablet app “All about Leaf” was short-listed in the design category at Best of Swiss Apps.

iTunes store
Google Play