PROJECT FOR

General Assembly UX
Design Immersive 10-week Course

MY ROLES

SUMMARY

What’s the problem?

Singapore Polytechnic offers a variety of relevant courses for adults seeking further education or workforce skills upgrading. With the government providing extensive subsidies to promote upgrading and lifelong learning, the website needs to ensure information can be found efficiently.

Jakob Nielsen’s ten usability heuristics are used to evaluate the issues of the current website.

We also ran through the site with five users to validate our heuristic evaluations and find out other usability issues with the site.

Defining the problem

Three key issues were then identified from our evaluation and user's feedbacks.

PROBLEM #1

Confusing navigation

Main SP’s navigation is stacked together with the PACE’s, which confused our users and prevented them from accomplishing tasks.

Ohhhhh… So I should be clicking on the smaller navigation... That’s so confusing!”

PROBLEM #2

Distracting banners

Texty banners were lumped together and pushed all the key information downwards.

I don’t see how the banners help me find the course I want. Are they advertisements?"

PROBLEM #3

Readability

Small font size (12pt) and lack of C.R.A.P made scanning information difficult.

C.R.A.P. is a Principle of Graphic Design and stands for Contrast, Repetition, Alignment, and Proximity 

There are too many words to read!”

Understanding the user

We identified a persona that matches the business goals of SP PACE.
Meet John Lee, a digital marketer who is interested in taking up higher education to improve his skill set.

DESIGN GOAL

With all the data we collected and persona in mind, the redesign goal was clear:

To bring clarity to our information
and optimize navigation of content.

SOLVING PROBLEM #1

Bringing clarity to the navigation

Cleaning up the navigation was essential, as we removed the main SP's menu and condensed it to just a "back to SP website" link.

We considered to bring out SP PACE's identity more by bringing out their blue vs their original usage of SP's red.

Creating a new information structure

While users could identify pages after they established the navigation, we proceeded to find if a new Information Architecture could help users further. We employed the use of Card Sorting and Tree Testing to map out the new IA for the site.

The new sitemap didn’t differ from the current much, but expanding the courses menu was essential as users grouped them unanimously.

Current (left) vs Redesigned (right) Courses menu

During Tree Testing, we found that users:

• Need an introduction as our first task failed initially (when they couldn't differentiate the task was for current or prospective students), but it only took a turn after we phrased it clearly.
  
  
• Stopped at course information page to enrol in a course, though correct, this gives us information that we need the enroll/register button to be prominent.
  

Current SP PACE's navigation - Users tend to use the main SP menu instead since it was more prominent

Redesigned SP PACE's navigation - Bringing focus to SP PACE's menu system and with new IA based on card sort and tree test

SOLVING PROBLEM #2

Redesigning the layout and structure

My original solution was to create a banner carousel at the top of the homepage, but my partner wanted to place it below instead and focus on the essential content that a user would need.

We went to probe further on what users would think and I discovered something called “banner blindness” and my bias on a marketing approach in design.

Banner blindness is a long-known web user behaviour: it describes people’s tendency to ignore page elements that they perceive (correctly or incorrectly) to be advertisements.

https://uxmyths.com/post/702072231/myth-graphics-will-make-a-page-element-more-visible
https://www.nngroup.com/articles/banner-blindness-old-and-new-findings/

Banner blindness is real!

And naturally, the ‘marketing’ designer in me lost, but the UX designer in me won. This is gonna be a huge turning point for me to keep thinking ‘Fight for my users’ for my next few projects.

We eventually settled to highlight 4 things that our persona John may need the most: All Courses, Funding/Subsidies, SkillsFuture Series, Workforce Skills Qualifications (WSQ)

QUOTE OF THE PROJECT

“Users have learned to ignore content that resembles ads, is close to ads, or appears in locations traditionally dedicated to ads.”

– Nielsen Group Article

SOLVING PROBLEM #3

Prototyping and assuring readability

With our persona in mind, we ensured that we used a minimum body text size of 16pt, a drastic increase from the original 12pt in their current site.

Wireframing was done on Adobe XD and then transferred over to Axure RP for a more comprehensive interaction interactivity.

Overcoming the process of learning new software definitely gave me a sense of achievement as I delivered an interactive prototype with interactions.

Interactive Prototype V1

Usability Testing & Iteration

We completed our first round of usability tests across 6 users and we could see an improvement as our users were able to complete all the tasks given to them.

Font size control

Even though we increased the font size during the prototype stage, the older generation wanted the ability to increase it further.

This prompted us to place the font control back on the header of the site.

Quicklinks

All users clicked on one of the 4 boxes to accomplish either of the 3 tasks we asked them to do. A great success to our core objective in that design here!

However, there was inconsistency in the naming of the pages, which led us to synchronise the titles of the 4 boxes with the pages of the site.

Course fee support

Our users have difficulty identifying “Course Fee Support” and usually had to scan through all the drop-down menus before they found the keyword.

“Course Fee Support” should be moved back to “Courses”. The name was confusing for some too, so we decided to rename to “Financial Aid/Subsidies

Phone support

The senior generation had different priorities like they prefer to make phone calls then to utilise any search bar. To them, the ability to control font sizes was important too.

Testimonials/Reviews

Users also wanted a way to know how helpful the course was, either in the form of testimonials or review ratings by previous students.

Another contention point here was star ratings might clash with business objectives, where if it happens to have one-star ratings, it’s gonna hurt enrolment stats. Our middle-ground was to provide just testimonials from past students instead.

Finalised prototype

We did a final prototype run through with the initial users who did the evaluation of the current site.
What we did was to run a metrics test  —  System Usability Scale (SUS) using https://www.usabilityscale.com/.

Results were impressive with the current site scoring only 34 and final prototype at 83.5.

Learnings and reflections

• Focusing on the user and not interface design
  I’m glad to have a partner to keep reminding me to focus on UX and not UI, that helped me bury my designer in me.
  
  
• Methodologies are not everything
  The methods we used must have a reason behind it or with an objective of reaching a specific outcome.
  
  
• Is one user’s perspective enough to validate our findings?
  A single user out of five may seem like a lot when presented in percentage (i.e. 20%), but is this significant to dictate a particular result in our findings or execution? Either avoid using percentage or try to validate with other users again.
  
  
• Next iteration
  

  Due to time limitations, we could only stop the project as it is for now, but moving forward, we could address some of our users’ issues like giving course types a more precise definition and considering current student needs for the website.

Considerations for responsive site in mobile

With our persona John in mind, he might use his mobile phone to surf the website during his free time too.
Therefore, we have considered the mobile layout for his journey.

Comittee of SP PACE Academy, if you're reading this, feel free to drop us an email to chat about the feasibility of our redesign.