Back

Back to lists

Back to lists

Back

Back

Re-Design

Re-Design

Re-Design

Re-Design

Case Study

Case Study

Case Study

Case Study

TNSTC Website Redesign: A Case Study

TNSTC Website Redesign: A Case Study

TNSTC Website Redesign:
A Case Study

TNSTC Website Redesign:
A Case Study

Transforming the Tamil Nadu State Transport Corporation (TNSTC) website with a modern, user-friendly interface, streamlined ticketing process, and improved accessibility.

Transforming the Tamil Nadu State Transport Corporation (TNSTC) website with a modern, user-friendly interface, streamlined ticketing process, and improved accessibility.

Transforming the Tamil Nadu State Transport Corporation (TNSTC) website with a modern, user-friendly interface, streamlined ticketing process, and improved accessibility.

Transforming the Tamil Nadu State Transport Corporation (TNSTC) website with a modern, user-friendly interface, streamlined ticketing process, and improved accessibility.

Transforming the Tamil Nadu State Transport Corporation (TNSTC) website with a modern, user-friendly interface, streamlined ticketing process, and improved accessibility.

Transforming the Tamil Nadu State Transport Corporation (TNSTC) website with a modern, user-friendly interface, streamlined ticketing process, and improved accessibility.

WEBSITE

TNSTC

ROLE

UX Designer

EXPERTISE

Research / Design

timeline

4 Weeks

Project Overview

Project Overview

The TNSTC website faced challenges with outdated design, limited accessibility, and complex navigation. With 6,666 average visits per day and over 200,000 monthly visits, the need for a user-friendly, visually appealing, and efficient platform was evident. The redesign aims to cater to modern user expectations while improving overall engagement.average

The TNSTC website faced challenges with outdated design, limited accessibility, and complex navigation. With 6,666 average visits per day and over 200,000 monthly visits, the need for a user-friendly, visually appealing, and efficient platform was evident. The redesign aims to cater to modern user expectations while improving overall engagement.average

Key Challenges

A cluttered interface with no clear visual hierarchy

A cluttered interface with no clear visual hierarchy

Complicated navigation, making it hard for users to find information

Complicated navigation, making it hard for users to find information

Complicated navigation, making it hard for users to find information

Lack of essential features like live tracking & efficient ticket management

Lack of essential features like live tracking & efficient ticket management

Lack of essential features like live tracking & efficient ticket management

Frustrations caused by lagging servers, payment failures, and repetitive processes

Frustrations caused by lagging servers, payment failures, and repetitive processes

Frustrations caused by lagging servers, payment failures, and repetitive processes

Frustrations caused by lagging servers, payment failures, and repetitive processes

A cluttered interface with no clear visual hierarchy

Complicated navigation, making it hard for users to find information

Lack of essential features like live tracking & efficient ticket management

Frustrations caused by lagging servers, payment failures, and repetitive processes

Solutions

Solutions

1

Bringing a new dimension to user experiences and interfaces.

The existing site suffered from a lack of clear visual hierarchy, making it difficult for users to navigate. We restructured the website’s information architecture to group key functions like ticket booking, announcements, and FAQs logically. The interface was redesigned with a modern aesthetic and aligned with WCAG 2.1 standards to ensure inclusivity for all users, including those with visual

1

Bringing a new dimension to user experiences and interfaces.

The existing site suffered from a lack of clear visual hierarchy, making it difficult for users to navigate. We restructured the website’s information architecture to group key functions like ticket booking, announcements, and FAQs logically. The interface was redesigned with a modern aesthetic and aligned with WCAG 2.1 standards to ensure inclusivity for all users, including those with visual

1

Bringing a new dimension to user experiences and interfaces.

The existing site suffered from a lack of clear visual hierarchy, making it difficult for users to navigate. We restructured the website’s information architecture to group key functions like ticket booking, announcements, and FAQs logically. The interface was redesigned with a modern aesthetic and aligned with WCAG 2.1 standards to ensure inclusivity for all users, including those with visual

1

Bringing a new dimension to user experiences and interfaces.

The existing site suffered from a lack of clear visual hierarchy, making it difficult for users to navigate. We restructured the website’s information architecture to group key functions like ticket booking, announcements, and FAQs logically. The interface was redesigned with a modern aesthetic and aligned with WCAG 2.1 standards to ensure inclusivity for all users, including those with visual

1

Bringing a new dimension to user experiences and interfaces.

The existing site suffered from a lack of clear visual hierarchy, making it difficult for users to navigate. We restructured the website’s information architecture to group key functions like ticket booking, announcements, and FAQs logically. The interface was redesigned with a modern aesthetic and aligned with WCAG 2.1 standards to ensure inclusivity for all users, including those with visual

1

Bringing a new dimension to user experiences and interfaces.

The existing site suffered from a lack of clear visual hierarchy, making it difficult for users to navigate. We restructured the website’s information architecture to group key functions like ticket booking, announcements, and FAQs logically. The interface was redesigned with a modern aesthetic and aligned with WCAG 2.1 standards to ensure inclusivity for all users, including those with visual

2

Optimize Usability and Navigation

Recognizing the needs of modern travelers, we introduced live bus tracking to provide real-time updates, reducing uncertainty. Additionally, advanced features like ticket rescheduling and refund processing were included to streamline post-booking operations.

