Jun 26, 2017
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.
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.
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.
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.
We wanted to know how can we help the current students with the website, so we went to the school to interview some students.
- Is there any information they need but cannot be found?
- 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.
- 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
- 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.
- 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.
- Users kept having to get out of sub pages as information are not within same pages.
- 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.
4.2 ESTABLISHING INFORMATION ARCHITECTURE
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.
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.
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
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.
- 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.
- 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.
- 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.
- With the current layout, users find it easier to navigate.
- 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.
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:
- 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.
- 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.
- I certainly would like to develop this to be mobile friendly since most of us access the internet via our phones or tablets.
- For future iterations, I would like to create a more distinctive “Call To Action” button.
- It would also be good to include the timetable and scheduling function within the LKYSPP website.
- This project had taught me how to analyse data and reports from the user tests.
Thank you for your time reading this blog.
