Problem Statement

Shore Line East’s online Trip Planner does not produce an optimal user experience. It involves too many clicks (a minimum of seven). It doesn’t allow the user to customize preferred stations. And when it returns results, it obscures relevant information inside a small modal window.

There has to be a simpler, easier way!

Design Notes

When designing this app, I prioritized efficiency of the schedule search process. Specifically, my goal was to minimize the number of required clicks.

I noticed from my own user behavior that I was taking the same one or two trips over and over. I assumed commuters would have the same user experience. So I allowed the user to specify favorite routes to minimize future clicking. Once a user has specified a favorite route, the route shows up automatically when they open the app, and subsequent schedule searches only involve one click!

I also noticed I usually searched for today’s schedule or tomorrow’s schedule, so I hard-coded these favorite searches into the user interface, while at the same time allowing the user to optionally search a custom date.

Note: I would consider using NativeBase components in the future, but I also have my eye on Twitter Bootstrap components making their way into the React Native ecosystem. I look forward to evaluating Twitter Bootstrap components for upcoming projects.

Development Notes

While developing this Android app, I learned how to use React Native’s AsyncStorage functionality, which accesses a MongoDB-like NoSQL datastore that comes pre-installed on Android devices. Specifically, I used it to store a user’s favorite transit routes so they wouldn’t disappear after the user closes the app.

These calls to the local filesystem require logic to handle asynchronous responses. They return Promises and can be chained. To avoid JSON parsing errors, make sure to use JSON.stringify() before storing the object and JSON.parse() after retrieving it.