CLIPPER App (Work in progress)
Overview
The CLIPPER App is my personal educational project for learning and trying out my UI/UX skills.
CLIPPER Card is the all-in-one public transit card for the Bay Area. It's an amazing tool, but it has some limiting characteristics, like problems with managing the balance.
I wondered why CLIPPER doesn't have its own app, considering evolving technology, like the ability to tap your phone instead of the card. MUNI app has this feature but doesn't allow connect your CLIPPER card account to pay for rides.
I saw a need in a tool on hand that would help users to monitor their account, pay for services, and replace the card itself if needed.
By the way, The Metropolitan Transportation Commission is going to launch the original CLIPPER app in 2020.
User Persona
Following the principals of human-centered design, I created a user persona. First, based on my assumptions, and then adjusted after researching the results of public transportation surveys.
Prototype
In the next step, I built the first paper prototype, using Marvell app (see the video on the bottom). After conducted user testing I realized that I have to restructure it completely.
Mockup
I built a digital mockup using Adobe XD. I started with one use case. The main function of the app is the ability to manage the balance. You can see a wireframe of the part of this use case, including error states.
To be continued...
