Mobile First: An Example of Why It's a Good Idea

I have recently run across a situation where I have experienced what can happen when the site design and functionality of the "main site" is not informed by the thinking that was put in on the mobile site. What follows is the examination of a user experience for someone trying to figure out when the next green line train will leave from the DART rail station at St Paul in downtown Dallas and when it will arrive at the Lake June station.

Desktop Experience:


Here is the DART Home Page:

If the images make it hard to follow, I encourage you to follow along in a separate browser window, you should start HERE.

You will notice that there are two obvious paths to find out what we need to know. The first is the global navigation element called SCHEDULES & Maps, the second is the DART TRIP PLANNER widget on the right side of the page.

Since the widget has a start and end point and a time it seems like the best choice to start our search so let's fill it out like we think it should be.

You can see we have put in the names of the stations we want to ride between and selected the time we think the next train could depart. There is really not a way to ask for the next train, but picking a time reasonably close to now, that gives us time to get to the station, should get us close, right? So here is what happens when we click PLAN IT:

It seems that there is a need to be exactly specific in our station names for the search. So now we are presented with handy drop downs that guess at what we meant. Note that there has not been a way for me to declare I am looking to ride the green line DART rail. So, let's correct the search parameters:

Ok all looks well now we can Get Trip Plan:

Ok, so I guess that is helpful. I now know that there is a green line train leaving at 1:51pm that arrives at 2:17pm. I also am presented with two trains it appears, red and green that leave at 2:01 and arrive at 2:37 and some numbers (I assume are buses) and a green train that leave at 1:51 and arrive at 2:37. Feel free to click the Details button if you are following along at home, but I think technically we have accomplished our task. I just hope after all this time it isn't too late to catch that 1:51 train....

So what if we took the Schedules & Maps route?

Above is the center column of the Schedules page. This looks promising, there is a green rail schedule listed.

Clicking on it gives me what look like two options. I can get a weekday schedule going south or I can look at travel times between stations. Let's try the schedule first:

Oh boy, looks like a train schedule alright. Once I find the St Paul column and scroll down to around 2:00pm I can see the trains that leave around that time and when they arrive at Lake June. While annoyingly hard to read, it is usable and provides me a clearer picture of the green line trains than the trip planner did.

What about the travel times chart:

A handy PDF file that takes an additional click I have not pictured to get to for choosing your station. What is shown is the red line but scrolling down shows you the green one. For our purposes though you can see how it works.It basically shows me when a train leaves for the last station going each direction. Somewhat helpful, but more confusing that the more content dense train schedule and not as much information (no idea when it reaches MY stop).

So, there you have the web experience for the desktop user. Happily, DART has provided a link to the mobile site on the main site so we can all see how it works without worrying about phones and data plans.

Mobile Experience:
So here is the landing page for the mobile site:

As you can see by the already visited link above, there is a specific link to Point to Point Schedules. That sounds promising:

Clicking that loads the above page which gives me a clear drop down for Rail:

 

Clicking Submit brings me to this page:


As you can see here I can select the direction I want to travel. the day of the week, and the general time period. This gives me:

Which allows me to choose the specific stations I am interested in. Once I submit them I get:


































Wow, how handy is that? A nicely formatted table that show me departure and arrival times from St Paul to Lake June.

Conclusions
I think the task I set was a pretty common type of task. I mean, I discovered it from trying to perform it myself out of necessity. The team that developed the mobile experience clearly had two things in mind:

1. Quick Load times: This is an issue on mobile and you ought to go through both experiences on your desktop to see how truly optimize the experience is on the mobile side. A lot to be said for minimal text, form fields and no graphics to speed things up. 
2. Focus on the Task At Hand: Cut through all of the craziness and give the user a clear path to what they need. Yes I had to select options on multiple pages to get to my final table, but see point 1. It all loaded quickly and was clear n what inputs were required and the results are by far the easiest to comprehend and most complete.

I use this feature all the time now on my phone. I do not even bother to try and check this on the web site. Although once I discovered the mobile site link, I would probably do it that way if I needed to. 

Clearly, the main/desktop experience could benefit from this functionality. If the site had been designed mobile first, I think the main site would be a lot more functional and user focused. 

So, when it comes time for a new web site, whether it be brand new or a redesign, think mobile first. Solve your users' problems and answer their needs there and let the focus that the platform requires guide you when you think about the desktop experience. Even if you are designing a "fluid" or "responsive" site, your thinking and your users will benefit from thinking small to big.