Intro

Walk Around Nevada is the mobile version of the successful online version. See here. To make it more accessible to Nevadans, I was tasked to develop the mobile app and the asynchronous API. This app has been the most challenging app I’ve ever done. From planning the UX, developing the logic, learning the confusing workings of the online version, to creating an asynchronous API to creating all the maps and icons.

Below is the dashboard where all the most important features of the app exists. It was really hard to put it all together. The layout of the online version was meant for desktop. I had to make sure users know their statuses such as how many miles they’ve walked over all, how many miles have they walked today, what route are they taking, how many miles have they walked the route and how many miles remain to complete the route.

This dashboard shows custom made maps. Each route has its own map. The map serves as the user’s progress bar while taking a virtual route. The dashboard also gives options to enter how many miles the user has walked. They can also count their steps and enter them. The app also has a way to convert any minutes of physical activity into steps which is converted automatically into miles. A few examples of these activities are Zumba, Badminton, Basketball, Mopping the house, and so on.

If I could, I’d redesign the dashboard with a different look. It was my initial plan. But it was difficult for the people who asked for the app to understand the changes, since they wanted it almost exactly like the online version. But the online layout cannot always work on mobile. So this was a bit of a struggle.

The bottom of the dashboard has the Pitstop information. Its changes depending on the number of miles the user has on the current route. Every virtual route has its own Pitstop for some miles that the user has attained. Aside from the custom map to show progress, the Pitstop data helps inform the users some history and/or destination information that actually exist in real life. One thing I’d like to improve on this is to have a more interactive Pitstop. Since it’s at the very bottom, most users might not realize it’s down there.

Below is the side menu to show the other options.

The users are given the option to change their routes. There are only three virtual routes. Each route varies in data and total miles. When a user changes a route, his/her miles gets transferred to the new one. Since each route has different lengths, the user may or may not finish their current route. For example, if the user has 100 miles and s/he decides to transfer to a route that only has 78 miles in total, then s/he simply finished that new route.

The Hall of Fame was created to give recognition to users that keep up with their physical activities. The users are listed from the number of times they’ve finished 1442 miles. This feature has a form for a user to fill out to request to the join the hall of fame. I built the API to accommodate these features along with automatic email messages. The admin gets notified via email of the request form and she approves/disapproves it. The icons took about two weeks to create. The hardest part was figuring out an algorithm about the sequence of the icons.

Walking Groups is a way for users to promote their physical activities or share their physical activities with friends and family. People get to form groups and their miles with be added as one group.

Since this app is per user, I had to create a login system. So naturally I had to make a registration system and password retrieval mechanism. The password retrieval mechanism sends automatic email to the user. These features are very API intensive. The logic are all very confusing. But I made them all to work. Most importantly, these forms have AJAX validation in the Angular Way.

Below are the app icons. The first one is for iOS. The second one is for Android. The Android icon was designed to have a transparent background so that Nevada map looks like it’s floating. The blue background that’s in the iOS isn’t really necessary. But I had to put it there because a white background in iOS doesn’t look good. The Nevada map was a ready made vector shape. So I didn’t really spend much on making the icons. Instead, I focused more on app store requirements.

Below are the custom maps. They are based on real maps. Instead of using screenshots of real maps, I had to create them from scratch on Adobe Illustrator because I needed them to be .svg. The purpose to have .svg is to make sure that the maps scale without loss of quality. It was extremely time intensive when making these maps. I had to re-learn and focus on using the Pen Tool. The Pen Tool is very difficult. But in a way, making these maps were exercise for me. For each Pitstop, I had to arduously find out the coordinates to make sure I show the dynamic Pin Point every time a user enters their data in the dashboard. The Nevada Loop has 800 and more Pitstops. It was very time intensive.

The splash image is very simple. As I said before with the Nevada map, all I had to do was resize the shapes in Adobe Illustrator and added the grant credits.

What I learned by making this app

· Before this app, I was dabbling a lot with NodeJS as a hobby. So I was happy that my boss permitted me to develop the API in NodeJS. This was the second time I had to make an API for an app. The first one was two years prior, for Chimera:FEq. The reason why I really wanted to know NodeJS was due to JavaScript’s asynchronous nature. I never knew how to make asynchronous APIs before NodeJS. Fortunately, it’s the kind of API this app needed. So it’s definitely a beneficial experience. But not only did I learn NodeJS pragmatically, I also learned how to connect NodeJS with MySQL and use PM2 for keeping the NodeJS server alive. The challenges were almost overwhelming but beneficial.

· I learned how to use Adobe Illustrator’s Pen Tool better. For all the custom maps, I had to make sure that curves and corners were as precise as I could make them. It took me a while to finish them and I thought my eyes were going to go cross-eyed since I kept staring straight at the screen every day.

· Since the maps are rendered via HTML5 Canvas, I had to learn how to programmatically make canvas responsive to the size of its parent element. This way, the map would fit on different screen sizes.

· I learned to use i18n library for Angular for the Spanish language translation options.

More Tech Details

· The internal Admin app was re-created from the PHP Legacy app into a new one SPA using VueJS, Vuex, Vue-Router, Axios and Bootstrap.