Rachel Kochany

This personal design and front-end development challenge re-imagines the current (as of January 2019) Foodland Ontario availability guide as a mobile first experience. The current website features a huge table which is difficult to navigate on mobile, particularly while one is in the produce section of their local grocer or on the bus planning meals for the week.

Two major changes are featured on the re-imagined site: icons and a list of currently in season produce.

Icons

Utilizing custom icons quickly communicates the produce item without lengthy text which takes up precious real estate on a 13 column table. In order to keep the icons accessible a simple tap or focus will bring up the produce icons proper name. Keeping the icons associated with their names even outside of the table also helps improve the visual’s definition.

Additionally the icons are some visual stimulation to get users excited about Ontario produce they might not yet be familiar with.

Currently In Season

One of the major reasons a user would check the availability chart is to see what is in season. Including a featured list of currently in season produce makes accessing that information that much easier. Providing the information at the start of the flow also shows the user what they can engage with today, hopefully pushing them to buy local at their next opportunity to do so.

Check out the live re-imaged website to see the design in action. Engage with the UI to see some simple CSS animations.