How we built it: Markk emergency supply finder
Since the start of the COVID-19 pandemic, Mapbox has partnered with new and existing customers to support the creation of tools to aid response and recovery. One such project is the Emergency Supply Finder created by a team of developers at Los Angeles-based Markk, an app for people to share real-time information and reviews about places in their neighborhoods. Since its launch in March, the Supply Finder has helped tens of thousands of people find essential supplies. I (virtually) sat down with one of the creators, Sushant Joshi, to learn more about how they built it.
You were one of the first teams to create a supply finder for a US city during the pandemic — what inspired the project?
In March, we started noticing a spike in Markk user ratings reporting a lack of essential supplies at stores around LA. That was an early indicator that people were starting to stock up on essential items in preparation for the Coronavirus. We realized that we were perfectly placed to help share information about where there were supplies available, so we created the Emergency Supply Finder to make it easier for people to find essential items and help their neighbors stay safe by planning efficient shopping trips.
How did you manage to launch this new service so quickly?
Demand for essential supplies was escalating rapidly so we needed to build fast and get an initial prototype ready as quickly as possible. We had the ratings data coming in on our platform, and we had already been using Mapbox on the Markk app’s Explore page for over a year as well as in our native mobile apps. We knew that Mapbox GL JS could let us create an informative and visually appealing map in a very short period of time. Thanks to the documentation and interactive examples from Mapbox we were able to get a prototype working within 36 hours. Since then, we’ve iterated rapidly to improve the user experience based on feedback.
What were some key design decisions?
Our primary goal was to display data about essential items in an accessible format that wouldn’t feel overwhelming. We chose a map-based interface that presents information about the stores nearest to a user’s location. Using custom marker icons on the map was an intuitive way to indicate if stores had items in stock (a green cart) or were out of stock (a red cart). Another challenge was letting users search for specific items across multiple nearby stores. Because we had combined Mapbox with our existing VueJS progressive web app, we could easily add item-based filters and update the map to display filtered stores in real-time. Now users can select a filter for ‘water’ or ‘hand sanitizer’ and see only the stores where that item was last reported as being in stock.
How did you integrate the Supply Finder with your mobile apps?
We already had users using our Android and iOS native mobile apps to contribute information about the availability of essential items from their phones. We needed a quick and reliable way to share that information back to users in the app. But updating layouts and features on our native mobile apps would have required an update that would have taken too long. Instead, we used Firebase Remote Config to keep variables, assets, and targets dynamic along with a new Webview that could show the Emergency Supply Finder map view. With this approach, we could change text, image assets, and tap targets without needing an app release. Additionally, any subsequent updates we made to the main web map were instantly available on the native apps.
Do you have advice for other teams developing apps to help communities cope with and recover from COVID-19?
Don’t be shy about asking for support. As a result of the press coverage we got around LA as well as word of mouth, we saw a heavy increase in our traffic following the launch of Emergency Supply Finder — more than we had planned for. We saw that Mapbox was offering support to COVID-19 apps so we reached out about a partnership to keep the Emergency Supply Finder running, and we found people very willing to help.
What’s next for the Markk team?
Markk has always been a platform to share live information so people can make more informed decisions and feel connected to their community. As the COVID situation eventually improves, we want to be ready to help users get back into their neighborhoods. We believe in the power of community and want to channel that power to support local businesses. Towards that end, we are working on a new set of features for our app, including a redesign of some of our core experiences and making our map-based UI more accessible and interactive. Watch our website and Instagram feed for these changes in the coming weeks!
Want to build your own project to help people find stores or services near them? Check out our Store Locator tutorial. If you’re working on a project to support COVID-19 response or recovery, contact the Mapbox Community team about how we can help.
