Ugly Produce-01.jpg

The Client

The Ugly Produce is raising awareness that fruits and vegetables do not need to be beautiful to be healthy, delicious, and nutritious. They also want to instigate change. Their goal is to help Canadian’s create sustainable consumption practices so more can be done with less.

Student project.

The Ugly Produce: An Engaging, Interactive Educational Experience

Mission

To expand on the organization's social media campaign with an interactive website that informs their audience why consumers should buy "ugly" fresh produce. The challenge was to actively engage with the public to try and break the cycle on food waste related to unattractive fruits and vegetables.

Outcome

A responsive, multi-page interactive website optimized for both desktop and mobile devices that utilizes numerous animated features to encourage the public to actively engage with the site content.

Impact

Reducing the perceived cosmetic standards placed on fresh, naturally grown fruits and vegetables. By engaging with the web interface, the public has the opportunity to gain a deeper understanding of what to look for and what to avoid when shopping for fresh produce, how to store each of the fruits and vegetables properly to ensure a long shelf life, and how to prepare ugly produce for consumption.

Services

Case Study Mobile Mockup.jpg
08-Web.jpg

The Challenge

Creative considerations include Ugly Produce wanting a lot of text content on their website, while remaining easy to digest, appear as a trustworthy site for information, and easy to navigate to the various pages.

 
Typography-Colours-02.jpg
 

Illustrations

To aid the information heavy content, illustrations were developed to describe the concepts visually using the brand colour palette.

 
Illustrations-03.jpg

Low-Fidelity Exploration

Early in the site development, I explored landing page layout designs using wireframes. Shades of blue was used to simplify design elements so I could focus on the layout of the page.

 
Wireframe visuals-05.jpg

High-Fidelity Development

From there, I blocked in the layout using low-fidelity wireframes inside Adobe XD. You can start to get an idea of the colour palette and font choices in use, and where the icons come into play. 

 
Low-Fidelity-04.jpg

The User Interface

Because the site was information heavy, organizing the content presented a challenge. To make the information more engaging with the audience, interactivity was an important feature. The user journey for the website
is the same for desktop and mobile devices. What changes is the users interaction with the content on the site pages.

 
User Journey-01.jpg

The User Experience

The user begins on the landing page, where they can navigate to any of the three main pages. From there, it branches off to additional subpages with contain the interactive educational content.

 
Key Pages-03.jpg

The coloured banner at the top of each web page are colour coded. The homepage begins with shadow green evolves to wild rice yellowas the user navigates deeper into the website.

Why Ugly Produce-04.jpg

Copywriting & Information Content

On “Why Ugly Produce” users can learn why they should buy ugly produce, how leaving it to waste impacts the environment, and about the brand itself. On the desktop subpages, information reveals itself on screen as the user scrolls through each point of information.

 
Keep it Fresh-03.jpg

On “Keep it Fresh” users can learn the best practices to prolong shelf-life with guides on dry, fridge and freezer storage with mini-games to promote interaction by users, as well as how to dry and can fruits and vegetables.

Use it Up-04.jpg

On “Use it Up”, users can learn how to prepare ugly produce, how eat ugly fruits and vegetables, and how to revive leftovers before they go to waste.

Mobile Overview-02.jpg

The Results

By designing this website prototype for The Ugly Produce, they can educate the public about all aspects of naturally grown fruits and vegetables that look different but are still perfectly nutritious and delicious.

When users engage with the site contents, they can quickly navigate to the information they seek, and are encouraged to share their ugly produce store on social media.

The Ugly Produce_iPhone 8 and MacBook Pr

See More Projects

Rack-Card.jpg
Little-Brown-Bat-Design_UANSS-08.jpg
05-Phone Grid.jpg

Ready to work together?