Sila Trasport App

Project Showcase: Sila Web App – Qatar's Integrated Transport Portal

Role

UI/UX Designer & Graphic Designer (Focusing on Product Design, Interaction Design, and Visual Consistency)

Overview

Sila is the official public transport brand for the State of Qatar, developed in collaboration with the Ministry of Transport. The goal of this project was to extend the service from mobile apps to a comprehensive web application, creating a seamless, world-class digital platform for planning journeys, accessing travel history, and integrating various public transport modes (metro, tram, bus, taxi) into a single, cohesive network.

The Design Challenge

The primary challenge was to translate a complex, multi-modal transportation service into an intuitive, accessible, and high-fidelity web experience. We needed to ensure brand consistency across all digital touchpoints (web and mobile) while optimizing the interface for desktop users and integrating secure, compliant features like the login and registration process.

My Design Process & Key Contributions

My approach followed a Human-Centered Design (HCD) framework:

1. UX Strategy & Information Architecture (IA)

User Journeys: Mapped key user journeys (e.g., first-time sign-up, logged-in trip planning, history viewing) to identify critical interaction points and necessary system feedback.

IA Definition: Structured the main web portal, ensuring logical grouping of complex data (routes, schedules, payments, and profile management) to maximize ease of navigation.

2. Interaction Design & Prototyping (Figma)

High-Fidelity Wireframes: Developed detailed wireframes in Figma to define the layout and functional interactions of key screens, including the responsive trip planner interface and user dashboards.

Secure Authentication Design: Designed the login/signup interface (as seen in the provided screen) to be welcoming yet secure. The design prioritizes clarity and trust, featuring:

A clean, two-column layout separating brand identity from the authentication form.

Clear fields for E-mail and Password with visual password toggles.

Integration of captcha for robust security without excessive friction.

Prominent social login options ("Continue with Facebook," "Continue with Google") for faster conversion.

3. Visual Design & Digital Product Design System

Brand Consistency: Ensured strict adherence to Sila's established visual identity, utilizing the primary dark blue and vibrant accent colors to maintain consistency with the mobile apps.

Responsive Design: Implemented designs that function flawlessly across all desktop, tablet, and mobile breakpoints, using an adaptive grid structure.

Component Development: Contributed to the digital product design system by defining UI components (buttons, input fields, navigation elements) to accelerate development and guarantee a unified user experience.

Tools Used

Figma: Wireframing, Prototyping, Component Library Management

Adobe CC: Graphic Design and Asset Preparation

Outcome

The Sila Web App successfully launched, providing Qatar residents and visitors with a centralized, reliable, and aesthetically pleasing platform for managing their public transportation needs. The project solidified my expertise in translating complex regulatory requirements into a simple, high-impact digital product.