All Work

A case study by Hernando Saieh Diago

Modernizing the visual design, streamlining user experience, and implementing a unified Design System across a transportation platform.

Role
UX/UI Designer
Platforms
Web · iOS · Android
Focus
Design System · User Flows
Status
Designed · Not Launched

Act 1 of 5

Overview

SwiftRide is a transportation platform with three web applications and one mobile app, and its outdated, inconsistent design frustrated users because no unified design language existed across the platforms.

SwiftRide is a transportation platform with three web applications and one mobile app. The existing design suffered from outdated aesthetics, inconsistent implementation, and usability challenges that frustrated users during navigation. No unified design language existed across the various platforms.

Act 2 of 5

Redesigning User Flows

I mapped the journeys of both riders and drivers to find the friction, then simplified the most frequent flow from four screens to two, using contextual help and progressive disclosure to lower the cognitive load.

Mapped user journeys for both riders and drivers to identify friction points. Simplified the most frequent flow from 4 screens to 2 screens. Introduced contextual help and progressive disclosure to minimize cognitive load.

  • Mapped user journeys for both riders and drivers
  • Simplified critical rider flow from 4 screens to 2 screens
  • Introduced contextual help and progressive disclosure
  • Reduced cognitive load through simplified user paths

Act 3 of 5

Centralizing Design Work

I brought all the products into one unified Figma file, a single source of truth for tokens, spacing and visual design, with systematized layout grids and elevation standards for cross-platform consistency.

Organized all five products within a unified Figma file for comprehensive cross-app visibility. Established a single source of truth for token library, spacing, and visual design. Systematized layout grids and elevation standards for cross-platform consistency.

  • Unified Figma file connecting Web App 1, Web App 2, Web App 3, and Mobile App
  • Single source of truth for token library, spacing, and visual design
  • Systematized layout grids and elevation standards

Act 4 of 5

Building a Scalable Design System

I built a comprehensive component library with a semantic color system, a typographic scale, spacing tokens and reusable buttons, forms, cards and navigation patterns, all backed by developer-ready specifications.

Developed a comprehensive component library including color system with semantic roles, typographic scale, spacing tokens, and reusable components — buttons, forms, cards, and navigation patterns.

  • Color system with semantic roles: primary, feedback, neutral, and brand
  • Typographic scale and spacing tokens (4 · 8 · 16 · 24 · 32)
  • Reusable component library: buttons, forms, cards, navigation patterns
  • Developer-ready implementation specifications

Act 5 of 5

Results

The primary rider journey dropped from four steps to two, the shared Figma structure reduced handoff friction, and one design language now spans three web applications and a mobile app.

  • Reduced Cognitive Overhead: Key user flows simplified significantly — the primary rider journey decreased from 4 steps to 2, reducing drop-off rates and improving task completion across platforms.
  • Improved Collaboration: Centralized Figma structure and single source of truth reduced handoff friction, enabling rapid cross-functional alignment and consistent shipping.
  • Scalable Design System: Reusable component library and design token system accelerated iteration across five products, establishing foundations for future feature development.
  • Cross-Platform Consistency: Unified design language across three web applications and one mobile app, eliminating visual inconsistencies and fragmented user experiences.

End of the story

Next scene

That was Swift Ride. CareSync is up next, or head back to the full list of work.

Details of this project have been altered from the original to respect a non-disclosure agreement. Core design decisions, process, and outcomes are accurately represented.