There are many useful things in the world, this text isn't.

There are many useful things in the world, this text isn't one of th

There are many useful things in the world, this text isn't one of them. Infact I would advice you to stop reading it. There's nothing to be found here. Just some placeholder to make the aesthetic shine. Please, stop reading. I am running out of words to type. If you read the next sentence you will get 7 years of bad luck.

Switch theme

The Times of India

Transforming TOI's mobile apps—with richer reading, deeper discovery and higher subscriptions

  • As Studio Tandem
  • 8 months in 2022–21
  • iOS & Android apps


The client

TOI is the third-largest newspaper in India, with millions of subscribers, first published in 1838.

Today, their mobile apps are widely used by tens of millions of people across the country, making it a crucial platform for staying informed.

The brief

To redesign the Android and iOS apps to

1. Target a more discerning reading audience

2. Improve discovery of vast content

3. Make the reading experience richer

4. Optimise subscription journeys

5. Improve subscriber experience

Our scope was only the mobile apps, not the larger brand or other platforms.

The Team

I co-led the design with Rahul Beniwal, my cofounder at Studio Tandem. We hired Anshuman Dhar as a junior designer to assist us on the project. We worked closely with Durga Raghunath, the Digital CEO of TOI at the time, and Abhijeet Anand, the head of product, along with product managers, the internal design team and developers.

As the co-lead, my focus was the visual identity, design systems, iA, content discovery and story design.

Rahul focused on research, subscriptions journeys, walkthroughs and motion design. We both worked on the subscriber experience, and all three of us did a lot of the general UX and UI design.

I’m proud of the craft I got the opportunity to practice in this project.

Brand Strategy

why a visual redesign

1. With the business strategy for the apps shifting more to subscription-based, the product needed to attract and retain an audience that would pay for good journalism. The visual design of the apps needed to signal this, as opposed to the entertainment-providing mass-appeal that the apps currently had.

2. The TOI+ sub-brand needed to stand out better on its own and feel like a premium offering to those willing to pay for high-quality journalism. while still fitting inside the TOI brand.

3. The TOI mobile apps were also long overdue a visual update and a clearing of all the UI debt accrued over the years. At the very least to remain competitive in the market. The design was still based on the mobile apps’ news-aggregator legacy, and had a generic tech/modern visual language, instead of a reading experience befitting the third-largest English daily in India.

4. The product had matured enough to need better design consistency and speed of building. The existing styleguide was limited. The live product contained several varied visual languages, and neither designers nor engineers had access to many reusable components.

existing product

The original homepage on Android

The city feed on iOS

A TOI+ article

new look for mobile apps

TOI’s biggest brand strengths were its historic legacy as a traditional physical newspaper, the trustworthiness the brand therefore inspires, and the recognisability of the household name.

We proposed an obvious inspiration from TOI’s print legacy, to carry forward in the modern mobile platforms.

key aspects of new visual language

Serif typography and headlines to be front and centre to signal a journalistic brand.
A black-and-white newspaper-print colour palette with occasional accents of the brand red.
Thick black outlines, icons, illustrations with sharp edges
Bigger visuals to let the news content create a journalistic aesthetic

The two brands—TOI & TOI+

This work isn’t public yet.

Design System

Implementing a DS is a long process, we helped with the first steps. We created a design styleguide, and component library which scaled as the project went on. All the UI work we did was built on it, and we onboarded in-house designers. We worked with the in-house front-end developers and started the process of implementing these at their end, in a phased manner, starting with the styleguide.


The product already had a dark theme but the design team often did not have enough bandwidth to recreate each new mockup in dark theme, so we created a system for them to quickly produce dark theme versions of any mock by switching colours in Figma. We also tweaked many of the existing shades to comply  with accessibility guidelines.


We introduced Noto Serif as the main typeface for headlines and articles, and created a comprehensive set of text styles. We tested the typefaces to make sure everything worked in multiple Indian languages supported by TOI.

custom Icon sets

Custom icon set (with base icons from Noun Project), with sharp angles and thick outlines, and a more detailed set of mini illustrations for empty states, dialogs, etc.

Illustration styles

Keeping in mind that the TOI team didn't have an in-house illustrators and relied on ready-made illustration sets for day-to-day use, we created a colour style that could be easily applied to the illustration sets they used to maintain visual language consistency across the product without increasing their overhead.


Screenshots from the Figma library
Some components

Deeper discovery

Information architecture

Old navigation

Android homepage

Tabs on iOS

A long list in a hamburger drawer

Account, search in 3-dot menu

New navigation

The 5 bottom tabs, with Account button in header

5th tab with sections, search, and saves

Account and settings

A system to aid discovery

Sections and sub-sections

We leaned more heavily on the very strong mental model that news readers have of newspaper sections. We made the list of sections and subsections more browsable, made the feed of each section richer, and made sure they are available across the produc, at every relevant point for readers to dig more into.

7-12 permanent Sections as one of the main way to browse TOI

Section and subsection under each article for horizontal discovery

Subsections surfaced in feeds

Section page with a rich feed, subsections as quickly-switchable tabs, and a tagcloud with more ways to browse


