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

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

Contents

Part 1: Del’s Website Analysis

Part 2: Exploration of Other Campus Websites

Part 3: Prototyping, Usability Testing, and Summary

The Improvements

The improvements revolve around how the campus information is presented for the target crowds and meeting their expectations.

The improvements needed are based on these five aspects.

1. Information Emphasis, pronounced in the homepage display.

The information points displayed, such as News, Activities, Announcements, and SPMB are presented with brief explanations. Even so, the displayed information in the homepage tends to be repetitive.

2. Target Audience.

The website itself owns the nuance of attempting to lure the general public that wish to know the campus in a plain view. The target audience envelops all users who wish to gain information regarding the campus.

3. Functional/Feature Structure.

The components presented in Del’s campus website reveal ambiguity and seem to unveil their purposes inconclusively. The labels and terms are also difficult to understand by the public.

4. Information Structure.

The presented information has a less structured feel and the flow is not easily comprehensible. The use of white-space, layout, textual positioning. and spacial positioning is unaligned and unbalanced.

5. Others.

There are other features such as the Social Media feature that hasn’t function properly. Overall, the positioning of the information makes it hard to focus on.

Improvements Overview

Del’s campus website will later have:

1. an orderly and sequential information structure,
2. a display that is artistic and aesthetically pleasing to navigate on, and
3. an easy-to-understand information representation with comprehensible flows.

The Required Improvements

1. User Research

First of all, we need to determine the main target audience of Del’s campus website. After observing Del’s current website alongside a few other campuses’, the revised target audience will be as follows.

1. Potential enrolling students.
2. Job applicants looking for positions in the Del’s campus.
3. The general public who wish to obtain information regarding the campus.

2. Ideation

The applied main features of Del’s campus website will be as follows.

1. The general information, which include the campus’s foundational background, major programs, facilities, and others.
2. Campus activities and achievements.
3. Admission details.

3. Information Architecture

Site Map

There needs to be revisions regarding Del’s campus website mapping hierarchy, or simply site map, which is the overview of the information displayed and the features that accompany them.

The improved site map is as follows.

Image: Revised Del Institute of Technology’s Campus Website Map.

The hierarchic structure displays a more streamlined, comprehensible, and relevant information labels.

Task Flow & User Flow

Here is the task flow example for Del’s website redesign.

Image: Task Flow for accessing Sejarah Del page in Del’s Website Redesign

By accessing Del’s website using the URL, the user will be directed to its Home Page. Then, the user will try to find and access Tentang Del page, which can be found on the navigation menu bar.

The user will be directed to Tentang Del page, in which the user will try to find and access Sejarah Del page. Sejarah Del page can be accessed from Tentang Del page’s contents by clicking some of its links.

The user will then be directed to Sejarah Del’s page, which contains information regarding Del’s history and upcoming.

Image: User Flow for accessing Sejarah Del page in Del’s Website Redesign

4. First Prototype

For the first prototype, it’s preferable to use wireframe models in order to truly grasp the image and display of the website redesign. The purpose of this phase is to avoid crucial revisions later on because of early design and features incompatibility issues.

The newly made display wireframe models are as follows.

Home Page

Image: Del’s Campus Website Wireframe — Home Page.

About Del

Image: Del’s Campus Website Wireframe — About Del

Study Programs

Image: Del’s Campus Website Wireframe — Study Programs

5. Second Prototype

For the second prototype, I’ve opted to use Adobe XD models for it is imperative to allow interactivity in the website redesign’s prototype.

The website redesign is as follows.

Home Page

Image: Del’s Campus Website Interactive Prototyte — Home Page

About Del

Image: Del’s Campus Website Interactive Prototype — About Del

Study Programs

Image: Del’s Campus Website Interactive Prototype — Study Programs

6. Usability Testing

In order to determine the user needs satisfaction rate of the interactive prototype, a usability test will be conducted for various users. This is done to observe the users’ feedback towards the current campus website and determine its underlying problems from the real users’ point of view.

The steps for the usability testing is as follows.

I. Research Planning

The first step of the usability testing is research planning.

The target audience of Del’s campus website are users who wish to obtain information regarding Del Institute of Technology, whether they be the general public or potential students.

