This project documents various UX research methods, in order to produce a better product.


Project 2 Brief: To the Information Architecture (IA) and key layout/wireframes of the in a group of two.

Initial Thoughts…

What does PACE stand for? We wonder. We started scanning the current site and it took us a while to find
Why isn’t it obvious on the index page? 
Why do we have to look so far? 
Are we the only ones?


Professional and Adult Continuing Education (PACE) was launched on April 20, 2010, as they offer a variety of Continuing Education and Training (CET) programmes for adults, both online and classroom based. PACE is under Singapore Polytechnic (Established in 1954) which happens to be the oldest tertiary institution in Singapore that offers only diploma courses when they first started.

Different Research Methodologies

For this project, we will be exploring the various UX research methods:

  • User Research
  • Heuristic Evaluation
  • Content Audit & Card Sorting
  • Tree Testing
  • Usability Testing

User Personas

For a start, we had to decide on a persona. We were given three to choose from Jessica, Mark, and John. Who should be the right persona for PACE? We started plotting the Information Architecture (IA) and their user flows to find out.

Click to enlarge

Jessica is not an ideal persona because she is already a university student. Mark‘s needs such as admissions requirements, scholarship opportunities, college programs and specialties, housing information and user flow are mainly accessible from the main Singapore Polytechnic site. Thus, we concluded that John will be the suitable persona for PACE.

People don’t visit a website for experience. They go to the website to access information.

1. User Research

We started snowball recruiting users aging from 35 to 42 years old around the same age as John. Before the start of the interview, we presented to them John’s persona. We emphasize to them that he’s a working father and would like to advance his professional development. He’s also concerned about cost and possible financial aid. We tried to make sure they were clear before we proceed with the initial user testing. We will be using the same group of people for the final prototype usability testing later on as well.

On the average, each of them took more than 15 minutes to complete 9 tasks we asked them to do. One of them took even longer because she was using the main navigation menu for Singapore Polytechnic. Another one even gave up because it became so frustrating.

2. Heuristic Evaluation

Bearing in mind using the LEMeRs framework thought process, we started by evaluating the current PACE website.

‣ Learnability 
‣ Efficiency
‣ Memorability
‣ Error Management 
‣ Satisfaction

There were a lot of observations but one of the crucial parts was that the main navigation for PACE was not obvious. It was often taken for granted that the main navigation menu for Singapore Polytechnic website was for PACE. Thus, this became extremely confusing and a lot of time was wasted. John’s a working father — his schedule’s tight and he needs to access information fast.

The other issue was how the “banners” on the index page were odd and not uniform. They were running in different colors, style, and fonts. The list just got so long. “They look like advertisements” — one exclaimed.

Competitive Analysis

We also did a competitive analysis comparing PACE with some local and overseas institutions just to see where it stand. The schools that we compared were Savannah School of Art and Design, Massachusetts Institute of Technology, Singapore Management University, Imperial College London, Republic Polytechnic, and Georgia Tech. We tried to identify standard features & best practices. Also, observing how others approach design problems and identify opportunities to differentiate and innovate for our new site. In terms of information hierarchy and design, PACE is on the other side of the 2by2 scale — it’s not good but we’re going to make it better!

Layout Comparison

3. Content Audit & Card Sorting

We started generating the tedious content audit for the PACE website to have a better understanding of the pages and the hierarchy. The organization for some of the pages seems messy and repetitive but we figured card sorting will help us to put things into perspective later on.

Content Audit for PACE
Manual Card Sorting

It was our first time doing card sorting so we decided to try out both manual and online. We did an open card sorting first — Participants can organize cards into as many groups as they want and assign their own labels to the groups. This process really helped us understand how users group and organize certain information altogether. They made it sound easy but not really!

After that, we move on to online hybrid card sorting using Optimasort: Participants were given both cards and category labels, but still free to add new categories. This was like opening up another can of worms because the possibilities were endless. This method was indeed an eye-opener and help us set the foundation of our information architecture (IA) in a logical manner.

4. Tree Testing

About 29 participants completed the 6 tasks given in the form of a tree test. Based on the card sorting results — some cards are tweaked. The results were good enough for us to move on to the next step!

Enlarge to view
Enlarge to view


Powered by data-driven insights (YAY), we started conceptualizing the look and feel of our new site. We were really excited because it was coming together finally.

We began drawing wireframes for the home page, category landing page, detail page, and some other pages to achieve John’s goal. Since the main key features such as search and student login features were important, we decided to include into the main navigation bar so it will be easily accessible. We also decided to adopt Singapore Polytechnic’s corporate red for the new site for cohesiveness. Some of the key courses will be featured on the index page so to increase awareness and for marketing purposes.

Prototyping, Test, and Iterate

For the previous project, I learned about Axure and used it to create user flow chart. This time, we were going to dive in to create an interactive high-fidelity web prototype — Gasp! Did I mention it was a HUGE learning curve? The possibilities seem endless because of how powerful and realistic it can be. So are the mistakes I made — how many times have I failed? How do I execute it flawlessly? Practice, practice and more practice — the teaching assistants exclaimed! I don’t really have the luxury of time but yes I will try. Thanks to some of the youtube tutorials (humbleUX)— they are really helpful & awesome! To be honest, it is in these situations that really hone one’s skills. That is if I can still walk out of the room alive.

Reduced clicks to reach a goal.
Final Architecture (IA)
Before & After
Before & After
Some new key pages

5. Usability Testing

We tested the prototype with the same group of participants from user interviews. The overall feedback was positive and furthermore, they managed to fulfill the tasks faster in an effortless way. They also like the new user interface and find it more professional looking. Having a filter in the course section definitely streamline the process and make it less painful.

My interactive prototype can be viewed here.
(Note that the size of the prototype is 1200px width. In order to hide the sidebar on the left, please click on the arrow at the top left corner.)
Alternatively, here’s a short preview:

Source link


Please enter your comment!
Please enter your name here