UXDI8 /Project 2: Revamping of the Singapore Polytechnic Website

This project focuses on one of the most important element in a website. The navigation bar. The navigation bar is the main tool we use across mobile apps and websites. This is a really difficult project as we study deeper into how users group organise content together. All through the project I met with obstacles and challenges that got me to dig even further into user-centric behaviour.

We were provided specific users of the site to being the project off.

User Profile for Singapore Polytechnic Website

First task: Understanding the content on the existing website

We started going through every portion of the website to understand and know where each piece of content is placed. This is a really tiring process as the SP website is huge and complicated.

We started mapping out the entire site and started doing our content audit. As there are 5 other classmates doing the same site, we split the work up and proceeded to do portions of the audit and sharing our knowlege by providing summary of every pages in the site. This helped speed things up on the surface, but evenly, I found that I still had to go through the website quite throughly in-order to re-organise certain content.

Below is the site-map of the original site-map of Singapore Polytechnic. It took me 4 hours to create this, but later in the process, you will find this map really help.

Original Site Map of Singapore Polytechnic Website

While this is going on, I started doing Heuristic Reviews on the current site, as well as look through some competitive websites.

I recruited users around me to do the first round of user-testing on the current website, and I was able to have this findings:

1. The current website navigation is very intimidating. Users generally give up easily when they cannot find the content they want and depend on google search instead (Heuristic Violation: Valuable).
2. Apart from the navigation, users find the home page cluttered and difficult to consume the content.
3. The SP mobile app looks completely different from the website when viewed on a laptop. When you find content on the mobile site, once you access it on a laptop, you will have to re-look for content all over again.(Heuristic Violation: Findable).
4. There is no consistent navigation bar that runs around all the pages within the site. This made it easy to get lost while navigating the site. (Heuristic Violation: Learnable).
5. The SP logo is replaced with Academic School logos within the site and users have problems getting back to the main home page. The “SP Home” link is hidden in small font size on the top.
6. There is also confusing use of similar terms like “Further Education” and “Continuing Education”. Acroynms which means nothing to the user like JAE are also used. (Heuristic Violation: Communicate).

Looks like we have a lot to do.

Task 2: Card-sorting

Based on these learnings, we started on another design process called Card -sorting. Card sorting is a method used to help design or evaluate the information architecture of a site. In a card sorting session, participants organise topics into categories that make sense to them and they may also help you label these groups.

We picked up labels withint he current navigation that could cause confusion and left the straight forward ones alone. I came up with about 28 cards of items which I think is oddly categorised and tested it on 5 different users.

Card-sorting Session with different users

I started off using actual paper cards and eventually moved on to using Optimal Workshop software as I wanted it to automatically tabulet my results. On hind site, I would have much preferred using actual cards all the way. My users were more engaged when moving cards around on a table vs using a computer to do the task. Users on the computer tend to sort the cards out and not want to create different groups, whereas if its in acutal settings users tend to want to sort the excess cards out better by creating additional categorise for them.

Gathering the results from the user. We can certain things:

1. Career Advice is grouped closely with sudent services.
2. Eligibility calculator is grouped closely with admissions.
3. Further education and continuing education are grouped together in all instances.

We then asked our users to define what further education and continuing education means to them, and we got unsure answers, each of them making things up based on the word “Further” and “continuing”. That is something we would really like to fix.

Task 3: Tree Testing

Based on the research done. We amended the current navigation and send it a new set of users for testing again.

Unfortunately, we got really bad results with users failing al 3 task we set them out to do. I checked the time my users used to complete the test and each question avaeraged less than a minute. I realised that besides the navigation having problems, I needed to also remind my users to spend more time on the test.

We called and spoke to a few users and identified a few more issues.

We fixed up the navigation and send out for a second round of testing.

Testing improved, but still failing on task 2 & 3.

The result were better for task 1, but my users were still failing most of the task. We needed to stop for a moment and figure out what is wrong.

We discovered that users are confused between the term “Continuing education” and “Life-long Learning”. Life-long Learning was an extra category we added to replace Further Education. On hindsight, that caused more confusion.

We went back to ground ZERO and started thinking about our navigation again,. but time was running out.

I had to make the decision to start on my wire frame and prototype building. I decided whatever decisions I make from this point onwards, can reflect in my wire frames and prototype, and I stilkl can gather feedback as I go along. After all… everything is still a work in progress.

Its getting really stressful, but I was glad I failed now then later. I draw up the wireframes according to my user flow. At this stage, I am still getting user testing results and adjusting the navigation labels as I go along.

I did my wireframe testing with the new labels fixing the confusing words and it tested with success.

I started incorporating these changes into the final prototype. but half way through, I got distracted with designing the site.

Here’s a disclaimer! I have been a designer for the last 15 years and I have a bad habit oif making everything pixel perfect. I knew that could hinder my progress, but I was really unwilling to re-design only the navigation but leave the rest of the website the same.

So i put in the hours and completely re-design the website according to my user needs and feedback.

Here it is:

We produced a very clean website. The redesign addressed the issue of how too much information was given to them at one go. We also incorporated a long of new media. Our new navigation bar looks like this:

From our user feedback, we rearranged the content into 2 portions. One for Prospective student as the main user, and the other for working professionals. There are also features like Compare courses and a new search page built into the site.

Click here for the latest prototype.

On reflection:

We didnt anticipate our test failing because after working on it for so long, we were so familiar with the site. We shoiuld have catered more time for re-iteration even at the later stages.

Our testing with the lastest prototype achieved 90% success rate on the 3 task we were give.

Can’t wait to present this tomorrow.

Also, the whole design takes responsive mobile app into consideration. We did up one screen to show that. Click here.

Next steps:

We need to do more testing and user reports to generate better data. Also, with the current timeline, we got very small sample sizes that could have effected the accuracy of the data.