We introduced a product-wide concept of topics, something the editors were already informally using here and there but which wasn’t formalised and reliably available to readers.

Trending topics surfaced on Discovery tab,homepage, and other feeds

Topics connected to a story surfaced under it

Topics already existed as tabs in feeds, curated by editors


We introduced this unit across the product to surface more related content together (like a topic, a publisher etc.), and allow readers to view more if interested. Meant to be used as a small collection of stories bundled together in any feed, algorithmically or editorially curated.

A bundle made from a trending topic

A bundle of stories from reader’s city

A bundle of popular stories from third-party publishers


TOI readers browse photos and videos heavily. And newer formats like podcasts were soon being introduced to the apps. We doubled down on the concept of formats as a unique way to browse TOI content.

Formats as a way to explore a Section or publication

Formats as a way to browse in Discover (Sections) tab

Formats other than article visible under all story units

Formats were already surfaced as a tab on home feed

Partner Publishers

The TOI app includes content from partner publishers, some of these are in-house brands like Economic Times, some are third-party. Previously there was a dedicated 5th bottom tab with a news feed from latest stories across all partner-publishers. Since it wasn’t used much by readers, we changed the paradigm for partner stories. Different readers cared about different categories and certain publishers, instead of one feed with all of their content. So we introduced a way to browse the publishers separately, and included bundles in different feeds that surfaced them.

List of publishers to browse

We included bundles within home and other feeds that surfaced trending partner-publisher stories

Story page: Publisher was already attributed under it. We linked them to that publisher's feed

On the Discovery (Sections) tab, we surfaced most-read partner publishers

A dedicated space for discovery

Existing product

Newspaper sections are a strong mental-model for news-readers. The existing product had a side drawer with a very long list of sections, topics, sub-brands etc, all with a flat hierarchy. We turned it into a level-1 bottom tab to provide readers a place to come and discover the depth of TOI’s content using the discovery system that we created above.

This tab served as a place of discovery for those readers who have a mid-level clarity for what they are looking for. Search function on this tab served those with a high clarity of intent. While the other 4 tabs (Home, City, TOI+, Briefs) already served those who have a low clarity of intent.

The Sections tab (later renamed Explore)

Richer reading

A homepage as rich as a newspaper

We found that the TOI home tab was used for news consumption. readers scrolled long distances and caught up on news without leaving the page much. So we reoriented this feed to be more immersive, to feel more like a physical newspaper with its rich grids, to have larger media, bigger headlines, and diverse sections that helped surface both breadth and depth of content. While also adding more jumping-off points to dive deeper into the content categories.

Old Feed

The original homepage had a monotonous list-view which would have been good for scanning, but the homepage was used majorly for news consumption right from this page.

New feed
New homepage feed

A system of mix-match units

As part of the design system, a finite set of components covered a lot of ground for creating immersive, engaging feeds with minimum effort, scalable in the future. Accessible to designers, editors and developers.

Screenshot of the Figma library
4 sizes of news story, automatically randomised in every feed to break the monotony of headlines. With indicators for being a partner publisher, a rich format, heavily commented, very recent, TOI+, already read, or a live (breaking) story.

Story design


Introducing the new TOI

Walkthrough with the three main product strengths

First-time user experience

Screenshot of the first-time-user-experience flow in Figma

Part of the login/signup flow

Part of the onboarding flow

Part of a staggered onboarding


Funnel audit

First we mapped the current subscription funnel, dived into the analytics data, and identified some quick easy wins to reduce dropoffs. We shipped these quickly, which had immediate outcomes for the subscription metrics.

The nudges to subscribe that already existed in the app were also in inconsistent visual languages and communication styles. We standardised these using a mid-way design language, since the new one would take some time to ship.

Some of the nudges to increase conversions


The second order of business was to quickly build and ship a payment mechanism in the app, which was until now being done in a web-view and not for TOI+ subscription, but for a super-subscription product called Timesprime.

New Journey

As TOI finalised the new subscription model, we drafted the future-state journey for different cohorts to lead them to being happy returning subscribers.

We talked to customers, conducted competitor analysis and studied online literature to understand the subscription business from multiple angles.

Screenshot of documentation

The new TOI+ experience

This work isn’t public yet.

And more…

Account details phase 1 redesign

Saved stories

Search results

Notification prompt

An empty state

A discarded option for walkthrough

Election coverage

Loyalty points prompts

That's all folks

The work we did is being built and launched in planned phases, and the TOI team has been learning from and iterating on the initial launches. The redesign, onboarding, and discovery improvements are live on the TOI Android app and have improved the reader experience for the crore+ users. The payments and TOI+ nudges have been launched on both Android and iOS app and led to an increase in the number of subscriptions.

Hire me

I am Juhi Chitra, an independent consultant and full-stack UX/UI designer + researcher.

View more about me →

I have spent 10+ years helping startups and big tech companies, from MVP’s to growth experiments.
If you like this work, there’s good news. I’m always looking for the next interesting product to work on. Shoot me a message to schedule a chat. (I’m not looking for full-time positions)

Thank you! Your message has been sent to me.
Oops! Something went wrong while submitting the form.

There are many useful things in the world, this text isn't one of th