.png)
Peckish
Project Type:
Mobile Web App, Branding
UI Designers -
Crystalyn Choong: Lead UI Designer
Jia Wang: UI Designer
Lloraine Umamos: Graphic Designer
UX Researchers -
Jonathon Antonio: UX Researcher
Luisa Rincon: Lead UX Researcher, UI Designer
Developers -
Harry Qu: Lead Developer
Eli Zevin: Developer
Ofentse Moeketsi: Developer
Team:
Project Brief
My team had 48 hours to create a hack for the Freyhacks hackathon. We designed a mobile-web app that allows users to find street vendors in NYC through multiple elements such as a map, taste categories, trending vendors, etc.
Project Outcome
This project was submitted to the judges, unfortunately, the code was unfinished at the time of submission. However, we got great feedback and the design received a lot of love from the judges and other hackers during its presentation.
The Challenge
Those who are familiar with NYC are aware of its amazing street food culture which shines the brightest during the summer. However, it is difficult to track down street vendors because they constantly move locations.
We decided to create a central source of street vendor information to...
-
Make it easier for everyone in the city to enjoy its street food culture to the fullest, without all the unnecessary obstacles.
-
Help local street vendors who have been impacted by the pandemic.
Our Goal
Create a platform that serves as a central source of information where users can find the vendor's up to date location, menu, and hours.
Problem Validation & Social Impact
What are the social benefits Peckish creates?
User Benefits
The users will be able to support the community’s economy, have a selection of delicious and affordable food available to them, and have better experiences with street vendors because they have verified information prior to visiting their stalls.
Street Vendor's Benefits
Street food vendor’s businesses will be positively affected by the incoming traffic created by the application.
Street vendors are an integral part of urban economies in America, offering easy access to cheap food options to the public. Because street vendors sell affordable goods in small quantities, they offer the poor customer access to otherwise unaffordable goods. [1]
Users & Scope
Who are our users and what is the project's scope?
Users
This application has two types of users: street food consumers who are looking for verified street vendor information and street vendors who are looking to provide their information to their customers through our application.
Due to the time constraint, the team decided it would be best to focus on the street food consumers and create the vendor database with dummy data.
Scope
This is everyone's first hackathon and the first time we collaborated with each other so we had to quickly establish expectations for the outcome of our project. We had to determine how extensive our solution will be and ultimately it was decided that we would move forward with the creation of an end to end design. I am so happy we made this decision because I was able to learn my own strengths and weaknesses and challenge myself throughout those 48 hours.
Challenges
Issues I ran into
Our developers were from all around the world and lived in different time zones from the rest of the team, the design team's time was restricted so that the developers had sufficient time to code. I had to make sure I worked in an efficient and timely manner to create a solid foundation of research for our design.
-
I made sure to use my time effectively by selecting the research tools that were most effective for this project so that our design had a solid foundation of data to stand on.
-
I set in place for myself a research strategy so that I could be as effective and efficient as possible in my work.
-
I wanted to know a little bit more about the market so I conducted a SWOT analysis before interviewing our users and after the interviews I created a customer journey map to study our users behavioral patterns.
-
Research & Explanation
What methods of UX research will I use to learn what the user needs and how do I employ those insights in the design?
-
I conducted in-person interviews to gain perspective from members of the community and figure out the best approach for this issue via our design.
-
I also conducted A/B testing, but did not receive conclusive results.
Goals
We had 48 hours to deliver the final product; our main priority was to address the issues we discovered during our user interviews. We found 5 users that fell within our provisional persona and interviewed them with 2 goals in mind.
-
Identify user pain points in relation to accessing street vendor's information online
-
Find the best method of delivery of vendor's information
Findings
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 the overall lack of available information online; 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 & prices, rating, hours of operation & location, customer reviews, and a gallery of the food they sell on their menu. We also included an option to find a vendor through a map in the landing page of our web-app.
1.
The map icon navigates to a map of NYC where vendor locations are shown
2.
Selecting a pin will bring up the vendor's information.
3.
The pop-up previews a brief description of the vendor as well as their menu. The profile button takes them directly to the vendor's profile.
4.
The user can add the vendor to their bucket list, view a gallery of pictures of the food they sell, leave a review, and access their menu & hours of operations
The Solution
We designed a mobile-web app that allows users to find street vendors in NYC through multiple elements such as a map, taste categories, and trending vendors.
The Solution: Live Site
https://www.peckish.tech/
NOTE: We designed Peckish as a mobile web app. If you are using Chrome on your computer, please be sure to inspect the page and 'toggle device toolbar,' then select iPhone XR or manually input 414x816px.
Reflection & Next Steps
Design is an iterative process. There is no end point.
Reflection
I accomplished so much in 48 hours. I learned how to prioritize key features under a tight deadline, how to interact with developers and how to communicate designs, user flows, and interactions. I also prepared a database of information that the developers could easily access and as a result, got exposure to new technologies such as React, React router, and Material-UI.
On a personal level as a designer...
-
Sometimes perfectionism needs to give way to a broader solution when time is restricted. This is something I struggled with in the beginning as someone who likes to look at all perspectives, but I came to understand that sometimes restrictions are necessary to get a solution to the user.
-
I create my best work when I create a strategy to approach my deliverables and then work in sprints on each element and allow myself to reserve time for ideas and other possible options at the end of the sprint.
Next Steps
I would be interested in continuing to refine the UI so that the design is ready for marketing. In terms of additional features and elements, I would like to test the addition of a "food crawl feature'' which was mentioned in some of the user interviews but unfortunately we could not incorporate into the design due to time limitations.
Although our project took place over 48 hours, I came away from the experience with a better grasp on working under pressure on a tight deadline while also communicating and executing design research and plans.
