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.
Mobile vs. Desktop Usage in 2020
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.
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.
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.
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.
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.
MDN Web Docs
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.
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.