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.

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.

Ugly Produce want to redefine beauty in produce. They hope to inspire individuals to share their experience with ugly produce online and advocate their environmental benefits to friends and family.

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

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.

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. 

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.

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 meat of the educational content. The coloured banner at the top of each web page are colour coded.
The homepage begins with shadow green and as the user navigates deeper
into the website, the banner lightens and evolves to wild rice yellow.

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.

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.

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.

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.