Delila Kidanu - Oka Website Project for Milestone Project #1

The purpose of this project is to create a static (front-end only) website for the new Oka financial savings product coming to market soon. The pages explain the features of the application from savings features to growing features. The aim of the website is to showcase the product and educate potential users on its benefits. The website also allows for users to sign up for the service and get early access.

The website has a simple flow highlightint the various featurs of the product and includes images that make it easier for the user to visualize what the product looks like.

UX

This website is built to support potential future customers of the Oka product to learn about the offering from the product. The client Oka commissioned this website to build a base following who they want to convert into active users once the product is launched.

The target for this website/project is:

• Young Millenials
• Tech Savvy individuals who are financially contious
• Curious partners who want to learn more about the Oka product

The tone/communication of the website is:

• Down to earth and colloquial
• Conversational
• Friendly

User types:

1. As a curious potential customer, I want to learn more about Oka, so that I can determine if I want to use it.
2. As an early adopter, I want to get first dibs on using the Oka product, so I want to sign up for early access.
3. As a potential investor, I want to find more information about the product and test is marketability, so I want to read and sign up early.
4. As an early employee of Oka, I want to find out if people understand the value add of Oka, so I use the website text as a tool to test user understanding.

Website Wireframe here:

Features

Existing Features

• Back to Top Button: This allows a user to navigate straight back to the top of the page if they would like to visit another section. It comes in extremely useful on a long section on a mobile device.
• Social Media Links: This feature allows users to follow the company on Facebook, Twitter and Instagram for all the latest news.
• Sign up: This feature provides a form to the user in which they can sign up for early acces of the Oka application.
• Jumbotron: The jumbotron is the headline for the get started page, it reminds the user to sign up for early access.

Technology

• HTML The project uses HTML5 to set up structure and content.
• CSS The project uses CSS5 to create a simple and user friendly design.
• Bootstrap 4.5.2 This was used to get the layout up and running quickly and also use grids to help with the responsive design . https://getbootstrap.com/
• JavaScript The jQuery library was used by adding it to the HTML file.

Testing

Functionality Testing:

• All the links have been checked and they all are working.
• HTML Code Checked using W3 Validator HMTL
• CSS Code Checked using W3 Validator CSS

Usability Testing:

To test the usability I tested the website myself on safari and chrome. I used multiple tools to test the responsive web designs such as Responsinator and Screenfly. I pushed the website to family for testing, the feedback was centered around the simplisity and ease of use. The colors selected seemed to be unique and pleasant to the eye.

Through testing the website there was some alignment and sizing issues that arised. To fix this I had to read around the Bootstrap containers and the effects those have on alignment. Having understood that it allows me to fix the alignment of the navigation bar and the rest of the webpage to make it aesthetic and user friendly.

The Website was fully run through using multiple browsers:

• Chrome
• Firefox
• Internet Explorer
• Safari

As well as browsers I tested on multiple screen sizes as well for verification. Image of testing here:

User types testing and accessibility:

1. As a curious potential customer, I want to learn more about Oka, so that I can determine if I want to use it.

The user views the website on the landing page and has various options, 1) scroll down or 2) click on menu items. If a user is looking for more infrmation they will access this by scrolling down the page, starting from section 1 about the product, to the "Grow your money" page and lastly sign up on "Get Started" page.

2. As an early adopter, I want to get first dibs on using the Oka product, so I want to sign up for early access.

Early adopters that hear about Oka and want to see what it is all about can gain further information through the webpage. Their primary resource to complete their needs is on the "Get started" Page where they can leave their email address and get first access to the product, before anyone else does.

3. As a potential investor, I want to find more information about the product and test is marketability, so I want to read and sign up early.

Potential investors come to the page to access information. As they join the page their needs are to seek information, this is achieved through scrolling down the page to learn more about the product and its various features. As they scroll down they will see images and product explinations. They will then have the option to go to the "Grow your Money" page where they can read more about the product. Investors are often looking to access the tangible product so they will be directed to the "Get started page" to fulfill this need.

4. As an early employee of Oka, I want to find out if people understand the value add of Oka, so I use the website text as a tool to test user understanding.

Similar to that flow of the investor, prospective employees will access information throughout. An added element that will be interesting to them is the social links accessed at the bottom of the home page. This will provide the employee with opportunities to seek further information about Oka.

Credits

Content

The text for this website was self generated.

Media

The photos used throughout the site were designed using the Figma tool and inputed into the website.

Acknowledgements

I received inspiration for this project from a mixture of webistes but most notably Acorns and Revolut Websites.

• I managed the steps to inputting a scroll to top from - https://www.templatemonster.com/blog/back-to-top-button-css-jquery/
• Got inspiration for scroll feature from this project - https://github.com/Code-Institute-Submissions/jtuck15-milestone-project-1/blob/master/script.js
• Read me inspiration - https://github.com/marlene32100/nordicGlamping/blob/master/README.md

Deployment

GitHub Pages

The website was deployed using the following steps:

• Log in into GitHub;
• Click on repository;
• Select project to be deployed;
• Click on "Settings";
• Scroll down to "GitHub Pages" section;
• On "source" select "master branch" from the dropdown menu;
• Full page will be re-loaded automatically;
• Scroll down to "GitHub Pages" again;
• It will read "Your site is published at https://dkidanu1.github.io/Milestone_1/"

Replicate the code: If you are looking to adapt of utilise this code on your own, follow the below instructions:

• Log in to GitHub;
• Identify the repository you are looking for, in this case it can be found here https://github.com/dkidanu1/Milestone_1;
• Top-right of the page, click on a button called "Fork";
• This will will fork the code to your GitHub.

Gitpod Reminders

For this project the Code Institute student template for Gitpod was utilized. It has preinstalled all of the tools needed to get started.

To run a frontend (HTML, CSS, Javascript only) application in Gitpod, in the terminal, type:

python3 -m http.server

A blue button should appear to click: Make Public,

Another blue button should appear to click: Open Browser.

To run a backend Python file, type python3 app.py, if your Python file is named app.py of course.

A blue button should appear to click: Make Public,

Another blue button should appear to click: Open Browser.

Thank you for your review !