Our Table

Problem:

People want to support local farms without sacrificing convenience and variety.

Solution:

Our Table offers a convenient, customizable, organic Farm Box via a streamlined, visually rich, responsive website.

Duration

1 Month

My Role

UX Research
Prototyping
Visual Design

Team

Self
Design Mentor

Tools

Figma
Illustrator
Photoshop
‍

Background

People are looking for ways to eat healthier, and more sustainably. Sourcing your food closer to home at a community farm co-op is an excellent way to know where your food is coming from and support local sources of wholesome organic foods.

The farm has been in business since 2011, and has grown to include a thriving CSA, farm store, popular local food events, and an education program. The latest website was developed in 2016, but does not have responsive functionality, and is beginning to look it’s age.

Research

Tools Used: Market Research, Competitive Analysis, Provisional Personas, Contextual Inquiry

Before beginning to design, we must first learn what we can from existing sources of information, as well as directly from potential users of our product. This will ensure that our resources are being used to their maximum.

Before deciding where to aim my resources, I outlined our Research Goals, Methodologies, Participants, Timeline, Assumptions, and the questions we sought to answer.

My Research Goals were as follows:

- Learn more about who the target clients are
- Understand what can be learned from our direct and indirect competitors
- Understand the client’s priority for visiting their website
- Understand what style of branding appeals to clients
‍
Once I understood what the goals were for my research, I moved forward with collecting the primary and secondary research that would be needed to answer them.

Secondary Research: Market Research

Before generating my own data, I sought to learn more about the CSA (Community Supported Agriculture) market, current trends, the competitors to their product, who the target client is, and what information exists on their expectations and preferences.

A 2017 study of 837 individuals from the general population showed the following results in demographics and behaviors of the people who are CSA members:

The preference of shopping at farmer’s markets, the limited variety of foods, and the expense are the main reason people left a CSA
Their findings did have current members ages skewing 10 years younger than the mean of non-members, 33 vs 4
Income, education, and lifestyle choices were better indicators for CSA members than demographic factors.
Supporting local family farms, and access to organic products are the highest rated reasons for joining a CSA

Lifestyle choices such as vegetarianism, belonging to a gym, recycling, enjoying cooking at home, and spending more on groceries, are good predictors of current and future CSA membership
Those who hear about a CSA via word of mouth were the most likely to join a CSA program, those seeking out info online were 2nd most likely
Income, education, and lifestyle choices were better indicators for CSA members than demographic factors.

The highest earners with advanced degrees are less likely to join CSAs. They are more likely to eat out, and don’t have the flexibility to visit the farms. The CSA members did skew higher than the general population in income and education however.
This particular study had a higher % of males as current members of CSAs, at 68% and 54% stating they would be a part of one in the future. They did admit it could have just been their sample, but did cite another study that indicated people who shopped at farmer’s markets were more likely to be male, at 52%. They do state that this goes against most literature on CSAs.
There were some common themes based on interviews with CSA owners. CSA’s are seeing greater and greater pressure from outside sources based on convenience. Organic foods are more available in general at markets, and by mail meal kits have cut into the popularity of CSA boxes.

One owner states the following:
“The new produce box schemes, they really aren’t the death of the CSA, they’re just the newest iteration in a long-evolving trend. CSAs used to be one of the only ways for urbanites to get things like heirloom kohlrabi or purple carrots. Today, in addition to the meal kits, there are also more farmers markets, and organic produce is available at many grocery stores, or at Costco. The local food system, the local food models, have shifted so dramatically in just the past decade or two,”
The same CSA farm owner states that the CSA farms point of difference are the hands on experiences and relationship they can offer, so it’s important to focus on that strength:
“That’s the one thing no one else can offer. That’s the true connection to the farm, to the soil, to the plants, and to where your food comes from.”
The preference of shopping at farmer’s markets, the limited variety of foods, and the expense are the main reason people left a CSA

Secondary Research: Competitive Analysis

I sought to learn from our competition in regards to what they are doing well, and where there’s opportunities to move the segment forward. I performed some high level initial research on some key direct and indirect competitors, and continued to benchmark against them throughout the design process.

Direct Competitors

Strengths

Responsive website with clear messaging
Physical location is closer to larger population
Focused on educating the community about sustainable food
Can signup for CSA online

