UI/UX Case Study

An App that Closes the Gap Between Customer and Farmer

Two screens showing screens of local farm products including eggs and flowers

Background

Sometimes it’s hard to find places to buy locally-grown foods. If you are like me, it can be difficult to predict what is available at the farmers market on Saturday since you usually have to show up and browse before you see what’s available. With 147,307 farms selling direct to consumers in the USA from which $8.97 billion is generated every year (2020 USDA Local Foods Marketing Practices Survey), one would think it would be easy to locate a local farm that wants to sell direct-to-consumer but this isn’t always the case.

Problem

It is difficult to locate local food events, places where local food is sold, and farms that sell direct-to-consumer.

Solution

Create a digital product that connects customers with locally grown food by providing a searchable database of local farms and events, and an easy way to make purchases.

Process

This project was completed over a 6-week period. The first 2-3 weeks were spent conducting research, developing the MVP and project direction, and the remaining 3-4 weeks were spent designing and prototyping the product.

Role

Product Designer
UX Researcher
UX Designer

Team

Just Me

When

2022

Timeline

6 Weeks

Context

Passion Project

User Research

I first determined that there were two user groups that needed to be evaluated for this product; local food customers and farmers selling direct-to-consumer. I conducted user interviews with these two user groups and released surveys on social media which yielded 120 responses. I also performed a SWOT analysis of competitor products in the local food market space.

Data from interviews, survey responses, and SWOT analysis were compiled and trends were determined using affinity mapping. From these trends, key findings were established for both farmers and customers.

To better understand the users’ needs and frustrations personas were created based on the research findings and traits from individuals interviewed and surveyed.

Key Findings

My initial hypothesis that customers find it difficult to find local food was not disproved. However, something I did not expect that plays a big role in this design, is that customers like to know what products are available before going to the farmer’s market or to the farm stand. 

The main issue for farmers is that they find it difficult to effectively communicate with their customers and would like a more convenient way to stay in touch with their customers.

1.

Customers find it frustrating when they don’t know what locally grown foods are available from an on-farm store or event like a farmer’s market

2.

Customers don’t like to search for individual farm information online and on social media

3.

Customers are frustrated when they must travel to multiple locations, long distances, or at varying times to purchase locally-grown food

4.

Farmers would like an easier way to update customers about any changes to their schedule, product availability, orders, new products, etc.

5.

Farmers find it difficult to manage their product supply as demand for their products can be variable

User Personas

Shannon is a busy mom and real-estate agent who likes to shop at the farmers market but likes to know what produce is available before she arrives there A persona of Jared, a small farmer who would like to sell more produce and reach more customers

SWOT Analysis

SWOT analysis of competitor apps like Simply Local, Farmish, and GrownBy

Solution

After understanding the users’ needs and frustrations and looking at competitor market trends, I developed the MVP (minimum viable product) and core features of the product. It made sense that the primary version of this product should be in a mobile app considering many customers are shopping for food using an app (InstaCart, Clicklist, Wholefoods through Amazon Prime, etc.). Farmers and especially small farmers have extremely busy schedules so they need a product that can be accessed on the go so the farmer interface is also primarily a mobile app.

Information architecture and user flows were created to organize and guide the design process.

Wireframes were made starting with low-fidelity and mid-fidelity initially. Additional iterations were completed, increasing in detail, finally ending with high-fidelity wireframes.

Some small usability tests were conducted on key pages. These usability tests yielded a few changes to the design.

MVP

The app will connect customers and farmers by equipping customers with an interactive map, a listing of local farms and sales locations, and the ability to purchase within the app. 

Local food producers can communicate with customers through the app and create and update inventory through notifications and messages.

Core Features

  • Mapping and listing of local farms and food producers, and locations where local products are sold
  • Payments are made through the app
  • Customers will be able to see what and where inventory is available, and how much the product costs
  • Selection of pickup or delivery service options
  • Chat feature available for customer-producer communication
  • Farm community feed
  • Producers may send alerts through the app to customers about changes to orders, specials, new products, etc.
  • Producers create and update farm profiles and inventory

Customer Sitemap & User Flow

Site map of customer app including home screen, favorites, purchases, messages, and account settingsCustomer user flow and how one might use the app by finding a product or farm, setting up an account, and purchasing the product

Farmer Sitemap & User Flow

Site map of farmer app including pending and past orders, inventory, communication, and account settingsUser flow of how the farmer might use the app including updating the farm profile and inventory, and fulfilling orders

Wireframes

Stone's Throw Wireframes Low to High Fidelity

User Testing

Time did not permit full-scale usability testing, though some small usability tests were conducted on key pages. These usability tests yielded a couple of changes to the design.
Mid-fidelity wireframe of customer home screen and high-fidelity wireframe of the home screen with the search bar added after user testing

Customer Home Page

The initial design did not include a “location” on the home screen. Users found this confusing as they did not know where “local” was. Adding a dropdown list of locations at the top of the home page increased clarity for users. It also allowed users to have multiple areas from which they could view results. This would be a great feature for customers who are looking for local food events while they are traveling on vacation, or in other areas they frequent.

