We started off on our Project 3 on the 14th of December 2015. We were tasked with the redesign of a university website and were required to carry out a redesign based on Information Architecture principles and the content strategy of the website while maintaining coherence with the overall university website.
We started off with a content inventory of the university website. This is a method of cataloguing the existing content on the website and keeping track of the changes that one will be carrying out in the process of the website redesign. We were told that excel or any spreadsheet program is a design tool and this did indeed turn out to be the case as the content inventory that we created allowed us to see quickly and efficiently which were the sections that we needed to alter or keep.
We also did a sitemap of the existing site to allow us to understand the current navigation flow:
To kick off the process, we were taught about card sorting as a method of carrying out research into the overall understanding of the users. We were taught how to conduct card sort research with users and utilise different methods of card sorting as a way of understanding how users perceive and sort content. There are two different methods of card sorting: open and closed. Open is a generative method as it allows users to classify information into different categories and label them based on the user’s perception. Closed card sorting is a way of evaluating how users sort content into given categories. This allows one to evaluate the effectiveness of the given categories.
In addition to that, we were also encouraged to carry out a site visit to the actual university itself. This would allow us to understand the physical campus of the university as well as the actual users themselves. However, the university was on holiday and thus, we could not find any undergraduate students or graduate students in the campus itself. Nevertheless, our site visit did bring us a few insights into the psyche of the university itself.
That a good law student is one who perseveres; Patrik and I had to walk around the whole campus (which was not very big!), until we managed to find the administrative office. Even then, we were still redirected to the main administrative office in another building. In so doing, we lost the breadcrumb trail that we had and did not know how to get back if we were to come back ourselves.
However, we did learn an important point: that admissions for Law is through the main NUS admissions webpage and that the study of law is a full-time pursuit with no part-time courses offered. However, these were only made apparent to us when we spoke to the admissions personnel. She also made it clear that one should speak to one’s seniors and not just rely on the webpage; apparently a lot of information is contained offline.
I also conducted user flow analysis on both NUS law website as well as the SMU law and Oxford law website. The NUS law website was significantly more cumbersome than the SMU law and Oxford law websites as shown from these user flow diagrams:
Based on the above, I decided to focus my design around the redesign of the global navigation banner. NUS had two different banners while SMU and Oxford both had a single global navigation banner. Thus, I decided to focus my efforts on integrating the two NUS banners into a single one as well as provide a breadcrumb trail for my users.
To test if the existing banners were problematic, I began by conducting two closed card sorts which were derived from the content of the existing NUS Law website as well as new content which I thought would be interesting to my personas. I tested these cards against the existing global navigation banner categories to see if people could place the content into these categories accurately.
The initial results were surprising. Testers could not place most of the content into the existing categories. Was this a result of the new content that had been introduced or was it because of the existing categories which made sorting the new content into these difficult? I had to find out and so, I decided to test the existing card content by doing a new closed card sort based purely on the existing NUS content and the existing categories.
My results from the existing NUS closed card sort confirmed my hypothesis: while most of the existing content could be sorted into the existing categories, users also had difficulties making sense of certain categories such as Home as well as About Us. Thus, I realised that the existing terminology did not make sense to users as well. As a result, I decided to conduct more closed card sorts with content pertinent to my personas with the existing categories to further confirm this.
The results from my closed card sort showed that the existing categories were not useful enough as categories; the cards were frequently sorted into the wrong categories. Thus, I decided to conduct open card sorting as a means of generating categories that users would be able to identify and use quickly.
These are the results of the open card sort:
We also carried out an analysis of the existing NUS law website based on Abby Covert’s 10 Information Architecture heuristics. I focused on two of these:
The website’s use of acronyms made it unclear to users what they were looking for; hence, I decided to expand the acronym to make it clear to users instantly.
The lack of a breadcrumb trail made users feel lost; added one to ensure that users understood where they were at all times.
As I was running out of time, I decided to quickly sketch out a prototype on paper and move onto wireframe after testing the paper prototype. I incorporated the paper prototype feedback straight into the wireframe prototype.
Here are the paper prototype sketches:
Wireframes on Sketch:
Next, I created a high fidelity prototype on Hype using the storyboards in Sketch. My focus was on John, a persona who is a working lawyer and extremely pressed for time. Thus, my redesign was focused on providing him a quick and easy way of navigating the NUS law website so that he can get all the required information on the continuing legal education that he requires in a fast and painless manner.
User video of the Hype prototype:
And that concludes my redesign of the NUS law website. I was in the midst of creating a mobile version of the website but had to cut it short owing to time constraints. It was based along the design principles of the main NUS webpage which had been redesigned a short while ago. As such, the content were all organised into tiles which were easy to view and coherent with the main webpage. Thus, if I had more time, I would explore a way of organising the content on the desktop version as well as the mobile version into tiles such that users have a seamless experience.
I think that the key takeaways for me were to: 1) Have a process to always refer back to 2) Iterate constantly 3) Always think about next steps. These are things that I learned after doing the project but I still need to develop them further.