Ithaca Transit helps make navigation in Ithaca easier and more reliable for 6K (and growing) monthly users.

 

Contribution

I redesigned the end-to-end search experience for Android, updated iOS design kit and established Android design kit, and made empty state illustrations.

Duration

Sept 2017 - Present

Role/ Skills

Lead Product Designer / Interaction Design, Visual Design

Platform

Android, iOS

 
 

Overview

Team Cornell AppDev

Designers Mind Apivessa, Maya Frai, Sahil Khoja

Before, because of inaccurate bus schedules, people often found themselves endlessly wait for the bus to come, jumping between multiple applications to get to a destination, or not getting to their destinations on time. With live tracking and accurate updates, Ithaca Transit help people get from point A to point B around Ithaca more reliably and easily. Ithaca Transit has over 11K downloads to date.

The iOS version is available on the App Store and we are currently building the Android version, which will be launched in early 2019 👀✨

 
 

 
 

Android Route Search

Project Duration 4 weeks

 
Android Design.png
 

Discover and Define

“I used google maps [as opposed to Ithaca Transit] because I had no idea which stop is geographically located where”— a freshman at Cornell University

We found that our biggest user group is freshmen. For the majority of them, it’s their first time in Ithaca. The shipped iOS version does a great job in providing a more accurate data and better navigation experience but does little in helping new  become familiar with the navigation system and the area. Therefore, we want to use the opportunity to design the Android version to make the navigation experience even more reliable and efficient for both the newcomers and experienced users.


Our key goals:

  1. (Even more) Easily Access Routes: Structure content in a way that users can get an optimal route in one click

  2. Clearer Route Visualization: Enable users to make a better decision on an optimal route 

  3. Physical Orientation: Provide new users with more guidance to better navigate and become more familiar with the area

Develop

ios flow.png

One problem we found with the iOS version was how users only see the map once they have selected a route. Newcomers who are not familiar with the area find it difficult to orient themselves physically and navigate. We decided to surface the map throughout the search experience because it helps users orient themselves physically and provides a better visual infrastructure to aid users in making better decisions.


Surfacing the map means the entire route-searching flow need to be revisited. I took the ownership of designing the end-to-end route-searching interaction.

Route Searching Interaction

I started off by combining the existing flow we used in iOS with the map. Instead of showing the vertically-stacked route options in full screen, I put them in the half-present bottom sheet, directing the attention to the most optimal route. Users can swipe up to expand the bottom sheet to browse other route options e.g. by walking or nearest, in full screen. Inspired by Google Maps, I also decided to display alternative routes on the map as well. This way, they can easily compare alternative routes and select one by clicking on the map. 

Interaction A

Another key interaction that I considered was to display route options in a fixed, non-expandable bottom sheet. Users can browse through routes by swiping sideways through the horizontal menu options. Each option represents different types of routes e.g. fastest, nearest, and by walking, which corresponds different use cases.

 
Flow 1.png
 

Interaction B

Users find both interactions to be intuitive. Surfacing the map also provides them that extra layer of comfort that the information is accurate and that they will get from the desired point A to point B. However, there were problems with both flows.

 
Interaction B

Interaction B

 

Interaction A offers more visual flexibility and scalability. Vertically stacking the route options and the dynamic bottom sheet can accommodate the different amount of information in each route option card. It can also accommodate an unlimited number of route option cards, allowing for scalability. However, vertically stacking the route options does not allow for a seamless selected route update interaction in the bottom sheet when users select an alternative route on the map. 

Interaction B was intuitive and does not run into the same awkward interaction like interaction A. However, showing only one route per menu option or use case is not scalable and risks us not being able to accommodate some use cases.

I synthesized the findings from testing the two interactions and came up with interaction C that combats the cons of interaction A and B. 

To make sure that selecting an alternative route experience via clicking on the map is seamless, I decided to remove the vertical-stacking of the route options and display only one selected route option when the bottom sheet is collapsed; the route will update reflectively if user selects an alternative route on the map. Users can view other route options that are not displayed on the map by swiping up the bottom sheet or click“seeall route options” to expand the bottom sheet.

Interaction C

 
Interaction C

Interaction C

 

Visual Design

Here are visual explorations I did throughout the process to improve the affordance of several touchpoint.

Route Detail View Entry Point Explorations

Below shows the explorations I did for route detail view entry point. At first, I thought it was clear for users that if they double tap the card, it will take them to the route detail view. However, user testing result shows that it’s not the case. I decided to go for A after several explorations because an arrow icon on the top right provides enough visual affordances while not increasing the visual load.

 
Visual Design - Route-detail-view entry.png
 

Location-Editing Entry Point Explorations

Below shows the explorations I did for location-editing entry point. Initially, I pursued option A, where both the origin and the destination type treatment follows the standard style. Many users did not realize that they can click to edit. I ended up pursuing F, where TCAT’s blue and heavier font-weight is applied for destination to improve the visual affordance.

 
Visual Design - Location-editing.png
 

Deliver

This will be shipped in spring 2019, stay tuned!

 
 

 
 

iOS and Android Design Kit

To help designers and developers speed up our work and improve the visual consistency, I worked with 2 designers to create a design kit. It contains a detailed guideline on typography, a more consistent color palette and spacing, and scalable visual components and illustrations. I standardized the colors, typography and spacing, and updated the assets accordingly. 

 
Intro-2.png
Style.png
Assets.png
 
Intro.png
Style.png
Assets.png
 

 
 

Empty State Illustrations

They have been shipped 🚀

More details coming soon.

 
 

 
 

Beyond Pixels

I currently help teach Introduction to Digital Product Design, a 10-week, 2-credit, student-taught class started by Cornell design legends, Nicole Calace and Andrew Aquino. Stay tuned for more updates!

Tina He and I co-instructing “Navigating The Wild” lecture where we talked about the importance of designers understanding business and the differences between working in big tech, startups, agencies, and as freelancers.

Tina He and I co-instructing “Navigating The Wild” lecture where we talked about the importance of designers understanding business and the differences between working in big tech, startups, agencies, and as freelancers.

 
 

Info

I’m currently a Product Design Intern at Facebook, helping 80 million business owners better leverage Facebook business tools. I’m also building Alcove, a space for people to reconnect with their values and unlock their potential. Previously, I’ve helped build products and learning experiences for IBM, Thai Airways, and Enpeo Consulting.

As an advocate for collaborative learning, I’ve contributed to building a learning culture within teams I’ve worked with. I also co-founded Design Picnic, where I collaborate with Thai designers around the world to create a resource hub for human-centered design for the Thai community.

When I’m not nerding on design and education, I can be found supporting projects by my creative friends and dancing to 80s asian pop music.