Del Institute of Technology’s Campus Website Redesign, Part 1
The steps and activities involved in redesigning Del’s Campus Website.
Contents
Part 1: Del’s Website Analysis
In this occasion, I will attempt to redesign Del’s campus website using various references and methods based around User Experience Design.
Del Institute of Technology is one of the recently emerging educational institutions in North Sumatra province of Indonesia. Based in Toba Region, the campus focuses on Information Technology and multiple Engineering fields.
Seeing as how Del’s dominance lies upon the IT field, its campus website should have adequate, if not excellent, representation of the campus’ information.
Furthermore, the User Experience in the website’s User Interface needs to be on point for the correlating target audience. With that in mind, I will put my efforts to evaluate, review, and redesign Del’s campus website.
I will be utilizing the currently present bases of knowledge surrounding UX Design and referring to other campuses’ websites, local and foreign.
How Del’s Website Compares
Based on my personal observation and of my colleagues’, there are several aspects which can be improved from Del’s campus website. However, in order to deeply grasp the necessities for the improvements, we need to analyze the User Interface by utilizing the proper methods.
In a typical campus website, the contents will consist of general information, campus life and activities, ongoing events, faculties and majors, etc.
In order to lure the target crowds to stay in the website, the information flow and nuance must be presented in ways that make it entertaining, informative, and fulfilling.
Thus, Del’s website must achieve the characteristics and criteria of a properly developed website.
Here is Del’s current campus website map.
As can be seen, the site map hierarchy is noticeably dense and vast. There needs to be efforts in order to streamline and revise the site map for efficiency.
Here is a display of one of Del’s website feed.
One approachable method to evaluate User Interfaces is the use of the Heuristic Evaluation method. This method requires User Experience evaluators or experts to analyze the usability of User Interfaces.
Jakob Nielsen describes ten usability heuristics, which is typically utilized in every Heuristic Evaluation.
The usability heuristics and their comparison to Del’s campus website are as follows.
1. Visibility of system status
When the Home Page is accessed, the Home and Regulation texts in the navigation bar are both highlighted in yellow, which confuses the perception of which page is active.
2. Match between system and the real world
The love sign in the Giving Program button can be related to the real world’s value of compassion and sharing.
3. User control and freedom
During the interaction with Del’s campus website, there is a lack pop-ups and/or forms that inhibits the user from leaving the current page. We are free to continue or return to a different page at all times.
4. Consistency and standards
There are some issues to be discussed regarding this heuristic.
One of them is the use of multilingualism in the website’s writing, granted that the website’s language is set to Indonesian.
While the rest of the navigation texts are in Indonesian, the Home button is in English.
This also occurs in many parts of the website such as Giving Program, Upcoming Events, and Links.
Another issue is the use of font sizes. Most of the time, the problem occurs when the texts are to small to be properly read.
In Latest News, we can observe several issues.
The first and obvious issue is the use of smaller fonts which inhibits the ease of reading. The second issue is the use of multiple languages. The third issue is the positioning and layout of the contents, which also inhibits the reading.
5. Error prevention
During the interaction with Del’s campus website, there is a lack of particular activities which will render the user immobile in the site. The directions and link texts are clear and consistent with the contents provided, considering they lack breadcrumbs as a guide.
6. Recognition rather than recall
Due to the lack of breadcrumbs, the recognition points available for the users are the site’s consistent frame and the navigation bar. This may trouble some users as there are certain inconsistencies in the navigation bar as mentioned in the Home Page.
7. Flexibility and efficiency of use
The navigation bar stores a lot of sub-menus with a form of layout which may inhibit the ease of navigation and content search. That may occur because of the text’s font size which increases the chance of a misclick.
8. Aesthetic and minimalist design
Regarding this heuristic, there are parts of the website that may have been placed in irrelevance.
When opening About Del, there is a lack of explanation stating whether the contents refer to the context of Del Foundation or Del Institute of Technology in particular.
Also, there’s a presence of Upcoming Events, Links, and Announcements that are place on every left side of Del’s website page. The three components may be irrelevantly placed.
For Upcoming Events, it lacks redirection to contents. For Announcements, it is already available in the Home Page’s main body. And for Links, its contents can be place within another place of the right context.
9. Help users recognize, diagnose, and recover from errors
In Del’s campus website, there are some blank links that may be encountered. One of them is the Staffs sub-menu, located under the Civitas navigation menu. Among the three subs available, the Staffs is the only one that lacks access, which in turn may inhibit the user’s navigation and knowledge of error.
10. Help and documentation
Del’s campus website doesn’t have an easily accessible website map. There are also no breadcrumbs. But the search function found in every page works.
Here is an example of the search function utilization.
After observing the usability heuristics of Del’s Campus Website, there are several heuristics that need improvements.
By order of priority, the heuristics are listed as follows.
1. Consistency and standards
2. Visibility of system status
3. Flexibility and efficiency of use
4. Aesthetic and minimalist design
5. Recognition rather than recall
6. Help users recognize, diagnose, and recover from errors
7. Help and documentation
References
- Available: https://www.nngroup.com/ [Accessed in May 30th 2020]
- Available: https://www.riyanthisianturi.com/ [Accessed in May 30th 2020]
- J. J. Garrett, The Elements of User Experience, New York: Pearson Education, 2010.
