The Student Cookbook
The Student Cookbook is a UK based website that provides quick, affordable and easy to make recipes for students with a little to no cooking skills. The goal is to be a hub for students to develop their cooking skills during their busy schedules with repeat visits to the website. The landing page will include features such as ‘Cooking Category Panels’, ‘About Us’ and ‘Win a FREE Kitchen Set!’. There are 5 additional pages with 3 recipes on each page depending on the users cooking needs and skills.
The primary goal of the website is to teach students how to cook using basic and easy to follow recipes furthermore repeat visits to the website making The Student Cookbook a hub for learning. The website will allow users to navigate easily through the website and will provide ingredients and directions on how to make affordable meals quickly.
Business Goals
- Teach users basic cooking skills
- Provide easy, quick and affordable meals
- Repeat visits from users
- Convey key details clearly
Customer Goals
- Easy to navigate website structure
- Easy to follow recipes
- Cost, time and how many people the recipe is for
- Visually appealing
- Social media links for more content
UX
Strategy
Following the core UX principles I firstly decided on the target audience of users and I put myself in their shoes to what features I would want.
The Student Cookbook Target Audience:
- Aged 18-30.
- Students.
- People who are learning to cook or people with basic cooking skills.
What the users would want from the website:
- Informal language.
- Easy to follow step by step recipes.
- Mobile friendly therefore must be responsive.
- Visually appealing with concise information.
This website is best for users:
- Most cooking websites have formal language and complicated instructions which some students may find difficult to relate to.
- Most students have only basic ingredients due to their shopping budget and busy schedules. This website teaches students the basic cooking knowledge without overloading them with ingredients and information.
Scope
To achieve the strategic goals, I included the following features:
- Header containing logo and navigation menu.
- Grid menu displaying different types of recipes.
- About Us section for users to connect on a personal level.
- Form for users to win a free kitchen set to help them on their cooking journey.
- Recipe pages with a total of 15 recipes.
- Icons highlighting key information which is concise and visually appealing.
- Footer with contact details and social icons.
Structure
I decided to abbreviate the file names as some page names are long, therefore the files are easier to navigate and follow. Due to the number of recipes a single page website was not suited for this project. However, I decided it was best to have the non-cooking related information on a single page with simple navigation structure. The menu which is consistent across all 6 pages will direct the user to the non-cooking information on the main page. The structure of the main page follows Home > Cooking Category Grid > About Us > Win a FREE Kitchen Set! The first thing the user will see will be the Cooking Category Grid which will direct them to the recipes (the main reason they are visiting the website). Therefore, the non-cooking sections follow.
The recipe pages follow a similar structure, Cooking Category > Name of the dish > Difficulty, Time, Number of people and average cost > Image of the dish > Ingredients > Directions. I moved the order around a few times and digested the information. I decided this sequence was the easiest to follow without providing too much information at once.
The footer is consistent on all pages with an arrow pointing up to take the user back to the top of the page. This allows the user to navigate through the website with ease providing a good user experience.
Skeleton
I created wifreframes using Balsamiq. Please note the website has slightly changed since creating the wireframes.
Surface
The colour scheme of the website was chosen to provide simplicity. The website must be easy to read therefore these colours were best suited. The logo colour matches with the kitchen set demonstrating the brand identity. The teal colour was chosen to represent cool and calmness which students are looking for when browsing the internet for recipes.
I chose the fonts Oswald for the headings and Lato for the text as this was a simple but trendy font which is what the website users are looking for. With a letter spacing and uppercase this provided easy to read information helping achieve the business and customer goals. Anton and sans-serif fonts were used as back ups.
The hover effect was used on the menu and category section to attract the users attention and demonstrate the easy navigation across all pages.
Features
Navigation Bar
All six pages have a fully functioning navigation bar which include links to the Home, About Us and Win a Kitchen Set! pages which is identical on each page to remain consistent. This allows users to navigate back to the home page when looking for different category of recipes.
Grid Category Panels
The landing page provides a relatable photo of students having a meal around a table with overlay panels with navigation to different categories of recipes. This section introduces the user to The Student Cookbook and the different options the user has. This is beneficial for users who are ‘Vegetarian’ or have ‘Zero Cooking Skills’ to navigate them to the recipes that are best suited to their needs.
The language used for the category titles are informal and playful which will relate to the target audience and hopefully demonstrate the fun side of cooking. The opacity hover effect is used to make the landing page visually appealing to encourage repeat visits. The panels change from vertical to horizontal when the max width reaches 900px for a neater and clearer structure on smaller devices.
About Us
The About Us section provides a deeper understanding of the purpose and goals of the website allowing the user to connect on a personal level. The background colour is used for a consistent brand identity.
Win a FREE Kitchen Set!
This section will allow users to be entered into a draw to win a free kitchen set. The user will need to provide their personal details such as name, email and telephone number along with the university they are attending. This is the perfect starter kit for students starting university. The form includes required name email and telephone to ensure the important information is submitted. The terms & conditions were included into a drop down menu for users to expand and read therefore saving space on the page.
Footer
The footer section includes links to relevant social media platforms as well as a telephone and email address if users would like to make contact. The social icon link will open in a new tab to provide a better user experience. These icons will link the user to the main pages as The Student Cookbook does not have the relevant social media platforms currently. Therefore, these are currently examples. The footer is identical across all pages providing consistency throughout the website. The footer includes an arrow icon which will direct the user back to the top of the page. This provides good user experience when navigating through the website.
Recipe Pages
The recipe pages provide three meals giving the user variety of choice. The images used on the website are for educational purposes only. Font Awesome icons are used to provide key information which is concise and visually appealing. A grid is used to display the ingredients and directions. This allows the user to digest the information in a clear and concise manner.
Features left to implement
I believe the website has plently of opportunities to develop and improve in the future. The features I would like to implement going forward are:
- More recipes.
- More cooking categories.
- Shopping list table with costs.
- Random recipe selector.
- Checkbox bullet points for recipe lists.
Technologies Used
- HTML was used as the building block of the projects content and structure.
- CSS was used to style the web content across all pages.
- Google Fonts was used to obtain the fonts used in the project.
- Google Images was used to obtain images for the project which were used for educational purposes only.
- Font Awesome was used to oobtain icons used in the recipe and footer pages.
- Google Developer Tools (devtools) was used to fix errors and test responsivness.
- GitHub was used to store the code for the project.
- Git was used for version control to commit and push to GitHub.
- Gitpod was used as the development environment.
- Favicon was used to create a favicon for the website.
- Pexels was used to obtain images for the recipes.
- Unsplash was used to obtain images for the recipes.
- Balsamiq was used to create wireframes.
- Optimizilla was used to compress image to improve the load speed of the website.
Color Contrast Acessibility Validator
- Used this to test the colour contrast of the backgrounds and fonts.
- W3C Validator was used to validate the HTML code.
- W3C Validator was used to validate the CSS code.
- Am I Responsive was used to obtain final images of my website across different device sizes.
Testing
User Stories
- As a first time visitor, I want to easily locate types of recipes.
- The landing page shows a category grid with types of recipes helping users identify the type of recipe they are looking for. This is useful for users with varying cooking skills and special diets such as vegetarians.
- As a first time visitor or a repeat visitor, I want concise recipe details.
- When looking for recipes first thing the user looks at is the image. Secondly, the name of the dish. Thirdly, important cooking details. This can often be the deal-breaker if the user decides to cook the dish. Therefore, the use of Font Awesome icons are used to highlight cost, cooking and prep time, how many people it feeds and the average cost. This information is positioned well above the image and provides important and concise information for users to make an informed decision.
- As a first time or repeat visitor, I want the recipes to be basic and easy to follow ingredients and directions.
- The recipes chosen for the online cookbook are made with basic ingredients. Students won’t be buying lots of different ingredients due to their tight budget therefore recipes must contain the essentials. The ingredients and directions are laid out with a grid. For mobile, which most students will be visiting the website on, the gird goes into two rows. When using a larger screen size the grid will form into two columns. Therefore, the information is easy to follow.
- As a first time visitor, I want to easily navigate through the website and its pages.
- The heading includes a menu which is consistent on all 6 pages. This always ensures the user is 1 click away from the home page. The user can click the home button on the menu or the main heading. The menu also can navigate the user to the About Us section or Win a FREE Kitchen Set! on the home page. The footer also includes an arrow which when clicked navigates the user to the top of the page. These links were all created with the user experience in mind.
- As a first time or repeat visitor, I want to get in contact or follow the social platforms for more content.
- Social media icons are positioned in the footer of the page and mobile and email icons for customers to get in contact
Testing
I tested to ensure the page work on Chrome, Mozilla and Safari. I confirmed the project is responsive having tested screen size using the devtools device toolbar. I have tested the links and ensures that all follow the right path for navigation. The form has the required input sections and the submission button opens in a new window.
Solved Bugs
When running a report on lighthouse in devtools, I discovered the kitchen set image was hindering the load speed due to its large file. To overcome this I used Optimazilla to reduce the file size improving the load speed ensuring a better user experience.
Validator Testing
HTML
- All 6 HTML documents were tested and no errors were returned when passing through the official W3C validator.
CSS
- 5 errors were found when using the official W3C validator.
- The error that amounted to 4 errors was font-style: bold; which I resolved by removing it from the CSS rules.
- The last error was background-image: url(‘../images/hero_image_2.jpg) no-repeat centre centre; This was resolved by removing no-repeat centre centre and including background-repeat: no-repeat; and background-position: centre;
Accessibility
- I confirm the colours and font choose are easy to read and accessible when running lighthouse in devtools.
Mobile:
Desktop:
Unfixed Bugs
The Color Contrast Validator detected an error between the 'About Us' heading and the background colour as they are the same #252525. However, the 'About Us' heading is above the background image which is the colour #83b8b5 the contrast passes the validator test as seen in the 'Structure' section.
Deployment
I followed the steps below to deploy my webpage:
- Log into GitHub.
- Select project repository you want to deploy.
- Select 'Settings' in the menu at the top.
- Select 'Pages' on the left side menu.
- In the scource section, select branch 'Master' and save.
- The page will produce your websites URL as seen below.
Credits
Code
Content
- The icons used were from Font Awesome
- The Favicon used was from Favicon
Media
- The photos used on the home page are from Google Images
- The photo used on the about us page are from Google Images
- The photos used on the form page Google Images
- The photos used on the recipe pages are from Google Images, Pexels and Unsplash
Acknowledgments
I would like to thank my course mentor Guido Cecilio for his supporters and guidance throughout the course and former student Sam Laubscher for his feedback and support.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent