Green Apple NYC

Green Apple is both an app and website that provides a way for New Yorkers to get to know their local farmers and keeps users up to date on new items, sales and other convenient information before visiting.

Roles

Sole UX/UI Designer:
User research, wireframing, prototyping, usability testing, branding

Technology

Adobe XD & Figma

Overview

Concept project for Google UX Design course
‍
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.

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. Desired items not available or runs out by end of day, or markets not offering enough variety in one location

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 feel pricier than supermarkets

Take me to the solution!

Finding the
Solution

Take me to the Solution!

For each of the main issues listen previously, here are the ways in which we can bring the solution.

Design Requirements

1. Issue: Desired items not available or runs out by end of day
‍
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

Solution:
a. Option to be notified of updates including closings and hours of favorite markets

3. Issue: Not as convenient as local supermarkets

Solutions:
Create incentives to make visiting markets a worthwhile trip
‍
a. Leverage what people love about farmers markets:
- Ability to get to know farmers
- Ability to know where the food is coming from
- List availability of unique produce not offered in supermarkets
- A way to learn about these unique produce and how to use them

4. Issue: Sometimes markets feel pricier than supermarkets

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

App Features

for those on-the-go

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. Grocery list for those on the go (only available in the app)
‍

Website Features

Same as app features but with additional features:

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

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

3. No grocery list
‍

Show ideation process

Ideate

Some ideas that came out of my sketches.

1. Detailed information about each vendor/farm 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

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

3. List of markets from search including distance, hours and location
‍
‍

Competitive Audit

I performed a competitive audit on apps and websites that provide a way for locals find farm fresh foods.

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 markets 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

Wireframes

App Design
‍
I did some rough sketches of possible screens for my app.
‍
1. I decided to have a map view and the list of searched markets on the home screen keeping in mind that the main purpose of the app is to be able to locate local farmers markets.
‍
2. The process: users are lead to search for markets --> learn about them --> and discover what produce they are selling each week

3. The main features of the app are all accessible by the bottom navigation

‍

Website Design

1. The website homepage is meant to first show users the purpose of the
site and app; the why for this product as well as access to download the app.

2. The website also has a clear call to action button at the top of the homepage
where users can search for their local markets as their first action.

How Layla uses this app on the go

Opens app and types her location in the search

Search results show automatically with list of markets

Chooses a market to see details and vendors available this week

Picks a vendor/farm to see details about them. Clicks "This week's items" button to see what they will be selling

This week's items listed with prices with option for pre-order (only for some vendor/farms)

How Antonia uses the website
to see what's at the market this week

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- friendly, modern and simple‍

Color Palette

#ffffff

Primary color for most backgrounds

#CA9F79

Used for main navigation

Inspired by grocery bag color
‍

#22B745

Accent 1
Used for buttons, headings, sub-headings

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

#4E4B48

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

Icons

Illustrations

Icons

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.

See website features

Final Work: App Design

For dedicated mobile app features
(click button to the right for website features)

See website features

Find Markets

Users can find local markets using the search bar. Bottom tray will pull up list of local markets with basic information:

1. Tray pulls up automatically as people did not always realized tray could be pulled up manually during usability study

2. Key Info: Days and hours of operation and location

3. Sort list by "distance" or "open now"
‍
4. Location markers on map for easy viewing

Explore Markets

Each market will have a list of available vendors and basic information

1. Market map- layout of market

2. Address, days and hours of operation

3. Ability to save as favorite for notifications

4. Vendor list

Learn

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

1. Access to weekly items being sold at the market - Button in bright green to stand out

2. Video about the farm and photographs

3. "Our story," talks about the farm's history, vision and practices

4. Contact info of farm

‍

Weekly items

Each vendor will present with "This week's items." For those with 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. Ability to add to cart for vendors that offer pre-ordering

Favorites

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

2. 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 available at the market; hoping to generate a excitement by showing variety of activities happening at their favorite shops

Convenience

Grocery list feature for the app for those with busy schedules and often on the go.
‍

See the app features

Final Work: Website

For dedicated mobile app features
(click button to the right for website features)

See the app features

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 in NYC - the why

3. Special features about this platform

4. Ability to download app version

Explore Markets

1. Days and hours of operation

2. Upcoming event list

3. Market map

4. List of vendors for the week

Pre-order / add to cart

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

‍

Learn about unique produce
& get recipes

Website feature:
‍
1. Nutrition information about produce- helpful for those who are not familiar with unique items

2. Recipe suggestions