Guled Investment Group

UX (User Experience)
Technologies Used
Features
Testing
Bugs
Deployment
References

UX (User Experience)

Project Goals

The goal for this project is to introduce to potential investors an investment fund managed by Guled Investment Group, including: what an investment fund is, who manages it and commission fee structure.

User Goals

Learn and understand what an investment fund is and how it works.
Find out whether investing into an investment fund is viable and beneficial to user.
Contact the company for more information and request to be contacted, by providing contact details, to learn more about:
- How investment funds work.
- The company's profit sharing and commission structure.
Learn more about the investment managers: their investing background and credentials.
Be reassured that the investment fund and company, that includes investment managers, are appropriately accredited and licensed.

User Stories

As a user, I want an informative and well-structured website so I will be properly informed without confusion.
As a user, I want to understand what an investment fund in a language I can understand without too much financial jargon.
As a user, I want to be able to easily contact the customer service so I can ask questions for clarification and understand better.
As a user, I want to be reassured that the company and its investment managers are well qualified and credible in investment management.
As a user, I want an easily navigable website that is straight to the point and leads me directly to the relevant information, avoiding unnecessarily tedious design obstacles.

Site Owner Goals

As a site owner, I want to provide the correct information on investment funds and effectively define in simple terms what it is. This is that user is well-informed before making a decision to invest.
As a site owner, I want to market to users about the investment fund we manage and show what makes it different, in terms of how we manage it and commission fee structure.
As a site owner, I want to make it as easy as possible for users to get in touch for more information to understand our services better.

User Requirements and Expectations

Requirements

Navigate the website using the navbar that scrolls to the requested section.
The website should be a one-page website to keep users engaged.
A contact form that allows user to input contact details and enquiries.
A learn more button in the header of the website.

Expectations

Visually appealing website kept simple and easy to use and without any complicated features.
Built to look professional and with high-quality design should reflect the service provided.
Provide the most relevant information that is most helpful to the user in order to keep things short.

Design Choices

Fonts

I tried to look for very simple fonts that were very easy to read and looked professional. I chose Roboto for all headings and text.

Colours

I used the Coolors colour generator to find the colour scheme that suited best for the project.

The purpose for each colour:

