Yourstory logo

Narrating YourStory the chronicler of India’s technology scene

UI/UX Design Web
Image courtesy Al Jazeera (creative commons share-alike license)

The Prologue: Who is YourStory

Founded in 2008 by Shradha Sharma, YourStory covers the burgeoning Indian tech scene, with a clear mandate to go beyond the usual reporting on funding and acquisitions: it focuses on the personal stories of entrepreneurs, failure as well as success, tackles thorny questions of gender and diversity and tries to ensure that it’s writing goes beyond the mainstream English-speaking (and reading) audience. YourStory’s various platforms reach more than 10 million active readers and it clocks more than 20 million page views every month.

Monthly Page Views

20M

Active Readers

> 10M

Monthly Page Views

20M

Chapter 1: Uncommon x YourStory

In early 2015, YourStory approached us to redesign their website and their mobile applications.

Yourstory 2

At the time, the website had a fairly generic, two-column layout reminiscent of a Wordpress-theme; it was functional but didn’t do justice to it’s content. Stories were laid out reverse-chronologically, with little categorisation, or ability to highlight different types of content (video, audio-posts, cartoons etc).

Navigation was being split by the identity which made it difficult to see everything that the website had to offer.

Chapter 2: Cleaning Up

We started with reviewing the existing website, and refining the logo. We created a colour palette which was derived from the base red, but adapts itself to the various sections (HerStory, SocialStory, YS TV, YS Profiles etc). This created a distinct personality while retaining a strong tie to the parent brand.

Yourstory 3
Colour palette for YourStory

After understanding where YourStory wanted to go: not be just another news website, but a platform to bring technology news to everyone in India, we set out to create beautiful, scalable design templates that would hold them in good stead over the long-term.

We used a twelve-column layout, broken into an asymmetrical grid which adapted to the needs of the modern, rapid-paced, digital newsroom. It allowed for various kinds of content that the website would have: articles of differing importance, videos, podcasts, callouts, newsletter signups, standard advertising units etc.

Yourstory 4

Chapter 3: Hello, Namasthe, Namaskaar…

YourStory is unusual amongst the new wave of media startups in that it has consistently attempted to reach further than just English-speaking India. It launched in 5 Indian languages and has since grown to more than 10 — Hindi, Bengali, Tamil, Kannada, Odia, Axomiya, Urdu, Punjabi, Gujarati and more!

Yourstory 5.1 Yourstory 5
Hindi (L), Bangla (R)
Yourstory 6.1 Yourstory 6
Tamil (L), Kannada (R)
Yourstory 7 Yourstory 7.1
Malayalam (L), Punjabi (R)
Yourstory 8.1 Yourstory 8
Urdu (L), Axomiya (R)

Chapter 4: A story in hand…

The experience and language of the website was carried over to both Android and iOS. Bold colors, slick typography and a lack of clutter helped create a classy experience and make the apps stand apart from the others. The interface did not merely shrink the desktop experience down to mobile form factors, but actually looks at what would be useful from a user’s point of view and adapts the content to it.

Android
Yourstory 9 Yourstory 10
iOS
Yourstory 11 Yourstory 12

Chapter 5: That’s a wrap!

YourStory was a challenging project as it required the lucid delivery of a variety of content types ranging from articles to news, events, videos and podcasts that spanned across various interfaces. A testament to the power of forward-looking design, two years down the line, our design is still going strong.

Want to work together?

Looking to improve a complex product and reach the next generation of smartphone users? We love designing challenging products, and building content driven apps and websites that reach millions of people. Write to us now:[email protected]