The method which will be used in the observation is “Think Aloud”, which is a common practice that allows the test users to verbalize their actions and comments regarding the website for each task assigned. The observer will note every statement commented by the test users.

The usability testing process involves the test users committing a series of tasks. Each task will be given a limited amount of time.

For Del’s campus website scenario, the tasks are as follows.

1. Exploring the contents of Del’s campus website Home Page.
2. Finding general information regarding Del Institute of Technology.
3. Finding information regarding the study programs of Del Institute of Technology.

The users will undergo the tasks in order to give insight towards the users’ interaction with the website.

II. Recruitment and Logistics

The next step is to plan the recruitment of the test users.

The test users will have different traits and characteristics with the total participants numbering up to five users. A questionnaire will be applied in order to gather the satisfaction rate and problems encountered by the test users during the interaction.

Considering the currently ongoing NCOVID-19 pandemic and the physical distancing policies in motion, the testing will be adjusted accordingly.

III. Guidelines

The next step is preparing the testing guidelines for the participants.

Here is the basic guideline form for Del’s campus website usability testing.

Image: Usability Testing Guideline Form

IV. Facilitation

The next step is conducting the test itself. Test users will commit the tasks while thinking out loud as the observer writes down the verbal responses during the process. The users will be given 15 minutes/task in order to complete each task in the test.

Here is the output of the testing process.

Image: Usability Testing Output using the “Think Aloud” method.

Image: Post-Testing Questionnaire Output.

V. Analysis and Results

Based on the output provided by the “Think Aloud” method, here is the summary of the conducted usability testing.

1. [Home Page] User fully explored Del’s Home Page.
2. [Tentang Del] User only read the flavor texts of Sejarah Del, Visi & Misi, Kalender Akademik, and Struktur Organisasi in Tentang Del page and failed to access their respective page contents through image links and/or Baca Selengkapnya text links.
3. [Program Studi] User first noticed the use of Baca Selengkapnya functional feature after accessing the Program Studi page for the first time in Task 3.
4. [Program Studi] User first noticed the use of Fakultas shortcut logos after accessing the Fakultas Bioteknologi page for the first time time, specifically when trying to transit to Fakultas Teknologi Industri page in Task 3.
5. [Program Studi] User scanned and/or skimmed through the explanatory paragraphs in Fakultas Teknologi Industri page to find the summaries of the page content.
6. [Home Page] The contents of Home page are adequately complete, summarized, and satisfactory.
7. [Tentang Del] The contents of Tentang Del page are complete, summarized, and satisfactory.
8. [Program Studi] The contents of Program Studi page are complete, summarized, and satisfactory. The exception goes for the Fakultas Teknologi Industri page, which requires text presentation improvement.

For further redesign increments, here are the recommendations which may be proposed according to the summary above.

1. Highlights may be added to text and image links to indicate the users of their functions as the cursor points toward them.
2. Text links may be put closer to flavor texts in order to suggest continuation to the readers’ perspectives.
3. Text summarizing and presentation improvements may be utilized in order to improve the readability of the Fakultas Teknologi Industri page.

7. Final Evaluation

Del’s Campus Website Redesign is done through multiple Parts.

In Part 1, I’ve analyzed and evaluated Del’s website using the Heuristics Evaluation method alongside 10 Usability Heuristics as proposed by Jakob Nielsen.

In Part 2, I’ve explored other campus websites and analyzed the advantages and potential weaknesses present. This, in turn, has given insight to the improvements efforts of Part 3.

In Part 3, I’ve designed the improvements by ways of User Research, Ideation, Information Architecture, and Prototyping.

I’ve also planned and conducted the Usability Testing needed to review the usability of the produced Interactive Prototype. Future redesign increments will also be supported by the information produced in the Testing’s Analysis and Results.

Summary

Del’s Campus Website Redesign has been a long and tedious process. The attention to details and the capacity to put yourself in the users’ shoes are some of the fundamental characters needed in order to thrive in the UX Designer’s line of work.

With that said, redesigning has been a humbling and eye-opening experience. There were mistakes and miscalculations. Therefore, redesigning is often incremental and constantly improving.

To those who are interested in UX world, allow me to wish you good luck and patience.

And as always, the best may as well come at the very last moments.

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.