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. 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.
I was requested to make some minor cosmetic updates to the website. As the contracted time was much longer than it would take to complete these, we took it as a chance to address major design and usability concerns.
Problem:
• Lack of a clear vision and value proposition for the product.
• Overwhelming choices and lack of personalization.
• Unmaintained design system and component library.
This project was an opportunity to approach the product holistically and help our client understand the userbase and their stories to elevate the overall MTA Away brand experience.
Solution:
• Holistic evaluation of the problem space and the product offering.
• Discovery of the user base and their journey.
• Enhancement of browsing experience.
• Design audit to introduce consistency.
• Long-term product recommendations.
I was responsible for the research, ideations, design audit, creation of all final discovery and design deliverables and led the discussions with the client. I also led the ideation of the enhancements for the next phase.
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. This is the step I start most of the project with. The first documents that were created to examine where can we improve were the existing and potential versions of the sitemap.
All of the steps in the discovery process will help us understand who the customers are and uncover their pain points.
One of the issues I discovered 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 its competitors, what value does it offer and what potential upgrades could position it as a reliable source of information.
Based on the conversations with the client and some secondary research, I 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. That deliverable was one of the elements that synthesized core issues.
After all the extra discovery work was done, I moved towards working on the interface. As a big fan of scalability, systems and 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 within the Figma file are connected. As with any product, a design system creates consistency and organization for the team. While it's a lot of heavy lifting upfront, proper component documentation introduces clarity. 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.
Above: Updated deal cards, 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. Recommendations included among others:
Problem:
Solution:
5 extra discovery deliverables:
Result:
Helping our client discover the value of the product, clarify the vision and understand the users.
Improved functionality catering to 67% MTA mobile users through pagination, tabs and filters - and maintained design system.
Result:
Improved browsing experience and consistency, elevating the brand perception.
Map of future phase recommendation based on the discovery documentation.
Result:
Helping our client elevate the product.
SUCCESS! Project extended to a phase 2.
MTA Away was a fantastic 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. We not only helped the client to close the loops and identify the knowledge gaps on the customer but we also managed to evangelize how the user-centered research methods can be implemented into the business requirements.
After the project is done, it would be great to reflect what would I do differently?
If I had more impact on the resourcing, I'd love to conduct user testing and test metrics such as time to complete certain tasks to test our new navigation, net promoter score, or number of return sessions per user.
Based on that we locked one of the biggest wins for the team as the client decided to extend the project to phase 2.
