SFMTA App and Dashboard

Company
FABENOVEL

My Role
Lead Designer

I worked with a cross-disciplinary team from the offices of the SFMTA, FABERNOVEL project managers, product managers, and developers to build this initial prototype.

The prototype aimed to provide real-time transit information everywhere in San Francisco. The project was composed of 3 sub-projects. A smartphone application, a business application timetable for use in metro stations, and a website. The smartphone component aimed to create a mobile web app to find the most convenient and fastest local transit that was within walking distance.

Business Challenges

  • Create a comprehensive transit information system accessible across multiple platforms

  • Deliver real-time transit data to San Francisco residents and visitors

  • Integrate complex transit data into user-friendly interfaces

  • Design cohesive experiences across mobile, web, and physical touchpoints

Strategic Approach

Research & Discovery

  • Collaborated with SFMTA offices to understand transit system complexities

  • Mapped user journeys for different transit scenarios

  • Identified key user needs for real-time walk circle, and transit information

  • Analyzed existing transit information delivery systems and work within existing city design standards 

Design Process

  • Created information architecture for real-time transit data

  • Developed wireframes and prototypes for three distinct platforms:

    • Mobile web application for on-the-go users

    • Business application timetables for metro stations that highlighted walk circles and connecting routes 

    • Website for comprehensive transit planning

  • Designed intuitive wayfinding systems for the initial prototype

  • Iterated designs based on stakeholder feedback

Measurable Results

  • Reduction in user transit planning time

  • Increase in accurate transit predictions

  • Metro station timetable usage

  • Website engagement metrics

My Contributions

  • Initial wireframes for all three platforms

  • User flow diagrams

  • Interactive prototype screenshots

  • Wayfinding design system

  • Real-time information display iterations

  • Final UI components across platforms

UCSF iPad App + Branding

Scott Brothers DIY Ditties - Esurance

Citizenshipworks Platform + Branding

PARISOMA Redesign

Digital Illustrations - Esurance

Allstate + Esurance Co-branding