Re-designing the Information Architecture and Key Pages of Lee Kuan Yew School of Public Policy Website

General assembly user experience design immersive course project.

Photo taken in the school

For the second project I have been selected to review the website for Lee Kuan Yew School of Public Policy (LKYSPP). This is a school that has been awarded being the 2nd most generous public policy worldwide. (applause) With this mentioned, they also require donations from their stakeholders, students and the public.

LKYSPP Website

1. BUSINESS STRATEGY

LKYSPP envisions to be the leading school in public policy and is currently the first in Asia, and ranked twelfth worldwide. They aimed to be the most financially strong and generous school funded by donations, to groom the next generation of Asian and World leaders to improve the lives of people.

Photo taken in the school compass

We are fortunate to be grouped in small groups for the purpose of conducting user research and site analysis.

The key focus of the project was Information Architecture. So for this project, we were given 3 personas to work on. I have chosen persona #3, John to work on, mainly because of the admission requirement set by the school. Only 1 of the Masters Programme welcomes fresh graduates to apply. Thus I found this persona most relevant to the website that I am asked to examine.

2. COMPETITOR ANALYSIS

We used the Jakob Nielsen’s model for our heuristic content comparing with 3 other universities that are well known for their Public Policy programmes. Imperial College London scored and ranked the best with their intuitive site design. I was impressed with the consistent tabs with their relevant content logically nested with them. Information was easy to retrieve and the design looks current and inviting.

USABILITY HEURISTIC ANALYSIS

From this analysis, I noticed that the website for LYKSPP has a lot of information replicated unnecessarily on several side tabs. This could lead to confusion and inconsistency as users go through information overload on every page.

USER FLOW TASK ANALYSIS

Though Imperial College performed best for the Heuristics Analysis, it paled in comparison to LKYSPP and University of Chicago during the User Flow analysis adopting the needs of the 3 personas.

3. USER RESEARCH

The user research was most time consuming and Ridzwan and I split up the work amongst ourselves. This helped to speed up the process of research.

Ridzwan and I with the current students at LKYSPP

We wanted to know how can we help the current students with the website, so we went to the school to interview some students.

  1. Is there any information they need but cannot be found?
  2. How do they work out their class schedule? This is important because the school offers a wide range of core modules and electives that student can select according to their needs and interests.
  3. More importantly, we want some “input” from actual users.

3.1 User Interviews

From the interviews with the school’s students, we found out that they have to create their own hard copy time schedules. My persona, John, was hoping that he could find useful information on the website that would be able to help him schedule his time table. Unfortunately this function is not available on the LKYSPP website. They felt that the website was more prospective rather than current students. One student feedback that she would refer to the social media sites for event and career opportunities.

To conduct a usability test that suits John’s problem statements, I gathered a few of my friends who are married with children for an interview and card sorting. One of them has a masters degree from Nanyang Technological University (NTU), so he could navigate through the site in a breeze. The other 2 users found some difficulty in finding informations such as location and class schedules.

I drafted these tasks and questions according to the problem statements of persona #3 John.

  • Search for a course.
  • Find the course outline.
  • What is the duration of the course?
  • How much is the tuition fee?
  • Are you able to find class profile?
  • Does location matter? If yes, please show me where it is.
  • How can you arrange a meeting with the school advisor to find out how the programme can advance your career?
  • Are you able to connect with an alumni in your country to ask how the course has benefited their careers?
  • Is the information on the website enough?
  • Are there any improvement to be made on the website?
  • Is there anything you would like to add-on?

3.2 KEY INSIGHTS

  1. Users found there are too much information on every page of the website, especially the Home page where by images and banners can be distracting.
  2. Categories of tabs on the global menu is not intuitive, thus users kept hovering around the various tabs to look for the information they were searching.
  3. Users kept having to get out of sub pages as information are not within same pages.
  4. Despite all these, the Call To Action is straightforward. All users are able to locate “How to apply” effortlessly.

4. CONTENT STRATEGY

The next step towards building my Information Architecture is to decide how best to group similar information within same pages. This will help to decide how I can reduce on the number of tabs on the global menu. For this, I applied the card sort method to have an idea of how to structure the massive amount of information on the website.

4.1 CARD SORTING

The card sorting was a more tedious process this time as there is a lot of pages and information for the users to navigate. Yet on the other hand, this process can provide invaluable insights into how the labels are interpreted.

My team and I listed all the required information and we proceed with our card sorting amongst ourselves.

Initial open card sort with my team
Initial close card sort with my team

4.2 ESTABLISHING INFORMATION ARCHITECTURE

