During the previous semester in one of my classes, we were assigned a project where we had to design a mobile app used to order food from a local food truck. Together in teams of 4-5, we brainstormed, surveyed, designed, and iterated. The end result for all of us were functioning prototypes of these mobile apps, built in Figma. This project is a continuation of the last. We now had to take these prototypes and improve upon them once again, with the end goal of creating a responsive and intuitive web app version of a previous design. This time we were in new teams working with other teams’ designs.

The web app needed to allow the user to interact with the truck through the app, and accomplish such tasks as viewing the menu, ordering food, and learning the truck’s hours of operation and location. These tasks, of course, needed to be intuitive and simple to acomplish. The app also needed to be well designed, aesthetically pleasing, and function as perfectly as possible.

The goal of this project was to test, refine, and ultimately build a functioning web app for ordering food from a local food truck, “Forte’s Fresh Burgers.” My assigned role in the group was as a coder and data architect. I primarily acted as a front-end coder for the team.

The beginning phases of this project involved a lot of analysis and data management. We all went over the previous team’s final project and sorted through what we had and what we needed. Together we updated our User Personas and Journey Map. As a data architect, I sorted through our research, files, and assets and organized them into sorted folders. Additionally I sorted Forte’s Fresh Burger’s menu into a table that we could plug into a database our web app would eventually use.

As the design and code got underway, my tasks shifted towards front-end coding. I created and helped create various interactions for the app. These include the buttons, the cards used to display items in the user’s cart, the tip bar, the checkboxes, as well as partial work on the item counter for adding toppings to an order, and the bottom nav bar. There were a few other assets I worked on as well, but our team realized that we did not have the scope to implement them and ended up removing or downsizing those features.

https://alexisraya.com/idm216/final/

Linked above is the final product. It is a realized web app that can be navigated from home page to menu, to customization, to cart, to checkout. It is fully responsive to changes in view width for all standard breakpoints. The menu items, orders, and user account information are stored within a database, and can be edited and changed easily.

Some of my more complicated front-end work includes the code allowing the quantity and price of toppings and items in an order to calculate. This also includes the card showing the content and price of the user’s order in the cart. Additionally, there is the tipping interaction, which will unselect a top option if the user chooses another.

This was a project our team all left feeling proud of. As we reached the end of our testing, we gained firm confidence that our final product is well designed and satisfying for the customer to use. This project was a great challenge for me to improve my coding abilities, to step outside of my limitations and learn. Coding in a team is different then coding a solo project, you must be a lot more conscious of making your work legible and useful to someone who didn’t write it.

Given the benefit of hindsight, I would have had us organize a clear goal and scope from day one. While we worked steadily and effectively, the true scale of the project only made itself more apparent to us towards the end of our timeframe. However, for what we had I am ultimately satisfied with what we were able to create.