Redesign of SUSS Website

The Bottleneck Project Two — Information Architecture & Interactive Prototype

Oh ruey Jen
Sep 4, 2018 · 7 min read

This article covers a documentation of a project done in The General Assembly, Singapore. It covers topics like Information Architecture and User Experience research.

Disclamer: This is a hypothetical project, assigned as part of the UX course project from General Assembly Singapore.

Project Brief

Being assigned a partner and a school website, we are to redesign the Information Architecture (IA) and key pages of the current according to 3 student personas’ needs.

Project Duration: 2 weeks

Personas

  1. Mark, a 17 year old junior college student. Prospective student.
  2. Jessica, a 21 year old current student. Returning from break.
  3. John, a 38 year old uniSim Alumni. Interested in returning to alma mater for continuing education.

The Challenge 1

Gearing up from working solo on project 1 to working in pair this round, it’s a new set of challenges in managing time, each other’s expectations, differences in opinions, working styles, strengths and weaknesses.

Open communication, mutual respect and lots of encouragement and validations were crucial throughout the whole process.

The Challenge 2

To learn new things from each day’s lecture and apply to the project right away. There was minimal visibility of what’s ahead when it comes to planning our timeline and work flow.

Had to complete one step at a time. Trust the process and have faith in my partner.

Project Client

Our assigned school is Singapore University of Social Science (SUSS). It was previously uniSIM and they got rebranded to SUSS last year, 17 March 2017. It became one of Singapore’s autonomous universities. Their focus is on social sciences and their mission is to provide lifelong learning for working adults and alumni to continue learning.

Sizing up the Giant

This was our research process in discovering the bigger picture.

First Week — Working through the fog

We combined powers with one other group of 2 who was also doing SUSS. Together, we sat down and started assessing the website. For the first time going through the website, it looked clean and functional but kind of dated and sterile for the a new rebranded school, until we started looking at the content.

It was information diarrhoea. Everywhere.

We did heuristic evaluations and found a lot of problems like

  1. Multiple Navigation bars and different website homepages
  2. Users will get send out to another website without realising and will have problem going back to the main page.
  3. Search Bar is not applicable within the website. So even as last resort, users will not be able to find what they are looking for.
  4. Inconsistent interactivity buttons will cause users to confuse which part of the page is clickable.
  5. Different log-in look and sign-up forms

Content Inventory — More than 276 cards

Content Inventory done with the other team

We confirmed our assumptions about the website and tested the usability of current website with 3 users of our primary persona.

Usability Testing with classmates who are about John’s persona

We had to further reduce the cards by sieving out similar namings and overlapping information. Content Audit: 276 cards to 64 cards

Content auditing in process

Taking on the personas’ role, we did the user flows with their needs in mind and found the problems and pain points that they will run into on the current website.

Personas’ User Flows on the Current Website

Design Goals

  • Make the new website aspiring for students to feel confident in joining the rebranded school
  • Empower prospective / current students and Alumni to make decision at every step of the way

What we need to do:

Congregate the relevant and important information in one main place for users to easy access.

Improve usability for easy navigation of website for new and repeated users.

Increase efficiency in making new applications to boost the business interests for the school.

How we digested the content inventory

Internal card sorting

With 64 cards, it was almost impossible to do card sort with any users due to the high chances of giving up as it is going to tedious.

Hence, Daniel and I did our card sorting to streamline to mainly primary and secondary navigation content.

Internal Card Sort: 64 cards to 30 cards

We moved on to do a online hybrid card sort on OptimalSort with 30 cards and 5 categories by just mass sending link out. And so, we thought yay! we finally had some progress moving out of the fog. But when the results came in, it was atrocious.

  • 23 (50%) people completed your study out of a total of 46 participants. 23 abandoned.
  • People took long — Average 5–6 mins, Longest (01h 39m 31s)
  • Low Agreement Score for most categories

We recognised that the results validated some of the namings and categories but our biggest blind side was we had no insights from the people who did our card sorting. We did not know why and what was confusing for them.

Back to square 1, no, probably 2. Card Sort 2 in person.

Daniel and I aligned that we needed inquire about people’s decisions after they card sort and find more. So, over the weekend, we got 11 (91%) people completed our study out of a total of 12 participants. 1 abandoned.

  • Most of our test users agreed on the appropriate categories for the various cards and validated our earlier design changes.
  • However, a few users still had some struggle with the meaning of the terms used like “Our University VS academics”, Administrative offices

With that, we managed to revised the information architecture, covering all 3 personas’ user flows to test it further

Revised IA

We continued to use the online TreeTesting and crafted 5 tasks and scenarios which aligned with our primary persona’s (John) goals and pain points to see if people can navigate through better on our new IA.

44 (68%) people completed your study out of a total of 64 participants. 20 abandoned.

2 out of the 5 tasks came back as poor results.

We rephrased of the tasks and naming to validate our decisions with second treetesting. Hence, we came up with a new IA!

New IA

With this, Daniel and I started sketching the wireframes.

Out of the fog but into the ditch

Roadblocks on along the way:

1. Should we do a A/B testing on the layout of the homepage?

We wanted to but did not due to time constraint.

2. Usability Testing with Lo-Fi or Hi-Fi prototype?

We digitalised the sketches of our wireframes and decided to only do usability testing on a hi-fi prototype to reduce any visual confusion since the testing is with layman.

Hence, we split up the pie of work between the 2 of us— interactivity, flow and UI of the website and work in parallel on Axure.

Last Spurt — Usability Testing and Iterations

Doing Usability Testing with a user at Orchard Central Joe & Dough

The test users took on John’s persona after we gave them the contextual background. They were briefed for each task and they interacted with the prototype to find relevant information for John’s user flow.

No. of tests conducted : 5

Average age profile : 32–40

Average time taken : 1.36 min per task

Task Success Rate : 80%

We then iterated the changes on our prototype to make it better.

You can view our prototype here.

Overall the users thought our redesigned website is easier to navigate, more focused and more aspiring than original SUSS website.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade