For this project, we were to create an app to order food from a food truck. Our group was developing for the truck “Pete’s Little Lunch Box”, a truck on 33rd and Race Street that serves food and drinks, mostly to Drexel students, staff, and faculty.
Our team was comprised of 4 people, with the roles of Project Manager, Designer, Coder, and Data Architect. My role was the Coder, which included things like building out micro-interactions, creating pages, and arranging Javascript arrays.
For my task as a Coder, I had to create the site that housed the build for our app, the purpose of which was to learn to develop and build out bigger projects by working on a team with specified roles. Our app was built with the intention to be very simple and easy to use. In addition, when we began planning for the app, we decided to try using a method of storing and loading items that didn’t include PHP. Therefore, we decided to build our app using Javascript arrays. My main goal was to be able to order any item from the menu in a simple and easy-to-understand process and make sure everything on the app is functioning well.
To start, we built out a mobile-first, static design. This design was for the most part already built out from a previous project where it was the main focus, so I was able to get right to work on putting in pages. A challenge I ran into here was that the design was very specific and I sometimes would run into issues trying to figure out if the build that I made was following the design to a good enough standard. To help resolve this, at the end of this phase, I had a one-on-one review with our project manager who also had a big hand in the design. In addition to pointing out places where the design was inconsistent, she also recommended places where the design needed changes. This resulted in a look that was solid and after showing it to the rest of the team as well as our professor, we decided the design was good.
In the beta, we wanted to have some micro-interactions in as well as our database integrated into our lunch menu page so we can list out the items. All of this would be responsive up to tablet size, which had to be designed out (though the new designs were largely similar to the mobile size designs). This would be important because all of the data that would be used when we needed to build things like the cart would be stored here. This step went pretty smoothly because we actually built out some micro-interactions in the alpha. Because of this, I was able to spend more time implementing the arrays and fixing bugs.
In addition to this, our Designer and Project Manager were doing user tests to see if the process in the alpha build made sense to people who would likely use the app, as well as with our professor and another professor who is often involved in these projects. Because of this, I also focused on changing things that users had issues with. This mostly boiled down to things like font size, and generally didn’t take very long to fix.
The end of this process was definitely the most intense. This is where we implemented the database throughout the whole app, as well as building out all the microinteractions, testing users again with our beta build, and making all of our pages responsive for any size, which includes some laptop designs that are 2 columns instead of 1 colunm. This presented an immediate issue of getting all of this done in about 2 weeks. As the Coder, I took on the databases as well as some bug fixing while other members handled making the pages responsive. This made the stress and workload a lot less intimidating and in the end we were able to get everything done.
Our app starts on the menu page. For the main flow, you can choose an item that will take you to an editing screen. Then, you can customize the item, add notes, and then add it to your cart. When you’re done, you can click the cart in the top right corner to see what you have and, after editing or removing any items you need to and adding a tip if you’d like, you can hit the button at the bottom to go to the login page. You must enter something into both the username and password fields to progress here, though anything works. After “logging in” you will go to the checkout page where you can review everything about your order before finally placing it and going to the order details page. Here, you will see an animation of your order going through different steps to be prepared for you, as well as a time that you’d be able to expect your food to be ready and buttons to see your order so you can show it to the truck owners and contact the truck if need be (though it isn’t functional for the sake of not annoying the owners).
In the end, I would consider our project a success. We ended up with a project where you can order any item on the menu, and according to our user feedback it is easy to understand and easy to use. I was also able to utilize Javascript to store our database in arrays and use them throughout the app so the user has a great experience.
From this experience, I’ve definitely learned a lot about working on a team. For one, you need to be constantly in communication in order to make sure that everyone knows what’s going on, as well as to make sure you aren’t working on the same things as other people. We used Github to save our progress throughout the process, and so if two people worked on one page, there was a chance of having conflicts and possibly having to redo all of it. I also learned a lot about Javascript, mainly how to use it to send information from one page to another. On our app, we used localStorage, which stores strings on the clients side without putting any information into the link. This method also required a lot less setting up in my opinion because it didn’t need a config file or any messing around with things in mySQL. In the future, if I need to make a smaller database, I would definitely be open to using arrays again.