TAPP - NEW FARE PAYMENT SYSTEM
UI DESIGN | CUSTOMER & B2B SITE
TAPP is the new generation payment of PATH's transit system allowing 3+M riders to pay subway and bus fares with debit cards, credit cards, and mobile devices using the TAPP site.
OVERVIEW
Transportation
Industry
People Involved
Agency - Reflexions
Client - PATH
Partner - Cubic Transportation Systems
Partner - EFK Agency (Branding)
Reflexions Team
Project Manager - Olivia Linder Tabel
Product Design Director - Debra Ohayon
Art Director - Ian Crowther
Product Designer - Aili Jiaravanont
UI Designer - Me, your gal 🙋♀️
My Key Contributions
Color Accessibility Analysis
Visual Language
UI Mockups
Style Guide
Documentation
Timeline
6 Months
Tools
Figma
About PATH
PATH is a 13.8-mile rapid transit system connecting New Jersey and New York, serving 3+M riders annually.
Since 2007, PATH riders have been paying for their fare by adding money to plastic fare cards such as Metrocards and Smartlink cards with no option to use their mobile device or credit/debit card. This vintage payment system is being phased out by 2023 and replaced with the next-generation payment system - TAPP.
About TAPP
TAPP is the new contactless PATH fare payment system that replaces plastic fare payment cards with contactless cards allowing riders to “tap-and-go” with their mobile devices and credit/debit cards.
PATH riders will no longer have to carry multiple fare plastic cards to travel throughout the city and will be able to pay and do all their transactions through the TAPP site.
UX WIREFRAMES
I was handed off UX wireframes that were previously defined by other designers at Reflexions for both, the customer and B2B site.
VISUAL LANGUAGE
Branding
EFK Agency provided the TAPP branding guidelines which gave me a pretty good idea of how to incorporate them into the website's UI.
Typography
For legibility purposes, I decided to only use the regular and bold weights of the typeface even though the thin weight was included in the branding guidelines.
Brand Colors
These vibrant colors were thoughtfully selected to make the website energetic and friendly.
Color Accessibility Analysis
I developed a full-color contrast analysis to determine what color combinations I could use that met the WCAG 2.1 guidelines. This allowed me to make sure that ALL users could easily read the content on the website.
Layout Grid System
I implemented a fluid layout grid that consists of flexible columns, fixed gutters, and fixed side margins. This allowed all the content on the screen to be responsive and resize to every screen size.
Additionally, I developed a layout pattern to ensure consistency throughout the site.
Indentation System
Indentations are all divisible by 4. These apply to components, patterns, and layouts. The smallest indentation is 4px and the largest is 120px.
Setting up these indentations and implementing them, helped me with consistency in terms of spacing throughout the site.
Text Spacing System
I developed a text module component that had 2 variants - desktop, and mobile. I used these components in all the wireframes to ensure consistency in text spacing. In the past, I had difficulty maintaining consistency in this area so I made these components to assist me with that.
Not only did they enable me to bring consistency between text, but also they expedited the production of different display sizes since I only had to make one version with all the content and then copy and paste it into other screens, changing and readjusting the width according to the screen size. I applied these components nearly everywhere! (See example below)
Color Tracks
These "color tracks" resemble rail tracks and are used in the menu and footer of the website. The color order of the tracks defines how the primary colors are used on the website. The colors always follow the same order: Light blue, pink, green, and yellow.
Defining this order helped me to reduce ambiguity when choosing colors for icons or components, this way the colors are not semantic, they don't mean anything, they just follow the order.
Icons
The site uses Font Awesome 6 icons, which offer flexibility and quality on every device.
Special icons have a background and a rounded corner which gives them hierarchy.
Rounded Corners
Inspired by both the rounded and sharp edges of the t in the TAPP logo, I implemented rounded and sharp edges in some components like cards, modals, and icons to make the site friendlier and more cohesive with the branding.
Nested Corners
Outer corners have a larger radius which "flows" around the one on the inside.
Imagery
The imagery is one of the most important pieces on the home page since it reflects PATH users and reinforces the brand colors.
UI Mockups
I created 300+ screens. Below are some of my favorite ones!
DELIVERABLES
I created a UI library that consisted of multiple components, their different states, variants, and breakpoints!
HIGHLIGHTS
1
After 2 months of working on this project, I was able to create 150+ mockups following PATH's branding (see below). However, the client decided that TAPP needed its own branding and as a result, I had to change all the wireframes I had created to match the new branding.
I was a little nervous about it because it was a big change, but the use of tokens on my Figma file AND my text spacing system made the process so much easier than I thought. I was able to catch up with where I was after working on it for a few weeks.
2
The new branding presented a unique challenge as the colors were too vibrant and did not meet WCAG guidelines when paired against white (the main background color) or each other.
The client had a specific vision of the use of colors on the site, so finding a way to use them all while ensuring accessibility was quite difficult. I had to carefully choose color combinations that would work on both light and dark backgrounds while making sure they provided enough contrast for users with low vision and/or color blindness.
3
I gained an invaluable skill from this experience, as it was the first time I had to present my work to a great number of unfamiliar people.
Despite the fear and nervousness I felt about public speaking, I was able to constantly present my work to them.
I am proud of myself for pushing past my comfort zone and overcoming my fears of public speaking. 💪🏼
BY THE NUMBERS
2
300+
2
3M+
Iterations
Screens
Different sites
Users