One of our team members recently picked up an online order from a local restaurant (Armadillo Willy's). He was surprised to see they were using a white board to list when orders were ready! The same day he walked by a different restaurant which was using an Excel spreadsheet to tell customers when their orders were complete!
While both of these are creative solutions in the face of this global challenge, we thought it showed that there was a lack of a cheap/easy to use order status software.
There is also a fundamental accessibility problem that has arisen as a result of the sudden reliance on online pickup. Visual information such as TVs or white boards is exclusionary towards blind people and those with vision loss. Audio only notices such as an employee shouting order numbers is exclusionary towards the deaf and hard of hearing.
"Is My Food Ready?" seeks to solve both these critical accessibility issues and help make managing online orders and takeaway easier than ever for small businesses. Through this we hope to make social distancing smooth and the quarantine a bit more smooth.
What it does
Our project acts as a standalone PWA enabling small businesses without the large resources of corporate chains to have a competitive order readiness software.
The business owner/manager first goes to our sign up page and enters some info about their store, while also listing their employees email addresses.
These employees can then login using google to access our employee dashboard. Here you can either manage orders, or access the customer facing display screen (intended to be put on a TV).
In the order management screen employees can enter information about an order, including the customer's phone number. When the customer's order is ready, they will receive a text!
The employee is able to mark orders as "Ready" once they are cooked. This will display on the TV view, customer's phone, and send them a text. Once the customer picks up their order, the employees can "Complete" the order, thus removing it from the screens.
The customer is also able to enter their order number to view information about their order on their own phones.
The TV view lists the status of all orders in the system. Whenever an order is ready the order number is read out-loud to help those with visual impairments.
How I built it
- We built our project as a PWA using react.js. Firebase acts as our back-end, storing restaurant and order data. We used the Twilio API to text customers when their order is ready.
Challenges I ran into
Power outages! Several of our team members are from California, and are thus enduring rolling blackouts.... Despite randomly losing team members for hours at a time, we were able to complete the project!
We struggled a lot with the front end since none of us are really front-end/UI focused developers. This however was a really good learning experience, and helped broaden our capabilities as programmers.
Fonts... For some reason it was a nightmare importing custom fonts into react.js. Thankfully we eventually figured it out, but it took a lot more experimentation than we ever expected.
Accomplishments that I'm proud of
We managed to get out project to complete functionality by the end of the Hackathon. We've each participated in a few blackthorns before, but often only end up with a partially completed project or bare minimum functionality. We were really happy therefore to have something nearly ready for production. There are of course features to add (as we'll detail later) but we were able to realize much more of our scope than before
Accessibility Improvements! We were really happy that we were able to build some solid accessibility improvements into our app. Massive corporations with very expensive custom POS systems still often fail to have things like Audible readouts or display boards, so being able to build something that helps those with disabilities was awesome!
We were really happy that we were able to have the status updates be texted to our customers. We think this is a great feature that plenty of the large chains don't even have.
What I learned
A lot more about remote work! All of us are in different towns right now, with 1000's of miles separating some of us. This was a very useful venture into learning a lot of the remote work tools out there.
Accessibility. We always try to think about ways our apps can be accessible, but since it was a core focus of this project we learned even more.
We learned a lot about front end/styling work in react.js. Most of us are back-end focused so this helped expand our expertise and make us better developers.
React! Some of us are very experienced in React by now, but for others it was one of their first big projects in the framework. Its a very useful framework so was helpful to get further experience for all of our team members.
What's next for Is My Food Ready?
Customization options for businesses. We want to let businesses customize the appearance of their order/TV pages to better convey their brands. Allowing companies to upload their own photos would also be very cool.
GPS detection of which stores/restaurants you're near.
QR code functionality, so that a customer can scan a QR code to find the status of their order.
Estimated wait time, automate purging of old orders.
Integrations into POS systems/ability to actually submit/revise orders.