A tile format was used to introduce many different pages and topics on the site quickly and in a digestible manner. Breaks in the tile format were introduced to add to the experience and create information pauses. The tile format proved successful on the catalogue page where the 5,000 tomato varieties can scroll infinitely or be filtered according the filter options in a visual and user friendly way. Users can easily hover over the tiles for more a briefly summary or click to read the full details. The tile format also responds beautifully in all device formats and media in the site.
Photography and illustration
To increase user base, the rebrand sought to make the World Tomato Society a lifestyle brand by using gorgeous photography and illustration. A clean layout was established to allow for the use these flourishes. To create a experiential website, the main pages of the site use full-screen photography while interior pages use a much smaller height to enable the user to reach the content quickly.
Palette & Typography
The World Tomato Society requested to keep red in their rebrand, so the remaining colours in the palette needed to pair well with a strong colour like red. A sophisticated yet subdued palette was used to not compete with the brightness of red and all the various content in the site. Cool colours were used to balance with the warmth of the red and photography, while gold was added to create a feeling of luxury. To add to the sophistication, a serif font was used for many titles. A easy to read sans serif was used for all body copy and the display font was inspired by hands-on and country nature of the organisation.
wireframes & prototypes
The visual design of World Tomato Society website came after wireframes and prototypes. Vital functionality and screens were first laid out before subsequent screens were created to connect the base pages. More features were added using an iterative process, during which the tagging system was used to make searches and filter easy, and a "New" tag was introduced.
A hamburger was utilized for the navigation because of the frequency of a full-width drop down filter bar. This filter bar would have competed with a sticky navigation. Additionally, the homepage serves as a hub for navigation where the user can opt to explore through the tiles. Increasing user membership was important to the World Tomato Society, so the login and signup buttons were kept outside of the hamburger.
The World Tomato Society was a challenging project that allowed for a unique brand and style guide. During the aggressive four weeks of branding, UX, and UI, a cohesive and elegant brand was established with a easy to use hub that engaged with the community of tomato lovers to learn about farming, gardening, cooking, nutrition and health. It was an honour to work with the World Tomato Society to preserve the integrity and diversity of our world’s tomato varieties.