MTA Away Website Redesign

Redesign of the MTA Away interface and additional discovery work

Client

Role

Year

MTA

UX & UI Design

2024

Background

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 the public transportation via tying it with the local attractions, deals and events. With over 56,000 annual users and 109,200 homepage views, the website is growing in popularity.

Challenge

We were requested to make the updates to the website that consisted of a list of small cosmetic updates. 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 make a bigger evaluation of the product to discover some long-term recommendations.

Opportunity

This project was a perfect opportunity to elevate the whole brand experience, approach it in a holistic way and show a bigger value that out team could deliver beyond the basic punchlist tasks. We were able to take a step back and approach this project from the more of a discovery and project management perspective.

My Impact

I worked on this project as a solo designer with an engineer and under a supervision of a design director. I was responsible for creation of all discovery and design deliverables.

Process

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 point of the product and basis to start working on the discovery phase.

Discovery

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.

Site Map Audit and IA Analysis

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 does the flow of the current process and use patterns come together. Those steps were later broken down by 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.

Design Updates

After we did all the extra discovery work to cover the basic knowledge for the product, I moved towards working on the interface. Font and component audit were some necessary steps of this process. 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:

  • Introducing Search field
  • Filters to help with a quick content perusal
  • Tabbed layout of the guides to help with quick content browsing
  • Pagination to avoid the infinite scrolling and long load time
  • Renamed Articles to Guides to embrace the spirit of exploration

Summary

As the project wrapped up and all the updates were approved, we presented with the map for the recommendations for the potential next phase of the project. MTA Away was a good representation 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.