NAFA School website redesign — a UX case study
Redesigning the Information Architecture and UI of an Arts and Design school 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
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.
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.
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.
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.
- Mark’s User Flow
2. Jessica’s User Flow
3. John’s User Flow
User Flows (Findings)
The Key findings from the user flows were:
- Key course information is hidden under subsections and not easily findable by all three personas.
- Some of the information required by the users are also not available in the website (Childcare, CCA).
- 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.
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.
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
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.
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).
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)
- A course search feature was incorporated on the homepage to help users quickly find their desired courses.
- We addressed some content gaps by providing relevant information about lifelong learning on the part-time course page.
- We also added the starting date of the course upfront so that it can address the issue of scheduling.
- A write-up overlay appears everytime a user wants to get an overview of a course.
- A sticky side menu was designed to help users get to specific sections within a course page.
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.
