<aside> <img src="/icons/code-scan_gray.svg" alt="/icons/code-scan_gray.svg" width="40px" />

Role: UI/UX Designer

Tools: Figma, Notion

Timeline: 60 hours

</aside>

<aside> <img src="/icons/no_gray.svg" alt="/icons/no_gray.svg" width="40px" />

This Case Study is engineered for dark mode, please toggle dark mode on for the best fidelity and experience.

</aside>

1. The Challenge : Identifying the Issue

Let’s be honest: Government apps aren’t exactly a masterclass in design. Speaking personally, using a state-run transport app in India often feels like a digital expedition. It’s not just booking a ticket; you end up navigating a UI that likely hasn't seen an update since the era of 2G data and flip phones.

As a student and a daily commuter, I’ve lived through the friction. These apps are essential, yet they suffer from two major issues:

1. Information Overload: It’s a wall of text. Important alerts—like a bus being three hours late—are buried under three layers of "Notice" menus.
2. The "Dated" Tax: Visual clutter doesn't just look bad; it erodes trust. Users hesitate to put their payment details into it.

Daily travelers don't have ten minutes to explore an interface. They have thirty seconds while running with a heavy backpack and 2 kids latching to one of his/her arms. The current clutter this creates a guessing situation.

2. The Audit: Deconstruction of existing app.

<aside>

                                                        Legacy SBSTC home Screen(dark theme)

</aside>

Key Friction Points:

• The "Bus" obsession (Zero Utility): The most prominent element on the Home Screen is a static carousel pics of a bus. It takes up 30% of the viewport—prime real estate better used for recent searches or live alerts.
• A "CTA" that isn't CTA-ing: The "Check Availability" button—the single most important element for revenue—uses a dark-on-dark color scheme. It looks perpetually disabled, forcing users to guess whether they can proceed.

3. The Strategy: Modernity & Intentionality

My goal wasn't just to recolor SBSTC. I wanted to take that raw transit data and make it intentional.

To move SBSTC from a legacy system to a modern utility, I used a few design decisions following core principles.

Before starting the design, I needed to understand why the current experience felt so difficult. I did a heuristic evaluation of the legacy SBSTC app to see where it generated friction.

The Dark Mode Problem.

The app recently introduced a dark theme, but it’s just simply inverted hex codes. The hierarchy and accessibility were not checked properly.

The Insight: The legacy app was designed for a frictionless path that doesn’t exist in the real world. It assumes perfect vision, a steady hand, and no need for real-time information. My redesign began by solving for the issues of the commute.

• Accessibility (AA): Thin blue text on a black background fails standard contrast ratios. In harsh sunlight at an outdoor bus terminal, the app becomes nearly invisible.
• Violating Fitts’s Law: The date selection chips are tiny. For commuters booking while walking or standing on a vibrating bus, these targets are impossible to click.

<aside> <img src="/icons/delete_gray.svg" alt="/icons/delete_gray.svg" width="40px" />

1. Information Architecture

In high-stress environments like a bus terminal, less is more. I stripped the non-functional elements—like the nine-dot bus carousel—and replaced them with a Utility-First Hierarchy.

• The Goal: Reduce the cognitive load so the user can find their route without "searching for the search bar." </aside>

<aside> <img src="/icons/vitruvian-man_gray.svg" alt="/icons/vitruvian-man_gray.svg" width="40px" />

2. Restore Trust (Visual Authority)

Trust is the currency of government services. If an app looks like a prototype from 2012, users don't trust its data.

• The Goal: Use a "Sharp" and technical look—anchored by the official SBSTC Navy—to signal that this is a reliable, and secure platform. I used high-contrast UI to ensure the app works in the real world (bright sun, low battery, moving buses). </aside>

<aside> <img src="/icons/infinity_gray.svg" alt="/icons/infinity_gray.svg" width="40px" />

3. Close the Loop (Frictionless Conversion)

A successful transit app is one that the user spends the least amount of time in.

• The Goal: Optimize the "Golden Path." I designed a flow that moves a user from the Home Screen to a confirmed QR-code ticket in under 60 seconds, eliminating every redundant click and nomenclature mystery along the way. </aside>

The Design Philosophy: In 2026, "Modern" doesn't just mean "Minimalist." It means Intentional. Every pixel on the screen must earn its right to be there by helping the user get home.

4. The Home Page: My Proposed Solution