Offshoot - Project (2018)

  • Calvin Keesoony

Company: University of Westminster Type: Coursework Date: April 29th 2018 This is a web app developed as part of my final year project in 2018. The goal is to allow users to locate fruit trees/plants in their local area. This project is unique, because of the fact that it utilises the natural resources around us. Offshoot is a term used to describe branches poking out the side of a tree. Link: https://calvinkeesoony.github.io/offshoot/

Branding Guideline
This theme of this app relvolved around nature and that had to be reflected within the branding. Colour scheme is green for the leaves, brown for the branches and white to contrast.
Flowchart
This is the flowchart for Offshoot created via Google Drawings.
Home - Wireframe
Information - Wireframe
About - Wireframe
Contact - Wireframe
Landing Page
This is a web app developed as part of my final year project in 2018. The goal is to allow users to locate fruit trees/plants in their local area. This project is unique, because of the fact that it utilises the natural resources around us.
Homepage
This page displays various parks, even those as part of the royal parks of London. The images of the parks along with the park name is shown.
Information Page
This page redirects the user from the homepage and displays information for "Battersea Park", which consists of: Park Name, Description (fruit, plants and activities), Address and Website.
About Page
This page displays information about the company such as: Name, Establish Date and Origin.
Locations Page
This page displays instructions on how to locate/enter details about a park. Across the left side of the page there is a Google Maps API which display icons for various fruit trees, whereas on the right side it shows an input form for entering details about the location of the fruit tree.
Contact Page
This page displays contact information of the company such as: Email Address, Phone Number and Address.
Landing, Home and Information Page (Responsive)​
First page is the landing page. Second page is the homepage. Third page is the information page. The content is centered and stacked on top of one another, on each page.
About, Locations and Contact Page (Responsive)​
First page is the about page. Second page is the locations page. Third page is the contact page. The content is centered and stacked on top of one another, on each page.