I CAN’T GET E-NAFA IT.

Article below maps out my second UX journey, and first Information Architecture tribulations.
Brief
To redesign: 1. Information Architecture and key wireframes of selected institution; 2. Prototype design should meet the user goals represented by the three personas; the goals of the school; and align with its existing brand;
3. Your designs should be tested by users and follow usability heuristics;
4. Must include every aspect of the project (research, design, prototyping, testing, etc.)
AND
To deliver: 5. Information Architecture for the site for all three personas;
6. An interactive prototype which includes key interactions/flows/pages for at least 1(one) of your persona’s tasks on redesigned desktop website.
NOW
Let’s have a crash course to learn Axure RP.
Hold it. I just got through one very intensive week of getting up to speed and applying my newly acquired set of skills. Say what now?
One step at a time.
Step 1 [Explore, navigate, evaluate]
My partner for this project, Ara, landed NAFA as our chosen site to work on Project 02. Naturally, first thing first, we went onto NAFA’s site to click on every button, wanting to understand what makes it whole. Unfortunately, what we found instead were holes.

NAFA is one of the pioneering arts institution in Singapore since 1938 with educational objectives to:
– Establish industry focused curriculums;
– Embrace cultural heritage
– Promote multi-cultural collaborations;
– and Cultivate social awareness in the arts community.What we plan to achieve would not be to only redesign the structure of NAFA’s website, but to realign and raise its visibility in the arts industry.
Step 2 [Competitive Analysis]
We began by looking at the two other prominent art institutions in Singapore, Lasalle and NTU’s ADM, and evaluated their content and usability against NAFA.

In terms of usability, NAFA’s website fared the lowest on the LEMErS scale (Learnability, Efficiency, Memorability, Error recovery, and overall Satisfaction).
The homepage that lacked clear information about NAFA; the poor navigation drop down menu; and the confusing linkage from section to section highlighted the three major pain points of consistencies, navigation flexibilities and error recognitions throughout the site which we plan to revise during our restructure.
Step 3 [Personas goals and concerns]
We introduce our three personas to find out their common pains and goals and picked up the issue of Programmes, Events, Finances, and Scheduling were aligned amongst the three of them.

Step 4 [Competitive Analysis]
To gain more insight on our competitors, we put together a same list of task to compare the persona’s journey on all 3 schools.

On average, the journey mapped out showed that the users took more steps on NAFA’s website compared to Lasalle and NTU’s ADM. We delved into the issue starting with a content audit of NAFA’s site, and drew up an overview IA of current site map.


One thing we quickly realised was that although the navigation spread out systematically, the two headers ‘Courses’ and ‘Schools’ had overlapping pages and two ways to access, and that could not be easily comprehendible by new users.

Step 5 [Card Sort]
After working on an in-depth content audit, we moved on to conduct a Card Sorting test, a quick and simple method to gather insights about our users and their thoughts on groupings, categories.
Our first card sort revealed the issues we gathered during our initial research, and we made a judgement call to abandon this round and restart with tweaking the categories.
I realised although following the steps of the UX process is vital, a judgement call to quickly make necessary changes at a research stage, allows us to progress forward instead of painstakingly gathering more user testings, till we see the numbers that is passable.

Card Sort Round 2 gathered more useful insights and we were able to recognise a pattern in the way users categorised the pages. Based on what we gathered from the card sort, we moved on to revise the information architecture of the website and rearranged the pages and categories.


The one major change we implemented was to eliminate the two-steps-to-reach-the-same page problem, by collapsing the menu into a simple rollover without negating any headers in this process.
Step 6 [Tree Sorting]
We moved next a test called Tree Sorting, where we get users to test our new menu, and determine the new placements/headers introduced we gathered from our test works.

We were pleasantly surprised the new IA pulled in a success rate of 88%, and a 75% score for directness completing three tasks. With the various testing methods completed, we finalised a revised site map for NAFA which shortened our persona Mark’s user journey from 4 clicks to 1 hover+1 click.

Step 7 [Bringing it to life]

We stepped out to do a usability testing on a mid-fidelity wireframe and the whilst the task were relatively easy to accomplish, what was lacking now was a lack of hierarchy prioritisation for our visual information.

We got feedback from the users such as:
Header seems bit wonky, uh.
I’d rather scroll on a full page for course information even though I see buttons on the right tab.
Speaking of buttons, I can’t really tell that were buttons till I hover over them.
However, one of a conversation that happened after the testing was over, stopped us in my tracks (mental tracks), was a question of why does the wireframe I see now, look like a powerpoint slide?
“NAFA is an Arts school, innit?
Where’s the vibrancy?
Where’s the pop?”
Yes, you are right. Where is it!?
Both my partner and I were designers before we joined this course in User Experience. We were so focused on making sure the flow works, the elements are in places that makes good sense for the user journey, so much so, we forgot to bring our users on an artistic journey.
We re-looked into this as a visual orientation issue under a span of two days, and we are pleased with what we presented as the new look, and the new IA for the reintroduction of NAFA’s website.

Click here to view our prototype.