Weaknesses

No ability to shop for products online
Blog not very active
Recipe section not active, and is just a link to a Google Drive folder of .pdfs
No delivery options

Strengths

Responsive, modern feeling website with clear messaging, using good UX principles, CTAs, etc
Offers widespread delivery options
Customization of boxes allowed
Lots of quality recipes online in an attractive format
Very active blog

Weaknesses

Not local to same area
Feels more “corporate”
Less transparent about where food comes from
Connection to farm doesn’t feel as tight

Indirect Competitors

Strengths

Responsive, modern feeling website
Offers online purchases via Instacart
Convenient locations
Many education events
Local Chain

Weaknesses

Feels more “corporate”
Less transparent about where food comes from
No connection to a specific farm
No CSA offerings, more traditional grocery

Strengths

Responsive, modern feeling website with clear messaging, using good UX principles, CTAs, etc
USDA Organic, Non GMO, food
Food is pre measured and prepped to specific, appealing recipes
Options for different types of diets
Convenient home delivery

Weaknesses

Feels more “corporate”
Less transparent about where food comes from
No connection to a specific farm
No CSA offerings, meals only
No events, education, or social aspects

Strengths

Responsive, modern feeling website with clear messaging, using good UX principles, CTAs, etc
USDA Organic, Non GMO, food
Food is pre measured and prepped to specific, appealing recipes
Options for different types of diets, with excellent sorting parameters
Convenient home delivery
Have options to add breakfasts and lunch

Weaknesses

Feels more “corporate”
Less transparent about where food comes from
No connection to a specific farm
No CSA offerings, meals only
No events, education, or social aspects
Say they “strive” to use organic produce, but not guarantee it

Provisional Personas

Based on the studies that were referenced during the market research, and time spent at the farm observing the customers, I put together two provisional personas. These are the most likely users for our site, and will be used to narrow down subjects for the next step: User Interviews

Goals:

To provide healthy meals for her family
To teach her kids where good food comes from
Access the best possible ingredients
Have access to farm days with the family
Learn new recipes

Pains

Doesn’t always have time to run to the farm
The kids won’t eat the squash, and we get a lot
Doesn’t always know what to do with all the vegetables
Doesn’t always have time for all the prep work

Goals:

To support local, small farms
To lower his carbon footprint
Eat seasonally
To challenge himself with new recipes
Fuel his workouts

Pains

Not local to same area
Feels more “corporate”
Less transparent about where food comes from
Connection to farm doesn’t feel as tight

Primary Research: User Interviews

Learning directly from potential users of our product to understand their perspectives, pain points, and propensities in order to make better design decisions for their needs.

I asked a series of open ended questions to discover their past experiences with CSA's, subscription food boxes, and grocery shopping online.

The statistics for the test participants are as follows:

-4 interviews were conducted
-1 male and 3 female
-Ages ranged between 39-55
-All married
-3 self employed

Research Synthesis

Tools Used: Empathy Map, User Persona

Empathy Map

The tool I chose to use to synthesize the data I generated is an Empathy Map. This helped me to organize the data into information that we can use to discover common themes, patterns, and similarities that appear most often and define the problems we're looking to solve. Below you'll find a time lapse of the process:

The Empathy Map revealed a number of points stemming from our raw interview data. Outlined below you'll find the Insights, Goals, Pains, and Needs that were made clear during the research phase:

Insights:

To support local, small farms
To eat healthy organic food
To have fun cooking
To lower their environmental impact

High quality food is expensive
Don’t enjoy repetition in food
Pickup is inconvenient
Pickup takes too much time
The CSA websites aren’t modern
The CSAs don’t allow customization
Don’t always trust others to pick their produce
Concerned with environmental issues surrounding delivery

Many people who have used CSA boxes have also tried delivery meal services and online grocery shopping
Many people who have tried CSA box subscriptions grew dissatisfied with them over time
Many people like the idea of supporting local farms, but have difficulty committing to the way they distribute their food
Many people enjoy the option of visiting a store, for specific items, or for inspiration, but like having basics delivered

Access to high quality food Variety in their meals
Convenient access to food
To feel like they’re receiving value for $
To have the ability to customize what they recieve to their needs
To be able to accomplish their tasks on any device

Goals

Needs:

