UXDI Project 2 — SP website makeover

Oh boy, here we go again. Another project, another challenge. This time, it’s redesigning the Information Architecture (IA) and key pages layout of Singapore Polytechnic website. We were given 3 personas, their needs and pain points; prospective student Mark, current student Jessica and prospective furthering education student John, and to focus on one and to apply a new IA respectively, and to conduct the heuristic evaluation of all 3 personas.

My solution statement is to help these users maximise their use of the website effectively and efficiently.

Singapore Polytechnic’s current website. For this exercise, I will only feature three of the micro sites that the users often visit; the main website, the department’s microsite, PACE academy micro site and the student’s portal

The Early Stage
So this is how the current website looks like. As I started browsing, seems like there are tonnes of information and some links lead me to another a micro site, and to another for other information. My biggest confusion was the transition from the main site to the Continuing Education microsite also known as PACE Academy. The experience of using this site differs from the main one — from layout to how the content was being presented. In addition, many labels were ambiguous and repeated links were used to get to that same page. This will cause a considerable amount of confusion and will affect the decision making process especially our user John.

The Research Process
Time to break the information apart and map out the information flow. I begin to create an inventory and realised that this was an excruciating process and also time consuming but it gave my a clearer picture of what the product really was. On the same spreadsheet, audited the content inventory and list out my comments on the side column of the hyperlinks. Here’s how the current websites’ IA looks like.

So I put myself in Mark, Jessica and John’s situation and find the information that matters the most but it wasn’t a smooth one. Time to test it on real users by conducting a face-to-face interviews and a short cardsorting exercise. So I preppped the interview questions and the cards to make sure I’ve covered all the three persons. I came to a hurdle whereby the school was on break until April but was lucky to get hold of some students who happened to be at school that day.

So I’ve interviewed some of the current students from Singapore Polytechnic and had an interesting finding from them. The cardsorting was smooth at first until they come to the furthering education microsite. They didn’t recognise some of the labels. Apparently, this group of users do not feedback much about the current website because most of the information they needed, may it be class schedules or exam results, could easily be excessed from their student portal through their mobile phones. But what happens if they lose their phones?

A couple of interviews, closed-card sorting and testing of the current SP website later, similar findings were found with the working adult group — they couldn’t understand some of the labels and asking why some information were placed where they were. Also it’s been observed that these users could not trace their steps after having found the information they needed, even with the presence of the breadcrumb trails. Other feedback on the microsite SP PACE Academy includes important call to action button looking dubious and many of the features simply too dated (hyperlink turns blue after the user have visited the page).

With the compiled information and feedback from the interviews, I began to reiterate the card sorting process. This time, conducting an open-card sorting online to see if I could get new information of how the participants could help to make categories clearer.

I had problems with two information — Adult Educator’s Community and Testimonials. The level of importance does not justify putting them on the global navigation instead I regrouped them according to what fits best.

Sketches of the main SP and PACE Academy wireframes

The Design Process
Before even starting to design the wireframes, I had to be clear to which information should be on the public domain and which are the ones to stay private. For example, there are some navigations that took several steps to get to the intended page and only to find out that it leads to a portal page with a user sign in. Why not just have a sign-in feature on the top right corner of the main page to cut down all those unnecessary steps? That way, enrolled students, teaching staff and even registered alumni could excess to their respective private domain instantly?

In addition, I need to be clear of the content structure of the 2 main sites — that way, I could further group and arrange the contents so user can learn to easily navigate themselves around.

The clickable prototype can be viewed here http://127.0.0.1:32767/start.html#p=home&g=1&c=1

The before and after of SP main and PACE Academy website

The Usability Testing
So I managed to test the redesigned website through the clickable wireframes and for the part of this project that I have to focus on, I have managed to successfully reduce the confusion and steps of the users seeking their desired information with ease.

Painting a scenario of perspective furthering education student John
“John” testing the prototype to seek the information required

Future Iteration
With more time given for this project, I hope to have more excess to the website such as the private portals, etc. By having such access to this, I would probably have a better understanding of the product. Also an interview to the communications office from Singapore Polytechnic would be of great help to understand content and labels of categories and why the structure is such.

One clap, two clap, three clap, forty?

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