Building the Charlotte Light Rail App
This is the story of the Charlotte Light Rail App. How, and why, we built it.
Why?
We’re Team Luna. We love Charlotte. We want to make it better. So we made this free app. It’s for you, and the community, to access the city on the Light Rail.
We hope the app inspires more people to use the Light Rail, so they can enjoy the city, as much as we do. South End and Uptown have a lot to offer. Plus, the Light Rail is expanding through NoDa, into University Area.
Problem
How do I ride the Light Rail? Where’s the closest station? When’s the next train coming? When’s the last train? How much does it cost? These are the classic questions for Charlotte locals and visitors.
Well… there’s an app for that!
Solution
The Charlotte Light Rail App offers a map-centric way to see your location, the closest station, when the next train is coming, full schedule, and answer quick questions like: “how much does it cost?”
How? — Our Tools
We built the app in React Native, a great Facebook technology. React Native let us bridge our existing knowledge of React, a Javascript library, to make a legitimate, Native, mobile app. This was an exciting learning experience for Team Luna, since we’re web developers. Now we’re mobile developers too.
Like any software project, we used a lot of other tools, like Mapbox, Xcode, Cocoapods, CodePush, and Firebase Analytics. We used Trello, Slack, appear.in, Sketch, Invision, and GitHub to stay organized.
Process
Our process to build the app was iterative. We did research, drew concepts, and started development early. Trello held our tasks. We combined asynchronous work with in-person “hackathons”. Yes! Lots of pizza, chips, beer, and fine wine. We talked in Slack. We had video chats in appear.in. We pushed code to GitHub.
Concepts and Wireframes
After identifying our list of primary features, we jumped into drawing our concepts with pencil and paper. We used the 3-fold method. Also called “crazy eights”. Take a piece of paper. Fold in half 3 times. That makes 8 sections. Draw an app interface in each of the smartphone-sized sections.
Version 0.1
After we had a solid concept, we started development. Our first working version used standard React Native components with plain vanilla styling. We developed independent of design, knowing that interaction and visuals would come later, after user testing.
Version 0.2
We quickly ran into our first issue with Version 0.1. We used Apple Maps to display map tiles and the Google Distance API to calculate distances and times. That’s not allowed according to Google’s fine print. So we switched to MapBox for both the map tiles and Distance API.
MapBox integrates well with React Native. It provides more development flexibility, and more API calls in the free-tier, where we hope to remain. The Charlotte Light Rail App is free. We will keep it that way for Charlotte, by keeping low operating costs.
Version 0.3
We purposely delayed high-fidelity design. Many of you probably think we’re crazy and backwards. We did this on purpose. We didn’t have a designer on Team Luna when we started development. And we didn’t do user testing on our initial wireframes. We knew design would evolve with feedback. Nonetheless, we finally made these more colorful high-fidelity mockups.
Applying these styles added zest to our development. It’s more fun to develop an appealing app, than mashing together plain vanilla React Native components. The app came to life!
User Feedback
We showed the app to friends for feedback. The feature that confused users most was the Full Schedule half circle swipe. First, it was not obvious. Second, it overlapped the iOS bottom swipe Control Center. It was poor usability. So we made the “swipe” to see the schedule into a clock “button”.
Submission
Of course, the app went through more iterations before submission. But 4 months, 500 man-hours, 12 hackathons, 8 appear.in sessions, 450 commits, 95 pull requests, and 16 branches later… we submitted to Apple! Submission was an exciting evening. One that we’ll all remember.
Version 1.0 — Release
Our first submission was approved by Apple, in 1 day. We spent a lot of time following the Human Interface Guidelines and avoiding common app rejection issues.
What now?
For you, download the Charlotte Light Rail App. Go enjoy the city. Visit South End. Travel Uptown. Get to the Light Rail stations with ease.
For Team Luna, we’ll maintain the app, spread the word, and encourage people to ride the Light Rail. Charlotte has a lot to offer. This is our part to help others enjoy the city.
Team Luna
At Team Luna, we’re committed to building useful apps, life-long learning, advocating for developers, and fostering the local tech community in Charlotte. We came together in the local meetups. Catch us at ReactJs, CharlotteJs, Docker, Python, Django, Skookum Tech Talks, and Nightshift.
