The Before

Gojee is an online database of recipes, where users can search based on the ingredients they have on hand, or start from scratch by choosing any of the chef rated recipes.

Pre-rebrand, Gojee was trying to find their place amongst other curated recipe apps like epicurious. They had positioned themselves as a lifestyle app, selling fashion merchandise, writing blog posts with some food recipes. This was definitely confusing for the user who downloaded their app expecting to get curated recipes. Gojee’s brand lacked focus, which was the first thing I worked on defining for them.

Their previous brand looked playful and fun (complete with a gojee berry mascot), but did not capture the elevated brand style Gojee was hoping to have.

The recipe pages were hard to follow, with directions confined to a bottom right container. The content was scrollable but uninviting and in a serif font that’s harder to read when wanting to skim through.

Photos were low quality and seemed to be user generated. The user missed out on process photos that they could correlate to the step by step directions. Gojee’s recipe pages had to look as beautiful as they were functional.

The old recipe page.
The new logo elevates the brand to match the sophisticated photography style.

The New Brand

Doing some research on Gojee’s competitors and the user’s expectations of food blogs, it was clear Gojee needed a rebrand. An elevated style would be able to set them apart from competitors who tended to have very colourful and organic branding styles.

The new typography system

The typefaces were carefully selected to compliment the new logo, and work on different mediums. Headlines would now use Tomaso Regular (or as I like to say “tomato” regular), which was often used in bistros and trendy cafes. Tomaso’s characters had a handcrafted feel, which captures the craft of cooking. In all great cooking shows, they talk about balance — a balance of flavour profiles and seasoning, so I paired a sans serif font with the more textured headline font to create balance in Gojee’s branding.

The Brand System leverages macro photography for delicious imagery on and offline.

The Stationary

By restricting the colour palette to modern greys, blacks and whites, the food photography could really shine with all of it’s saturated, yummy colour.

It’s said that we eat first with our eyes, so I needed a solution for the food photography. Gojee’s app is about using the ingredients you have on hand to recommend recipes, so I decided to make ingredients the visual language. Through gorgeous, high quality, macro photography, the photos could be the emotional component Gojee was missing.

The Website

By allowing the site to have a main focus, users were no longer confused about who Gojee was and what they were offering.

I knew Gojee had an app as well as an online site that needed to work across platforms to give users a consistent experience. The main difference would be an in-app grocery list feature users could bring with them to the store, but desktop users could print off a grocery list if they needed.

User journey map for both the website and app.

Wireframes

I really wanted the macro photography to be the star, so the home page utilizes a slider to showcases recipes, one image at a time. From the homepage, if a recipe catches the user’s eye, they can click “make now” and be brought to the recipe page. If they rather explore, users can click on the recipe tab and be brought to the recipe directory.

On the recipe directory page, How to Videos were also a part of the site, and I used gifs to bring more interest to the otherwise static content. The images are laid out on a masonry grid which allowed photos to be flexible in size. The thought of using a masonry grid was mostly for it’s name…Mason-ry, as in mason jars? Every detail had to be about food.

I debated whether a hero image on recipe pages would be too much.

The Final Look

It wasn’t hard to make the layout look beautiful — all the work was done by the photography; and made this one of my favourite projects to date. My job was just to let the photography shine.

Video of the homepage slider gallery.
The mason jars of masonry grids.
Above the scroll view. See below for the full recipe.
The images on the recipe page needed room to breath, without overtaking the rest of the page content.

___

Agency: Freelance
Client: Gojee
Project: Rebrand
Design: Erica Fontana
Photography: Gojee / Shutterstock / Unsplash

February 21