Open Card Sort from user

Moving on to getting the Information Architecture was more exciting this time after I gained some experience from Project 1. So I have a better idea of what’s going on and how to proceed from the initial data finding to getting the users’ opinions on how the information should be categorised. (I cannot design the website before I build my IA!)

I invited a few of my friends who have been working for several years with the initial card sorting — manual style.

I also requested my users to perform card sorting using the Optimal Workshop software.

My users using Optimal Workshop for open card sorting.
Noting how my users navigate the website.

4.3 CARD SORTING REPORT

The dendogram is rather easy to understand, but this does not work very well for Open Card Sorting. Some of the users who participated in this phase were unsure of where to put the different information and therefore I ended up with quite a number of “stranded” information.

Dendograms
Similarity Matrix

Click here for my Open card sort result .

The Similarity Matrix gives a good idea on how users will group information together. From this result, I had a better idea on how to group the information.

Click here for my Close card sort result.

With the card sorting report, I began my work on a new site map.

Current System Sitemap versus Revised System Site Map

Left (original site map) Right (new site map)

5. INSIGHTS AND CONCLUSIONS TO IDEATE DESIGN

From all the user data, both qualitative and quantitative, there was a lot to analyse and come to a conclusion to ideate my designs.

5.1 SKETCHING THE WIREFRAME

Once the user flow and site map has been determined, I began sketching the wireframe for the new user-centric website. The whole idea is for the website to be more intuitive and less distracting. In other words, a neater and sleeker appearance.

5.2 DESIGNING THE PROTOTYPE WITH MARVEL

From the results of the card sort and interviews, I concluded the necessary changes as these:-

  • The size of the main banner image has to be reduced to capture the attention of users with the necessary information. This is important since the first page of the website leaves the deepest impression with the users.
  • The sub-navigation bar is too far for the users’ visual perspective and the colour is not prominent. Most of them did not even realise it exists.
Home page. (Top panel) Left was before and right is after revamping.
Home page. (Middle panel) Left was before and right is after revamping.
  • I replaced “Feature Faculty” with “News” on the Home page because users find “News” more important. The banner for “Featured Faculty” has been moved to “About Us” page, a result derived from the users’ card sort.
  • I added a dedicated Search function for Faculty because the current functions displays too many results, where some of them are not even from the website.
  • The logos on the footer has to be consolidated so the whole page looks “cleaner” and more comfortable for the users’ eyes.
Footer page. (Bottom panel) Left was before and right is after revamping.
  • The navigation bar from each tab has also been removed to stay consistent with the site’s drop down list for each tab. This caused some confusion to the users as the bar “disappears” on certain pages.
Admissions page. Left was before and right is after revamping.
  • By reducing the number of tabs on the menu bar, users are now able to find the “Admissions” tab easily. I have also changed the dropdown list to a column view so users are able to see all the options easily and I could include a feature image of the sub pages. Moreover, most of the universities use a column view for their tabs and thus users can instinctively go through the global menu.
Programme & Requirements page. (Top panel) Left was before and right is after revamping.
  • With the current layout, users find it easier to navigate.
Money matter page. (Top panel) Left was before and right is after revamping.
  • Money matter has been restructured. Users find it clearer with the fully spell out course title.

5.2 PROTOTYPE ON MARVEL

For the prototype, I decided to try out the Marvel software because I wanted to take this opportunity to learn a new software.

Kindly view LKYSPP prototype here.

Prototype Screenshot sample

6. USABILITY TESTING

Once my prototype is ready, I invited my users to go through the site with a list of task. During this user testing, various metrics can be assessed. These include time on task, number of clicks to destination, path to destination, errors, and success rates.

View my usability test report here.

The remote user tests results were encouraging as they showed improvements in the users’ navigation. The users had higher success rate completing their tasks at a shorter time. (Yay!)

6. MY THOUGHTS AND FUTURE ITERATIONS

Some take back on this project includes:

  1. It can be difficult to gather fair sample data and feedback from users, especially if they are working and juggling day to day activities with their children.
  2. It was challenging to minimise the changes to the website, while keeping it more user-centric and intuitive. Especially when the whole impression of the website tends to stay more traditional.
  3. I certainly would like to develop this to be mobile friendly since most of us access the internet via our phones or tablets.
  4. For future iterations, I would like to create a more distinctive “Call To Action” button.
  5. It would also be good to include the timetable and scheduling function within the LKYSPP website.
  6. This project had taught me how to analyse data and reports from the user tests.

Thank you for your time reading this blog.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store