Website Redesign for University

The Brief:
Redesign the information architecture (IA) and content strategy around an experience for users of Engineering Systems and Design (ESD) under Singapore University of Technology and Design (SUTD).

The design should meet the goals of the users, the goals of the University, and its existing brand. The designs should also be tested by users and follow IA heuristic best practices.

Research Methodology and Process

Tools: Tools: Google Sheets, Omnigraffle, Hype, Adobe Photoshop and Illustrator, Keynote, Excel

Research Methodology and Process

Persona Mapping

To analyse the website’s Information Architect and Content Strategy, we were provided with three personas to assess the users’ needs, pain points and context of use (mobile or desktop). For the redesign of ESD’s website, I decided to focus on the persona of Mark, a 17 year old high school student and prospective international student looking to enrol in SUTD’s Engineering Systems and Design Faculty (ESD).

More specifically, Mark is looking for the following key features when he visits the school website as a user.

  • Admission details and requirements
  • Financial Aid and Scholarship Opportunities
  • Campus housing information
  • Context of use on a phone and desktop while at home with friends

Persona of Mark

IA: Competitive Analysis

Before proceeding with the redesign of ESD’s website, I assessed 2 other websites for comparison on where the specific features required by the user are located.

It is observed that admissions can be accessed easily under undergraduate program. However, whereas admissions information is readily available for NUS Law, ESD and NTU Physics redirect users to the main university’s website for further navigation details.

In addition, scholarships, financial aid and student housing details are not available on ESD’s website. Users have to navigate again to the main university’s page to access the information.

For users who landed directly on ESD’s site via side entry from Google, they will not be able to find the required information unless they noticed a link to the main university website.

Competitive Analysis on Navigation of Features

Design Implications:

  • Make available useful information on admissions, scholarships/financial aid and student housing on ESD website

IA: Layout Comparison

Next, I performed a comparison on the layout of ESD with other departments (EPD, ISTD) within SUTD to determine the consistency and navigation layout, in line with the branding and business goals of SUTD and ESD.

For Home Page, it is observed that the layout across board is generally clean and not cluttered with information, consistent for global navigation and brand icon. Also, ESD and EPD’s home layout do not require users to scroll up/down by confining all information within the desktop screen for ease of visibility. ESD also do not use Carousel for information display, compared to the other sides. Rather, they relied on image links.

For Category Page, side navigation is always ever-present with content presented alongside side navigation.

Under Detailed Page for admissions, across the different layouts, there is also consistency with a ‘Call-to-Action’ button.

Layout Comparison

Design Implications:

  • Ensure consistency on use of global navigation, brand icon, side navigation and footer navigation during the redesign.
  • Introduce ‘Call-To-Action’ button when adding features on scholarships, financial aid and student housing.

Content Inventory

Using Excel, a content inventory page was created by categorizing several pages on the ESD website on the types of modules (main/supporting/ interface), links (image/text), reusability, interactivity, mobile specific and time sensitivity.

This proved useful subsequently in the redesign process when I maintain consistency in the style and interaction with the users. In addition, I can pass this information easily to the developers to aid their development process on the redesign.

Content Inventory for Home Page and Undergraduate Page

Heuristics Analysis

For heuristics analysis, Abby Covert’s 10 principles was adopted.

Abby Covert’s 10 principles for Heuristics Analysis
Use of both words and image icons for global navigation
Positive Heuristics Analysis
Negative Heuristics Analysis

Base on the 10 principles, the positive analysis was that ESD was mobile responsive, and findable (easily located on search engines). There is also adoption of both words and image icons for global navigation to allow users to understand the required interaction.

However, for prospective students, it was not findable on ESD website for information pertaining to financial aid and scholarships, student housing. While the term admission can be located on ESD site, users are redirected to the main university site frequently for more detailed information. This is also dependent on whether users will navigate away from ESD site to SUTD site. Otherwise, they may eventually give up and exit their navigation process altogether.

ESD also uses ambiguous terms such as MS under secondary navigation. Users may not be clear about the meaning of MS.

Design Implications:

  • Reduce the need for users to be constantly redirected to the main university website for information.
  • Prevent the use of ambiguous terms to facilitate understanding by the users
  • Include information and features on admission, scholarships, student housing on ESD website.

User Flow Analysis

A user flow analysis on 2 tasks (Admission Requirements and Scholarship Opportunities) was conducted. ESD was compared with NUS Law and NTU Physics.

  1. Admission Requirements

Evidently, a typical user requires lesser pages and clicks ( 4 page state, 3 clicks) to navigate to admissions information. However, for more information, the user has to navigation an additional page in the main site SUTD.