Insights:

Pains:

User Persona

Meet Ben Parsons. After synthesizing my research, I generated a fictional representation of a target user guided by the findings. Putting a face and name to our user reminds us who we’re designing for.

Define + Ideate

Tools Used: POV Statements + HMW Questions, Brainstorming,

Defining the Problem

To further clarify the problems that we will design to solve, I translated the insights and needs from my empathy map and persona into POV "Point Of View" Statements, and HMW "How Might We" questions.

Insights #1

Many people who have tried CSA box subscriptions grew dissatisfied with them over time

Needs #1

Users need more variety in their meals

POV #1

Ben needs variety in his meals because he has tried CSA box subscriptions and grew dissatisfied with them over time

HMW #1

How might we provide variety in Ben's meals to increase his satisfaction?

Insights #2

Many people like the idea of supporting local farms, but have difficulty committing to the way they distribute their food

Needs #2

Users need convenient access to food

POV #2

Ben needs convenient access to food because he likes the idea of supporting local farms but has difficulty committing to the way they distribute their food.

HMW #2

How might we help Ben support local farms while offering him convenience?

Insights #3

Many people who have used CSA boxes have also tried delivery meal services and online grocery shopping, and found their experience superior

Needs #3

Users need to have the ability to customize what they recieve

POV #2

Ben needs to have the ability to customize what he receives to his needs because he used CSA boxes, and also tried delivery meal services and online grocery shopping and found their experience superior

HMW #3

How might we give Ben the ability to customize his CSA deliveries to his needs?

We have the data, and better understand our users. Now what? We decide on how to move forward balancing the needs of our Persona with the needs of the business.

Brainstorming

Once I was armed with my HMW statements, I needed to brainstorm ideas on how to solve them. I chose to do mind maps for each of the 3 HMW statements to generate as many solutions as I could within a given timeframe.

Strategy

Tools Used: Project Goals

Project Goals

Assembling the business goals from the design brief, and the user goals from my research, aids in determining overlap and competing priorities in developing site features. The easiest decisions to make are where both business goals and users goals overlap. Those move to the forefront when moving to the next step, which is planning a Product Roadmap.

Information Architecture

Tools Used: Product Roadmap, Sitemap

Product Roadmap

With the shared goals in mind that I discovered in the previous step, I looked back to the brainstorming step in the process to see which ideas addressed those priorities. The features that align with the shared goals move forward first, followed by other features that will separately address User and Business needs.
‍
Features are further organized by which HMW question they address, how difficult they would be to implement, and my confidence in the feature directly addressing a stated need.

Sitemap

Referencing the project roadmap, I laid out the sitemap for the Our Table site, showing the information architecture for the site.

Interaction Design

Tools Used: Task Flow, User Flow, UI Requirements, Low Fidelity Wireframes, Mid Fidelity Wireframes

Task Flow

Informed by the Sitemap, I built a Task Flow in order to test some specific tasks that a User is likely to perform.

User Flow

I then created a User Flow to ensure that all of the user decision points are thought through, that the flow is an efficient as possible, and that all of the necessary pages and features are accounted for to accomplish specific scenarios.

UI Requirements

Referring to the documents just created, I mapped out all of the pages and high level requirements that I will need to design in order to complete the set tasks/scenarios. You can access that file at the button below:

DOWNLOAD .PDF

Low Fidelity Wireframes

Now that I know the contents of the site, it's time to design the physical structure of the site so the user can accomplish their tasks in an efficient and attractive manner. The Low Fidelity Wireframes are a quick way to ideate various layouts for the site without getting too bogged down in rendering time or invested in a design direction. I spent time looking at competitive websites for inspiration, as well as some leading sites outside of their genre before sketching.

Mid Fidelity Wireframes

I've decided on a design direction based on the sketches, and am ready to begin rendering a higher fidelity version of the site. Combining the Information Architecture and layout ideas from the previous steps I designed out the pages that will be needed to move into the prototype stage.

Prototyping

In this case I've decided to build a prototype at the mid-fidelity stage and perform user testing. Doing so at this stage can be an advantage for a couple reasons. It takes less time to build and change pages at this stage, and the colors and branding won't be a distraction to discussions about/interactions with the layouts. I created the prototype in Figma to be able to accomplish the tasks that I flowed previously.

