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.
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.
- As a First Time Visitor, I want to be able to understand the main purpose of the site quickly.
- As a First Time Visitor, I want to be able to view different renewable energy investment opportunities.
- As a First Time Visitor, I want to be able to grasp the benefits of investing in renewable energy.
- As a First Time Visitor, I want to be able to learn about FinergyCloud's mission and vision.
- As a Returning Visitor, I want to be able to check for new investment opportunities.
- As a Returning Visitor, I want to be able to find the best contact method.
- As a Returning Visitor, I want to be able to catch up on renewable energy news and updates.
- As a Frequent User, I want to be able to log into the account to track investments.
- As a Frequent User, I want to be able to stay updated on changes in the renewable energy market.
- As a Frequent User, I want to be able to manage investment portfolio efficiently.
-
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.
-
-
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.
-
-
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.
-
-
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.
-
-
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.
-
-
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.
-
-
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.
-
-
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:
-
- 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.
- Visuals are carefully selected to resonate with the theme of renewable energy, emphasizing its importance and potential.
- The primary blue shade symbolizes trust and dependability, while green accents emphasize the eco-friendly theme of renewable energy.
- "Arial" and "sans-serif;" fonts are used to ensure readability and a professional look.
- Wireframes were designed using Visily app ensuring the site layout is optimized for various device sizes. [Visily.ai] (https://app.visily.ai/login)
- 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.
I have used the recommended HTML Validator to validate all of my HTML files.
- Full validation is available here:
I have used the recommended CSS Jigsaw Validator to validate my CSS files.
-
Result for style.css
I've tested my deployed project on multiple browsers to check for compatibility issues.
| Browser | Screenshot | Notes |
|---|---|---|
| Brave |  |
Works as expected |
| Edge |  |
Works as expected |
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) |  |
 |
 |
 |
Works as expected |
| Tablet (DevTools) |  |
 |
 |
 |
Works as expected |
| Laptop (DevTools) |  |
|
 |
 |
Works as expected |
| Desktop |  |
 |
 |
 |
Works as expected |
-
Each feature was tested rigorously, both manually and using automated scripts.
- A minor bug related to image loading on Brave was fixed by optimizing image sizes.
- Log into GitHub and locate the repository.
- At the top locate the settings option
- Scroll towards the bottom of the page and locate GitHub Pages
- Click on the link "Check it out here!"
- Under 'Source' dropdown, click 'Master' from the options.
- Click the save button.
- The site is now published, it may not be available immediately.
- The site URL is visible on the green bar under the "Github Pages".
- First you need to install the GitPod Browser Extension.
- Log into GitHub and locate the repository.
- Click the green "Gitpod" button just below the Settings.
- Now you created a new Gitpod workspace from the code in Github
- 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".
-
The icons used throughout the site were taken from Bootstrap
-
The fonts were imported from Google Fonts
-
All images were downloaded from UnSplash
- 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.