Routsy SF

Mobile Application, UX/UI
Created: 2016

Routsy SF is a project for “Springboard UX course” that I participated from April to June 2016. Over the course, I learned detail process and methods of UX design to improve my skillset as a designer. I decided to re-design the existing mobile application “Routsy” which helps users to get real-time predictions data for transportation system in the bay area. I wanted to explore how I could improve this app that I use everyday. I conducted user research to understand what are the opportunities of improvement of this app and applied insights to final UI design.

Current Routsy App Design


I conducted in-person interviews to understand how users think about the current app and how they use. It was very useful process to understand who are my target audiences and how they interact with the app–not only what they don’t like about it, but also what they LIKE about it.

Hongsun Yoon 42 year-old, Graphic Designer
“I use the app every morning for commute! It’s such a useful app. I like its simplicity but I do like the feature that “Pocket Muni” has, which allows users can see other bus stops of the selected line on map.”

Sarah Lee 26 year-old, Product Manager
“I take public transportation all the time. I think the app is super useful but sometimes I’m frustrated cause the app is not accurate. Would be great to see more real-time notification of why this bus is delaying so that I can prepare the alternative route.”


I studied “Moovit”, “Transit App”, “Transit NYC”, and “Swiftly” to understand what are the features of their products so that I can re-interpret some of the successful features into Routsy. You can see the full detail documentation here.


  • Target Audience: I decided to keep my target audiences as SF residents who use the app in daily basis after the research to focus product features.
  • Notification: users are frustrated when the app doesn’t tell them why there’s a delay.
  • Personalization: testing what is the best way to show users’ favorite route. And also what’s personalization in this app? I explored ways to get more customized information on map, notification and filter.
  • UI: testing which information hierarchy and design works the best. Is it better to show the time prediction just for 1st muni/bart arriving? Or 2-4 options? If so, how the layout will be?


The Routsy has a very simple function; users get real-time prediction as easy as possible. My approach in redesigning the app was to add features that are useful and to remove features that are not useful based on user research, and improve the UI design with better information hierarchy, while keeping its simplicity. Specifically, I:

  • Updated layout of the screen for better readibility
  • Added notification feature for users to see if there’re delays and if users can load bicycle on Bart during busy time.
  • Updated from 4 time-predictions to 3 time-predictions on bookmark page based on user feedbacks.
  • Added feature on map that users can see nearby bus/train stops and be able to see the direction of travel, and other routes.
  • Branded each bus/train line with its unique color for more delightful and recognizable user experience.


Wireframes for bookmarks page. The second one was selected and I started Visual Design based on this direction. 

routsy vd-32routsy vd-32