Charlie is a transit app provided by Cubic for the city of Boston, with the goal of making the use of Boston transit systems less of a headache for its customers. The app allows users to efficiently search and find the transit routes they need, while also allowing them to add and maintain passes, payments, and cards, making for a smoother overall transit experience. The team worked closely with the Massachusetts Bay Transit Authority (MBTA) to align the app with requirements set by the city of Boston, to best suit their transit customers.
UX & Wireframing
I partnered with the UX team to translate customer requirements into wireframes, eventually transitioning into the lead UI role.
UI Design
I created a custom style guide based on the client’s brand and led the UI design, presenting progress and key decisions weekly.
Developer Handoff
I partnered with the development team in Germany, preparing detailed annotations and 200+ screens for final implementation.
Setup.
For this project, both UX and UI were completed in the same Figma file simultaneously. We had progress tabs on every flow to indicate where it was in the process. This set up made communication between teams and the customer extremely efficient, being able to quickly recall and reference flows and individual screens.
Onboarding screens.
Card screen.
Users can switch between cards while the screen dynamically updates with relevant balances, passes, and Autoload settings. Expandable sections keep the experience simple without hiding important information.
Card screens continued.
Ride History
Purchase History
Back to Top