Prototype

Usability Testing

Tools Used: Testing Plan and Script, Figma Prototype, Affinity Map

Usability Test

Before testing I laid out the objectives, methodologies, script, and scenarios for the test.

I conducted a think aloud, moderated, remote (Zoom) usability test. They completed the following three tasks:

1. Visit a page where you can learn more about the farm, and their farming practices.
2. Navigate to a place where you can see how getting a Farm Box works. Stop when you feel like you have enough info.
3. Navigate through purchasing a subscription

I completed my user testing with 5 individuals, aged 40-47, 3 females and 2 males. All users were able to complete the tasks, and there was an error free rate of 99%

Following testing I completed a detailed document with user feedback and actions recorded. It can be downloaded below:

DOWNLOAD.PDF

Affinity Map

In order to discover the most common issues users might have had during the testing I created an Affinity Map. The patterns created pointed out the items that need attention before moving into High Fidelity.

User Patterns:

The “About” page may be misplaced under the “How it Works” heading, it should have it’s own heading, or a new name for the “How it Works”
“How it Works” naming is eliminated, and that section on the homepage is renamed Intro to better suit it’s actual function.
Add instructional text or another visual indication to encourage scrolling.

There was some confusion about where to learn more about the farm and their practices.
Users used the “Build Your Box” ordering process as an educational tool in order to learn how the system works.
2 users had an issue on 13” screens, where they weren’t seeing something that indicated they should scroll

Recommendations:

Priority Revisions

The Mid Fidelity Prototype was updated before moving to High Fidelity based on the recommendations from User Testing and some detail changes. The prototype is available below.

PRototype

User Interface Design

Tools Used: Mood Board, Style Tile, Figma Prototypes, High-Fidelity Wireframes, High Fidelity Responsive, UI Kit

Mood Board

To guide the process of developing the branding visual design for Our Table, I determined some brand adjectives that would assist me in creating a consistent visual language. Using those adjectives, I then scoured some favorite sources for visual resources that I believed would lead me in the right direction for inspiration.

Branding: Logo

I sketched some rough ideas on paper, then worked through a series of concepts until I honed in on the final direction.

Branding: Style Tile

I experimented with color palettes that suited the brand adjectives, and didn't feel overused in their market segment. Most seemed to use green in some shade, and I want them to stand out while still portraying at a glance that they are associated with food.

High Fidelity Prototype

I updated the Mid Fidelity Prototype with the branding built in the last steps, and sourced a series of images that would fit brand adjectives and entice Users to act. The updated Prototype is below:

PRototype

High Fidelity Responsive Design

I updated the Mid Fidelity Responsive Design to High Fidelity standards so the site has a seamless experience on all platforms

UI Kit

I created a UI Kit for the site to be used in future site development. Anyone working on the site in the future will have a consist library of components to work from.

Reflection + Next Steps

Reflection

The idea of Community Supported Agriculture is an old world solution to very modern issues of food sustainability, lowering carbon footprints, avoiding pesticides and GMO foods. Bringing it up to date by combining their local presence and charms with some of the best convenience features of food kits can be the best of both worlds and should provide greater satisfaction for their Users.

Next Steps

- User Testing + Iteration: I'd like to see another round of user testing in order to confirm the revisions were a solution to the minor issues I encountered. There hasn't been another test since moving to high fidelity. Any necessary revisions should then be made.
‍
- Design Handoff: Once the user testing and iteration cycle is satisfactorily completed, design should be handed off to development with our documents and communication successfully bridging that gap.

Let's Visit Another Project!

Our Table

Tools Used: Market Research, Competitive Analysis, Provisional Personas, Contextual Inquiry

Tools Used: Empathy Map, User Persona

Tools Used: POV Statements + HMW Questions, Brainstorming,

Tools Used: Project Goals

Tools Used: Product Roadmap, Sitemap

Tools Used: Task Flow, User Flow, UI Requirements, Low Fidelity Wireframes, Mid Fidelity Wireframes

Tools Used: Testing Plan and Script, Figma Prototype, Affinity Map

Tools Used: Mood Board, Style Tile, Figma Prototypes, High-Fidelity Wireframes, High Fidelity Responsive, UI Kit

Let's Visit Another Project!

TWSTY

Spotify