UX Case Study: Redesign IA for NAFA website

Redesigning Information Architecture of a school website in 2 weeks.

Jun Xiang Loh
Sep 4, 2018 · 5 min read

Brief: Your design should meet the user goals represented by the 3 given personas, the goals of the school, and align its existing brand.

About NAFA

Nanyang Academy of Fine Arts (NAFA) is publicly-funded arts institution in Singapore that provides comprehensive arts and design education.

Programmes Offered

  • Diploma and undergraduate Degree Programmes — for secondary and college students.
  • Part-time and Short Courses — for working professionals
  • Courses for Children

Our Design Process

We decided to follow the Double Diamond model, approaching the problem and solution with two methods of thinking — Divergent and Convergent.

There are 4 distinct phases of this model — Discover, Define, Develop and Deliver

  • Discover: Understanding user goals and needs; Content audit; Heuristic evaluation; Competitive evaluation; Contextual inquiry.
  • Define: Synthesis of key insights; Problem statement
  • Develop: Tree test; Card sort; Revised site map
  • Deliver: Usability testing; Wireframing and prototyping

Proto-Personas given

Content Audit

We did a content audit to understand the depth and width of the current site.

Content Audit for current site of NAFA

Heuristics Evaluation and Competitive Analysis

Based on Jakob Nielsen design principles model, we graded NAFA’s and her competitors’ sites on a scale of 1–5.

NAFA scored poorly against the other two competitors with a score of 20/50.

Contextual Inquiry/ Usability testing

Next, we ran a usability test on the site with users of similar profiles to John (3rd Persona). A few simple tasks were given to the subjects and observations were recorded down.

Screenshot of NAFA’s Landing Page

Key insights include:

  • An ambiguous distinction between Courses and Schools in global navigation causes some confusion for users.
  • Admissions information were missing from the course page — users have to navigate to another part of the site.
  • Too much information in a page — users getting lost while scrolling.
  • Faculty members not listed in the part-time courses information — professionals are more interested in knowing who they are going to learn from than what have graduates gone to do.
  • Inconsistent pieces of information below the fold of the landing page — Events, News and Student Projects are all grouped together.

Problem Statements

From the insights, we scoped down our focus for this project to two problem statements, both addressing a fundamental issue of a poor information architecture of the website.

Problem statement 1 — Feeling lost and frustrated in their journey to find information in the site.

Tree Test, Card Sort and Revised Site Map

Tools used: Optimal Workshop ( https://www.optimalworkshop.com/)

Card sorting results

Significant groupings:

Courses, Financial Aids & Fees, NAFA Related Information and Disciplines categories.

Insignificant groupings:

Events, News & Showcase and NAFA School Subsidiaries

Revised Information Architecture

The IA was then revised and changes made include:

  • Added a targeted audience navigation tab in the landing page. (Accelerator)
  • Restructure NAFA School subsidiaries — (NAFA International, Nanyang Fine Arts Foundation, Institute of SEA Arts)
  • New Headers were named — (School & Disciplines, Programmes Offered, In the Spotlight, Contact Us)

Tree test was done afterward to validate the revised IA and the results were satisfactory.

User subjects were given 7 tasks to find information within the revised IA:

Results from Tree Test

Wireframing and Prototyping

Wireframing and prototyping were done in Axure RP. It was my first time using the software and it really showcased its functionality and flexibility with its interactive capabilities.

The new navigation bar now allows users to access information deeper into the IA quicker if they wanted to. New headers also increased clarity of the classifications of programmes available.

Landing page of redesigned site

Course pages are now more comprehensive and allows for quick and interactive navigation with a sticky sidebar — that reflects the section of the page the users are currently at.

Course page

Added informations about course instructors and the faculty page is now accessible from the course page.

Faculty page

Takeaways

This was a content intensive project and it was very overwhelming in the beginning. Compared to the previous app design project I’ve worked on, the factors to consider for web design were definitely very different. And unfortunately, due to time constraints, my team was unable to develop a responsive site but it’ll be something I would love to try in the future.

Jun Xiang Loh

Written by

Exploring the breadth of User-Centred Design.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade