Singapore Polytechnic: Website Redesign Case Study

Two weeks were all we had to redesign the Information Architecture(IA) of the Singapore Polytechnic’s website. Three personas (Prospective student, Current student, Alumni looking for professional development) were identified and given to us and the Information architecture was designed with them as reference point for the redesign.

The goal is to create an experience for the user that is as natural and comfortable as possible without creating resistance to business needs — the perfect flow.

Research & Analysis

First order of business – Dissect the website and analyse the content.

  1. Understand the content within the site— get the current sitemap out
  2. Content auditing and heuristic evaluation of the current site
  3. Conduct research study on the given user groups — which includes understanding routines and behaviours related to the use of the website. And the attitudes and values towards what they see on the website.
  4. Open and closed cards sorting to see how contents are categorised
  5. Insights were synthesised into broad themes, reframed into design challenges and served as the basis for ideation and design refinement
Current Sitemap of www.sp.edu.sg

Mapping out the content on the website into a sitemap makes you feel like a small little fish swimming in the deep sea — where exactly am i?

From the sitemap, we could easily see that many of the contents within the site were duplicated but categorised under different labels. There were also navigation (supposedly) specially categorised for the different user groups — Students, Teachers, Staff, Alumni and Media. But are they really categorised to the needs of the user groups? We will find out later.

Screenshots of some of the layouts on the current site.

Heuristic Evaluation

Before speaking to the user groups, I had to understand the current situation and roadblocks on the website. I started with content auditing of the site, followed by a Heuristic Evaluation. From the above screenshots taken from the current site, these are some of the problems identified

  1. Multiple contents featured on the homepage. The order of the contents are ordered in a way which focuses on what the school wants the students to know first, followed by what the students might want to know.
  2. Broad categories under the “Student Service” section. Navigation labels were not intuitive, clear and meaningful.
  3. Multiple level of contents under one navigation bar. Users suffers from “click fatigue” to locate informations.
  4. Too many information and call-to-action on a single carousel banner. Accessibility and Clarity of information can be improved.
  5. Content heavy page with no design hierarchy.

User Surveys

After evaluating the website, I got down to setting up questions for my surveys and sending it out to people from the two user groups — Prospective and Current students.

The goal was to find out the type of information that these group of users look for when they go to an academic website and also to screen users for my interview/card sorting exercise.

Question asked: What are the informations you look for when you apply to a new school?

Various questions were asked in the survey, but the one that stood out the most was “What are the informations you look for when you apply to a new school”. From the survey results, informations that has direct relations to admissions are the most important to them. School happenings are also a top consideration in understanding school’s life.

I took this result as a reference for the cards for my card sorting exercise. I picked up contents related to courses and admissions to see how users see them as categories. Additionally, i also picked up sections that has unique labels to find out if the user group are able to understand them.

During the course of card sort, I had to probe the participants to gain more insights as to why they rename or categorised certain content. Short interviews are also conducted with the participants to understand some of their needs and pain points. These insights has helped me fully understand their motivation and decision-making process and enabled me to refine the information architecture of the website.

“I would want to be able to find what the school can offer for my future, in terms of career and further education” — Xinyi, current student
“Any type of courses should be still be categorised together because they serve the same purpose of educating” — Michelle, Polytechnic graduate
“Other than admissions requirements, I spend alot of time looking through the school’s facebook and instagram before making a decision” — Kyra, Secondary 3 student

After receiving the users’ responses, there is a degree of subjective judgement which you have to make as a UX designer to conclude the new IA going forward. It involves understanding the context to which some of the areas are repositioned by the users and forming a decisive view if that is the overall intent of your new site.

With the revised IA created from the card sorting exercises, I went on to create user flow (current and revised sitemap) based on the needs of the personas to further refine the solution.

Generating the user flow enabled me to take a close look at how user interact with the site and remove redundant steps or simplify the flow of the task. It also provided justification to some of the recommendations that I would be making to the IA based on the other research & analysis that I have done.

  1. Remove duplicated contents
  2. Observe content hierarchy in the layout
  3. Re-categorising and renaming of categories/sections
  4. Cross linking related topics
  5. An add-on service for choosing courses

Prototyping — make it work

Once the new IA and navigation have been developed, I proceeded with the sketches of the wireframe to get a clearer picture. Once I got my sketched wireframe sorted, I moved on to Axure to create a working prototype. My strategy is to keep it simple. I did not spend too much time figuring out the construction of interactions but instead slog it out to simply build the pages to articulate the key user flows and contents for my chosen persona: Mark (Prospective Student).

View prototype here: http://hy3kcg.axshare.com/

User Testing

First round of user testing was conducted on 5 users and the results are tabulated below. In general

  1. The overall timing of completing the given task has improved by 83%
  2. The number of clicks required to complete the task has reduced by 50%
  3. Satisfactory rate of the website increased from an average of 3.6/10 to 7/10

The Next Steps

  1. In this mobile-first era, the design of the website should be catered for the mobile platform. We should conduct research to find out the difference in user behaviour on mobile and desktop. This will help us organise the information on the mobile site and also omit information that mobile-users will not look at.
  2. Design additional tasks to be implemented into the prototype
  3. Conduct a larger sample of usability testings, and iterate the design continuously.
  4. Work with content strategist and copywriter to improve overall content flow, tone of voice and key messages — good copy reduces ambiguity.

To keep in mind

“The Tao of user experience design is a concept called “flow”. In a perfect user experience all tasks flow seamlessly and uninterruptedly into each other.” –Bram Bos
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.