Here, I have focused on quality of the code over quantity, I have only implemented features that are useful to the personas I created in unit 1 and haven’t implemented gimmicky features that don’t serve the personas any use. I would like to implement all 4 ideas as I have some extra time on my hand.

Dark Mode (Enhanced)

This will be an elegant way to implement dark mode into the website as I will be using local storage to keep track of the user’s selection even after they have reloaded the page and between website pages. As each persona user reads through the website, their eyes might get fatigued from black text on white backgrounds, so including the ability to change to dark mode for ease of reading is critical here.

Email Verification

            This feature is key when sending emails in the next unit as we need the email that the user entered to be valid. This will be our only way to reach back out to the user after they submit the form. All personas will need to enter a valid email, this ensure that they will be reachable, and messages are not anonymous. To achieve this, we can use some simple regular expression to validate the email.

Preload Images

            This function will preload all the images that the website will use as soon as the user accesses the landing page. While thinking about scalability of the site and the future projects that we are going to develop, I realized that images are a key part of it as it adds “life” to the page. Having a lot of images could severely impact website performance and would require all the personas to have high speed connections for a smooth experience. Especially with persona 3, small business owners may not have access to the fastest internet available, so creating a website that loads in sub 100ms time is key. Preloading these images will create a smoother experience for everyone.

Dynamic Card Movement on The Page

Adding some movement to a page as it loads gives the illusion that the website is dynamic. This keeps our website lively and interesting. I’ve always gravitated to websites with unique features such as a new take on parallax scrolling or a cool JS or CSS feature. Having some movement on the page has been shown to increase user retention and time spent on the page. In this function I will move the project tiles into place after some time after the page loads.

Landing Page link: https://landing.athabascau.ca/file/view/14794376/unit-5-javascript-ideas