Adding Functionality to a Responsive Ecommerce Site
We had a commerce site that enabled riders (end-users) to purchase tickets that would then be available on their phones later to validate and start riding. The site wasn’t responsive, and didn’t offer a user hardly any benefits to being logged in other than the ticket being tied to their account. Combining that with the roll out of a new feature, Fare Medium, we designed and built what our users had been wanting the whole time. Called CWP, it stands for the Customer Web Portal.
The Fare Medium feature addition is massive. It allows a user to take full control of how they interact with their local mass transit by giving them the leverage to see a perfect snapshot into the status of their ticketing device (cell phone), as well as control every aspect of their account such as transferring passes, purchasing passes, blocking and deleting their Fare Medium, etc.
As the lone designer on my team, we had tons of meetings to determine which actions a user could take through the new Fare Medium feature, as well as additional tasks they may now have access to because of its implementation.
The first thing we needed to do was come to grips with the term Fare Medium. Internally, it makes a lot of sense because from a technical standpoint, that’s exactly what it is. But we knew from usability testing on a separate product (MBOJS) that the term doesn’t resonate with users. Although we continue to call it Fare Medium internally, the user will see a more familiar term such as physical or virtual card, depending on whichever applies to them.
We also added guest actions, or actions a user could take without being logged into the system. This is a great user experience purely because of the efficiency and speed at which a user can follow through on a task without taking additional time that they can spend doing anything else. I think the best part of being a UX designer is that good designs give freedom and time back to users.
I stayed within our company’s branding and UI guidelines but everything else was from scratch. The biggest puzzle I solved in this project was the intricacy of how everything is related. Some items conflict, while others went together in perfect harmony. I had to find the right balance and make it all work, connect it all.
Another decision I made was to bring some harmony to all of our products. We might have a certain task, say “Add a Physical Card” across three different product, and there’s three ways to do them. The logic is the same, but the designs are different. I had the opportunity to align them with one another and it really brings a sense of unity to the suite.