2

Optimize Usability and Navigation

Recognizing the needs of modern travelers, we introduced live bus tracking to provide real-time updates, reducing uncertainty. Additionally, advanced features like ticket rescheduling and refund processing were included to streamline post-booking operations.

2

Optimize Usability and Navigation

Recognizing the needs of modern travelers, we introduced live bus tracking to provide real-time updates, reducing uncertainty. Additionally, advanced features like ticket rescheduling and refund processing were included to streamline post-booking operations.

2

Optimize Usability and Navigation

Recognizing the needs of modern travelers, we introduced live bus tracking to provide real-time updates, reducing uncertainty. Additionally, advanced features like ticket rescheduling and refund processing were included to streamline post-booking operations.

2

Optimize Usability and Navigation

Recognizing the needs of modern travelers, we introduced live bus tracking to provide real-time updates, reducing uncertainty. Additionally, advanced features like ticket rescheduling and refund processing were included to streamline post-booking operations.

2

Optimize Usability and Navigation

Recognizing the needs of modern travelers, we introduced live bus tracking to provide real-time updates, reducing uncertainty. Additionally, advanced features like ticket rescheduling and refund processing were included to streamline post-booking operations.

3

Prioritize Mobile-First Design

The website was optimized for mobile devices, ensuring smooth performance across all platforms. Interactive call-to-actions and reduced steps for booking simplified user workflows. Faster load times and responsive layouts were introduced to minimize frustration, especially for users accessing the site during peak hours.

3

Prioritize Mobile-First Design

The website was optimized for mobile devices, ensuring smooth performance across all platforms. Interactive call-to-actions and reduced steps for booking simplified user workflows. Faster load times and responsive layouts were introduced to minimize frustration, especially for users accessing the site during peak hours.

3

Prioritize Mobile-First Design

The website was optimized for mobile devices, ensuring smooth performance across all platforms. Interactive call-to-actions and reduced steps for booking simplified user workflows. Faster load times and responsive layouts were introduced to minimize frustration, especially for users accessing the site during peak hours.

3

Prioritize Mobile-First Design

The website was optimized for mobile devices, ensuring smooth performance across all platforms. Interactive call-to-actions and reduced steps for booking simplified user workflows. Faster load times and responsive layouts were introduced to minimize frustration, especially for users accessing the site during peak hours.

3

Prioritize Mobile-First Design

The website was optimized for mobile devices, ensuring smooth performance across all platforms. Interactive call-to-actions and reduced steps for booking simplified user workflows. Faster load times and responsive layouts were introduced to minimize frustration, especially for users accessing the site during peak hours.

3

Prioritize Mobile-First Design

The website was optimized for mobile devices, ensuring smooth performance across all platforms. Interactive call-to-actions and reduced steps for booking simplified user workflows. Faster load times and responsive layouts were introduced to minimize frustration, especially for users accessing the site during peak hours.

Re-vamp Highlights

Re-vamp Highlights

Live Tracking Integration

Live Tracking Integration

Users can track buses in real-time

Streamlined Ticketing

Easy rescheduling and Refund processing.

Mobile Optimization

Seamless experience across all devices.

Live Tracking Integration

Users can track buses in real-time

Streamlined Ticketing

Easy rescheduling and Refund processing.

Mobile Optimization

Seamless experience across all devices.

Compare it

Compare it

Hold the dragger

left and right to compare the design

Tools

Tools

Figma

Adobe Illustrator

Miro

Google Forms

Key Outcomes

This redesign focused on addressing user frustrations and creating a seamless experience. By resolving navigation complexities, introducing modern features like live tracking and bilingual support, and crafting a responsive, mobile-first platform, the project showcases a user-centered approach. The final design highlights a balance of functionality and aesthetics, emphasizing usability and accessibility, making it a strong addition to the portfolio.

This redesign focused on addressing user frustrations and creating a seamless experience. By resolving navigation complexities, introducing modern features like live tracking and bilingual support, and crafting a responsive, mobile-first platform, the project showcases a user-centered approach.

The final design highlights a balance of functionality and aesthetics, emphasizing usability and accessibility, making it a strong addition to the portfolio.

This redesign focused on addressing user frustrations and creating a seamless experience. By resolving navigation complexities, introducing modern features like live tracking and bilingual support, and crafting a responsive, mobile-first platform, the project showcases a user-centered approach.

The final design highlights a balance of functionality and aesthetics, emphasizing usability and accessibility, making it a strong addition to the portfolio.

Explore the Full Case Study

The Behance case study dives deeper into every aspect of this project, offering detailed insights into the redesign process. It includes:

  • Comprehensive user research findings

  • A heuristic evaluation of the existing website

  • Redesigned wireframes and interactive prototypes

  • Thoughtful design choices with annotated screens

The Behance case study dives deeper into every aspect of this project, offering detailed insights into the redesign process. It includes:

  • Comprehensive user research findings

  • A heuristic evaluation of the existing website

  • Redesigned wireframes and interactive prototypes

  • Thoughtful design choices with annotated screens

Key Challenges

A cluttered interface with no clear visual hierarchy

Complicated navigation, making it hard for users to find information

Lack of essential features like live tracking & efficient ticket management

Frustrations caused by lagging servers, payment failures, and repetitive processes