Design-thinking to make farmers markets more accessible

Learning on the go at Dev Bootcamp’s 2016 civic hackathon

Image for post
Image for post

I paired with three other developers at Dev Bootcamp’s 2016 hackathon to build an app that makes farmers markets more accessible. We used the US Department of Agriculture’s farmers market API to help people in the Bay Area find their nearest farmers market. You can view our code on .

Team

  • AJ Grande — Google Map + USDA APIs and jQuery
  • Khalma Phimmachack — GitHub and API pro
  • Simon Situ — Google Map + USDA APIs and jQuery
  • Clayton Hopkins — Pitched idea, UI Design, HTML/CSS

Tools

  • Sketch App: I lead design-thinking for the group and mocked up wireframes using Sketch.
  • HTML/CSS: I contributed all HTML, CSS, styling, and wireframes for the project. I coded vanilla HTML and CSS from scratch.

Timeframe

12 hours on Saturday, April 9, 2016.

Results

We were a finalist (out of 12 teams) and won “Best Use of a Public API.”

We used the ‘s public API for farmers market data. For the minimum viable product, we leaned on the data for name, location, hours of operation, products available (goods for sale at the market, for example meats and fish, etc.), and what government programs (food stamps) were accepted at each farmers market.

Why not a mobile app?

Focused on the general Bay Area population as well as folks relying on food stamp programs to buy groceries, we wanted to build a responsive web app to make the site more accessible. Internet access at public libraries, for example, is accessible to more people, as opposed to limiting the user base to folks with smart phones.

Process

Whiteboarding and brainstorming how to use a public API for a civic-themed hacakthon. I pitched using to the team, and we dove into the data to see what we could work with to build our MVP.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Wireframes

I used Sketch to whip up a web app homepage. Priorities included building an interactive map to help people find the closest farmers markets. We wanted people to click or hover (on web) over pins to quickly assess hours of operation, location, and goods available.

Image for post
Image for post

This second interaction showed early thoughts how we would display additional information about each farmers market.

Image for post
Image for post

Building the minimum viable product

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Reflections

With more time, our team wanted to focus on better search capabilities for future iterations. For the general population and folks using food stamps alike, we wanted our app to give people to access to local, affordable food seven days a week. To accomplish this, we wanted to make it easy to plan your week by seeing a calendar view of when farmers markets are open, thus decreasing people’s reliance on 24/7 Safeway and other chain groceries.

Image for post
Image for post
The final product, zoomed in screenshot showing the detail view with information about a specific farmers market.

Thanks for checking out our work. We had a ton of fun and learned a lot by pairing on this project together for 12 hours.

Product designer focused on UX/UI and user research (he/him)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store