UX Case Study: Redesign IA for NAFA website
Redesigning Information Architecture of a school website in 2 weeks.
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.


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.

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.
Problem statement 2 — Missing out on relevant important informations of a course because informations are listed on another page.
Tree Test, Card Sort and Revised Site Map
Tools used: Optimal Workshop ( https://www.optimalworkshop.com/)

Significant groupings:
Courses, Financial Aids & Fees, NAFA Related Information and Disciplines categories.
Insignificant groupings:
Events, News & Showcase and NAFA School Subsidiaries
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:

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.



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.

Added informations about course instructors and the faculty page is now accessible from the course 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.
