News from the team at Storygami. Boom.


Indian Hospital Revisited: How We Built Al Jazeera’s First Interactive Web-Doc

This week we released the first ever interactive web documentary for global news network Al Jazeera with the heart-rending series Indian Hospital Revisited.

Al Jazeera are at the very forefront of digital news and journalism, from their award winning online content to their beautiful digital magazine. As a news organisation they have not only been at the pivot points of global change but have also been able to change with it, by pioneering new technologies to bring human stories to life with series strands and long form documentary.

Al Jazeera English and Storygami have been in talks for a number of months regarding bringing our interactive technology to their platform. Early indications were that our dedication to both innovation and a deep sense of storytelling were going to make this a great match. In the end both the producing and technical teams at Al Jazeera felt that when the right story came along they’d ask us to pitch for it.

Indian Hospital Revisited became the story we had waited for. The two part series is the follow up to the much acclaimed six part documentary Indian Hospital.

The original series sought to shine a light on Indian society as it is rarely seen. It brought audiences the story of a unique experiment in Indian healthcare at the Narayana Hrudayalaya Hospital Complex in Bangalore – a hospital that aims to treat anybody who walks through its doors, whether rich or poor; where making a profit goes hand in hand with providing free medical care.

This was a great story and one we instinctively knew audiences would want to delve deeper into. We now needed to find the best way to present the story elements into a unified whole.

We did this by following a few principles.


1.) Bend The Tech Toward Story

Viewers are able to access a menu to view character biographies

Viewers are able to access a menu to view character biographies


The original Indian Hospital series gained a dedicated following due to its focus on character storytelling. Over six original episodes the series interwove themes of tragedy and hope, resilience and compassion and with Dr Devi Shetty, the hospital’s founder, a source of inspiration and trailblazing innovation.

At Storygami we always go back to what makes the content special. It was the characters that set this series apart and so we understood that whatever we built around this story, we’d have to have to retain that sense of heart.

Bringing interactivity to stories like this is always going to be difficult. We could have easily brought in a lot of superfluous features that simply hang there looking nice, without actually adding to what makes the content great in the first place. What we made sure to do was to keep the features plugged into the themes of the series. If our tech didn’t serve the story or its characters – it didn’t go in.


2.) Unify Media Fragments

Storygami needed to find a way to bring related content such as feature articles into the video viewing experience

Storygami needed to find a way to bring related content into the video viewing experience

We identified early on that Al Jazeera used far more than stand alone episodes to tell this story. Their main web page was used to provide viewers an opportunity to look into the themes, subject matter and the characters involved. There was a range of rich content: image galleries, featured articles that detailed concepts around Indian healthcare, web exclusive videos, and lets not forget the vibrant conversations happening on social media.

The problem, however, lay in that each of these media elements were being presented as isolated from each other. The image gallery was on a separate page, each character profile had to be searched for elsewhere and to really delve into the issues around healthcare in India, viewers would have to access yet another separate page.

This is a broader problem with presenting content on the web. Challenges remain around sustaining viewers initial emotional engagement when prompting them to access these scattered pieces of content. More often than not this ‘bonus’ material is left untapped.

How then do we transform this ‘bonus’ material into interweaving layers accessible within that initial experience?

We studied this problem for a long while. In the end we decided to present all these elements inside a unified whole; image galleries, articles, web exclusive videos, character profiles, these all needed to be accessible from within the viewing experience without compromising on the story.

Here is a video of our original design mock-up we pitched to Al Jazeera in January:




In the example above you can see how we intended to introduce a push menu bar (familiar to anyone who has used apps utilising cards in mobile) so that each element could be accessed whenever viewers wanted. We also brought in a custom Twitter bar which helped bring the conversation on social media into the experience of watching the series itself. The stream was filtered to present tweets with the hashtag #IndianHospital. Now viewers could tweet along with the video if they choose to.

Bringing in disparate elements such as articles, image galleries and videos in a beautiful and seamless way posed key challenges. It came down to design decisions and the use of transparent overlays and their hierarchies.


3. Design For Emotion Not Just Information

Profile Layers were used to give viewers more information on characters


I remember early on when someone from our development team queried whether having two different types of ‘text layers’ was worth the effort. We call ‘text layers’ any piece of content that is text based as opposed to images or video. It’s a popular feature because it offers clients like Al Jazeera the option to bring in more in-depth content into the video experience.

The two types of text layers we had designed were firstly for information rich content pieces such as a specially written blog post written by Dr Devi Shetty called ‘A Vision For Global Healthcare’ and secondly, the more emotionally engaging pieces such as the short profiles on characters in the series such as Baby Dhayan for example, who was suffering from a facial cleft in the second episode.

