The Funs of Revamping A School’s Faculty Website

The Beginning

Ng Yiu Hei
Sep 4, 2018 · 5 min read

Tasked to vet through a school’s faculty website (SUTD-ISTD) and improve it for a better user experience, my partner, James and I started our 2 week journey to discover how we can make the best out of what we have learned in General Assembly.

James (in grey) and myself working on ideas.

Step 1: Planning

From what I learned after the first project, having good time management is really important — especially for such a big task with a short deadline. It was thrilling and scary at the same time.

By tasking ourselves to complete a certain part of the project within a timeframe, it helped us to be more productive, and allowed some buffer time over the weekends to work on the tasks that require refining.

Step 2: Research

As there are a lot of information to take in from a website, we started our research work by using Heuristics Evaluation, a method used to spot what can be visually improved within the website — of course, this maybe just our opinion, but we will get to it being tested with actual users later.

We also needed to see how we fare against our competitors, hence we did a Competitive Analysis and looked at fellow information systems universities from both local (NUS-ISS), and around the world (Cambridge’s School of Technology, and MIT’s School of Engineering) to see in what areas they have done better than what our website currently is doing. We needed to see what the experience is going through these websites, and these points can be brought to our developing phase of the new website.

Really thankful for having a partner, we started on our Content Audit, which is a really tedious and time-consuming part of our research as it requires us to record down every small link that is contained within the website. This part is turned out to be extremely important to us as it helped us in creating the Information Architecture (IA) of the original site. The sitemap can be seen at a glance and we can locate where the required details are. It also helped as going through all the links forced us to discover certain details that we might have missed just by clicking around with an intended destination.

Original Information Architecture of SUTD-ISTD’s website.

At this point in time, we brought in the 3 personas given to us in our project brief:

The personas with their summarised needs.

With these profiles, we conducted our Usability Test for the current ISTD website to get a realistic idea of what people who fit these profiles feel about the website. Tasks from the personas were given to the testers to give us more accurate feedback on what are their experiences.

Our user test results can be found here.

Step 3: Synthesizing our Research

Now that we have the research materials from our IA and Usability Test, the key findings are the following:

  1. Some of the terms used are hard to understand as a first time visitor to the site.
  2. The website does not have a very organised structure and is not consistent. Different tabs are organised differently.
  3. Certain vital information are not included in our website, and can only be found from the main school’s (SUTD) website.

Having these findings, we included what needs to be added to our website to make it fuller and more informative.

By creating a Card Sort, we got related users — again — to test and see how they would categorise the available information tabs in the main headers with the newly added and renamed for easier understanding titles.

From the results, we did a Tree Test, where we created by using the tasks required from our personas and — again — test on users to check for any improvements.

Our tree test results can be found here.

With all our findings, we mapped out our new IA that we followed to create our website version 2.0, which is our next and final step of the project.

Pointing out our major changes, the main ideas (new IA view below) are:

  1. Integrating a student portal to allow students to bridge their needs from the readily available information from the website.
  2. Focused on restructuring the most important part of the website: the Education tab as this is the key place that people look into for a school website.
  3. Combining the remaining 4 tabs into a mega dropdown navigation bar for quick viewing as they do not contain as much information.
  4. Introduced “Admissions” tab for prospective students to easily retrieve what they want to know.
New Information Architecture for Prototyping.

Step 4: Developing and Delivering

With all the deliverables intact, we started off by wireframing and giving our website’s look on how it’s supposed to look like. We included all the pages necessary to showcase how Jessica, our chosen persona can achieve all her tasks easily with the new user flow that we have introduced to our website.

Some wireframes to frame up our work.

As we created the wireframes along side the finalisation stages of our synthesising part of research results, we iterated our design and evolved it into our final prototype:

A preview of the revamped site.

Link to the website here.

Staying true to the brand guidelines of SUTD, we revamped the website for a better experience.

Our presentation link is here. (:

Looking Back

Working together for a project is very different from doing it alone. Each of us has a different way of working, and also a different concept of how the website should be put together. So through the project duration, we slowly adapted to each other’s style, and I can proudly say that we managed to help one another put our product together to the best of our efforts!

Lastly, it cannot be emphasised enough on how important iterating is, as every single step of the processed can be refined to produce better results with even the littlest of newly gained knowledge.

Thank you for reading!

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