SHREYA SHANKAR
Hi there, I’m Shreya! I’m fueled by effortless experiences and dedicated to building products that strengthen our relationship with technology and propel our society forward.
laptopUP.png

Ungraded Produce Website Design

 

Ungraded Produce is a student run company that sells recovered produce (produce with aesthetic imperfections, excess produce from grocery stores) at discounted prices. The organization aims to lessen the amount of food wastage in the United States by persuading it's customers to consume differently, rather than consume less. 

This is a freelance project that involves user flow, wireframes, visual mock ups, and web design with HTML and CSS.

Visit the website (still in development) here!

Ungraded Produce Team: 

Courtney Bell, Anya Ranaganathan, Shreya Shankar

Fun fact: Ungraded Produce won the Duke Startup Challenge in 2017, and took home the Audience Choice Award as well!


Since the launch of the website, the company has received 270 customer subscriptions in the triangle area and has made $7000 in monthly sales so far. 

RESEARCH:

I decided to take this freelance project because the mission of Ungraded Produce was very different from that of any food waste related organization I'd ever come across. Their idea was simple yet powerful, and I took on the project because I saw great potential in it. When I was given the project, the two co-founders told me that the inspiration of Ungraded Produce came from two similar organizations, Hungry Harvest and Imperfect Produce. So I spent time looking through these websites to understand how the important information was presented. 

A few pieces of information were displayed in a similar fashion on both websites: 

  1. A simple, "how it works" flow chart allowing the consumer to quickly understand the company model. 
  2. Full width images on the landing page, with a "Get Started" link placed in a very noticeable location. 
  3. A quick mission statement and an explanation of what "recovered produce" is. 
  4. Multiple links to "join now" or "get started" on each page to keep persuading the consumer to join (Hungry Harvest had as many as four "join now" links on one page).

BRAINSTORMING + DECIDING THE WEBSITE DIRECTION:

My goal for this website was to display information in a concise and appealing manner that would encourage the consumer to subscribe.  

See my brainstorming notes here

ILLUSTRATIONS + COLOR SCHEME: 

For the color scheme, I decided to go with an earthy green. This color resonates with "produce" and "farms" and is soothing for the eye to look at, so visitors eyes won't be shocked with a color too bright when they visit the page. 

I did all the illustrations on the pages myself, except for the logo which was given to me by the co-founder. I did the sketches of fruits and vegetables on the headers and footers with illustrator. The fruits and vegetables don't look perfect, like the fruits and vegetables that Ungraded Produce sells. 

I also did the simple flowchart signs in the main color that the website has. These are clear signs to add to the aesthetic of the page, as well as to provide a break from text. 

LO FIDELITY WIREFRAMES: 

 

HI FIDELITY SCREENS:

LANDING PAGE:

A high definition, full-length image that captures the consumer's attention with a simple tagline. The "Get Started" button is there in the middle for the consumer to subscribe right away. 

To learn more, the mission statement is displayed underneath the full-length image. I decided that it would be good to have the mission statement clearly displayed so that the consumer is immediately able to gain a deeper understanding of the company without having to navigate to another page. 

The "How It Works" provides a complete concise overview of what the subscription entails.

One of the main components I wanted the website to have was a conversation with the consumer. The "Ready to Begin?" is a question aimed directly at the consumer, as they could be more inclined to join after having gained a better understanding of what Ungraded Produce is. 

ABOUT PAGE:

The hardest barrier to overcome when designing the about page was to make sure the consumer wouldn't feel overwhelmed. I wanted to find the best way to present the information so that the consumer wouldn't be turned off by copious amounts of text. 

I was inspired by Yellow Leaf Hammocks' about page as well as Hungry Harvest's about page. I like these pages because they tell stories, humanizing the brand and providing meaning for the organization.  Using a combination of words and easily digestible images, Yellow Leaf Hammocks' about page captures the consumer's attention from the second the page loads. Both pages keep large chunks of text to a minimum, which is what I aimed to do with Ungraded Produce's about page. 

I wanted the consumer to be drawn in, so I highlighted the quote and bolded certain pieces of information in the "Our Story" section, so that if the consumer decided to just skim the page the most important information will stand out. 

For the triple-bottom-line approach, I was debating between a slider and stacked images. I went with the stacked images because I felt that a consumer would not spend time clicking through each slide. This way, even if the consumer decided to skim the page, the three key approaches would be seen clearly. 

I put the approaches on top of images to make the page seem less filled with words and more visually pleasing (note: these are not the final images, just substitutes until the cofounders are able to take their own).

The "convinced?" question continues the conversation started with the consumer on the landing page, further persuading the consumer to join.

CONTACT US PAGE:

The first item on the contact page is the link to the FAQ, because sometimes visitors to the website might go straight to the contact page before looking at the FAQ. The direct link to the FAQ is there to give visitors a chance to check out the FAQ to make sure that their question hasn't already been answered. 

The subject and message lines are more pieces of dialogue with the consumer. The goal is that throughout the course of the consumer's experience on the website, he/she will have started to develop a lasting relationship with Ungraded Produce that remains even after he/she is no longer on the website. 

FREQUENTLY ASKED QUESTIONS: 

I wanted the frequently asked questions page to continue to have a dialogue with the customer. After the questions, the "Take me shopping!" button gives the consumer another push to join Ungraded Produce. Especially after reading the last question about free delivery, this subtle enticement will help to convince the consumer. If the consumer still has more questions, I added a clear link to the contact page so that the consumer is able to easily navigate to where more questions can be asked.


⇽ Previous: Venn
Next: Ohana ⇾