Green Apple NYC

Farmers markets are one of our life lines to healthy eating. They often supply us with local produce, many of which are organic, the opportunity to directly connect with local farmers, and the ability to support their business without the middleman.

Currently in New York City, there are over one hundred green markets in the tri-state area. This project was an effort to create a platform where users can learn more about those providing the food (the farmers and artisans) and make visiting a market more convenient by offering information that would be relevant to them before their next trip.

Roles

UX / UI Design
Wireframing & prototyping for mobile and desktop screens

Technology

Adobe XD / Figma

Project Type

Concept project for Google UX Design course

Grasping the Issues

I performed interviews with individuals who range in age and gender, those who frequent farmers markets and those who do not. I wanted to find out what they found most valuable about these markets and if there were any reason why they did or did not visit these markets.

What people value most

1. Ability to interact with vendors/farmers/artisans to learn about produce and items sold
2. Produce that are fresh, seasonal and unique
3. The upbeat environment to meet others and socialize

Main pain points

1. Markets not offering enough variety in one location or running out of desired items by end of day
2. Outdoor markets can be affected by weather and not all are open year round
3. Not as convenient as local supermarkets that can be found every few blocks
4. Sometimes some farmers markets are pricier than supermarkets

For me right now as a senior, one of the biggest thing I would want to know is the price. Can I afford this, is it cheaper where I’m going. That’s number one. And I would want to know if it’s a lot fresher than the supermarket.

The venders were so welcoming, inviting, always something that would spark your attention

I'd like to know what's in season, so you can time a product

Finding the Solution

How can we motivate more people to visit our farmers markets?

Ideas that came from sketching

1. Detailed information about each vendor/farm that includes:
‍a. Photos of farm and their members to put faces to the business
b. Video of farmers and artisans
c. Summary of their history
d. How they care for their produce
e. Basic info such as location and contact

2. Information about unique produce and how it's used
‍a. Nutrition info
b. Recipes

3. Ability to search Green markets including distance, hours and location
‍
4. Notifications for sales and see item prices
‍

Addressing the Issues

1. Issue: Desired items not available or runs out by end of day
‍
Possible solution
a. Pre-order options for those who are busy and can't visit at a certain time

2. Issue: Outdoor markets can be affected by weather

Possible solution
a. Option to be notified of updates including closings and hours of favorite markets

3. Issue: Not as convenient as local supermarkets

Possible solution
Create incentives to make visiting markets a worthwhile trip
‍
a. Leverage what people love about farmers markets:
- Allow users to get to know farmers and offer detailed information about the people behind the farm
- Let users know where the food is coming from and provide information on how each farm takes care of their products
- List availability of unique produce not offered in supermarkets
- Share details about these unique produce and how to use them

4. Issue: Sometimes markets feel pricier than supermarkets

Possible solution
a. List items offered in these markets with prices
b. Option to receive sales notifications
c. Ability to use SNAP benefits to pre-order

Summary of Features

1. Pre-order option
‍
2. Notification option for important information such as sales, new items and hours of operation
‍
3. Detailed vender/farm information:
a. Includes photos of farms and workers
b. History behind the farm
c. How they treat their products

4. List of markets and vendors in the markets

5. List of items and prices that are available at each market

6. Detailed information about nutrition of each produce and food items that are being sold.

7. How to prepare and cook with each food item including recipes

8. Grocery list for those on the go (only available in the app)

Competitive Audit

The Goal of the Audit

1. To see how competitors make it easy for users to access local farm fresh foods

2. To see if there are any platforms that gather all NYC farmers market information
‍
3. If so, what type of information do they present about farmers markets

Summary
‍
1. GrowNYC website gives information on NYC green markets. They previously had an app which is no longer available. Their website provides a lot of information on each market but it is difficult to navigate and a bit overwhelming.

2. I found that some companies make farm fresh produce available by bringing pre-ordered produce to specific locations for pick up. Others offer delivery options and pre-order options that can be picked up at the markets.

3. Some competitors offer limited information about their farms. None of the websites or apps shared stories, photos or videos about the farm that puts a face behind the vendors.

4. The visual design for some of the apps and websites made the experience feel more serious and lacked excitement or enjoyability.

Competitive audit chart

Whats Good

GrownBy

Fellow Farmer

Misfits Market

GrowNYC

Pre-order Option

Market Notifications

List of Items and Prices

Detailed Farm Info

Farmers Market Search

Ease of Use

Great Use of Visual Design

High-fidelity Designs

Color Palette and Typography‍

Colors were chosen by thinking about colors of produce;
colors that represent vegetables, fruits and soil.
I also wanted the colors to be bright to evoke optimism, excitement and friendliness to make it feel like a positive experience.

The typography is Poppins for a friendly, modern and simple look

Color Palette

#ffffff

Primary color for most backgrounds

#CA9F79

Used for main navigation

Inspired by grocery bag color
‍

#22B745

Accent 1
Used for buttons and subheadings

Bright, natural, friendly

#FF6600

Accent 2
Used for important notifications, buttons for adding items to cart and adding pop color to illustrations

Bright, upbeat, alerting

