Great British Bake Off Recipe Website
Assuming the role as a Creative Design Lead in an external consultant company, I was tasked with conceptualizing and designing an engaging and aesthetic website centered around a random Wikipedia page found by using WikiRoulette.
Initial Concept Ideas
​
-
A Recipe Website
-
This website concept would be formatted like a recipe website. It would include recipes from past episodes and seasons. Each recipe could include the one shown, an easy version, and similar or related recipes. This could be organized by season, by food type (i.e. sweet or savory), or even by contestant vs. judge recipe.
-
-
How and where to watch episodes
-
This concept would include a brief overview of each season of the show. Even thought this was originally produced and aired in the UK, and then the US, there are different versions across the world. It could include all of these different versions, where they are from and how to watch. To take it to a different level, there could be a feature that connect with series/episode reviews. If organized by series or seasons, the background information of each…
-
-
A Personal Blog
-
‘Julie and Julia’ type blog where a person, or two, will go through and cook all of the recipes. This could be a written blog or a video blog with a step by step walk through of what they did and their thoughts or struggles.
-
​
Winning idea: Recipe Website
Conceptual Map
Wireframes
Once a reader launches the website, this is the initial landing page/home page they are brought to. Ideally, every week (or every few days), the front-page recipes will be updated to new recipes from the show or from contestants or judges. Each recipe will have an image to the left and a short summary or description of recipe to the right. This is not a full recipe, rather an engaging few lines that aim to get the reader interested in the recipe. At the end, it says “see full recipe” to prompt the reader to click it and see the full thing. Along the top of the page is a navigation bar organized by season, includes an about page, and a log in/ register button to prompt a patron platform. The bottom bar is a representation of where sponsors, logos, social media links, and subscription signups will be.
This screen is where the reader is taken when they click on a specific season in the top navigation bar. This example is if a reader clicks on the first season as indicated by the page title. As seen in the initial landing page, the top navigation bar and the bottom bar are present on each page. Recipes are presented similar to the home page with an image of the food and a quick description of the recipe, prep and cook times, and a rating. Additionally, we have included the ability to see a related recipe. These two recipes are contained within their own box and have arrows pointing to the recipe image to reduce confusion. For further reading on the full recipe, readers are prompted to click the bottom right corners which would bring them to a new page. In cooking, visual presentation plays an important role in interest and tempt in trying something new. For this reason, we decided to include big in the introduction of recipes in an effort to increase interest.
Once a reader has successfully decided on a recipe and clicked to see the full recipe, they are brought to the page above. This is our basic recipe page. The title and picture at the top of the page allow the reader to confirm that this is the intended recipe. Below the picture, a quick snippet about the recipe, how many servings, prep and cook time, and a rating is provided. Next, two distinct boxes separate and indicate the food ingredients and kitchen equipment needed to make the specific dish. Following this is a step by step layout of the recipe. At the bottom of the page you can find a video demonstration of the recipe and reviews (if there are any) of the recipe. There is also the ability to write a new review.
The final wireframe mockup we included was an About page. Here is where a reader has the ability to see the contestants and judges from each season and, when the picture is clicked, get a little background on who they are and their baking/cooking career thus far. If this is not enough information and readers are still curious, two distinct buttons linked to external webpages will bring you to a site for watching episodes or to the Wikipedia site to learn more.
Mood Boards
Initially inspired by the Smeg refrigerators that are in the show, we loved the bright yet warm tone of the colors. Seen in contestants’ clothing, background items, and pastries, we decided to flow with the soft pastel colors that embody the show. Each color and item, while very different, work together perfectly to create the sensory experience of a delicious cupcake or smell of fresh baked and warm cookies.
While this was a baking show, it was staged outside in a massive tent. Even though the contestants and every competition took place in this tent, there was always a beautiful, outdoorsy back drop just outside the tent windows and walls. Watching the show, there was often the sound of birds chirping or leaves rustling in the wind. These green colors were our interpretation of bringing that outdoors feel onto the page.
This moodboard is a bit different that the others as it is not quite as calming. The colors and shapes are more exciting and bright. This board is very lively and movement-oriented as a representation of the pressure of competition throughout the show.
Winning idea: Board #1
We decided to select this moodboard because we felt it did the best job capturing the essence of the show. It is welcoming and a good representation of how fun and comforting the show and recipes are.
Final High Fidelity Mockup