Davys Grey (#575A5E): for navbar link font and body font;
International Orange Engineering (#C40B08): for contact submit button, block dividers and emphasising key words;
Sapphire Blue (#246B94): for logo and headers;
Cultured (#F4F7F5): for most body backgrounds, and callout font colour;

Wireframing

For wireframing, I used Balsamiq. I used it to create simple wireframes showing the basic structure on which I built the website on. Some features maybe removed or added during development.

View wireframes for each device here:

What didn't make the cut and why:

My wireframes and the website in each display format have ended up looking different to each other. This is my first project in UI/UX and I have noticed that what I planned to do did not work in reality in terms of UX/UI. My wireframes looked amazing but it did not translate so well on the different device screen.

This is my first project in UI/UX, as a result there were a few features that ended up taking too much time and became too difficult for me to do. I shall return to them later on.

Technologies Used

Languages

Tools & Libraries

Features

Features that have been implemented:

Simple to use navigation bar on all screen resolutions.
Contact form to fill out with personal details
Minimalist and attractive design.
Single page scroll for easy navigation and use.

Features that will be implemented in the future:

Responsive video background in callout
Embedded videos explaining what we do and what we offer
Google maps location for potential clients to find our office
Social media links

Testing

I've tested the CSS code by direct input with the CSS Validator and it came out no errors found. Everytime CSS validator was used, it was by direct input of the code. I also prefixed CSS code using the Autoprefixer.

I proceeded to test the HTML with the HTML Validator and I got the following results:

Warning:
- "Who are we?" section lacks heading
- Contact form section lacks heading
Fixes:
- Changed all section header p tags to h2 tags

Easy To Follow Flow Of Information

User Story: I want an informative and well-structured website so I will be properly informed without confusion.

Plan
When the user opens the page, the information should flow in an easily understood way to follow and is structured in a way to make the information easy to read.
Implementation
Present the information in sections clear from each other with space and, within each section, information is presented in separate columns. Also, using colours that contrast well with each other.
Test
Contrast is tested as one of the audits in Lighthouse. Background and foreground colours did not have a sufficient contrast ratio specifically "Learn More" button in callout. Changed colour of button to International Orange Engineering #C40B08 for better contrast and, in addition, increased font size.
Results
Contrast is much better and button is more noticeable.
Verdict
The test has passed all the criteria and works like planned.

Easy To Understand

User Story: As a user, I want to understand what an investment fund is in a language I can understand without too much financial jargon.

Plan
The user should easily understand the investment concepts and services offered despite not being investment or finance professionals.
Implementation
Avoid as much financial jargon as possible, where necessary, highlight and ensure they are well-defined.
Test
Ask three of my friends, who are not investing professionals at all, to review the site and information provided. They have all said they understood the concepts and services offered on the site.
Results
Information is easily understood as planned, financial terms have been well-defined and properly presented.
Verdict
The test has passed all the criteria and works like planned.

Easy To Contact

User Story: As a user, I want to be able to easily contact the customer service so I can ask questions for clarification and understand better.

Plan
The user should be able to easily be able to get in touch with the site owner when they require more information or assistance with anything.
Implementation
A whole section is to be made for a contact form that is easy to find and accessible.
Test
The link that scrolls to contact form section is manually tested by clicking and accessibility is tested with Lighthouse. CSS and HTML validation has shown no errors and manual testing of link to contact section works. Accessibility was been rated 97/100 after testing with Lighthouse due to lack of contrast between the 'learn more' and submit buttons, and changed colour of buttons from Sapphire Blue (#246B94) to Cultured (#F4F7F5).
Results
Contact form is easily accessed by clicking on the link or scrolling to it manually and accessible.
Verdict
The test has passed all the criteria and works like planned.

Show Credibility of Managers

User Story: As a user, I want to be reassured that the company and its investment managers are well qualified and credible in investment management.

Plan
Create section specifically to show and describe the staff and investment managers of the fund.
Implementation
Show the photo of each staff member, short description of their work experience, qualifications and role.
Test
CSS and HTML validator was used as well as Lighthouse tests.
Results
CSS and HTML test results showed no error although Lighthouse test results showed the images did take too long to load. Their sizes were slightly reduce which has improved performance.
Verdict
The test has passed all the criteria and works like planned.

Easy To Navigate

User Story: As a user, I want an easily navigable website that is straight to the point and leads me directly to the relevant information, avoiding unnecessarily tedious design obstacles.

Plan
Create a single scroll site where the navigation links scrolls to the relevant sections of the page.
Implementation
Create a navigation link for every section of the site and scrolls to them when clicked. Limit number of section to just five.
Test
HTML validator was used and has confirmed there has been no errors. It has been manually tested across different platforms and works just as planned.
Results
The navigation links and scroll effects works across different platforms and works just as expected.
Verdict
The test has passed all the criteria and works like planned.

Contact Form

I got the contact form from Bootstrap which is used to contact the website owner for more information. I customized and styled it to fit the colour scheme and design plans. The user enters their personal contact information in the form field.
For now, there will be no feedback since it will not be possible to send a form. The site for educational purposes only.

Bugs

There have been a few bugs encountered and I will list them below with solutions.

Navbar links not positioned on right side

Bug
The nav links would not position on the right hand side of the navbar as planned in the wireframes.
Fix
I left it for later to figure out.
Verdict
The links work as planned and, HTML and CSS code has been validated with no errors. Since it was not too important for the design, I will returned to it later.

Navbar links pushed upwards during hover

Bug
Hover event on any navbar links shifts all of them upwards.
Fix
Created a transparent border under each link in .nav-link when there is no hover.
Verdict
The links work as planned and, HTML and CSS code has been validated with no errors.

Unresponsive video background for callout

Bug
Video background would not adjusted to smaller screens and would only occupy a small area of the screen rather than adjust to fit into the callout section.
Fix
Removed it and replaced it with an image background.
Verdict
HTML and CSS code has been validated with no errors. Since it is beyond the scope of my abilities and would have wasted time, will come back to it later on.

Background image would not appear

Bug
Background image for callout would not appear and background is blank with only the callout text.
Fix
Changed background-image property to background
Verdict
HTML and CSS code has been validated with no errors.

Unresponsive background image

Bug
Background image in callout section does not adjust in the expected responsive way on iphones and ipads. It maintains same dimensions, appears zoomed in and the scroll parallax effect does not work. Image is fixed in its position.
Fix
Completely removed scroll parallax effect for the sake of simplicity by removing background:fixed; from .section-background and .callout-container.
Verdict
HTML and CSS code has been validated with no errors. Site kept simple to improved responsiveness and improved performance.

Callout text is pushed under navbar

Bug
The main header in callout text is overlapped by the navbar at the top of smaller screen in portrait mode.
Fix
Hidden subheading on smaller screens with the class .d-none and .d-sm-block. Callout text has been positioned in the way as planned.
Verdict
HTML and CSS code has been validated with no errors.

HTML validation warning: Lack of header tags in callout

Bug
Section headers had p tags instead of h2 tags.
Fix
Changed their tags to h2 tags
Verdict
Checked HTML again on validator and no error has been come up.

Menu toggler icon shifted down in smaller devices

Bug
The menu toggler icon is positioned below navbar brand resulting in navbar more height of the screen and callout section.
Fix
Centered icon and navbar brand, while reducing its size, for screens with width smaller than 350px.
Verdict
It worked out well to leave icon positioned underneath brand with just a little adjustment. Checked HTML and CSS again on validator and no error has been come up. Works as planned.

Excessive space on sides of navbar on Surface Duo

Bug
There is a lot of space between navbar elements (navbar brand and menu toggler) and their respective sides of the Microsoft Surface Duo screen.
Fix
I'll leave it be for now since it is not too significant of a bug and I'll get back to it later.
Verdict
It is slightly different to what I initially planned for such a device but it is not too important of an issue to address now. Checked HTML and CSS again on validator and no error has been come up. Works as planned.

Deployment

This project was deployed via GitHub by executing the following steps. After writing the code, committing and pushing it to GitHub:

Navigate to the repository on github and click Settings.
From there, go to the Source section within the Github Pages section.
Select master branch on the dropdown menu, and click save.
Now the website is live on: https://yourgithubusername.github.io/your-repo-name
Any time commits and pushes are sent to Github, the Github Pages site should update shortly after.

To run the project locally: Click the green Clone or Download button on the Github Repository Using the Clone with HTTPS option, copy the link displayed. Open your IDE, and ensure the Git Terminal is open. Change the working directory to the location where the cloned directory is to go. Use the "git clone" command and paste the url copied in the second step.

References

Code References

Investment Information Sources

Image Sources

Special Thanks

My mentor and The Grandmaster Yoda himself, Simen Daehlin, for guiding me along the way and helping me find my way when I got lost. For being understanding and patient with me.
The Code Institute tutors and Slack community for their assistance and guidance.
ByIlsa and Anouk Smet for their awesome, well-structured READMEs that helped me to write mine.
The Code Institute tutors and Slack community for their assistance and guidance.

For educational purposes only.

code-institute-submissions / guled-investment-group Goto Github PK