Skip to content

Explore renewable energy investment opportunities with FinergyCloud's cloud-based financial services. FinergyCloud offers cloud-based financial services including accounting, data analytics, digital banking, investment management, and regulatory compliance tools.

Notifications You must be signed in to change notification settings

Onuorah-Joshua-Nwani/ojn-msp-1-finergycloud

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

54 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

FinergyCloud

View the live project here

FinergyCloud is a leading platform offering renewable energy investment opportunities. The platform aims to inform users about the potential of renewable energy and the diverse investment opportunities it presents, catering to both novice and seasoned investors.

mockup

Index - Table of Contents

User Experience (UX)

Site Goals

FinergyCloud strives to provide a comprehensive platform that showcases renewable energy investment opportunities. With its intuitive design, visitors can access clear and concise information about the advantages of investing in renewable energy.

User stories

A. First Time Visitor Goals

  1. As a First Time Visitor, I want to be able to understand the main purpose of the site quickly.
  2. As a First Time Visitor, I want to be able to view different renewable energy investment opportunities.
  3. As a First Time Visitor, I want to be able to grasp the benefits of investing in renewable energy.
  4. As a First Time Visitor, I want to be able to learn about FinergyCloud's mission and vision.

B. Returning Visitor Goals

  1. As a Returning Visitor, I want to be able to check for new investment opportunities.
  2. As a Returning Visitor, I want to be able to find the best contact method.
  3. As a Returning Visitor, I want to be able to catch up on renewable energy news and updates.

C. Frequent User Goals

  1. As a Frequent User, I want to be able to log into the account to track investments.
  2. As a Frequent User, I want to be able to stay updated on changes in the renewable energy market.
  3. As a Frequent User, I want to be able to manage investment portfolio efficiently.

List of Features

Existing Features

  • F01 Navigation Bar

    • The navigation bar is placed on all four pages of the website and provide a consistent look. It includes a simple logo and links to the respective pages, Home, About Us, Services and Contact. It is responsive on multiple screen sizes and when on smaller screens the page links move under the logo.

      Nav Bar

  • F02 Landing Page

    • The landing area includes a jumbotron with a background image of wind vanes and a text overlay that clearly identifies to the user the type of business and the service it provides with a call to action button. The colours are clear and not overbearing. The blue colour scheme instils a sense of security, reliability and confidence.

      Landing Page

  • F03 Reasons Title

    • The "Why FinergyCloud" title leads the user to a section of positive attributes of FinergyCloud and builds confidence for the prospective customer.

      Reasons Title

  • F04 The Team's Section

    • The "Team's" section allows the user to learn more about the team especially its history, key milestones, team members and their roles and finally the products and services of FinergyCloud.

      Our Team Our Team Our Team

  • F07 FinergyCloud Services

    • On the Services page, you'll find a "FinergyCloud Services" section that includes five accordion dropdowns and five carousel images. Each dropdown provides a link to the Contact Us page. With its simple styling, the content is easy to read and free from unnecessary distractions.

      Services Services Services Services Services

  • F08 Contact Us Page

    • The contact page features a call-to-action form with a dropdown menu of services. It also provides information about the company's location, along with an embedded Google Map pinpointing the location. Additionally, the page includes a phone number, email address, and operating hours.

      Contact Us Page

  • F09 The Footer

    • The footer is on every page, with social media icons for staying connected. Companies can share promotions and updates on these platforms. Links open in new tabs for easy navigation.

      Footer

  • How these features support the User Stories

    • The User Stories in the User Experience (UX) part of this document are numbered and categorised into groups A(first time visitor), B (returning visitor) and C (frequent visitor). The existing features are listed above as F01 to F09. Below is a traceability matrix which cross references the user stories and the features, highlighting where the features support the stories:

      traceability-matrix

Future features

  • User Dashboard Enhancements - Plans to introduce AI-driven insights for better investment decisions.
  • Interactive Charts - Integration of dynamic charts to visualize investment growth.
  • Mobile Application - A dedicated app for Android and iOS users is in the pipeline.

