Empire Oranges | A fresh fruit delivery service.
Code Institute Milestone Project 1 - User-Centric Frontend Website
This project is a website that contains three pages: the home page, gallery and sign up. The purpose of this website is to attract and inform new customers by a simple, but strong, visual design. The website contains functional information, such as brief description of the subscription benefits, an image gallery and an FAQ section.
A live demo can be found here
Table of Contents
Introduction
My project is called ‘Empire Oranges’. It is a work of fiction, but as a concept seems to fit in well with culture lately. Every big company/ corporation wants you to join their subscription based service, and we see this vehemently with television networks using mobile phones as their platform. So, as I was reflecting on this as well as the current state of the world, with no one allowed out of their homes anymore, I thought to myself, it would be an amazing niche if there was someone offering a subscription based service for fresh fruits right now, and especially oranges. Pretty much guaranteed healthy food delivered to you regulary with out having to leave the comfort of your couch. So the company "Empire Oranges" are an old, family run business. Established over 200yrs ago, and are now global, with farms all over the world and looking to modernize business practices and begin diversifing their product placement, mostly by implementing a new subscription based service. As times are changing, they still remain in touch with their rustic Spanish roots, and this can be seen when you visit one of their farm cottages. The hospitality is to die for.
Empire Farms have been supplying oranges to local supermarkets and fruit & veg markets their entire lives, this has been a trying and tumultuous path, leading to millions of pounds's worth of food wastage due to fruits just sitting around, rotting, and catching flies in the open air. The new service aims to reduce shelf time by going directly to the customer, right at home. Cutting down tons of food waste, bringing the fruit to the customer quicker than supermarket home delivery services too and its already having a positive impact in cities surrounding their farms. So to celebrate a step in the company's new direction Empire Oranges needed a new website to promote the new service. My project is to develop a visually attractive and informative website for Empire Oranges, that can bring to life the idea of fruit being delivered straight to a customers doorstep.
UX
Motivation - Empire Oranges wants to;
- Diversify their product placement
- Eliminate food waste
- Be an environmentally sustainable brand
- Produce & sell high quality oranges.
Desire - Empire Oranges wants from the website;
- Show off their diverse products
- Make customers aware of their environmental impact and ethical practices
- Show they are an environmentally sustainable brand
- Sell high quality oranges directly to customers
Motivation - Customers want to;
- Eat healthy as part of a balanced diet
- Support fair trade businesses
- Support local farms and communities
- Feel like they're doing something/ part of the global village
Desire - Customers want from the website;
- See the diverse products Empire Oranges have to offer
- Become aware of Empire Oranges ethical practices
- See that Empire Oranges are an environmentally sustainable brand
- Buy product and have it delivered directly to their home
User Stories
- As a user of the website, I want everything layed out in a familiar way, with simple intuitive access to links.
- As a user of the website, I don't want to wait for the website to load, I want quick and fast loading times.
- As a user of the website, I want to see the range of products on offer, to know what I can expect.
- As a user of the website, I need to be able to contact anyone from the organisation, regardless of how big the company is.
- As a user of the website, I want to know I can have my doubts and questions answered, right there in front of me on the page.
- As a user of the website, I want to know that when I submit my email address, its actually a working link.
Wireframes
As part of the development process I created three wireframes for my website using [Balsamiq] This was at the start of the project and helped me work towards my final result. When you compare them as a 'before' and my final result as the 'after' you can see some features were left out amd some design elements where changed but overal you can see the wireframes have had an impact.
Below are the examples for each of my pages:
Features
- Navbar: - a responsive navbar that changes depending on what size screen your device is - making for easier usability
- Benefits of Subscribing: - a key feature of the home page which directly catches user attention
- Gallery: - Three large images showcasing the very best the company has to offer, with a descriptive paragraph
- Mini Gallery: - Smaller pictures underneath larger ones showing other varieties of oranges
- Prices: - The most important section, after the signup box, informing the customer on how much they can expect to pay
- FAQ: - A list of questions customers might find themselves asking a lot and helpful having answered
- Sign Up Form: - The most important feature, a simple box which when used connects the customer to the world of fresh fruit delivered monthly
Existing Features
- Navbar: allows users to view/ navigate the entire website with ease and without any awkward 'clicking to go back or forward', allows for comfortable browsing on mobile devices. I particularly enjoyed the Whiskey Drop tutorial with Code Institute and it inspired me with my navbar in this project
- Benefits of Subscribing: when you first arrive on the home page you are greated with the fact its a subscription service and its offering to save you time and money and provide a lot of choice of oranges
- Gallery: allows users to see the top three best selling products from the range of products
- Mini Gallery: allows user to see the rest of the products, if they are interested in knowing more than the top 3
- Prices: allows users to understand the upfront, monthly costs of the service and what they are expected to be receiving
- FAQ: allows users to find out what the answers are to questions they might have
- Sign Up Form: allows users to input their email address and start the journey of getting ornages monthly
Me: I feel these features currently achieve what both customers and the business want from the website
Future Features
- Customer feeback/ reviews: would help future customers decide on which products to buy
- Map of Farms: Some customers love a little getaway in the countryside, and what better place to have it than on an orange farm
- Loyalty Program: Birthday Emails and Discount vouchers, entice customers to keep returning. Good for business
Me: I feel these features would add a more fuller experience to families and friends looking to have time away, or time together
Features Left to Implement
- Contact Page: Gives customers more of a direct line of contact with human representatives from the company
- *A family section: having a part of the website dedicated to families and children entertainment - recipes, colouring pictures (downloadable pdf, easy to implement)
- Online Shop: Adding a shop so customers can buy from the entire catalouge of Empire Orange products
- User Account: Customers can keep their details safe, see order history
Me: I feel these features left to implement will add a richer user experience, especially being able to have an account, shop for whatever I wanted and get in touch if i had a concern
Technologies Used
The following technologies has been used in this project:
Languages
- HTML is the main markup language used in this project
- CSS is used for styling all the HTML
- JavaScript is indirectly used by Bootstrap for the navbar
Styling
- FontAwesome for the icons in the footer social links
- Google fonts for the 'roboto' and 'open+sans' fonts used within my webpage
- Adobe Colour Wheel for helping me decide on what shade of colours to choose
- Material.io by Google another helpful colour tool
Framework
- Bootstrap for its grid framework, and in this project the navigation menu and responsive column sizes
Images
- Tinyjpg.com I used this site to help reduce the size of the images
- crazymasalafood I got my images from this website
- Adobe Spark I created the logo from Empire Oranges using Adobe Spark
Testing
- Chrome DevTools I've used this tool so much over the last week I've even learnt the leyboard shortcut for it. I used this feature to test the responsiveness of the website as I was making it and to sort out any issues/ problems that occured.
- mobiReady to test website performance on mobile devices.
- CSS Validator I used this to validate the CSS code
- Markup Validator I used this to validate the HTML code
- HTML Formatter I used this to format my HTML
Testing
During this project I created a repository for it on github and accessed it through gitpod workspaces. Every change in the html/ css file was saved and then run locally by entering 'python3 -m http.server' into the terminal to view changes. If changes were successful I added the file to the git server by inputting 'git add (file name)' and then committed the files with a corresponding message indicating what changes had been made by inputting 'git commit -m "changes". After that I pushed the files to my repository using 'git push'
Stories
-
As a user of the website, I want everything layed out in a familiar way, with simple intuitive access to links.
- I ensured that the layout of the wesbite had a navigation bar at the top of the screen, the footer was at the bottom of the screen, and the website itself had visible links with white text and big yellow sign up buttons.
-
As a user of the website, I don't want to wait for the website to load, I want quick and fast loading times.
- I ensured that the images were compressed online using a compressor to reduce file size, enabling for quicker loading times
-
As a user of the website, I want to see the range of products on offer, to know what I can expect.
- I ensured that the website featured a responsive gallery so that anyone viewing it on any device could see the products.
-
As a user of the website, I need to be able to contact anyone from the organisation, regardless of how big the company is.
- A contact form is something which needs to be addressed, and can be done so at a later time
-
As a user of the website, I want to know I can have my doubts and questions answered, right there in front of me on the page.
- I ensured that the website featured a FAQ section, helping customers answer frequently asked questions without the need to contact the company
-
As a user of the website, I want to know that when I submit my email address, its actually a working link.
- I ensured that the email form has a working link, which opens up to a new page.
Test Scenarios
Below is a step by step process on how I tested each element of my website
- Links:
-
Top left logo:
- I went to the navigation bar at the top of all three pages
- Clicked on 'Empire Oranges' in the top left
- Link redirected to homepage, verifying that it works
-
Home:
- I went to the navigation bar at the top of all three pages
- Clicked on 'Home' in the top right
- Link redirected to homepage, verifying that it works
-
Photo Gallery:
- I went to the navigation bar at the top of all three pages
- Clicked on 'Oranges' in the top right
- Dropdown menu appeared
- On the drop down menu, I clicked on each of the links 'Valencia, Navel, Satsuma, More'
- Each link redirected to the corresponding section on product page, verifying that it works.
-
Top right 'Sign up' button:
- I went to the navigation bar at the top of all three pages
- Clicked on 'Sign up' button in the top right of the screen
- Link redirected to sign up page, verifying that it works
-
Hero Banner 'Sign up' button:
- I went to the Hero Banner at the top of the homepage
- Clicked on 'Sign up' button underneath the big white heading
- Link redirected to sign up page, verifying that it works
-
Subscription Benefits 'Read More' button:
- I went to Subscription Benefits on the homepage
- Clicked on the 'Read More' buttons under each benefit
- Link redirected to FAQ section on sign up page, verifying that it works
-
Footer navigation links:
- I went to the navigation bar at the footer of all three pages
- Clicked on all of the links 'Home, Oranges, Prices, FAQ and Sign up' along the top of the footer
- Links redirected to corresponding pages, verifying that it works
-
Footer social links:
- I went to the navigation bar at the footer of all three pages
- Clicked on all of the links 'Empire Oranges, Shamus Birch, Facebook, Twitter, Instagram, LinkedIn and Pinterest' along the bottom of the footer
- Some links redirected to corresponding pages, while others opened to corresponding pages verifying that it works
-
Prices 'Sign up' buttons:
- I went to the Prices at the top of the signup page
- Clicked on each of the buttons 'Try for free, today!, Sign me up!, Let's get started!' inside each price box
- Links redirected to signup form, verifying that it works
-
'Sign up' email form:
-
Submitted an empty form
- I went to the signup form at the bottom of the signup page
- Clicked on the 'Sign up' button inside the box
- A dialogue box appeared indicating the 'required' field needed to be filled in
-
Submitted the form with an invalid email address
- I went to the signup form at the bottom of the signup page
- Entered random text, then clicked on the 'Sign up' button inside the box
- A dialogue box appeared indicating the 'required' field was missing the correct information i.e the '@' symbol
-
Submitted the form with all valid inputs
- I went to the signup form at the bottom of the signup page
- Entered the text in the correct format
- Then I clicked on the 'Sign up' button inside the box
- I was redirected to the corresponding link, verifying that it works
-
-
In Conclusion: While initially setting up the href to the correct corresponding output, I still went through and individually tested each link, if there was a link that wasn't working I opened Chrome Dev tools to have a look at the code and see why
- Responsiveness:
While creating my website I used the bootstrap grid system to make the website responsive, adding rows and colums to most of my websites features.
Features on my website that work well with the responsiveness:
- Navbar: changes depending on what size screen your device is making for easier usability, and taking up less screen real estate. On mobiles, collapses into a hamburger icon with expandable menu revealing 'home, oranges (with expandable dropdown menu) and signup. Sign up button disappears altogether
- Footer: changes depending on what size screen your device is making for easier usability, and taking up less screen real estate. On mobiles, shrinks into a single column without the logo or disclaimer text
- Jumbotron: the header text on the hero banner changes content depending on screen size
- Subscription benefits: The three paragraph sections respond differenlty on different screen sizes, from a row of three paragraphs down to a row of two with the third feature wrapping to the row beneath and centraly aligning itself, down to a single column taking up full width of screen device. The icons on each benefit header disappear on small mobile screens
- Gallery: the three photos in the gallery respond to screen sizes to, from a row of three, down to two rows of two with a fourth picture appearing down to a single column taking up a devices full width. Text paragraphs respond to responsive display and shrink with screen size.
- Mini gallery: a single row of pictures underneath the main gallery, responsively changing to screen size from a row of four down to a row of three, down to two rows of two. Image sie is responsive too.
- Prices: The three price sections respond differenlty on different screen sizes, from a row of three paragraphs down to a row of two with the third feature wrapping to the row beneath and centraly aligning itself, down to a single column taking up full width of screen device -FAQ: the questions and answers section responds to screen size, the text wraps and stays aligned. -Signup form: the size of the sign up form changes depending on what screen size you are viewing it in
In Conclusion: The responsive features make the website better to use overal, making customers feel valued as they can open it on any device and the company benefits from it as they get to keep customers.
- Colour: While developing my website I used various online tools to determin which colours I wanted and which worked well together. I used Chrome dev tools to determine the contrast of text colour, and see if either the black/white coloured text worked well with the choice of background colour. If the dev tool showed a red X next to constrast I new those colours did not go well together.
In Conclusion: I've found colours that work really well together, and as a result it leaves a really good looking website that customers would love.
- Images: I reduced the size of the images, to improve loading times. I did this by using an online compressor
In Conclusion: My website has been loading quicker.
Bugs
I used a free service from mobiReady to test my website performance on mobile devices. It revealed a lot of interesting things, the biggest issue is with my CSS Measurements, I used far too many absolute sizes for a lot of things on my website. Absolute dimensions and positions in CSS directives should be avoided as they will not render correctly on all device types, and is something I still haven't addressed yet and will do in the future.
Deployment
GitHub Pages
To deploy the website on github pages, the following steps need to be taken:
- Open GitHub and go to your site's 'Repositories'
- Go to 'Settings'
- Scroll down until you see 'GitHub Pages'
- Under GitHub pages, click on the dropdown under 'Source' and select the 'Master Branch' option
- A green box should appear with the following message 'Your site is published at.../'
- After selecting this, you need to choose a 'Theme', this asigns a Jekyll file to your respository and allows your webiste to be accessable.
GitPod - running code locally
To deploy the code locally using gitpod, the follow steps need to be taken:
- Open GitPod, go to the Workspace your project is located in
- Once laoded, go the Console/ Terminal located in the bottom 3rd of the screen
- Input 'python3 -m http.server' then press return
- A dialouge box reading 'A service is available on port 8000' will show to the right. Click on 'Open Browser'
- This runs your code locally allowing you to view your project in the browser. No deployment necessessary
Credits
I wanna thank my mentor Akshat Garg for the skype calls and helping guide me during this project
Also thank you to the Student Care team, who helped me navigate this project while I was without a laptop for 4days in the middle of the project.
A big shout out to everyone answering questions on chatroom boards concerning HTML & CSS - I learnt so much more from reading the comments than getting the answers.
Content
I especially wanna thank Elisa Perks for helping me mull over my ideas and flesh them out. We came up with the subscription service together, however I wrote out all the code, reaad a lot of bootstrap documentation and sourced the information and images on oranges.
- Code for the navbar copied from Code Institute Whiskey drop tutorial
Media
All the descriptions and the photos used in in the photo gllery for this project were taken from crazymasalafood
The Empire Oranges logo on the homepage was made using Adobe Spark
Icons in the footer were taken from FontAwesome
Acknowledgements
I received a lot of my initial inspiration from Code Institute tutorials, especially with bootstrap and seeing how easy and put together that framework was
Disclaimer
This is a work of fiction. Names, characters, businesses, places, events, locales, and incidents are either the products of the author's imagination or used in a fictitious manner. Any resemblance to actual persons, living or dead, or actual events is purely coincidental.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent