Peckish

Feeling peckish? Follow the pigeons; the best food tour guide in the city are the birds.

Comment

Inspiration☀️

Summertime is all about coming together with friends and family and enjoying everything the summer sun has to offer us. What better than delicious foods to bring together people of all different backgrounds and connecting them to the cultures of the world. With the warmer weather and people itching to pack their picnic blankets or just hitting the streets for a relaxing stroll, food cart vendors are all just as excited to be providing quick bites and casual eats for customers to munch on while they enjoy the outside scenery. And who else but the friendly NYC pigeons to follow these vendors around, attracted by the aromatic and delicious smells of the limitless food options. Thus the birth of Peckish.

While visiting street vendors is a popular and convenient activity for both locals and visitors alike, problems that arise for both customers and business owners are the lack of structure and organization causing great opportunities to be passed over. This led to creation of our mobile web application, Peckish, a platform for those to receive all the information they need in order to try out that food truck that’s been ever so evasive from their plans!

Design Research 🔍

We designed keeping our users in mind; our main priority was to address the issues we discovered during our user interviews. Our findings were as follows: good customer service, user reviews, and images of the food were all deemed important by our users. The biggest pain point our users had was an overall lack of information; users had trouble finding menus, pricing, location and hours of operation. These issues were addressed in the design in the form of a vendor profile page that includes a short business bio, their menu, rating, hours of operation, and location. We also included an option to find a vendor through a map in the landing page of our web-app.

In the discovery phase we sketched out a SWOT analysis which helped us identify our core competencies as well as some elements that we focused on to differentiate us from our small pool of competitors; like strong branding, well established UI, etc. Other UX tools we used included a customer journey map, affinity mapping, sitemap, user flow, competitive & comparative analysis, plus/delta analysis, etc.

What it does 🚚

Our minimum viable product is a mobile web-app that brings exposure to street food vendors/food trucks in the city. It would help support the small businesses and also help create a good experience for the customer with features such as:

  • Mapping & Locations of the vendors
  • Vendor Profile System & Filtering system for the vendors
  • Customer Profiles with a gallery and reviews and a collection of vendors by the customers to keep track of what places to go to

How we built it 🍉

After conducting user research, the UX/UI designers created a low-fidelity to high-fidelity prototype that the developers could use as a reference and created the mobile web-app with React, JavaScript, MaterialUI and, Pigeon-Maps

The final design is a Single Page Application built with React.js and React-router. We also used Material-UI to help us easily create and style components without having to spend much time on the CSS. It allowed us to easily set the layout of the project, and only use CSS to add personal styles. One of the core requirements of our project is to be able to see and choose vendors in your area from a map, to help us achieve that we used Pigeon Maps API to display the map and allow the user to interact with it.

The file structure is designed to make different sections of the project clear. The component contains all the components that take in props and display data, the data is our model which contains all the data we researched, and the pages contain all the different pages of the website. The developers also opened up new branches for different features and communicated effectively on time with each other to make sure we do not run into any conflicts.

For best user experience, the flow of the app was carefully designed to make the user flow clear and easy to understand. Best practices for styling and layout of the page are carried out according to visual design principles such as Balance, Emphasis and Unity.

Finally, we used Vercel to deploy our project online.

Challenges we ran into ⛱

  • The team originally consisted of UXUI Researchers and Designers and, we had a difficult time finding developers to join the team and, started to consider using the no-code resources that were provided by the hackathon before we found our current developers in our team 💕
  • This is everyone's first hack-a-thons and the first time collaborating with each other.
  • Collaborating with our developers to hone in on key features in this fast paced 48-hours.

Accomplishments that we're proud of 🏖

  • Original Branding; logo, style guide, brand theme, name, catchline, etc.
  • Creating a huge SPA project with multiple layouts and functionalities

What we learned 🌅

  • How to prioritize key features under a tight deadline
  • How to interact with developers and UX designers
  • How to communicate designs, user flows, and interactions to developers
  • We learned how to prepare a database of information that the developers can easily access
  • New technologies such as React, React router, and Material-UI.

What's next for Peckish 🗽

  • Refining the UI.
  • Adding in a “Food Crawl” feature
  • Adding more options to the filtering system.
  • Adding a backend server with a database to populate all the data.
  • Adding Framer motion for animation of components.
  • Advertising and Marketing our product!

NOTE We designed Peckish as a mobile web app. If you are using Chrome, please be sure to inspect the page and 'toggle device toolbar,' then select iPhone XR or manually input 414x816px ☺

Built With

Share this project:

Updates