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.
Today, their mobile apps are widely used by tens of millions of people across the country, making it a crucial platform for staying informed.
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.
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.
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.
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.
The original homepage on Android
The city feed on iOS
A TOI+ article
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.
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.
Tabs on iOS
A long list in a hamburger drawer
Account, search in 3-dot menu
The 5 bottom tabs, with Account button in header
5th tab with sections, search, and saves
Account and settings
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
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
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.
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.
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.
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.
Part of the login/signup flow
Part of the onboarding flow
Part of a staggered onboarding
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.
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.
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.
This work isn’t public yet.
Account details phase 1 redesign
An empty state
A discarded option for walkthrough
Loyalty points prompts
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.
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)
There are many useful things in the world, this text isn't one of th