Before I was hired as a Front-end Developer at King Faisal University, the team used templates to fill gaps in their website design. However, they faced various issues with those templates, as they were outdated and did not build correctly. This created problems for the university's digital services, which were not meeting the needs of their users. As a result, our team's mission was to re-design all of these web apps from scratch, with a focus on improving the user experience and usability.
As a front-end developer, I conducted an audit covering the following points and then fixed them according to the new design:
Let's start to rebuild these web apps 🔨
There is nothing wrong with using a template. the thing is, based on business requirements, you have to adjust the template to fit your need. this way will break the template functionality which makes it unusable on mobile screens.
According to (Enge, 2021) that 68.1% of all website visits in 2020 came from mobile devices — an increase from 63.3% in 2019. Desktops drove 28.9% of visits, while 3.1% of visitors came from tablets.
The majority of users of the university's digital services are students. they prefer using smartphones over desktops. if the app doesn't work on mobile, then you failed to reach your target users.
The approach i conduct to design any web application is [Mobile-First Design](https://www.browserstack.com/guide/how-to-implement-mobile-first-design#:~:text=Mobile-First Approach-,What is Mobile-First Design%3F,up to larger screen sizes.) with the help of Bootstrap's grid system, we manage to layout the structure of the page pretty easily. Responsive Viewer Extension is a tool that helped debug the design while developing it.
According to a survey conducted by Imperva in 2016, 62% of online shoppers will wait no longer than five seconds for a page to load before abandoning it. This highlights the importance of optimizing page load times, as prolonged wait times can result in significant user drop-off rates.
As part of my role as a Front-end Developer at King Faisal University, I conducted an audit using Google Lighthouse to evaluate the load times of the institution's web apps. The results revealed that, on average, it takes seven seconds to load only the content of a page, while the full page can take anywhere between 15 and 30 seconds to load. This delay is primarily due to the use of large image resolutions and unused JavaScript libraries. In order to address this issue, the solution was to use JPEG and SVG images with medium resolutions to load faster, and import the libraries used on the page and minify HTML/CSS/JS code when deployed to production. Through these efforts, the performance of the university's web apps was greatly improved.