UX Collective

We believe designers are thinkers as much as they are makers. https://linktr.ee/uxc

Follow publication

NAFA School website redesign — a UX case study

Harini Venkatesh
UX Collective
Published in
8 min readAug 13, 2018

Redesigning The IA and Key pages of NAFA Website

This article on NAFA Website redesign is a documentation of a project undertaken during the UXDI immersive course in General Assembly, Singapore

The case study covers UX Research, Information Architecture, Interface and Interaction Design with Axure RP followed by Usability testing.

Objective

We were given two weeks time frame to work with a teammate to redesign and deliver a new Information Architecture (IA) and an interactive hi-fi prototype of Nanyang School of Fine Arts (NAFA) website. The redesign should meet the user goals represented by the 3 given personas, the goals of the school, and align with its existing brand values.

Disclaimer: The brief for this project was created by the teaching assistants at General Assembly, Singapore to imitate a real-life experience. The content and creator of this article is not affiliated with the company/organisation mentioned.

My Role

The team comprised of two UX Designers — myself and Charlene. I took the role of UX research and ideation lead and collaborated with my teammate to conceptualise, ideate and redesign the NAFA website.

NAFA, Overview

Nanyang Academy of Fine Arts, also known as NAFA, is publicly-funded arts institution in Singapore that provides arts and design education. NAFA’s reputation is founded on its innovative curriculum and teaching approaches, as well as its diverse artistic creations.

What they offer

Courses offered by NAFA

Our Methodology

The main focus of this project was on Information Architecture (IA), so we broke the process using the following techniques (see below) to evaluate and redesign the IA of the NAFA website.

  • User Research
  • Heuristic Evaluation
  • Content Audit & Card sorting
  • Tree Testing
  • Wireframing & Rapid Prototyping
  • Usability Testing

Tools Used

  • Axure RP, Optimal sort & Treejack by the optimal workshop, Excel sheets and tons of post-its.

Personas

The personas with defined needs and pain points were provided to us in advance. This helped us to evaluate the website based on specific user needs.

The main goal was to ensure the new redesign would address the needs of the personas and provide a more seamless user experience.

Personas for NAFA website: Mark — A Prospective International Student, Jessica — A current student, John — An Alumni looking to continue education.

We started exploring and evaluating NAFA’s current website based on common user needs of the three given personas using Jakob Nielsen’s 10 usability heuristics. This helped us to identify pain points they would face trying to navigate through the website. After finding some potential pain points, we went on to conduct user interviews to get a deeper understanding of their needs and also tested the current website with potential users to validate our findings (assumptions).

Heuristic Evaluation

Some of the key findings from the heuristic evaluation were.

Key highlights from heuristic evaluation

Some of the major concerns with the website:
1. Navigation menu — The current website has a hamburger menu, where the users need to go through 3 layers of clicking to get to a particular page. This is an example of recognition rather than recall. It is always better to have the main menu upfront for the user than to let him/her click on the hamburger to recall them. The goal is to minimize the application of user memory.

2. Social Media Icons — The social media icons take more real estate than required based on their importance for the users.

3. Global Search — The current search option is not a predictive drop down that takes you to the relevant information on the website. Instead, it leads you to google search which can be very misleading for the users.

4. Highlights— The Highlights section on the home page have cards like News, projects, concerts, corporate events along with information like apply now and scholarship (that are not a part of highlights). There is a lack of consistency and visual standards.

5. Course Information — The information on individual courses are placed under layers of tabs which can hinder the users from finding the information quickly.

User Interviews & Usability Testing

After conducting user interviews with potential users(that match the given personas), we got more insights on user agenda to visit the NAFA website which helped us to classify them as primary and secondary needs. The usability testing of current website gave us insights about the how information is perceived and the usability issues with the current NAFA website.

Key Insights from the user interviews and usability testing

The common needs & paint points of the users were — Finding a Course, Course Scheduling, Admission requirements, Course fees & Scholarship.

User Flows

We drew out the user flows for all three persons to understand the current path they would take to complete the tasks based on their defined needs.

  1. Mark’s User Flow
