World House Experience

Hi,

World house experience is a work-in-progress charity organisation which is focused on local project to solved the global problems. This website is for people who would like to take small steps in their world to make a change in the bigger picture. In order to achieve this goal, the organisation creates projects and events that the users can attend. There is a Newsletter subscription form to recieve more details about projects and organisation's events.

User Experience

The navigation bar is at the head of the every page easily visible and clear for user to understand. There is also a "Donate" button on the left handside to support the orgnanisation financially. The "Home" button and the logo will take you to right back to the landing page.
"About" tab has the information about the organisation and the current members.
"News" tab gives the latest information about the organisation, this section tend to change monthly.
"Events" tab has the upcoming and on going event information such as event time, location and etc.
On the "Projects" tab you can enroll for a project or volunteer using Google forms. This page also has pdf links to the information on how to take further steps to get involve with the organisation.
In the footer you can see the contact details and you can subscribe to the news letter using your details. There are also social links for you to follow us to get updated information.

User Stories

As a user I would like

• to be sure immediately if the website is credible and trustworthy.
• to get more information about volunteering
• to know If I can take part in the projects
• to be able to contact with someone when I need to

As a owner I would like

• to make sure users will get the information they need.
• to encourage them to subscribe the news letter.
• to inspire them in order to get involve with local projects.
• to get donations in order to help the organisation.

Strategy

I wanted to answer users common questions such as "Is this what I expected to see?", "Does it offer what I want?", "Is it valuable enough for me to return?". For this website I aimed to create an user friendly, intiuitive structure.I want to inspire the users to take action with the organisation in many ways like volunteering, meeting people with common goals etc.

Scope

This website scope are those people who is concern about the environment and the current stuation in the world and would like to make the world better place.

Structure

When I built the structure I intended to be consistent in every page to make it predictable and easy to follow with visual images.
The landing page has the header, call out, short states and footer sections.
The navigation section is placed at the top of the page, along with the logo. I used tree structure therefore the menu on the mobile version collapses to the "hamburger" icon made with bootstrap classes.
Call out section gives the motto of the organisation with a button to encourage the user to click which takes them to the "Volunteer Application" Google form.
Next section gives brief information about the organisation to make sure users are aware of what the website offers before navigating to the other pages.
Footer has the subscribtion form, contact details and social links.
"About" page has a wind turbine image darkened with a layer to make sure content is readable.
"News" page is kept simple to focus on the content.
"Events" page has a poster image which gives information about the upcoming event.
"Projects" page has Google forms and extra information links supported with images.

Skeleton

I tried to give as many information as I can with minimum choices. Navigation has "about", "news", "events",and "projects" pages. I designed the website prototype on wireframe website.

Surface

I used the colours of the logo as a guidance for the website; blue and green colours which represent the environment. I used Google fonts for the website; font "Oswald" for the section titles and font "Exo" for the main content.

Features

User can

• Subscribe to the news letter or follow social media links to get information from any page.
• Fill a form in order to enroll for a local project from "Projects" page, apply to become a volunteer either from "Projects" page or with the direct link to Google form via "Take action" button on the landing page.
• Get the latest news about the organisation from "News" page.
• Learn the event time, location, program etc. from "Events" page.
• Donate to the organisation from "Donate" button from any page.

In the future

• I will make the website live.
• There will be additional features such as getting feed back from users to provide better service.
• I will create a user sign up for volunteers.
• I will create more reliable way to collect donations.
• I will complete the project page.
• I will fix the Internet explorer layout problem.

Technologies Used

In this website I have used html and css languages.Exo and Oswald google fonts, fontawsome for the social links icons, Canva to create the web site logo. I used wireframe to create a sketch of the website. I used bootstrap classes to make the website responsive. HTML validator and CSS validator to check the overlooked errors

Testing

To test the website I have used Google developer tools during and after creating each page. Which helped me to figure out the horizontal scroll problem I had, because of the bootstrap "row" class has a default of -15 margin and I have fixed it by adding another class of bootstrap called "m-0".

I also checked the website's responsiveness with Google Developer tools and I made changes on the mobile versions of the "Events" and "Projects" pages to make it mobile user friendly.

I tested the website on most used browsers such as Chrome, Mozilla, Opera, Safari and Internet Explorer, it works without a problem in all of them aside from Internet Explorer which shows a problem on the layout in the "Home" page call out section and I will fix it in near future. I also share the link with several users which some of them fed me back with the following comments:

It works well on my phone. I understand the content and like the logo and colours.

I understand well the requirements. I found the volunteering form very useful.

Credits

Pictures:

• Wind Turbine
• Seaturtle
• Orginisers' Pictures are not real pictures of the indiviuals, for this trial I used Google images and taken them from the following links (https://unsplash.com/s/photos/employee) (https://healthfactorial.s3.amazonaws.com/media/public/posts_images/DHT-testosterone.jpg) (https://d01salon.com/wp-content/uploads/2017/09/cihan-soysakal-thfjaztjb-g-unsplash-e1564664307604.jpg) (https://interflon.com/assets/advisors/employee_2.jpg)
• Project page pictures are taken from Canva.
• I also have created the event poster and the logo on Canva.

Content:

• The "Projects" page design is inspired from https://www.w3schools.com/css/tryit.asp?filename=trycss_css_image_overlay_opacity
• The "About" Organisers list is inspired from code institue lesson Bootstrap: Core components part 2
• The Collapsable menu is from Navbar Bootstrap

Thank you for visiting the website