Centralizing Content For Cricket Fans

Centralizing Content For Cricket Fans

Cricket tournament content hub integrated into the NewsX digital ecosystem.

Project Overview

NewsX regularly creates dedicated experiences around major events such as elections, world cups, and cricket tournaments. For the IPL season, I designed a dedicated tournament hub across web and mobile that centralized news, live updates, schedules, standings, statistics, photos, and videos into a single destination. I was responsible for designing both desktop and mobile experiences while ensuring consistency with the NewsX design language.

My role

UI/UX Design Consultant

Duration

4 days

Project Status

Tools

Figma

Project Background

As one of the flagship properties within the network, NewsX creates special event experiences whenever major national or global events take place. These experiences help readers access all relevant content from a single location instead of navigating across multiple sections of the website. For the IPL season, the editorial and product teams planned a dedicated tournament hub that would bring together breaking news, live blogs, schedules, points tables, player statistics, photo galleries, and video content. The project also introduced an additional challenge: strict licensing restrictions prevented the use of official IPL branding, franchise names, and team logos, requiring alternative approaches to visual communication.

Delivered a centralized tournament hub across web and mobile, bringing news, schedules, standings, statistics, and live updates into a single experience.

Design Approach

Since the page was hosted within the NewsX ecosystem, I followed the platform’s existing visual language, including typography, spacing, and interface patterns. This ensured the experience felt like a natural extension of the website rather than a standalone microsite. To create a strong association with the tournament without using protected assets, I adopted a blue visual theme inspired by the color commonly associated with professional cricket tournaments. This helped establish familiarity while respecting licensing requirements. The hero banner was designed to immediately communicate the excitement and scale of the event, while the rest of the page focused on surfacing the most important information through clear hierarchy and progressive content discovery.

Used custom illustrations, colors, and typography to create a recognizable tournament identity while staying consistent with NewsX's design language.

Working Around Licensing Constraints

One of the most unique challenges of the project was designing without access to official tournament branding. Instead of using franchise logos and names, I created an alternative identification system based on city names, team color associations, and custom monument illustrations representing each city. This approach allowed users to quickly recognize teams while ensuring the experience remained compliant with branding restrictions. The tournament itself was referred to as T20 Cricket League instead of using the official tournament name.

Used city monuments, team colors, and alternative naming conventions to maintain familiarity while complying with licensing restrictions.

Responsive Design Decisions

The mobile experience required more than simply resizing the desktop layout. Reimagining the Points Table The desktop points table contained several statistical columns that became difficult to read on smaller screens. Instead of shrinking the layout, I restructured the information architecture by prioritizing the most important metrics and removing secondary information. This improved readability and allowed users to quickly scan standings without horizontal scrolling. Converting Statistics into Interactive Toggles On desktop, Orange Cap and Purple Cap standings were displayed as separate tables. On mobile, showing both tables would have significantly increased scrolling. To solve this, I consolidated them into a single component with toggle states, allowing users to switch between batting and bowling statistics while preserving all underlying data. Prioritizing High-Frequency Content The Schedule and Live Blog sections played a supporting role on desktop but became significantly more prominent on mobile. Users following matches on the go often prioritize fixtures and live updates, so these sections were given greater visibility to improve accessibility and engagement. Adapting the Photo Gallery The desktop gallery used a multi-card editorial layout. For mobile, I introduced a featured-story approach with supporting content displayed in a horizontally scrollable format, making the experience easier to consume on smaller screens.

Reorganized layouts, simplified data tables, and introduced toggles to improve readability on smaller screens.

Component Strategy

To support scalability and simplify updates, reusable components were created for key sections of the experience. The Schedule Card component was built with editable properties for match number, venue, teams, and match timings. Nested team components could be swapped independently without affecting the overall layout, allowing tournament fixtures to be updated efficiently while maintaining consistency across the page. This component-driven approach reduced repetitive work and made future content updates significantly easier.

Built editable components that allowed teams, venues, match details, and schedules to be updated without breaking layouts.

The Outcome

The tournament hub was successfully launched on NewsX and served as a dedicated destination for cricket coverage throughout the event. By combining news, statistics, schedules, live updates, photos, and videos into a single experience, the design improved content discoverability while remaining consistent with the NewsX platform. The project also demonstrated how thoughtful design decisions can overcome branding restrictions, responsive challenges, and content complexity within a tight one-week timeline.