Redesigning SUSS website

sy huang
sy huang
Sep 4, 2018 · 10 min read

This week I was tasked to redesigned an university website for my coursework in GA Singapore.

Just a heads up : This is a coursework and it is not an actual client work.

In this second project, it was a team of 2 project. We drew lots to pick which team and school we were going to redesign. And I was teamed with Aaron who was previously a web developer. He is really experienced with website designs and the methodology about developing a website. We had applied the methods we had learnt from lessons and put it into use.

Our approach

  1. Research Phase
  2. Design Phase
  3. Testing Phase
  4. Refinement Phase

1. Research Phase

Before I begin in explaining about the methods we had approached the project, let’s start by examining the current site of SUSS.

Seems pretty simple and nothing is wrong right? Nope, this site has full of errors and usability of this site is quite unfriendly. Let me explain myself in a moment.

Heuristic Evaluation of the site

This website has a lot of failed guidelines from Jakob Nielsen’s heuristics. For more detailed explanations, you can read from here. I had gone through the website with these guidelines in mind. I had realised that there were many areas in which might affect the users in accessing this website. I will just go through some of the ones which are major detrimental to the users.

The image shown 2 variable clickable spaces in the options
Breadcrumbs that are not useful at all
Some errors which made the website looks unprofessional as well

Why are we doing heuristic evaluation for SUSS current site? It is to examine the usability of the website in an easy and short time. Having completed with heuristic evaluation, we definitely have a better idea on what this website has to offer to its user. After recognising some of the issues with my teammate and other people from the other groups which was also doing the same school website. We went on to find out if some of the users are facing the same similar issue as us.

Persona

Before we start, we were given 3 choices of persona for us to redesign the site for. We had chosen Mark as our persona.

Mark is 17 years old high school student, a prospective student of university. His needs are about Admissions requirements, Scholarship opportunities Student body make-up, teacher ratio, College programs and specialties, and Campus housing info.

Some of this pain points were : Learning about a new city/neighbourhood, Picking a major, Scheduling and Learning about extra curricular activities.

By knowing who we are designing for and their needs and pain points , it will be easier for us to design a product that will satisfy users needs and therefore be successful.

Cognitive Walkthrough with some users

Aaron(left) doing a cognitive walkthrough with an user
Me(left) doing with another user!

We gave our users some tasks to complete which was the tasks which our persona Mark would have done while in his journey of admission to SUSS. We did cognitive walkthrough so as to understand what would Mark faced in his quest for admission to SUSS. We found some of useful insights for our research.

  1. The website is simple looking

2. The website looks outdated and old

3. It takes a long time to search for the information

4. Feels overwhelming

5. There are many acronyms on the site and the user do not understand it.

Competitive Analysis

Simplified version of different user flow for different university website

We had completed competitive analysis in which we benchmarked SUSS to other singaporean universities. Why did we benchmarked with these school? Because these school offered some similar courses, even though they were pretty different in terms of history and prestige. By doing competitive analysis , we get to visualised how did SUSS fare against other schools in terms of the journey taken for the user to get information for the accountancy course.

Design Goal

Our design goal is to help young prospective students to find relevant information (admission, programme and financial aid info) in a fast and simple way.

Content Audit

There was over 340 different site links

Things that you hate tend to be those that benefit you the most

I did not realise what content audit was for until halfway going through the motion. I hated this step, but yet it was quite crucial in understand the current site. It benefited us in a way that it reveals the fact that this site has many repeatable links and many links which leads us to somewhere not useful. There were links which were under utilised as well. With sufficient information, we build our current site Information Architecture to visualise the site.

First Information Architecture(IA)

Yes, it is really this huge and massive !

We spent almost a day building this IA and refining it. It is pretty much as one of the most important steps. If you do not understand what’s wrong, you can’t fix anything right. The information architecture is wide and yet deep. We knew we need to reduce either to make it much easier to navigate through.

Card Sorting

Gathered up forces to deal with this menacing amount of cards
Staring blankly into the massive card sorts

We did internal card sorts first because at the start there were just too many terms to work with. After we reduce the number of cards to an acceptable amount of 39cards, we tested card sort with our users and we got some of the important key factors and association that our users had in their minds.

This is important as these will be what our users are thinking when navigating through our site.

Similarity Matrix gave us understanding of association between terms.

Tree Testing

