NTULIS Redesign

Information Architecture | Visual Design

Overview

An IA class project that later inspired real-world implementation to redesign university website addressing student needs and the organization's vision.

Type

Real-world Implementation + Class Project

Duration

6 months
(Mar - Sep 2014)

Responsibility

  • Information Architecture
  • Data Analysis
  • Interaction Design
  • Front-end Development

Team

  • Class Project: Y. Hsiao, C.Y. Huang, Y.T. Lin, Peggy Lu & E.L. Wang

Background

back to top  

As years passed by, Dept. of Library & Information Science at National Taiwan University (NTULIS) was in great need of having a fresh image and structure to present itself to the public and provide relevant information for the students.

The project started out as a class project on information architecture (IA) and later grew to be a full-fledged website team initiated by the department that is still in work today. I was fortunate to be one of the founding members and be a part of it throughout my senior year.

Project Timeline

The process from redesigning the IA, to interactions, visuals, copywriting, and to the final implementations took around 6 months. Below is a snapshot of how we approached it with a major focus on the information architecture.

Old Design (2008 - 2014)
New Design (2014 - present)

IA Process

back to top  

Overall, the class project had the goal of sorting through the top-level navigation and user flow of the website. It served as a solid foundation for the later founded website team, which focused on the structure and content under each section such as Admission, About, News, etc.

Timeline of Information Architecture

UnderstandingInvolving the Stakeholders

The most common complaints among the students about the website had always been the difficulties of finding contents. We surveyed more than half of the students in the department and learned that they were most unsatisfied with unclear labeling, unintuitive grouping and ill-structured information.

To understand how the users group and order content, we analyzed the result of the card-sorting activities in class with four different groups.

On the other hand, the website also needs to address the department’s vision. Out of our interview with the program director and staff managing the website, the foremost concern they had was the image the website was portraying to the public, including prospective students, the industry, government and academia, which each had very different needs. At the same time, they also stressed that current students should be the top priority when redesigning.

ExploringFinding the Focus in the Design Space

How were others approaching the same issue? What were some elements that led to smooth user experience and meaningful structure for a department’s website? To gather inspirations and having a clearer direction moving forward, we conducted IA benchmarking of a few other LIS department’s website on their Navigation, Content Grouping, Placement, and Patterns.

RestructuringSetting the Top-level Structure

Combining the insights from user research and the directions we got from benchmarking, some core concepts we had going into the new design are:

  1. Audience Segmentation

    Judging from the director’s interview and what other programs did, we concluded that having sub-landing pages for Prospective Students, Current Students, Faculties, Alumni & Visitors would best support the wide range of users.

  2. Simplified Structure & Layout

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis eget magna eu faucibus. Ut ut tincidunt magna, rhoncus bibendum massa. Nullam bibendum porta mauris et bibendum. Phasellus eleifen

  3. Highlight student needs & achievements

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis eget magna eu faucibus. Ut ut tincidunt magna, rhoncus bibendum massa. Nullam bibendum porta mauris et bibendum. Phasellus eleifen

Based on these core ideas and the results from card-sorting, we regrouped and reordered sections to decide on the top-level navigation that prioritized student needs.

Sitemap

Translated and simplified from the original diagram [In Mandarin]

To further illustrate how we envisioned the new website should be, we wireframed the new website down to the second level of navigation, including the landing pages for different audience segmentation.

Wireframe

See more pages in Axure [In Mandarin]

By the end of class, our design received positive feedback from our peers and professor during class presentation, and inspired the forming of a website team across the department to further redesign the website and the public image it communicates.

Going DeeperSorting through the Content

Once the website team was established, we were divided into sub-teams of two and each worked on a different section. My partner and I chose to work on Course, which according to the survey we did before, was the section that students used and cared about the most.

The goal with Course was to provide a clear but comprehensive view on what the programs offered and what were required for graduation, and the foremost challenge with that was the great amount and variety of information needed to be presented to both current and prospective students.

To identify what has been the weakness and where the design opportunities were with this section, we conducted content audit in colla­boration with department staffs to determine if something needs to be regrouped, rewritten or would require different visual material to present them.

Content Inventory

RealizationDeliverables & Outcome

Following the content audit, we started prototyping and working on each page needed. While my partner did most of the copywriting of the content, I was responsible for design & implement different ways to represent certain lists of information. Below are selected works under Course with different purposes that were realized on the website.

Course List

IxD, FED | DEMO

An overview of all courses the program has offered. Relevant filters support quick access on specific courses matching students’ needs.

Course Schedule

IxD, FED | DEMO

Showing courses offered for the semester with timing visualized helping students planning for their own schedules.

Course Map

Visual Design, IA

Visually group different course categories needed for graduation. Providing guidance for long-term planning for both current and prospective students.

The new website went live at the beginning of the new semester with the template I proposed to the team due to its layout and functionality. The team went on producing contents about latest news in the industry & academia and student achievements.

Responses have been overly positive from faculty and students, especially from the post-survey we did with the incoming students for next school year.

Takeaway

back to top  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis eget magna eu faucibus. Ut ut tincidunt magna, rhoncus bibendum massa. Nullam bibendum porta mauris et bibendum. Phasellus eleifen

More Projects