#FFF3EB

Used for backgrounds for screens such as grocery list and favorites

Calming, natural, balancing the bold colors

#3A2717

Used for buttons, background for overlays

Reminder of the ground, soil

Mobile Type Scale

Poppins 46px

Regular / Letter spacing 0.25px

Poppins 32px

Regular / Letter spacing 0.25px

Poppins 24px

Regular / Letter spacing 0

Poppins 20px

Regular / Letter spacing 0.15px

Subtitle

Poppins 16px

Regular / Letter spacing 0.15px

Body 1

Poppins 16px

Regular / Letter spacing 0.5px

Body 2

Poppins regular 14px

Regular / Letter spacing 0.25px

Desktop Type Scale

Poppins 64px

Regular / Letter spacing -0.6px

Poppins 58px

Regular / Letter spacing -0.5px

Poppins 46px

Regular / Letter spacing 0

Poppins 32px

Regular / Letter spacing 0.25px

Subtitle 1

Poppins 24px

Bold / Letter spacing 0px

Subtitle 2

Poppins 18px

Regular / Letter spacing 0px

Body 1

Poppins 20px

Regular / Letter spacing 0.15px

Body 2

Poppins 16px

Regular / Letter spacing 0.5px

Illustrations

Adjusting the Design:
App Screens

I performed usability studies with individuals ages 30 to late 60s of varying race and gender.
The following are some of the main issues that needed to be addressed.

Users did not realize that the market list can be
pulled upwards to see more.

I made the bottom tray pull up halfway with
the words "Pull up list of markets:

Users did not realize that the button above
the video leads to the list of weekly items

I made the button bright green and added an
icon to make it the most noticeable element
on the screen

Users thought that "List" meant a
list of markets instead of grocery list

I changed the word to "grocery" with an icon
that indicates a check list.

User wanted to know how many items
are added to cart when clicking "add"

Added a counter so customers can decide
how many items they want

Adjusting the Design:
Website

Because the vendor list was right below the fold, users did not always expect that there were more information below.
They also did not know exactly what type of items/farm/vendor were available just by looking at their names and images.

I stretched the bottom section background higher and placed the title "Vendors available this week" just above the fold so it indicates to users that there are other contents below.
I also added short descriptions of the types of items each vendor sells at the market.

There were similar issues with the pre-order page. Users did not always expect that there were more content below the fold.

Users also did not realize that this was only for pre-order and not delivery.

I once again placed the title "This week's produce" peaking over the fold so users can see that there are more content below.

I also increased the font size of the words "pre-order & in market" so users can see that this is a page that shows only pre-order or in market options.

Similarly, I highlighted the words "nutrition info" and "recipes" to make them stand out better.

Final Work: App Design

See Web Design

Find Markets

I decided to display a map on the home screen as the overarching purpose of the app is to find local green markets. For the same reason, the search bar is located at the top for users to find easily.

1. Once user searches for a location, the app brings up a list of markets. During the usability study, users did not realize that the bottom tray could be pulled up manually so I decided to allow the tray to slide in automatically

2. The market list will provide basic information such as days and hours of operation, location and cancelations

3. Markets can be sorted by "distance" or "open now"

Explore Markets

Each market will have a list of available vendors and basic information such as the following:

1. Market map- layout of market

2. Address, days and hours of operation

3. Ability to save the green market as a favorite to receive notifications about sales and events at that market

Weekly items

Each vendor will present "This week's items." For those that offer pre-order options there will be a button to add the item into the cart

1. List of items sold by categories such as "produce" or "dairy"

2. Items listed in horizontal scroll to save space

3. "Add" buttons in bright green to make them easy to notice

4. If a user wants to know more about the farm, they can click the "About Us" button

About Us

Detailed information on each vendor/farm so users can get to know local farmers and their practices

1. Video and Photographs about the farm and the people who work at the farm

2. "Our story," talks about the farm's history and background

3. Information about their practices

4. Contact info of farm

Favorites

1. Ability to create a list of favorite markets and vendors when heart button is clicked on market or vendor/farm screen

2. See updates on what is new at your favorite places

Notifications

Be notified of new items, events and sales

1. Give users notifications on sales and events; hoping to generate a excitement by showing variety of activities happening at their favorite locations

Convenience

Grocery list feature on the app for those on the go.
‍

Final Work: Website

See Mobile Design

Home Page

Introduction to what Green Apple NYC is about and benefits of using the site

1. Search bar placed above the fold for primary purpose of finding markets

2. Facts about green markets and their importance right below the fold so that users can quickly learn the "why" of this platform

3. What users can do with Green Apple app and website are explained on the home page

4. Users will also have the ability to download app version

Explore Markets

1. Find days and hours of operation

2. Reference upcoming event list

3. Access market map

4. Check list of vendors for the week

Pre-order

1. Get to know each farm with detailed information including video and photos of the market

2. "Our story" section for farm history and farm practices

3. List of available produce at each market

4. Ability to pre-order from markets that offer the service

Nutrition & recipes

1. See nutrition information about produce- helpful for those who are not familiar with unique items

2. Recipe suggestions