In part 1, Nadeem Aboobaker talked about how the BART Backtracker mobile web app (www.bartbacktracker.com) came to be. In part 2, he talks about how he created the app.
It’s Alive!
After finally coming up with the idea for BART Backtracker, I figured the hardest part was behind me and all I had to do was build my awesome app. Simple!
I dove headfirst into coding, determined to improve my Javascript and CSS skills. To that end, I decided to do everything in Javascript on the browser, with no server-side code whatsoever.
I first coded a proof of concept app to make sure the backtracking information could be calculated. It used the results of BART’s real-time estimates API and an iterative algorithm to compare each possible backtrack train with each homeward train, in order to find the station where the two trains meet for a transfer. I had no idea if the algorithm was correct, so I made myself a guinea pig and used this prototype to backtrack on my daily commute.
After a week of successfully backtracking with the app, I was mighty pleased with myself and had visions of unfurling a “Mission Accomplished” banner. Just one problem: I still needed to make the app awesome and easy to use.
Making an App is as Easy as 3.14159
I took off my coding hat and put on my product manager hat. In an effort to specify how the app should work, I talked to my backtracking colleagues and asked how they backtrack. Their feedback ranged from, “You should charge for this app!” to “People will learn the secret of backtracking if you make this app!” What I gleaned from the serious feedback was that given the starting and destination stations, an awesome app should show when a backtracking train departs, what station to transfer at, how long to wait at the transfer station, and which homeward bound train to board.
Next, I needed a UI design to incorporate that feedback into an easy to use app. So I put on my user interface designer hat and recruited a designer colleague to help with the initial mockup. We agreed that information should be digested at a glance, by using minimal text and intuitive icons and making important information stand out. And since this was a mobile web app, effectively using the small screen size was key.
I then embarked on the hardest part of creating the app – evolving the design using an iterative process of:
- Mockup design
- Gather feedback
- Panic!
- Implement design
- Gather more feedback
- Panic some more
- Repeat until all issues are resolved.
I found everything from major issues that caused the entire design to be scrapped to minor issues with simple fixes.
The final design shows the backtrack train departure time as the most important piece of information, and uses BART map icons and colors that are familiar to BART riders to show the backtrack train, transfer station, and homeward bound train.
Everything is Awesome
In the end, I took 12 PTOn days, spread out over a few months, to work on the app. I definitely learned a lot! I got a better understanding of Javascript and CSS fundamentals and learned about Javascript data encapsulation, unobtrusive Javascript, CSS3’s Flexbox layout, CSS icon fonts, and creating SVG graphics. I also learned some invaluable non-technical skills related to product management and user interface design. And hopefully, I reached my goal of making an app that’s both awesome and easy to use.
My experience working on the BART Backtracker project was totally awesome, and I’m grateful to Salesforce for giving me this opportunity. And now with the fate of backtrackers in my hands, my plan is coming together nicely. First backtrackers, then the world!
If you’d like to work at an awesome company that encourages you to do awesome work, know that Salesforce is hiring! Visit http://www.salesforce.com/tech to find your #dreamjob.
Heading photo credit: Healthy T-cell. NIAID