MAPtransit Mobile App Concept

A Student Project

Project Overview

For my first student project we were tasked with developing an app that would solve a problem for a classmate. After an initial interview, I learned that my “client” was struggling with the San Francisco public transit system. I used competitive analysis, target audiences, scenarios and user flows do develop my app concept.

Project Details

Client:  Colleague
Platform:  Mobile App
Skills:  Competitive Analysis, Storyboarding, User Flow, Ideation, Sketching, Wireframes, Prototype
Software:  Photoshop, Pop, Invision
Timeframe:  1 week
Design Team:  1 designer

Proposed Solution Prototype

A visually pleasing and comprehensive application that graphically maps and informs the user of key information – service types, detailed station locations, walk times to stations, transit routes, direction of travel, arrival times, and more – for efficient and successful use of San Francisco’s public transit options.

The Challenge

Even with many transit apps available to San Francisco commuters, residents and visitors, there isn’t one that provides an “at-a-glance” graphical interface. One that provides and interactive connection to the information needed to easily navigate the numerous transit options whether it be your first time using public transit or just another daily commute.

The User’s Goal

Simply, to understand at-a-glance what transit options are available to them at their current location at any given time.

The Process

Discovery & Definition

I started with competitive analysis to get familiar with the landscape of options (many of them) and what they were doing well and lacking (lots of lacking). I also talked to people to get an idea of who were the customers of the San Francisco transit system. This informed my target audiences and began to establish my three personas.

Research Overview & Insights

Competitive Analysis

Design Development

I started with a scenario in mind and began to sketch solutions informed by my competitive analysis and the needs of my customer.

Scenario Storyboard

Initial Concept Sketches

User Flow Revision

Second Iteration Sketches

After testing with multiple users I collected, synthesized and prioritized feedback to develop my second iteration of wireframe sketches.

Features Include:


Walk times from current location to selected station.

Pricing information and Payment method details (especially helpful when you lost your Clipper card, fare increases, or if you are new to the system)


Visible direction of travel and current location of selected transit service – see where they are and where they are going