-
Cover
-
Landing Page
-
Log-in Page
-
Sign-up Page
-
Create a Picnic
-
Home Page
-
Restaurant Page
-
Order Page
Inspiration
Many undergraduate students in the U.S. turn to the convenience of food delivery apps to fuel themselves during the school year. These food delivery apps, however, are notorious for their high service and delivery fees. In the University of California alone, “40 percent of the student body… come from low-income households”. Picnic aims to Cut Costs, Not Cravings for university students across the U.S. by promoting an innovative approach to ordering food.
What it does
Picnic is an app that allows users to create group food orders from local restaurants. With Picnic, users can create a “picnic” by selecting a restaurant and establishing a pickup location. Other users can browse currently open picnics and choose to place their own orders from the same restaurant, with the same pickup time and location. By consolidating orders into a single pickup, Picnic makes food delivery more affordable and sustainable, while also incentivizing faster and more efficient delivery.
How we built it
Creating a user flow diagram helped us prioritize the user experience and visualize how our ideas fit together. After refining our user flow map with a First American Senior Business Systems Analyst, we kickstarted our project.
Our team split into two subgroups: programming and UI/UX. The standardized use of Figjam and Figma was the foundation for Picnic’s UI/UX, and it was where we created our wireframe and mockup with definitions for typography and icons. This allowed us to communicate with each other and understand the final vision we were trying to achieve.
Meanwhile, the programming team finalized the tech stack and began development. We utilized NodeJS to download and unpack SvelteKit, Bootstrap, and React, enabling us to quickly bring Picnic’s interface to life. In particular, each team member worked on different pages of the web app, merging it all together in the end with GitHub.
Challenges we ran into
With such an ambitious and multi-faceted project, deciding implementation priorities was crucial to finalizing our project in limited time. By pivoting mid-way to developing a working demo of our project rather than a fully-functional web app, we were able to showcase our ideas of Picnic while maintaining realistic goals and a manageable workload.
Accomplishments that we're proud of
We are proud of designing a visually appealing and user-friendly mockup, implementing an interactive bottom navigation bar and cards, and effectively dividing work among team members, including two who were participating in a hackathon for the first time.
What we learned
Through this hackathon project, we learned the importance of carefully considering the scope of our ideas, as even seemingly simple concepts can be complex to implement in a limited time frame. We also learned the importance of clarity in terminology when designing a user-friendly experience. Finally, our team explored technologies that we were previously unfamiliar with: SvelteKit and Bootstrap to simplify frontend coding and React to access online libraries with pre-built components.
What's next for Picnic
In the future, we envision GPS tracking for a seamless ordering process, multiple restaurant options in a single picnic for variety, and integration with restaurants’ data for up-to-date menus. This way, Picnic’s reach can be expanded beyond UCI. We would also like to include profiles for delivery drivers, allowing Picnic to become a standalone app.
Log in or sign up for Devpost to join the conversation.