Mark’s User Flow

2. Jessica’s User Flow

Jessica’s User Flow

3. John’s User Flow

John’s User Flow

User Flows (Findings)

The Key findings from the user flows were:

  1. Key course information is hidden under subsections and not easily findable by all three personas.
  2. Some of the information required by the users are also not available in the website (Childcare, CCA).
  3. Maximum users navigate throught Courses, Schools, Admissions and About Nafa Page.

The Challenge

The biggest challenge here was to help prospective students (Adult learners who want to continue their education) to find essential and important information (find a course, course schedule, admissions, fees & scholarship, etc) and enable them to make a quick and informed decision before taking up a course.

Content Audit & Existing IA

To address the challenge we started with a content audit of the existing website and drew a current IA that highlights the depth(levels) of the website.

The current IA of NAFA Website

Card Sorting

After doing an in-depth content audit, we conducted a card sorting exercise using the optimal workshop. This exercise involves creating a set of cards that each represent a page on the website and asking participants to group the cards in a way that makes sense to them.

Hybrid Card Sorting

We had to first determine the type of card sorting exercise we wanted to carry out. Based on our user research, we found the most of the information was found in Courses, Schools, Admissions and About NAFA. However, we wanted to see how if users expect to find information outside the four cards. So we went with a hybrid card sorting exercise with four fixed cards and avoided using cards that are not directly relevant to what the users are looking for while finding and scheduling course.

Carrying out a card sorting test with a participant
Similarity Matrix-results from Card Sorting
Dendrogram result showing the relationship between CCA and Accommodation
Card sorting results showing the relationship between events and other cards.

Results & findings from card sorting

  • The cards CCA and Accommodation were grouped closely together.
  • The categories NAFA Arts preschool, NAFA international, NAFA foundation, Institute of Southeast Asian Arts Were grouped under a new section called Subsidiary under About NAFA.
  • We grouped the cards News, Event Coverage, campus and Around Campus with Events as they have a 66% correlation.

Tree testing

Based on the results from card sorting we rearrange the pages and crafted a draft Information Architecture and conducted a Tree testing exercise that would help us to find out if the labels and structure of information on the revised website, is easy to understand and find.

5 out of 7 Tasks were successful among 11 Users

Tree testing overall results — Success rate: 60%| Directness: 58%
Tasks results from tree testing

Based on the results of the tree testing we got a clear understanding of how the users were navigating the website and the path they took to accomplish the defined tasks.

After a positive result from the tree testing exercise, we went ahead to revise the new information architecture.

Revised Information Architecture

Prototype

After several rounds of usability test on our wireframes and lo-fi prototype, we went ahead to develop a mid-fi prototype using Axure RP (This was our first attempt to use the software and we had fun exploring the software).

NAFA Website Redesign

Here is a link to the Interactive Axure prototype and the final presentation deck.

Through the prototype we addressed some key concerns of the persona Mark (Alumni, who is looking for lifelong learning courses)

  1. A course search feature was incorporated on the homepage to help users quickly find their desired courses.
  2. We addressed some content gaps by providing relevant information about lifelong learning on the part-time course page.
  3. We also added the starting date of the course upfront so that it can address the issue of scheduling.
  4. A write-up overlay appears everytime a user wants to get an overview of a course.
  5. A sticky side menu was designed to help users get to specific sections within a course page.
Me and my partner presenting our IA and prototype

Reflections and Learnings

I had a great time collaborating with my teammate Charlene to work on this project. Some big learning from this project is that an information architecture can make or break the functioning of a website. Moving forward, we would like to add features that can help student compare two courses based on set criteria and also relook at the UI of the website to reflect the brand values of innovation and creativity. We would definitely use this project as a learning base to work on future IA project.

If you like the article please support by leaving some claps or drop a comment if you have any suggestions for improvements.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Responses (2)

Write a response

Hi!
Iam trying to do something similar, and this article is a huge help for me to channel my direction with my fellow team mates, we are team of 3 instead of 2, and this article was super helpful!
Thank you so much! ❤

--