Tree testing is the work we had went through after card sorting. We did tree testing to see if our findings from card sorts were useful for our users.

If the users can complete the task from tree testing based on the results(of the card sorts), it would mean that the findings were accurate.

Users would need to find the information based on the task we give them.

2. Design Phase

NEW Information Architecture!

We also done new IA

After validating our findings from Card Sorts with results of tree testing, we did new version of Information Architecture to visualise. We did new user task flow to make sure our idea make sense. This is part of design phase because it took our findings to translate into visualise and an idea.

How Mark would complete his task of admission to SUSS

Wireframes

The first few templates were developed by Aaron, so that both of our designs can be on the same page.

Prototypes

First look at the Prototype.

3. Testing Phase

Usability Testing

Then we went to do usability testing on our design. I made it a point to tell the every user that we are not testing them but just to test our design. The scope of our usability testing was to see if our design work for Mark’s goals. So we aligned our scenario and tasks given to our users. The results of our testing were pretty pleasant for us to hear.

1. Did usability testing with 3 users aged from 19–29 years old

2.All of them fulfilled more than 80% of the tasks

3. All of them completed the tasks with ease. Able to complete within 3min.

We had gotten an user which was not part of Mark’s age range. It was a last minute issue, if we only have enough time to get another user, we would definitely get a similar demographics. Sometimes, things happen and we just had to accept and adapt.

Did affinity mapping to understand what the users had said.

We went on to spot trends in our affinity mapping for the findings from usability testing. Trends tell us if there is a major issue that was faced by most users. By rectifying the major issue for most users, we will improve usability of the website for most users.

4. Refinement

Iterations

  1. Accordion width enlarged
  2. Footer added some useful information
  3. ‘Connect’ Flyout added to show more information

These were some of the iterations we had implemented from the findings we got from our usability testing. Although the majority of the site remained unchanged , these changes were quite significant. The first change actually made sense as the text within the accordion was only at most 50% of the screen width. It had a very huge white space, and it will cause user to scroll more since the width was small.

We missed out on footer information such as contact details which one of the user found out. We felt that was important even though the number of user found out was less than 50%.

Sometimes we just had to trust our design instincts rather than following the users’ data.

‘Connect’ Fly out was something we found out from 1 of the user failure to complete the task. We had asked other 2 users when they completed the task. They said they guessed the path(connect — contact us) correctly, because they felt it would be the right answer. We decided to cater to it as we felt that might really improve the experience for some of the users.

Improvements

Relevant informations were shown on the header and interactive secondary navigation.
Programmes were organised neatly and some preview texts to facilitate understanding.
Accordion were added and users can scan through headers for the info for quick access.

We solved the issue for Mark and other users who might visit this site by improving usability on areas like navigating through the site and searching for the relevant information.

Navigation through the site is simpler due to the reduce depth in Information Architecture. More information are shown on the same page but they were kept away from the user sights with tabs and accordions. Searching for the relevant informations are easier due to better headers, and also accordions and tabs which also reduce the amount of elements on the page. Reduce in elements will allow users to search for the information they require much faster.

You may review our prototype via this link: https://hyarn8.axshare.com

Disclaimer: Photos used in this prototype are part of an art direction I hope to set. Photo credits: NUS and SUTD

Next Steps

We had in mind for the responsive website for mobile user as well. However, the timeline of project 2, we did not have enough time to do it.

This will be the idea for a responsive website.

What are my thoughts so far in a team project

This was the first time I had been in a team for an UX project. It felt kind of interesting to be paired up with someone good in website. My teammate had a lot of things in his mind when he was thinking about wireframes and prototype. Even when he was doing wireframes, he explained to me why some of my ideas would not be so ideal, as he had already foreseen the responsive version of the mobile site. I had a lot to learn from him.

We did spend quite a bit of time on user research to a point when we are slightly lagging for our wireframes part. But we decided to brush up the research part before moving on. Some card sorts result were very questionable and vague, after going through with the TAs, we tested our findings with tree testing. This felt interesting to me as we were thinking of re-doing card sorts for some of the cards.

I felt that we can do more for presentations.We did not explain so in depth in the slides as I did try to cut down the words on the slides, but it did not explain the terms as well. The image chosen were not explicit enough to explain our design. I just felt that I could have done better for presentation (partly due to nervous for being 1st presentation team). I believe for project 3 I will do much better since I have the experience in project 2 to know how to handle a project.

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