Challenge
Modernize and redesign the current MTA service changes page.
Solution
An automatically updating desktop and mobile website that quickly provides information about MTA service disruptions.
Length of project
5 days
Desktop Version  ↓ 
Mobile Version  ↓ 
____________________________
THE PROCESS
I did a project sprint to redesign the look, feel, and functionality of the current MTA service changes webpage. I began by considering the user persona and what their goals were. I wanted to answer the high level question of "which trains are disrupted?" and give the option to look deeper to see what the problem is and when it would be over.
Current Design  ↓ 
Brief  ↓ 
Currently, the website is clunky. Changing the date to anything other than today pulls up a calendar and takes 3 clicks. While the sidebar gives a general overview of all the lines, it gets lost by the larger modal where a user can either choose all routes or just one. 
I wanted to give the user the opportunity to quick select a date and choose multiple lines. I also wanted the list to update automatically rather than having to click a "Submit" button, removing an extra and unnecessary step.
After a few quick sketches of various ideas, I decided to treat the selection of date and lines in a sidebar/drawer with a main, right panel that updates automatically. 
For mobile, I played around with triggering train line selection using a button on the bottom right. The initial worry was that this kind of button is generally used as an "add" button, but after exploring various apps such as Google Messages and ClassPass, I saw that it was also used as "new" and "filter" functions, so I felt comfortable moving forward with this idea.
In order to make date selection easy, I wanted to have a toggle between Today, Tomorrow, and Date Selection.
Final Wireframes  ↓ 
Another consideration was how to toggle between selecting all lines and selecting a few. To save time, people are more likely to only select to see one or two lines than deselect one or two from the list of 20+. I wanted to make it easier for a user to focus only on one or two lines, therefore I needed to create a quicker transition from "All Routes" to "Only _ and _." I went through a number of options testing out how to trigger the single line select with the fewest clicks possible.​​​​​​​
Filter Experiments
Train Selection V1  ↓ 

All routes were selected along with an "All Routes" option. However, this created the assumption that clicking on a train line would deselect it from the list rather than single it out. 
Train Selection V2  ↓ 

I created a big button to further separate "All Routes" from individual lines. I also tested a hover state which I hoped would help clarify that clicking on one line would deselect "Show All Routes" button and zero in on the line selected. 
On Hover
On Hover
Train Selection V3  ↓ 

However, the greyed out train line options deferred people from clicking on them. I went back to the basics and decided to put a physical separation between "Show All Lines" and all the line options, similar to how it is currently set up/how people are used to seeing it.
Train Selection V4  ↓ 
Feeling unsatisfied with the intuitiveness of the filters, I brainstormed with a few UX professionals who recommended I look into having the "All Selected" and "None Selected" views be the same, as is often seen with filters. I played around with how selected lines would stand out (outlines, fills, glows, etc) and decided that opacity was the cleanest way to go.
They also mentioned it would help to organize the lines by color, and get rid of the check boxes. The most recent design is below.

See other projects:

Back to Top