TRU Android app (Winter 2014)

Phase 1...

I learned how to use the Google Maps API so that I could to embed a map into an app. This part was easy. What I found myself spending far too much time on, was the UX of the app. I was having a hard time accepting the hardened corners, default configurations, and flat colours for the buttons. That, and I was not very experienced at PhotoShop for trying to modify images to what I felt would be pleasing to the eye.

The original app was done for a Nexus 7, whereas the screen shots have been taken off a Nexus 5, resulting in the icons at the bottom of the screens being compressed into each other in the screen captures. ☹

Splash Screen
Splash Screen
Main Screen
Main Menu
Campus Buildings
Buildings
Food Locations
Food Locations

As you can see, nothing fancy, very basic functionality, ugly images...

Then onto...

Phase 2...

I decided to change the format of the app itself.

What I found challenging was trying to get the walking directions in the app. It was very easy to add the functionality to show directions, but this opened up Google Maps on the phone. I could not get the polylines to work inside my app! So for testing purposes I used a 3rd party API until I could get the functionality to work through the Google API.

Screen shots of phase 2.

Splash Screen
Splash Screen
Main Screen
Main Menu
Search
Search
Campus Buildings
Buildings
Food Locations
Food Locations
Directions
Directions
What changed?
  • Splash Screen
    • I changed this screen as per request of TRU Student Engagement Centre.

  • Main Menu
    • I took away the initial buttons for selection and opted for a straight view of the campus map.
      I added a search button to the bottom of the screen to allow the user to search for what they choose.

  • Search Functionality
    • The user has the ability to enter in the location that they would like to find.
      Or to choose from a location in a list.

  • Campus Buildings and Food Locations
    • I removed the simple pins and added icons that are specific to the type of searched for item.

  • Destination
    • When a location is chosen (or double clicked on the map) the polyline direction is provided. Additionally, the mid point between the two locations in centred in the map.

Other Changes
  • More Button
    • I add this button to hold options for:
        added option for changing the layers in the map
        added option for direct 'Home' screen
        added option for contact
        added option for about app

  • Removed the app title bar from the top of the app

  • Rounded the corners of the whole app

Phase 3...

After these changes were made I spoke with the Marketing Department at TRU. They had a few requests for changes if they were to promote the app through the University. Fortunately, they provided some mock-ups of what they wanted, so the changes were easy to see...

Splash Screen
Splash Screen
Main Screen
Main Menu
Search
Search
Location Info
Buildings
Directions
Food Locations
  • A few slight design changes.

  • The use of a navigation drawer for the search functionality.

  • Some new things to learn about the Maps API.
But then... Eclipse had a software update and all hell broke loose. Not one app that I had previously created would work. Every app was riddled with errors!
So I did what any sane person would do... I downloaded Android Studio, which was still in Beta, and tried to transfer my projects to that.
By this time, the winter semester had finished, summer courses had started, and home life had taken priority. I found another student that was interested in advancing the app, provided them with all documentation and files for the project, provided support while they caught up on the features, and turned it over to them.