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:
-
Responsive Design
-
Performance
-
HTML Structure
-
Content Visibility
-
Implement ARIA
Let's start to rebuild these web apps 🔨
Responsive Design
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 condut to design any web application is Mobile-First Design 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.
Performance
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.
HTML Structure
According to W3 standards, a valid HTML document should be written. The team followed these standards while also improving structure readability. After implementation, both SEO and accessibility significantly improved.
HTML semantics refers to using HTML tags to properly structure a page, making it easier for search engines and screen readers to understand the content. Proper use of semantic HTML can improve the accessibility and usability of a website. HTML5 introduced new semantic elements such as "header", "main", "section", and "footer", providing a clearer structure for web pages, making them easier to understand for both humans and machines.
Content Visibility
The template our team used failed the WCAG test in several ways. Some text was hard to read when an error message appeared, information about the service was hidden behind the screen, and some content didn't load properly. The redesign mission fixed these issues with a well-structured HTML format, WCAG-compliant color selection, and faster loading times. As a result, the content became visible and accessible.
Implement ARIA
The University values the sharing of knowledge and growth of the community, and therefore, digital content must be accessible to everyone. The team put a priority on implementing ARIA in order to make the university's website more accessible to people with disabilities. By doing so, they demonstrate their commitment to making their digital services accessible to all people.
Accessible Rich Internet Applications (ARIA) is a set of roles and attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.
With Bootstrap Components' built-in ARIA, we were able to structure the HTML document with accessibility in mind. We ensured that all headings were properly labeled, and that all interactive elements had clear and descriptive names. In addition, we utilized ARIA roles to help assistive technologies better understand the purpose of each element on the page. This attention to detail not only makes the website more accessible to those with disabilities, but also improves the user experience for all visitors.
Conclusion
In conclusion, the redesign of the University's digital services greatly improved the user experience and usability, making them more accessible to everyone. By implementing a Mobile-First Design, optimizing page load times, improving the HTML structure, making content more visible, and implementing ARIA, the team successfully addressed the issues faced by the outdated templates. The approach of putting users first is one that every product team should adopt, and I am proud to have contributed to improving the experience of the community of King Faisal University and Saudi Arabia Eastern Province.