Mark Oldham
UX/UI |
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 the users to efficiently search and find the transit routes they need, while also allowing the user 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.
Process.
UX created low-fidelity wireframes, following guidelines and requirements provided by the customer.
I started on this project as a UX designer and was involved in this process early on and remained as lead UI designer, working closely with UX during this part of the process throughout the project.
I would then take the approved UX wireframes and implement the UI, using the style guide that I created, based on the established customer style guide that was provided. Once completed, I would present these final screens to the customer weekly, giving direction and explanations behind my design decisions.
The final months of the project, we began working closely with the development team in Germany, explaining annotations and the project file layout. Once all screens were presented and approved, I exported the 200+ screens from Figma to Zeplin for the final handoff to the development team.
Setup.
UX Wireframes
UI Designs
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.
To help this screen be less overwhelming visually, the user can expand and collapse this balance section. When collapsed the user can still see the total balance on the card along with the card's autoload preference.
The card screen has a carousel at the top allowing the user to tap or slide through all cards on their account. Every time the user switches to a new card, that new card's information is populated through the rest of the screen.
Autoload preferences are displayed on the bottom of each pass.
Card screen cont.
From the card screen the user can reorder the card display by tapping the reorder button then dragging and dropping the cards to the new desired order.
The user can also access all of their alerts from the Card Screen and display them in one area. The alerts are in order from most urgent. Urgent alerts are non-dismissible and must be addressed before they will disapear from this section.
Ride and purchase history.
