```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FFpnvvdwTYsct8qx5H5eK1VGTgfw2%2Fsas9wbahxoYam9zXZ40u%2F88ce4a94-dfa3-40b5-9884-399d283dc1ca.png?alt=media&token=53102d55-8322-49b6-b468-2a203bfad190","id":"88ce4a94-dfa3-40b5-9884-399d283dc1ca","width":842,"height":595,"filename":"A4 - 9.png","type":"image/png","caption":"","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FFpnvvdwTYsct8qx5H5eK1VGTgfw2%2Fsas9wbahxoYam9zXZ40u%2F35e94962-4585-42a1-bc88-6db314480fcd.png?alt=media&token=f51d8d51-c23d-415e-89bf-d4e5424b8b97","id":"35e94962-4585-42a1-bc88-6db314480fcd","width":842,"height":595,"filename":"A4 - 10.png","type":"image/png","caption":"","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FFpnvvdwTYsct8qx5H5eK1VGTgfw2%2Fsas9wbahxoYam9zXZ40u%2F52a5c208-c46c-43f7-856c-d8b96f058ba2.png?alt=media&token=a9167c2c-e623-4e17-b7a6-a11f0c2d0290","id":"52a5c208-c46c-43f7-856c-d8b96f058ba2","width":842,"height":595,"filename":"A4 - 12.png","type":"image/png","caption":"","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FFpnvvdwTYsct8qx5H5eK1VGTgfw2%2Fsas9wbahxoYam9zXZ40u%2F04cdbf8c-a4d8-4f9e-ab0c-006d8113817c.png?alt=media&token=7ace40f6-e49b-404b-b5e8-0f4c5d373584","id":"04cdbf8c-a4d8-4f9e-ab0c-006d8113817c","width":842,"height":595,"filename":"A4 - 13.png","type":"image/png","caption":"","border":true}]}
```

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.
>
> [Mobile vs. Desktop Usage in 2020](https://www.perficient.com/insights/research-hub/mobile-vs-desktop-usage)

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](https://www.browserstack.com/guide/how-to-implement-mobile-first-design#:~:text=Mobile%2DFirst%20Approach-,What%20is%20Mobile%2DFirst%20Design%3F,up%20to%20larger%20screen%20sizes.) with the help of [Bootstrap](https://getbootstrap.com/)'s grid system, we manage to layout the structure of the page pretty easily. [Responsive Viewer Extension](https://responsiveviewer.org/) is a tool that helped debug the design while developing it.

### **Performance**

According to a survey conducted by [Imperva](https://www.imperva.com/blog/ecommerce-study/) 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](https://www.w3.org/TR/html401/struct/global.html), 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](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) and [attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes) that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.
>
> [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)

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.

My Contribution to Make University's Digital Services Accessible to Everyone

UX Engineer

Games in EdTech

Twitter thread exploring game design methods in EdTech from the perspective of a UX designer.

certificate of graduation from Udacity front-end Nanodegree program collaboration with Misk Academy

Front-end Web Developer Nanodegree Program

Murshdk helps you to find the most suitable track for your tour with the best tourist guides to provide everything you need. Worked as UX Engineer

Murshdk: The Tourist Guide Platform

Amlak is cloud application that helps real estate investors to manage their assets. I worked as Brand and Web Designer

Amlak: Rental Management System

Kitchen Words is a mobile game created for kindergarten kids to learn vegetables' names in Arabic by dragging letters in the right position. Designed using Origami Studio

Kitchen Words

As HCI-focused mentor at ICPRE2023 Mini-Hackathon, my role is to guide participants' innovations in the field of healthcare by providing valuable insights and feedback to help teams develop innovative and human-centric solutions that address healthcare challenges.

Mentor

- Design customer-centric journeys based on business requirements and system computational resources.

- Collaborate with stakeholders to involve them in design process, translating business requirements into actionable features and user stories.

- Work closely with product manager, developers, and entire cross-functional team to conceptualize and design complex applications for specialized domains.

- Conduct usability inspection methods including expert reviews, consistency inspections, and cognitive walkthroughs to ensure user-centered design, learnability, and usability.

- Adopt agile methodology and systemized team workflow using JIRA, Obsidian, Sketch, Sympli, and Origami Studio.

- Create a design system that incorporates the organization's collaboration and empowers designers to create consistent user experience across products.

UX Designer

- Designed and developed more than 23 web applications using web standards such as HTML5, CSS3, Javascript and jQuery along side with Razor as server side rendering.

- Ensure optimal user experience by practicing web accessibility, page performance optimization, search engine optimization, and responsive design.

- Design Desktop and mobile application using Figma, Adobe XD, inVision Studio.

- Comfortable using git commands and Visual Studio TFS.

- Transform any prototype into working code

- Collaborate and Communicate with the technical team to deliver valuable products

Hamad K. Alotaibi

2022