Del Institute of Technology’s Campus Website Redesign, Part 2

The steps and activities involved in redesigning Del’s Campus Website.

reinheartcs
4 min readJun 1, 2020

Contents

Part 1: Del’s Website Analysis

Part 2: Exploration of Other Campus Websites

Part 3: Prototyping, Usability Testing, and Summary

Initial Exploration

Seeing that Del’s website is targeted for the crowds who are interested in furthering their studies, the website needs to emit a significant impact in order to attract their attention.

In essence, a certain interest is needed with adequate quality components to have the target crowds stay longer and return more often.

Some of the interesting local and foreign websites I’ve that explored are:

  1. University of Indonesia’s,
  2. Bandung Institute of Technology’s,
  3. President University’s, and
  4. Kyoto University’s.

The points of interest that I found in these websites are as follows.

A. Aesthetics and artistic emphasis with the use of proper visual features.

Image: Kyoto University’s Homepage — Features Section.
Image: President University’s Website Homepage — Information Section.

Kyoto University’s website applies symmetrical information blocks with minimal texts highlighting the contents received upon click.

President University’s website applies the asymmetrical approach with clickable buttons in each block’s corner to access the contents.

The photographs presented within the information blocks of both websites provide the artistic feel of campus life and interactions.

One thing to note is that Kyoto University’s website uses more darker colors, which may weaken the feel of invitation and highlights objectivity. This is aligned to the theory of hues in common design and Yin-Yang principles.

B. Simple and elegant use of necessary and proper information.

Image: Bandung Institute of Technology’s Website Homepage Header.

Bandung Institute of Technology’s website applies a black-and-blue themed header with generous spacing and minimal texting. The header points out the necessities which are typically sought in an educational institution’s website.

Image: University of Indonesia’s Website Homepage Header.

University of Indonesia’s website also approaches similarly with a white-and-yellow theme. The site navigation texts are more centrally aligned.

One thing to note is that the simple presentation of information in both websites may inhibit understanding if the punchlines lack needed representation of information. This is in line with consistency and standards heuristic as described by Jakob Nielsen.

C. Structured and comprehensible information hierarchy.

Image: University of Indonesia-s Homepage — Information Display.

University of Indonesia’s website homepage displays a swipe-capable mega-sized Headline, sequentially followed by the News section, Admission info, International Scholar info, and the Videos Channel section.

Its use of blocks, sectional background colors, and adequate white-space gives the page structure and better comprehension of the information displayed.

Image: President University’s Website Homepage — Information Display.

President University’s website homepage also approaches with an enormous swipe-able Headline, sequentially followed by the Search function, the COVID-19 Information Updates section, the General Information Blocks section, Merchandise info, Community Podcast info, and the Footer section.

The rank of informational significance applied can be easily understood for the sections are defined by their background colors.

One thing to note is that the order of contents in both websites may be improved by swapping the least relevant sections with more objective contents. This is in line with flexibility and efficiency of use heuristic as described by Jakob Nielsen.

D. Ease of navigation.

Image: Kyoto University’s Website Homepage — Mega Drop-down.

Aside from the search function, Kyoto University’s website also applies the use of mega-drop-downs in order to display the full extent of the site’s navigation.

Image: Bandung Institute of Technology’s Website Map.

Bandung Institute of Technology’s website provides a site map which can be accessed from the site’s footer.

One thing to note is that Bandung Institute of Technology lacks the use of breadcrumbs, which inhibits navigation traceability. This is in line with recognition rather than recall heuristic as described by Jakob Nielsen.

References

--

--

reinheartcs

I am an active learner aspiring to be an entrepreneur/business developer. Let’s jump right into it!