Banner Mobile App

IonicFirebaseAngularHTML

Overview

Banner Mobile is an application that allows users to easily view registration information for a subset of classes at the State University of New York (SUNY) Polytechnic Institute. One of its main goals is to simplify the information found in the current Banner Web system.

Challenge

The current Banner Web System is outdated and cluttered. The system is difficult to navigate and inefficient, causing frustration for students who want to quickly view the classes they need to take each semester. Overall, searching for classes is time consuming and forces students to navigate through a series of screens. The challenge I set out to solve was to not only make a mobile version of this system, but to simplify the experience for students.

Mobile App Sketches

More Sketches Regarding My Plan for the UI

Expectations

At the beginning of this project, my first expectation was clear - to build a mobile app with Ionic because I had previous experience with it from a prior project. Plus, I knew that building a mobile app would be effective because college students are always on their mobile phones and they are the preferred method of communication.

My second expectation was more challenging because it involved extracting data from a database and I wasn't all too familiar with database development. Therefore, during my research, I aimed to find the easiest tool to use and learn within a few weeks.

Database Image

A Snapshot of Firebase Data


Process & Experience

The first step in the process was to create an App Design Document/Project Brief. From here, I worked through four project stages:

  1. Research
  2. Creating a State Diagram
  3. Sketches/Mockups/Prototypes
  4. Building the Final Application

I chose this approach because I found success with it from other past projects I worked on. Research is an important first step in any project. Creating a state diagram allowed me to determine the behavior of the application and its various states. Moving forward, I took a unique angle when I started to build the final application because I used Firebase, a newer, unfamiliar database tool. I ended up choosing Firebase because of its realtime, offline, and fast connection capabilities. Firebase also had a simple setup. Finding a simple tool was key because I had a limited amount of time to learn and implement it.


Outcome

Although this project got off to a late start in the semester, I was proud of the end result because I succeeded at extracting data from a database, which was difficult and frustrating at times. This project was meaningful to me because I challenged myself to learn an unfamiliar technology and step out of my comfort zone. Additionally, it was my last project before graduation.

Effectively, this project was a working prototype that would have had a bright future if I didn't graduate and was able to work on implementing it with school administrators. By the end, I had learned a crucial lesson which posed the question:

"Why overhaul a system that's not broken?"

My answer to that is projects built by students should be deemed important because they are innovative, unique, and have the opportunity to make an impact by improving academic and campus life.

Final Product Video


My Role

This was a solo endeavor. I was responsible for the app design document, sketches, UI design, coding, and presentation decks. Here are some of my further learnings:

  • bulletResearch is key
  • bulletExtracting data from a database
  • bulletWhen to ask other developers for help
  • bulletDefining a plan leads to success