The Times of India

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.

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

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.

‍

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.

Colours

Typography

custom Icon sets

Illustration styles

Components

Information architecture

Old navigation

New navigation

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.

Topics

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.

Bundles

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.

Formats

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.

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.

A dedicated space for discovery

‍

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.

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

‍

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.

‍

Story design

Introducing the new TOI

‍

First-time user experience

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.

Payments

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.

The new TOI+ experience

This work isn’t public yet.

‍

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.