Design

Imagery

  • Visuals are carefully selected to resonate with the theme of renewable energy, emphasizing its importance and potential.

Colour

  • The primary blue shade symbolizes trust and dependability, while green accents emphasize the eco-friendly theme of renewable energy.

Typography

  • "Arial" and "sans-serif;" fonts are used to ensure readability and a professional look.

Wireframes

  • Wireframes were designed using Visily app ensuring the site layout is optimized for various device sizes. [Visily.ai] (https://app.visily.ai/login)
Home Page Wireframes

Home Page

  • Mobile screenshot
  • Tablet screenshot
  • Desktop screenshot
About Us Wireframes

About Us Page

  • Mobile screenshot
  • Tablet screenshot
  • Desktop screenshot
Services Page Wireframes

Services Page

  • Mobile screenshot
  • Tablet screenshot
  • Desktop screenshot
Contact Page Wireframes

Contact Page

  • Mobile screenshot
  • Tablet screenshot
  • Desktop screenshot

Technologies Used

Languages used

Frameworks, Libraries and Programs Used

  • Google Fonts was used to import the 'Arial' font family into the style.css file. This font is used on every page of the site.
  • Bootstrap was used as a front-end external CSS framework for modern responsiveness and pre-built components and to add icons for aesthetic purpose and UX design.
  • [Visily.ai] (https://app.visily.ai/login) was used to create the wireframes during the design stages.
  • CodeAnywhere was used as an IDE and to commit and push to Github.
  • Github is used as a repository for the project code after being pushed from Codeanywhere.
  • Am I Responsive was used to create the multi-device responsiveness image.

Testing

Code Validation

HTML

I have used the recommended HTML Validator to validate all of my HTML files.

CSS

I have used the recommended CSS Jigsaw Validator to validate my CSS files.

Browser Compatibility

I've tested my deployed project on multiple browsers to check for compatibility issues.

Browser Screenshot Notes
Brave screenshot Works as expected
Edge screenshot Works as expected

Responsiveness

I've tested my deployed project on multiple devices to check for responsiveness issues.

Device Screenshot Home Screenshot About Us Screenshot Services Screenshot Contact Notes
Medium Mobile (DevTools) screenshot screenshot screenshot screenshot Works as expected
Tablet (DevTools) screenshot screenshot screenshot screenshot Works as expected
Laptop (DevTools) screenshot screenshot screenshot screenshot Works as expected
Desktop screenshot screenshot screenshot screenshot Works as expected

Feature testing

  • Each feature was tested rigorously, both manually and using automated scripts.

    • Test Results

Bugs

  • A minor bug related to image loading on Brave was fixed by optimizing image sizes.

Deployment

GitHub Pages

  1. Log into GitHub and locate the repository.
  2. At the top locate the settings option
  3. Scroll towards the bottom of the page and locate GitHub Pages
  4. Click on the link "Check it out here!"
  5. Under 'Source' dropdown, click 'Master' from the options.
  6. Click the save button.
  7. The site is now published, it may not be available immediately.
  8. The site URL is visible on the green bar under the "Github Pages".

Github Clone

  1. First you need to install the GitPod Browser Extension.
  2. Log into GitHub and locate the repository.
  3. Click the green "Gitpod" button just below the Settings.
  4. Now you created a new Gitpod workspace from the code in Github

Credits

Content

  • All content was written by Onuorah Nwani.
  • The content on the services page was loosely based on list of services on my project topic "FinergyCloud".

Media

  • The icons used throughout the site were taken from Bootstrap

  • The fonts were imported from Google Fonts

  • All images were downloaded from UnSplash

Acknowledgements

  • I would like to thank:
    • My Code Institute Mentor and Cohort Supervisor, Elaine Broche and Iris Smok respectively who have provided great advice and feedback on how to plan and execute this project.

About

Explore renewable energy investment opportunities with FinergyCloud's cloud-based financial services. FinergyCloud offers cloud-based financial services including accounting, data analytics, digital banking, investment management, and regulatory compliance tools.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published