Pod

Pod — Food Delivery for Lexington

I created a concept project to see what self-driving food delivery in Lexington, KY would look like, called ‘Pod – Food Delivery for Lexington‘. Rather than creating a figma mockup I created a prototype for people to test out ordering food from Lexington restaurants and then see the food travel as a ‘Pod’ delivery across a map of Fayette County where the food was picked up from.

I geo-fenced the map to Fayette County for this prototype. The app is a full featured React web application utilizing the Leaflet map library to create a real map experience. The app is a Progressive Web Application that can be installed on your iPhone and launched full screen without the browser chrome. Instrument Serif was used for the headlines and Inter for the rest of the app. The service worker for the app caches all the assets for the application so the application launches instantly after the application has been installed.

The biggest hurdle for me was getting the Pod to animate along routes that had turns with curves in them. Getting the interpolation between each waypoint to look correct was tricky, but after several attempts I was able to get it working as expected. The biggest struggle for the layout on iPhone was working around the dynamic island. I was able to research PWA safe area insets and use viewport units to get the layout to work edge to edge on the screen.

The screen explorations for the prototype are shown connected up from the start of the app experience through to browsing for menu items, checking out and then tracking the Pod in real time and unlocking hatch when the food arrives. The interface explorations for the design was set up in an infinite canvas of the screen as opposed to fully resolved mock ups.