(Developer: Valentino Braga)
Mil's Kitchen is a small business created by a Brazilian chef with the mission of providing healthy food that tastes like home. The site is the face of Mil's Kitchen online and aims to provide information about meal plans and how to order them. My goal with this project was to create a clean, modern design that evokes the feeling of natural food and home.
- Mil's Kitchen
- Table Of Contents
- User Experience (UX)
- Design
- Features
- Future Features
- Technologies Used
- Validation
- Bugs
- Deployment
- Credits
- Acknowledgements
- Find healthy food.
- See a diverse menu.
- Order weekly food.
- Learn what makes this company different.
- Meet the chef to see who's cooking their daily food.
- Be able to reach out to the company for more information.
- Deliver clear and easy-to-read information.
- Increase the traffic and sales.
- Showcase photos of the weekly dishes.
- Provide a form to enquire about services provided.
- Adults looking for healthy, tasty options for their day-to-day meals.
- People on diets that need help cooking their food.
- Adults who don't have time to cook.
- Vegetarians.
- Easy access to information.
- Simplicity to complete order.
- Appealing design.
- Accessibility.
- Access to important links (social media links).
A busy young adult living in the city and using food delivery services who wish to have a more healthy diet. Vegetarian person struggles to find diverse options for their day-to-day meals. A mother looking for help to cook a specific diet for their kids. An adult who doesn't know how to cook but wishes to have a healthy day-to-day meal. An adult who wishes to buy food that tastes like home.
- As a first-time user, I want to understand the service.
- As a first-time user, I want to understand how I can order.
- As a first-time user, I want to be able to easily order.
- As a first-time user, I want to have a sense of safety buying this service.
- As a first-time user, I want to know who is providing this service.
- As a first-time user, I want to understand how I can easily receive updates from this service.
- As a returning user, I want to see the new meals options.
- As a returning user, I want to smoothly navigate the website.
- As a returning user, I want to order my meal plan easily.
- As a site owner, I want customers to easily understand my service.
- As a site owner, I want customers to be able to order with no issues.
- As a site owner, I want ways to retain costumers.
The website is designed as four separate pages to enable the user to easily and precisely locate the information they are looking for. The priorities on the site are the information about the plans and the weekly dishes. For this reason we start with a call to action button followed by plans options, how to order and meet the chef sections, bringing an intuitive user flow. The contact page features a form where the users can select and inquire about the choosen plan.
The concept behind of the business is healthy food, plant-based as much as possible and home cooking. This is reflected in the pastel colour palette, in the smooth layout and the showcasing the chef behind the curtains.
The initial concept of the design can be seen here and they were made through the Balsamiq wireframing software.
Basic Structure Wireframe
Home Page Wareframe
Plans Page Wareframe
About Page Wareframe
Order Page Wareframe
Ronoto Mono and Shadows Into Light fonts were chosen from Google Fonts. Fonts were selected to represent clear, easy-to-read and 'warmer' feel they inspire in the user.
Colour is a very important aspect for engaging with the audience, the colour theme is based around the color: #FFF9EA. The other colors were chosen to tone with this and keep to the overall theme of natural colours. The colors choice was made with the help of the ColorSpace and Coolors website.
The colours were tested on Webaim using their contrast checker. In all combinations of colors, the ratio was higher than 14.00:1 meaning that they are a great fit.
#FFF9EA + #0E150E = ratio 17.65:1.
#CAF0EA + #0E150E = ratio 15.15:1.
#DCE6C1 + #0E150E = ratio 14.24:1.
#FFF9EA + #0E150E = ratio 14.24:1.
Images are located in every pages All pages have the same thematic layout, and the layout should be consistent on all pages, including the home page. Images were downloaded from Pixabay, Pexels and drawed by the illustrator Hefestus Cave (exclusively for this project). The images are styled with curved borders which is modern and gives a softer effect which is more pleasing to the user.
Icons were used for social links and buttons. The icons used on the site were taken from:
To keep the user interface easy and smooth as possible, I choose the sticky nav bar style and a storytelling mode. The theme remains the same throughout all pages:
- Home Page: The webpage layout begins with an attractive hero image that includes a call to action prompting visitors to view the available plans. Following this, visitors are presented with various plan options. After the plans, the next section explains how the service works, followed by a "meet the chef" section. The footer section contains additional small navigation and social media links.
- Plans Page: Showcase the week's meals and explain the personalised plan.
- About Page: Allows the users to see ethos of the business.
- Contact Page: Gives users a chance to communicate with the company and start placing an order.
- Thank You Page: After the form is submitted and thankful message appears to provide the answer with a confirmation.
- 404 Error Page: There's a 404 Error Page that handles in case of broken links.
The website contains 6 pages (home page, plans page, about page, contact page, thank you page and 404 error page).
- Favicon inspired in the Chef Mil. Keep up with branding and high design.
Favicon Branding
- Sticky navigation bar that remains visible at the top of the screen as the user scrolls down the page.
- Camouflaged color creating a stylish effect when in contact with specific sections.
- Hamburger menu on smaller screens for responsiveness.
- Enables easy and smooth navigation.
- Every navigation link has a border when its hoovered which stays activated according to the page you're currently on.
Sticky Navigation Bar
Camouflaged Effect
Hoover Border Effect
Hamburger Menu
- Links to social medias at the footer.
- Small mouse to appoint a link which redirects to a certain area of a different page.
Footer Icons
Mouse Icon
- Social media links.
- Pages links.
Footer
Smartphone's Footer
- Makes the website more appealing and professional looking.
- Stylish eye catching button with hoover effect.
- Call to action.
- Stylish Button.
Hero Image
Stylish Button
- Guide the user through the plans option.
- Plan explanation.
- Link to see the weekly dish and understand the plan. When vegetarian, personalised or traditional link is clicked it loads the correspondent local in the browser flow.
Select Your Plan Section
Inner Hyperlinks
- Caught user eyes while explaining the process, enhancing their experience.
- Hoover effect for stylish effect.
How It Works Section
Hoover Explanation Circles
- Meet the chef behind the curtains.
- Explore the company history ad ethos.
- Stylish Button.
Meet The Chef Section
Stylish Button
- Showcase the weekly food.
- Explanation of the personalised plan.
- Stylish buttons in the same layout of the home page to mantain the design organic.
Traditional Section
Vegetarian Section
Personalised Section
Stylish Buttons
- Meet the chef behind the curtains in details.
- Learn the company history and ethos.
About Page Sections
- Form to order.
- Shadow behind the input text to reinforce that is selected.
- Stylish Button.
- Input required to avoid mistakes and poor experience.
Form Section
Stylish Button
Input Shadow
Input Required
- When the form us submitted the Thank You page loads.
Thank You Section
- Page that redirects broken links.
404 Error Section
A few features that could make the website even better are listed here:
-
Add a fifth section on the home page displaying the weekly food in a carousel. Updates every week;
-
Add a "Products" page where it's possible to sell merchandise, condiments, jars of butter and pieces of bread;
-
Add a customer review section;
-
Add a search bar. As the website grows, it can become harder for users to find what they're looking for;
-
Implement a login system where the user can have a profile and access their orders;
-
Implement a loyalty program that rewards customers for making repeat purchases or referring friends to Mil's Kitchen. This can help increase customer retention and attract new customers.
The following languages were used to develop the website:
- HTML
- CSS
The following resources and tools were used to develop the website:
- Git
- Github
- Gitpod
- Pexels
- Behance
- Codepen
- Favicon
- Unsplash
- DevTools
- Balsamiq
- W3 Schools
- Codecademy
- Google Fonts
- Font Awesome
- Stack Overflow
- Adobe Photoshop 2023
- Adobe Lightroom Classic
- Techsini Mockup Generator
- GitHub Wiki TOC generator
- W3C CSS Validation Service
- W3C Markup Validation Service
- WAVE Web Accessibility Evaluation Tools
The Nu HTML Checker (W3C) is used to validate HTML documents. The page passed without any errors.
HTML Validation
The W3C Jigsaw CSS Validation Service is used to validate CSS documents. The page passed without any errors.
CSS Validation
The WAVE web accessibility evaluation tool by WebAIM was used to ensure the webpages met accessibility standards. All 5 pages passed without any errors.
Wave Validation
- Ipad Pro
- Galaxy S20
- Macbook Pro
- Iphone 13 Pro
- Iphone 14 Pro Max
- Notebook Acer Predator Helios 300
I ran into a bunch of small bugs while working on the project, but I managed to deal with them by looking up online and getting help from my colleagues. Here are a few tricky ones that I had to write down so I wouldn't forget:
Bug: A white bar appeared on the right side of the screen on responsive tests when under 400px.
Fix: The width of certain elements were set in non responsive way through a fixed width (px). The width was changed to %.
Bug: The sticky navigation bar wasn't working.
Fix: Added a container element wrapping all the others.
Click Here To See The Live Website
The website was deployed through the use of GitHub Pages, a feature built in to GitHub. This can be done by following the steps below.
- In the desired repository, click on "Settings" from the top menu.
- From the side menu to your left, select "Pages" in the "Code and automation" section.
- Make sure the "Source" option is set to "Deploy from a branch"
- Select the desired "Branch" from the drop down below (main branch in most cases, making sure the director is set to /(root)).
- Select "Save", and after it refreshes the page, you will see a box at the top of the page providing you with the URL of your now published site.
To contribute or check the code yourself, you can fork or clone the repository as well.
- Go to the desired repository
- Click "Fork" in the upper right corner
- Select the owner, and set the repository name. A description can be added if desired
- Choose whether to copy the default branch, or all branches
- Click "Create Form"
- Go to the desired repository
- Click the "Code" button at the top of the files section of the page
- Select your desired method for cloning (HTTPS/SSH/GitHub CLI)
- Open Git Bash
- Change the current working directory to the location where you want the cloned directory
- Type "git clone", and then paste the URL you copied earlier. It will look like this, with your GitHub username instead of "YOUR-USERNAME": "$ git clone https://github.com/YOUR-USERNAME/DESIRED-REPOSITORY"
- Press Enter. Your local clone will be created.
A list of references used for the site:
- Sticky Navigation Bar
- Responsive Web Design
- Box Shadow
- Learn Flexbox
- Style Input Type File
- Love Running Project
I would like to take this opportunity to acknowledge and thank the following people:
- My actual manager, Saoirse, for letting me study.
- A big thank you for everybody on Code Institute's Slack Channels.
- My friend Dion, who is a front end developer and for the insights given.
- Barbara, tutor from Code Institue, you are a star. Thank you for the help.
- My loved husband, Adson Aquino, who's always by my side. And also because he drew 3 images for this first project.
- My sister, Dana Braga, who without knowing how to develop, were able to help me when I was lost. Thank you for the long hours of nerve wrecking and your brilliance.