Mid-fidelity wireframe with send notification button and high-fidelity messages-notifications tab added after user testing

Farmer Communications Page

The original design for the “messages” page had the potential to cause confusion for users as the design was not a familiar layout and had an unclear CTA (call-to-action). I added two tabs at the top of the page, one tab for managing direct messages and the other for managing push notifications. This seemed to clear up the confusion and users seemed to understand this page better.

Style and Branding

The overall style and brand of this app is a slightly modern, natural effect. I wanted to preserve the natural, bucolic feelings of local food while also appealing to a modern audience. The design is centered around photographs of products and farms so I created a design that would showcase the natural colors and patterns of food.

Stone's Throw as a Name and Brand

After going through many (20 or so) different possible names for this product I chose “Stone’s Throw” as it accurately described the essence of the brand; finding food that is grown nearby. It was perfect for this product and concept as it has undertones of country life and is also a measurement of proximity. I came up with the tagline “Local food is just a Stone’s Throw away.”

A Stone's Throw banner showing freshly picked tomatoes

Wordmark & Logo

The wordmark is made using the font MultiDisplay as a base. MultiDisplay is a sans-serif font with a small amount of flare that appeals to a wide audience.

The charismatic yellow beet in the logo is representative of something you might purchase from a local farm and the white line leading to the beet is the path one might take while finding local food and farms.

Stone's Throw wordmarkPlus signThe Stone's Throw yellow beet logoStone's Throw wordmark and yellow beet Stone's Throw logo

Typography

Open Sans was chosen as the font for the product as it has a more modern, clean appearance, and has high readability at different type-scale and weights.

Opens sans font with font sizes and font weights used in the design

Primary Colors

Since this is a photograph-heavy design that showcases products and farms I wanted a color palette that would complement the natural color of foods and the bucolic feelings that are often associated with local food. The green and off-white primary colors emulate nature and sunlight.

Green
CMYK 17, 0, 18, 39
RGB 113, 156, 109
HEX #719C6D
Light Yellow
CMYK 0, 1, 3, 1
RGB 252, 249, 244
HEX #FCF9F4

Secondary Colors

The secondary colors also echo the natural feel of the primary colors and complement the colors of food.

CMYK 0, 16, 29, 12 RGB 224, 184, 149
HEX #E0B895
CMYK 0, 9, 25, 5 RGB 241, 219, 178 HEX #F1DBB2
CMYK 0, 33, 62, 25
RGB 190, 107, 33
HEX #BE6B21
CMYK 0, 24, 69, 15 RGB 216, 154, 41
HEX #D89A29
CMYK 42, 16, 0, 25 RGB 84, 149, 190
HEX #5495BE
CMYK 28, 5, 0, 15 RGB 144, 203, 216
HEX #90CBD8
CMYK 0, 26, 49, 20
RGB 203, 136, 78
HEX #CB884
CMYK 0, 16, 46, 11 RGB 228, 187, 111
HEX #E4BB6F
CMYK 25, 9, 0, 15 RGB 154, 193, 217
HEX #9AC1D9
CMYK 17, 3, 0, 9 RGB 188, 223, 231
HEX #BCDFE7
CMYK 15, 0, 15, 52 RGB 85, 122, 83
HEX #557A53

Iconography

Flatart Icons and IOS16 icon packs were used from Icons8.com for the design. Flatart Icons were used for the navigation bar and in the quick-category section on the home page and IOS16 icons were used elsewhere throughout the product.

The icons used in the Stone's Throw design

Product Features

The features and experiences that customers and farmers experience in the app.
Stone's Throw Customer Home Screen and Search Screen

Customer Home Screen and Search

The home screen was meant to showcase locally available products, farms, and events such as farmer’s markets by displaying suggested content based on the user's purchase and viewing history. The user can easily select a product they find interest in, or they can search for specific foods they are looking for. Search results can easily be sorted and viewed in a map or list format.

Stone's Throw Event, Farm, and Product Profiles

Event, Farm, and Product Profiles

Products, farms, and events are arranged to direct customers toward adding a product to the cart. Farm profiles display a short description of the farm, reviews from other customers, recent notifications from the farm, and products offered.

Stone's Throw Purchasing a Product

Purchasing a Product

Customers add a product to their cart either through the product profile or through one of the product cards on the home or search pages. Once a product is added, customers choose a pickup or delivery option and proceed with payment. The app sends updates about the order through push notifications, alerting the customer when the order is ready for pickup.

Stone's Throw Favorited Farms and Notifications

Favorited Farms and Notifications

When a customer favorites a farm or event, the farm or event appears on the favorites page. By doing so, customers are subscribing to push notifications the farm or event sends out. This way, farms are able to contact many customers interested in their products.

Stone's Throw Farm Communications Pages

Farm Communications

Farmers can communicate with customers through direct messages and through push notifications. Push notifications are only sent to customers who have favorited the farm and have elected to receive notifications from the farm.

Stone's Throw Managing Orders and Inventory

Managing Orders and Inventory

Orders and inventory are managed through the home page and the inventory pages. Farmers can quickly fulfill orders and update inventory.