Adding new coats of paint to a school site
(This project was to redesign the website of ISTD-SUTD, however, it is not a project officially done for the university. Rather it is a simulation of the scale that some real clients might give.)
We were given two weeks to work on changing the web layout of the site, so Yiu Hei, my partner for this project, and I went about to do a heuristic analysis of the site to get an idea of all its positives and negatives. Whilst I would handle a bit of the design and aesthetic of the website, along with getting usability test findings and helping with the content audit, Yiu Hei would get to outlining the project timeline, doing the IA and userflows for the project as well as the technical aspect of the new site.
Also, three personas were presented to us. They would serve as some of the people who would use the site.



So we had to cater the site to solve the problems and user pains the three personas had with our new information architecture and the site also had to solve the problems of one of them as well.
So a little bit on ISTD~
It’s affiliated with MIT, one of the big well-known universities with an amazing record with many well known people affiliated with it; one of them being the acclaimed late Stephen Hawking. As such, its main focus is in its technology design and its software development.

As such, we had to go about the research extensively so we could know how the site laid out its information and the way it was designed. We did evaluations of the website to see what elements they used and it was here that we began to unearth the many flaws the original site had, with its misleading links and vague descriptions to name a few.
Along with this, we did a competitive user flow, seeing how other sites similar to ISTD’s would fare. This allowed us to see the good points in other webpages and take note of it, and to also see for any cases for further improvement for our own redesign of our website. We decided that since ISTD was related to SUTD, which had affiliations with MIT, it ought to compete itself with more than just the local universities in Singapore, and should be put alongside the top few autonomous places of education, like Cambridge and its very own; MIT itself. So we wanted to see how the 3 personas would go about finding information on these sites.

We also did a content audit of the site, which was one of the first big hurdles in this project, as it meant us both recording every single page it had, every last link , right down to the last window it would show to you. To put it in layman terms, it would be the same as going to a library and taking every single one of the hundreds of books, and putting it into a very very long list. We both took on it, tackling different categories, really mapping out how deep this rabbit hole was, and coming across all the obscure links it had. Much to our confirmation, we found hidden and unassuming headers, that took us to the information that would be relevant to the users. So if it was superbly taxing for us to find, one would imagine how much more cumbersome an ordinary user would feel just to find a simple page of information lost behind so many clicks.

There was also the Usability Test, which was conducted on our own original website, so we could also find feedback and comments from fresh pairs of eyes, and to also see how they would navigate the site without any prior primed knowledge of what the site was. The both of us at this point knew the site well enough, and we would have some form of bias if we went on with just this research only. By putting this site before some users, we could also find out more about their perception and presumptions the site carried out.

From this we could draw many conclusions about what the site lacked and where it could improve on, mainly settling on how much more simplified its labeling could be and its putting more relevant information first as the site would turn away a lot of new users.
The information on the original site was an overload of events and seminars plus some announcements which did not apply to newer users. This was not just a long large list, but a large chunk of the page just filling with misaligned rectangles of some news that people would not usually go for. The headers themselves used terms that the users did not understand and it was not framed in a way that was easy to read. Whilst Cambridge made it simple where you never needed to even scroll down to find what you needed, the site had users going in and out of tabs wondering if it was the correct tab to click. The site constantly led you out into the main SUTD website which meant you would not be able to find relevant info about ISTD. This caused a decent amount of frustration in the users, and it caused a considerable level of mental fatigue in navigating the site.
This finally brought us to construct and stand by our problem statement.
“How can we make the website less cluttered in the way it presents it’s information and make it more specific and understandable for users both old and new?”
We had to work on toning down on how the site displayed its info, and also get to work on making it applicable for the chosen persona, Jessica. The site would be mainly to appeal to prospective students, but it ought to also focus on the students who were also part of it.
With all our findings, we went to the next step to this redesign. Card Sorting.
As its name suggests, we went about getting users to organize labels into certain groups to find out in what way would they put each tab into. This would then be the basis of our tree testing. Because the original headers were confusing, we decided that our first action would be to make the changes to the tabs and see if people would understand it better.

Users technically have an idea of how some words are grouped together, which in turn will be the base for how the menus are done. Because when they group words together, it means that under that category, they would expect to find that link or tab there. So for a clothing site, dresses, skirts, pants, would all be put together under bottomwear. Socks and shoes might count as well, but they would also be put underneath something also called footwear. For topics found on our site, this would help us with the basis of making the foundations of the website.
With this came the validation of the findings, the Tree Test.


The results, in the shape of a growing tree, would showcase now how users would continue to navigate through the draft site sequences to get to the ideal destination. As such, it would also confirm if our labeling was specific enough that at a first glance, users would know how to reach to their tab. There were numerous occasions where the users went very deep in only to back out to go down a different path. These few cases would be looked into so we could add even more changes to what the headers would say.
Now that the tree testing also backed up our card sorting, we could start working on the new information architecture, rearranging and putting those changes we made to it. Then, we could go right into also addressing the persona problems we found as well, as the website lacked the sufficient pages to cater to all three of their pains.

Wwith the user in mind, we went about doing the prototype as a plain wireframe just to get the basics out. To really make it less cluttered, we went about first to frame every thing in the center so the eyes would immediately focus, and then the content would guide the eye instead of exposing it to a chaos of text chunks and irrelevant links.



Instead, only the top 3 news and announcements would be shown, and then a See More would added in case users were really interested in seeing what else the university had in the past month. Seminars would only have one displayed, possibly for an upcoming one to let users know instead of showing more than ten like the original site did. Relevant information would also be put just beneath the main banner, like the admissions which would be the primary purpose most people would visit the site for.
But we knew we had to test my assumptions, because we also designed this knowing all the flaws the site had. I couldn’t just run off on the idea that the very first iteration would be near ideal, and decided to make only an extreme mockup with sketch lines to conduct another usability test, for our own prototype. We wouldn’t know of any errors if we never even tried.
From this, it was indeed proven that our designs did make the easier to manage, and the users did say out about how the rework made navigation simpler, and they had almost no trouble getting to wherever they needed to go



And that was when everything went into full gear, adding every last bit of aesthetic to the sites, to make every link work, to double check spacings and kernings, every color for clickables. We also worked on the slides and the presentation, knowing that though ten minutes seemed like a lot, it had to be rationed out and the crux of it would have to be spent on showcasing the prototype itself. It was an arduous task as well, as we wanted to showcase our emphasis on the research, as UX was all about the user. As such, we had to bring it across in how we took extra care in understanding the user and the site as well.
So it does give me a sense of accomplishment seeing all this.


All in all I did gain a deeper understanding of how the process to find out more about user needs was all about, and the extensive measures to understand the workings of an already existing site. If we were taking this on for maybe two more weeks, we would continue to carry out more card sorting, and even more tree testing to really make the rest of the website catered to the other personas. The final prototype we have now is far from perfect, but it to me is proof that we did accomplish what we did and solved our problem statement.
My thanks goes to Yiu Hei for being my mental anchor, bringing us back into focus if our discussion went off topic, and for him with handling a lot of the technical parts of Axure that I wasn’t able to work out. He’s done a lot of work that I doubt I would be able to do as proficiently, and he still did an incredible job enduring a really bad illness during our presentation.
With all this, the journey continues, to understand the user, to understand how their minds work. It’s a long process, and what I’ve learned here will greatly help me in future projects when I enter into the working world.
And honestly? I ‘m looking forward to what’s next.
