MTA Away is a subsidiary website of MTA - The Metropolitan Transportation Authority, a corporation responsible for public transportation in the New York City metropolitan area and surroundings. The goal of the website is to promote the use of public transportation via tying it with local attractions, deals, and events. With over 56,000 annual users and 109,200 homepage views, the website is growing in popularity.
We were requested to make the updates to the website that consisted of a list of small cosmetic items. As the contracted time was much longer than it would take to complete these and the page seemed to be missing a lot of basic functionality, we took it as an opportunity to conduct a bigger evaluation of the product to discover some long-term recommendations and areas for improvement.
This project was a perfect opportunity to elevate the overall brand experience, approach it in a holistic way and show our client a bigger value that our team could deliver beyond the basic punch list items. We were able to take a step back to look at the project from a distance and approach it not only from the design but also from a business and project management perspective.
I worked on this project as a solo designer with an engineer and under the supervision of a design director. I was responsible for the initial ideations and creation of all final discovery and design deliverables and led the discussions with the client.
Over the course of 7 weeks, our team worked with MTA Away team to complete the redesign journey. The website was first created in 2021 with a pretty basic functionality using a simple set of components and very little documentation.
The work began with reviewing the so called "laundry list" of straightforward updates based on an old proposal. In a series of client meetings, we discussed current challenges the team faces and the state of the user base and resourcing. That gave us more insight into the pain points of the product and the basis to start working on the discovery phase.
As we were noticing specific pain point patterns and recognizing opportunities for improvement, we started with documenting the current state. The first documents that were created to examine where can we improve were the existing and potential versions of the sitemap.
One of the issues we found early on was the lack of clear vision for the sole existence of the product. A Competitive Analysis helped us to map where does MTA Away belong among their competitors and what potential upgrades could position them as a reliable source of information.
Based on the conversations with the client and some secondary research, we created 7 user personas that would help us personify various user needs visible only from different particular standpoints. Each persona represented a unique set of characteristics and angles that would benefit from specific functionalities of the platform.
Next step was tying it all together into a robust user journey. I examined step by step of how do the flow of the current process and use patterns come together. Those steps were later broken down by each persona. This artifact was crucial in understanding what functionalities would be the most beneficial to recommend for a potential next phase of the project.
All these were described in a digestible SWOT Analysis that summed up general trends.
After we did all the extra discovery work to cover the basic knowledge for the product, I moved towards working on the interface. As a big fan of documenting the components and styles, I realized the file needed some serious audit. One of my goals as a designer is to set up whoever will work on the file in the future for success, and that means organizing and updating obsolete components and making sure all elements withing the Figma file are connected. Other than introducing some simple functionality that was still missing from the site, I focused on refining multiple global components and their responsive versions.
Some of the extra updates made to the site were:
Above: Updated deal cards.
On the left: Browsing and filtering within the Guides.
As the project wrapped up and all the updates were approved, we presented our client with the product roadmap for the recommendations for the potential next phase of the project. MTA Away was an amazing example of how, given time bandwidth, a small request for the updates the client perceives as necessary can evolve into a holistic UX evaluation and discovery that can uncover possible future areas for improvement way beyond the website and bring more value for our client.