The question arose when we were developing these two text types. In order to make sure the features we created could reasonably be developed on budget and within the timeframe it actually made more sense from the logical perspective of scalable development to make sure all text layers look and behave alike. This would have cut down time and made it easier to process.

The questions would come thick and fast: Why not make the character profiles have the same design as the article layers, with black backgrounds and set images? Why do the character layers have to animate into view differently than the article layers which were ostensibly the same feature but styled differently?



Text Layers: Same feature, different use cases


I remember explaining that the difference was paramount. We must always be aware of the link between the nature of the content in relation to the viewer’s engagement in mind when designing these experiences. A viewer would not be in the same mindset when reading complicated issues of healthcare in India as they would be reading about a small child who is learning to smile for the first time.

It follows, therefore, that because of the differences in experience of consuming these two types of content, the way each content piece is presented and offered up should be distinct from one another also. The design decision leans toward what would make sense for the viewer/user not necessarily which option would be easiest to replicate, at least not in the context of storytelling.

The tendency in development seems to be geared toward efficiency and scale. As it should be. But the real difference lies in that crucial empathic element since we are, in the end, designing for human beings. You’ll notice that the text layers –  articles and character profiles – look, feel and even animate in differently from each other. It’s a testament to our developers that these points were not regarded as flourishes but as fundamental elements worthy of greater consideration.


 4. Think Eco-Systems

When working with a globally renowned network like Al Jazeera we were aware that we were working within two important eco-systems and that the integrity of either could not be compromised. One was the brand eco-system and the other was the process eco-system.


Brand Eco-system:

Al Jazeera have a distinct and powerful brand presence. We were inspired by their award winning iPad magazine which is, in my own estimation, miles ahead of similar tablet publications. It does an excellent job of presenting rich media content in a way that is intuitive to the platform upon which it is presented. Our aim was to bring that aesthetic to life through beautifully designed and implemented overlays using our smart player.

A few examples of the Al Jazeera iPad Magazine stylings that served as design leads:



It’s a tricky task to maintain brand continuity when introducing  innovation into established platforms. We approached this by thinking of our interactive layers as just another tier for Al Jazeera to extend their content. We also had to make sure of continuity regarding the Indian Hospital Revisited strand itself as well as the wider eco-system of Al Jazeera’s network. All the while making sure there was nothing that felt out of place aesthetically from the experience.


Process Eco-system:

On the technical front, Al Jazeera’s existing eco-system too required a great deal of forethought. For example, Al Jazeera’s video content is hosted solely on Brightcove Video Cloud.  Our technical team therefore were working around the clock to make sure that our smart player could integrate fully with Brightcove. This was incredibly significant, not only because Brightcove are among the leading video hosting platforms in the world, but because in doing so, it meant that using Storygami would cause next to no disruption to Al Jazeera in terms of their publication methods. Their backend processes would relatively remain the same; they would upload videos as usual, using a CMS they were familiar with and it was only the front end result that would be enhanced using our interactive layers.

Making sure that system processes work well together is a huge step. The wider interactive video field is at a stage where the early pioneers are beginning to breach the walls of established media. We see ourselves as the next generation; the ones who know what it’s like on both sides of the wall and see what’s needed for this field to progress. The barrier for forward-thinking media organisations like Al Jazeera will inevitably be at the technical level: will adopting new technology pose too much of an effort, will it cause more disruption than it’s worth to adopt in the first place?

The less pain the better.  That’s a win-win for all concerned.


5. Keep An Eye On The Numbers

It’s not enough to ensure easy working processes between systems. In the end, what will prove what we’re doing matters and is worth investing in as a company and a technology are the hard numbers. Everyone at Storygami firmly believes that our story-led approach to interactive video will become the mainstay. But we simply wouldn’t have the confidence to claim such a position if we didn’t have the numbers to back it up.

We’re developing sophisticated analytics where we will be able to track viewer engagement in any number of ways. Once we launched Indian Hospital Revisited we were able to begin providing deep metrics as to what a viewer accesses, how they access it, whether from the menu bar or marker icons, whether they watch the web exclusive videos all the way through, whether a certain segment of the episode prompted a full read of the article etc. This gives an idea as to what works, what could work better and how we can improve on existing features.

We’re currently watching the numbers roll in and look forward to sharing these with Al Jazeera.


I know I speak for everyone at Storygami when I say we feel tremendously privileged to be the ones to have helped create Al Jazeera’s  first ever interactive web documentary. It has proved to be a big step in that lofty ideal we set about achieving: to bring context to content and change web video forever.


Guy Gunaratne is the Co-Founder and Creative Director at Storygami.

Guy GunaratneIndian Hospital Revisited: How We Built Al Jazeera’s First Interactive Web-Doc
Share this post