High Fidelity Prototype Visit the App Store to see the official Tolls NY release!
Background
Each portion of the Tolls NY has its own system and functionality. Eventually after completing all the screens and their iterations the total was roughly 700+ screens over the course of 2+ years. The project was originally designed in Adobe XD then was transferred to Figma. Below is a diagram explaining the 3 parts of the Tolls NY app and their purposes.
User Flows
User Personas
This app was very large and complex. Countless types of users would be using this app. I created personas with needs based on each type of account: Temporary Travel Account, Tolls by Mail, and NY E-ZPass and illustrated the scenarios in how individual personas would make use of them.
Each persona would go through their own unique experience of the app. Each of them all deep and robust. The largest focus and amount of time when creating the app went to the Sign-Up flow. I feel that Nina's journey through the sign up flow was is most important persona to represent to represent the challenges and wins of this app.
Below you can see Nina's user journey along with a couple of changes I would incorporate into the app without the constraints of time and a predetermined flow from stakeholders.
Nina's User Journey
I created a website map with FigJam to organize all the parts of the app. Purple corresponds with E-ZPass, Blue with Tolls by Mail and Temporary Travel Account with green.
Wire-frames
Interactive Components
Components were an integral part to this project. Building a library of components in Figma saved me crucial time and allowed me to be more efficient. Test out some of the components below!
Additional Icons and Components
Basic Text and Color Palette
Screenshots
