Crafting a design system to help scale development and redesign a leading Indian news website for mobile, tablet and web.
Duration
6 months (Feb - Aug 2020)
Role
UI/UX Design Lead
Client
Republic TV
In collaboration with a prominent Indian news media company, I spearheaded the redesign of their news website to enhance the user experience and maximize revenue opportunities through ad sales. Over six months, I assumed a dynamic role crafting a modular design system, redesigning user flows, information architecture, and developing 80+ responsive mockups and prototypes by collaborating with a cross-functional team of product managers, software developers, and SEO marketing managers.
Client brief
Redesign the news website to enhance the user experience and boost session duration, ultimately leading to increased revenue from ad sales on the website.
Impact
+25%
Increase in user sessions for mobile users
+20%
Increase in new unique users for mobile and web
+50%
Increase pageviews for mobile and web
+1 mins
Increase in avg. session duration for mobile and web
Over 6 months, I addressed the client’s requirements by delivering a modular design system that comprised responsive UI components, color and typography guides, as well as comprehensive design documentation. Additionally, I developed over 80 responsive mockups and prototypes encompassing various features.
This was accomplished by:
This was accomplished by:
- Establishing an effective information hierarchy to aid SEO teams in content tagging, thereby enhancing discoverability and accessibility, and facilitating easy content publication.
- Standardizing page layouts across the website to optimize ad sales opportunities.
- Utilizing Figma to create responsive UI components.
Design Process
The initial phase involved immersing myself in conversations with the SEO/marketing team to understand content creation, tagging, and publication processes. Additionally, discussions with the business sales team provided insights into revenue targets for ad sales. Understanding the existing CMS and its tech stack was crucial to ensure the feasibility and viability of the proposed redesign.
Mobile-first approach
Given the predominance of smartphone users accessing the website, prioritizing mobile user experience was very important. Consequently, I developed UI components for mobile resolutions first, followed by web and tablet resolutions.
Ideation
Content Hierarchy
Content discovery and accessibility are integral to a successful digital experience. Therefore, I devised a comprehensive content hierarchy map consisting of news categories, sub-categories, topics, and sub-topics. This facilitated appropriate tagging for the SEO team, improved content accessibility in search results, and drove organic traffic growth.
Content mapping
Information Architecture
Wireframes
Next, I created wireframes for the mobile layout to test and collect feedback from SEO/marketing and business sales teams to ensure it aligned with their requirements.
Mobile wireframes
Desktop wireframes
Design System
Colours and Typography
Some UI Components
High-fidelity Mockups & Prototypes
Next, I created wireframes for the mobile layout to test and collect feedback from SEO/marketing and business sales teams to ensure it aligned with their requirements.
Searching for specific content
Exploring Shows page