2. Scholarship Opportunities

For information pertaining to scholarship, the user has to navigate out of ESD into SUTD’s website. Assuming that the user clicks on the SUTD link directly, he will incur fewer page state and clicks (5 pages, 3 clicks) as compared to the other 2 universities.

However, the tendency is that user will stay on ESD site and try to navigate to source for the required information first before proceeding to SUTD’s site. Thus, the actual page states and clicks may be higher.

User Flow for Admission Requirements
User Flow for Scholarship Opportunities

Design Implications:

  • Place details of admission requirements and scholarships under ESD to reduce the number of user clicks.

Closed Card Sorting

In order to gain further insights on the appropriate way to reorganize the information laid out on ESD’s website, I began the process of closed card sorting. This involved asking the users to place the navigational topic into headings categories from the website.

The initial process was tedious with at over 70 cards and users placed numerous cards into ‘About’ category for cards they were unsure of. Also, once we came up with a ‘I don’t know’ category, users practically begin dumping their unsure cards into this.

Therefore, I revised the method of closed card sorting. The number of cards was reduced to 40 cards and more aligned to the tasks objectives of the persona. Instead of coming up with a ‘I don’t know’ category, users were questioned more on where they would place their unsure cards to determine their obstacles in positioning the cards. Though such measures, users began to think more on the final placement of the cards.

Findings:

  • Unsure of the meaning of ‘MS’ (Instead of deciphering the correct meaning to be ‘Master of Science’ offered as Graduate Program, they tend to associate the term with microsoft and placed the card under Resources)
  • Most were confused with the term ‘Academics’. They usually associate it with lecturers or academic researchers. Few had associated it with the intentions of ESD to link Academics to various programs and courses offered by the university.
  • Instead of sorting Visitors to ‘Resources’ under the present ESD site, users prefer to classify Visitors under ‘Contact Us’.
  • When given new cards on admission, financial aid, scholarships, tution fees and student housing for undergraduate, users sorted them under undergraduate program.
Closed Card Sorting

Open Card Sorting

Here, users were requested to come up with the headings themselves to determine how they would classify the cards. Generally, the users were requested to perform 1st level, 2nd level and 3rd level sorting to prevent confusion from being given so many cards.

Open Card Sorting

Findings:

  • Users preferred to classify programmes by the university as courses or Course Programmes.
  • Users commented that scholarships, financial aid and tution fees could fall under one umbrella. Generally, they felt that the term ‘Financial’ is a good description.

Closed Card Sorting For New Navigation

Base on the below revised design and navigation, users were requested to perform another card sorting under new headers such as Academic Courses. Users were observed to position Financial, Admissions, Student Housing, MS to undergraduate programs.

Closed Card Sorting (New Navigation)

Design Implications:

  • Rename ‘MS’ to Ms. Sci (Master of Science), a commonly used term for graduate programs.
  • Rename ‘Academics’ to Academic Courses to allow users to associate with the various undergraduate, graduate and PhD programs offered by ESD.
  • Reposition ‘Visitors’ to Contact Us
  • Group Scholarships, Financial Aid and Tution Fees as one category and place them in Undergraduate Program.
  • Place Undergraduate Student Housing information in Undergraduate Program.
  • Added Calendar for Admission Talks (information available on SUTD but not in ESD)
Findings and Design Implications

New User Flow Analysis

Base on the revised navigation for 2 tasks (admission requirements and scholarships opportunities), users were able to complete their tasks using fewer clicks and reduce the time spent to achieve their goals.

New User Flow for Admission Requirements
New User Flow for Admission Requirements

Revised Site Map

Factoring the insights from card sorting and new user flow analysis, a new sitemap was created for the changes.

Revised Site Map

Wire Frame for Website and Mobile

Given the findings and design implications, I proceeded with the wire frames for the website and visual of the changes on mobile.

The wire frames were formulated base on the persona’s needs on admission requirements, scholarship opportunities and student housing.

Wire Frame for Website
Wire Frame for Mobile

Mobile Prototype

Usability Testing on Website

User Test
User Test

Website Prototype

From the feedbacks garnered with users, a final clickable prototype for ESD website on the walkthrough is as illustrated below. Base on the persona of Mark, users were required to perform the following tasks.

  1. Look for admission requirements and scholarship opportunities in ESD.
  2. Look for student housing information under ESD website.

Link to the prototype.

Next Steps

  1. Reduce further on the global navigation categories.
  2. Conduct more user tests for those looking to enter university to validate the findings
  3. Look at further interaction and call to action for users
  4. Have a clickable prototype for mobile