Overview
During my UX Design II course, I had the pleasure of being part of a team that created a fully functional food truck web application for “Tyson Bees” for our final project. As the main front-end and back-end developer and secondary project manager, I took on the challenge of leading the development efforts while also helping to manage the project timeline and team communication.
Our primary goal revolved around meticulous user research and creating an exceptional user experience. We aimed to develop an application that not only simplified the ordering process but also made it a delightful experience for our users. This involved extensive user research, iterative design, and rigorous front-end development to ensure the user interface was simple, intuitive, and efficient. Throughout the process, we engaged in thorough testing, gathered valuable feedback from our peers and instructors, and continuously refined our solutions.
Preliminary Research
To kick off the start of this project, we knew we needed strong preliminary research methods as a foundation for our web app. Our research efforts included the creation of user personas, moodboards, a critical path analysis, and user surveys. Through the research we conducted, it played a crucial role in shaping my responsibilities as front-end developer in many ways:
- User-Centric Designs
- Aesthetic Alignment
- User Flow Optimization
- Consistency & Branding
The Problem
One of the main issues that we identified for our client, Tyson Bees, was the lack of a functional web application for customers to use and place orders. Through research, we learned that with a food truck located on a busy college campus, many students were often pressed for time and unable to wait in long lines to order their meals.
This presented a significant challenge for the food truck's business, as it relied heavily on foot traffic and needed to serve as many customers as possible during peak hours. We recognized that developing a user-friendly and efficient web application could greatly improve the food truck's overall efficiency and customer satisfaction.
Goals
- Create an intuitive and user-friendly ordering system that would allow customers to easily customize their meals and place their orders.
- Develop a login system that can link the user’s orders to their account.
- Design a dynamic menu that would showcase all of the available meals and allow customers to quickly find what they are looking for.
- Ensure that the web application was fully responsive and accessible on a range of devices, from desktop computers to mobile phones.
- Test and debug the application thoroughly to ensure that it was stable and reliable for our client and their customers.
Development
Throughout the development process, I had to follow four crucial steps in order to bring our vision for the food truck web application to life. These steps were:
Step 1: Database Setup
During development, I faced a significant challenge in setting up the database. Initially, my database design was inefficient, requiring extensive troubleshooting and experimentation to find the most effective structure. After some trial and error, I restructured the database into four distinct tables: categories, meals, orders, and users. This restructuring streamlined the ordering process and improved data organization.
Step 2: Displaying Content
After structuring the database, I worked on displaying category and meal content on the web application. I began by creating a categories page, allowing users to click on specific categories to view associated meals, presenting details like the title, image, and price. I also designed an item details page, showcasing meal-specific information, enabling users to add special instructions. I implemented a cart page displaying items, total price, and allowing deletion. Users proceeded to the login page, followed by the checkout page for payment selection. Finally, an order confirmation page displayed the order number and a summary of the meal items in the cart.
Step 3: Ordering/Login System
After displaying content from the database, I focused on developing the ordering and login systems, a crucial yet challenging aspect of the project. My task was to sync user data with their orders effectively. I created a guest column in the users table to manage user accounts, distinguishing between new and returning users. Connecting users and meals tables with the orders table facilitated seamless ordering, and a status column in the orders table tracked order status (active or archived). These efforts, while detailed and demanding, significantly improved the ordering process and ensured a user-friendly experience while processing orders efficiently.
Step 4: Integrating Styles to PHP
To complete the project, I integrated the PHP code with the HTML and CSS created by myself and our secondary developers. This was a crucial step for a polished and professional appearance.
Integrating back-end code with front-end design can be meticulous, requiring close coordination. I collaborated closely with our front-end developers to ensure the site was styled correctly and functioned seamlessly.
We worked on each page systematically, integrating PHP functionality with HTML and CSS until the site was fully functional and visually appealing. It required effort, but our combined work resulted in a stylish and user-friendly website.
The Results
The Tyson Bees food truck web application project was a resounding success. While not a fully deployed product, it offered insights into the potential benefits of an efficient database structure, streamlined ordering process, and user-friendly design.
This project showcased how research can significantly impact development by guiding decisions that enhance user experiences. The focus in the next phase would be to refine these aspects further and prepare for full-scale development, with an even stronger emphasis on research-driven design and development.