Redesigning NAFA’s Website: A Focus on Information Architecture
Follow my UX design journey in the revision of an arts school website in Singapore.
I’m not old enough to have experienced life without any sort of Maps service. I imagine that before Google and Apple Maps existed, people relied heavily on road signs, especially if you’re going somewhere for the first time. You start your journey from Point A, travel for a bit, and look out for the next marker to show you where to proceed. If you miss a sign and drive completely past it, this is probably where you’ll get lost.
That process relates closely to navigating a website. You’re visiting for the first time, and you vaguely know where you need to go. The website navigation is supposed to take you there. Information that is inaccurate, hard to find, or unavailable is going to throw your users off from arriving to their end goal. Sure, users can always Google the information they need in order to end up on your page, but it doesn’t make sense in terms of engagement for the business, brand identity, brand positioning — and most importantly, user experience.
TL;DR: Information Architecture is really important.
The Task
My team of three had ten days to redesign NAFA’s website and information architecture (IA) to fit the user needs of three key personas. The final deliverable was an interactive prototype of key pages to fit one user persona.
The Journey
We started off checking out the current NAFA website. Within the first few seconds, it was pretty clear that major improvements could be made with the interface, so we went through a heuristic evaluation to determine exact usability issues. Along with two competitor websites (Lasalle and NTU ADM), we used Jakob Nielsen’s 10 Usability Heuristics for Interaction Design and gave each website a total score out of 50, with each heuristic worth 5 points.
Unfortunately for NAFA, their website didn’t do so well. Fortunately for us, we now have a good starting point in our journey towards improving the site. These include and are not limited to:
- Higher consistency and standards in headers (“Full-Time/Part-Time”, or “Diploma/Degree/Short Courses”, not both)
- Easily recognisable use of icons and interactions (Menu bar currently opens upwards instead of downwards, which is the convention)
- Higher flexibility and efficiency of use (No alternate navigation for beginner/frequent users of the website)
My team then conducted two initial usability tests to explore issues with finding information within the website, matching with two of the three personas — Mark, a 17-year-old prospective degree student, and John, a 38-year-old mid-career employee seeking for courses to supplement his career.
At this point of time, we had already noticed some useful trends and insights. However, for the sake of brevity, I will be collating key insights together at the end to better demonstrate how we resolve issues with NAFA’s website.
Problems
Current organisation of content makes users feel lost and frustrated in their journey to read more about NAFA’s course information.
Users miss out on the important info when evaluating whether to commit their time and money to a course they’re interested in. They feel annoyed when having to navigate to separate sections on the website.
We were just about ready to dive into the hard part. Content auditing. There’s no running away from it—we needed to know what we have before we could even start thinking of solutions.
It ended up being extremely useful, because to do a good job, we needed to know the information available like the back of our hand.
To find out users’ expectations on how NAFA’s information should be organised, we conducted a card sort done on Optimal Workshop. After much discussion and a few test rounds, we settled on a hybrid card sort. We already had some idea of how the website should be organised, but we still wanted to leave room for the users to bring their own mental models in. Users first, after all.
We had 4 main headers validated, but gained insignificant similarities in the cards regarding NAFA’s school subsidiaries and Events, News, and Showcase. It seems like neither NAFA nor our users can decide how the information should be grouped. That was up to us to decide, and we got to discussion.
The Revised IA
Before your eyes glaze over, I’d be more than happy to run through the major changes we made to the IA.
- Created an accelerator on the landing page in the form of Audience navigation. Users can find what they want easily based on their user needs and goals.
- Reorganised NAFA School Subsidiaries. The content within these pages are simply three-liners describing the school’s structure and purpose. We feel that this fits more into “About NAFA” than deserving of its own header.
- Created a new header called Schools & Disciplines. This is for users such as parents and prospective students — those who have not made up their mind about schools and their area of interest and are just browsing NAFA’s course offerings.
- Created a new header called Courses Offered. This is for users who already know what they would like to pursue and just need the right information (e.g. course fees and schedule) in order to reach the next step of their decision-making process.
- Created a new header called In the Spotlight. NAFA’s current events and highlights are all over the place, so we collapsed them into a single Level 1 header.
- Created a new header called Contact Us. This information is currently really hard to find and is hidden randomly within many different pages of the website. This new header makes for a clearer and easy to access information.
We had a pretty good feeling that our revised IA is nothing short of a great improvement, but feelings don’t really mean anything. What we had to do was tree testing.
Basically, we present our revised IA to users and get them to accomplish 7 tasks. Results are based on whether they are able to find that information, and how direct the route that they take is. Of course, we want as much directness as possible with 100% success rate across all the tasks.
Our tree test produced relatively promising results. The results on the right side (above) are things we had to keep in mind when redesigning our wireframes and prototype, and we brainstormed solutions on making the whole navigation process seamless for users.
The Prototype
With our interactive prototype complete using Axure RP, we were ready for usability testing again! UX design is, after all, an iterative process. There’s always something new to learn and improve upon.
This time round, it was even more insightful, as users commented and gave feedback on our UI as well as the user navigation process.
Usability Test Insights
- Keep the admission information on the same page as the course information. Users don’t want to have to navigate to another page. Solution: Included this section in course pages!
- Pages with insufficient information (or just 2 lines of text) are annoying and should be collapsed in with other pages.
Solution: reorganised this information! - After a while, users forget what information they’re looking at because they scrolled past too much information.
Solution: a sticky side navigation bar! - Search results are too broad.
Solution: the revised IA should make it easier to arrive at what you need! - Faculty information is really important for users, especially mid-career professionals.
Solution: created a feature page for faculty including biography, qualifications, works, and events. - Users need to know course fees and misc. fees up front.
Solution: it’s all included in the course page! Furthermore, we provided a course syllabus for one-stop information.
View the interactive prototype here and the presentation deck here.
And there you have it! Keep information architecture in mind the next time you’re finding something on a website, especially one based on content and is dedicated to providing you with information. Remember, as useful as Google Maps is, sometimes you just really don’t want to use it. Why should you have to if getting around is such a breeze?
