About that time I redesigned an institution’s website
Can a school website be spectacular? I’d say yes — the Aarhus Business College website is a refreshing take on institutional websites. It’s engaging, interactive, visually pleasing, and most importantly, smart. Considering my 5–7 minute read limit, I wouldn’t dare go there. So let’s move along.
In Singapore’s educational sector, you’d rarely come across a website that mimics the characteristics of the above-mentioned. With more and more institutions valuing information over function, school websites have become an information dumping ground, leaving people to fend for themselves as they sieve through rather irrelevant information to find the one (or two) things they were originally looking for.
With this in mind, my partner Brenda and I lept off the ledge and jumped into the deep end of the pond, as we commenced the second UX design project tasked upon us.
The brief: Redesign (ISTD’s) website, from its Information Architecture to its key pages
Background: ISTD (Information Systems Technology and Design) is one of the four pillars within Singapore University of Technology and Design (SUTD). The school aims to nurture their students to become leaders in the fields of data, technology and computing.
We kickstarted the research process with the consideration of our three personas — Jessica, John, and Mark
Conducting a cognitive walkthrough, we identified the bad and goods of the website, from a heuristics study to drafting of user flows for each persona, mapped against our competitors.
Key findings include
Violations of Jakob Neilsen’s heuristics. Of the many elements on the website that promoted recall over recognition. One stood out — both ISTD and SUTD’s logos were placed side by side, of the same opacity, and lacked in size differentiation. So how would a user be able to (apart from the website URL) tell which site he was on, especially if he has never been to the SUTD website? Secondly, error prevention did not exist on almost all forms on the website. This was worrying — especially since forms would be a frequent point of contact for potential students. Lastly, help and documentation was not easily accessible. The Contact Us link was hidden within the dropdown About ISTD. Once again, more hassle and more room for error.
That said, as a whole, we were doing pretty well in terms of site navigation and usability. So, we needed to make it better by…
- Reorganising existing content that has been categorised inaccurately
- Simplifying information heavy pages
- Helping users with specific needs by creating a personalised experience for them
You can view our prototype here.
Get Lorraine Wee’s stories in your inbox
Join Medium for free to get updates from this writer.
Now, I’m not going to bring you through the details, as that can be found in our deck. So read on to hear my experience.
The three biggest takeaways from this project
- Function over form, then function + form
As someone with limited background in visual design, this project played on a great fear of mine — that I’d lose out. My partner and I decided to conduct our first round of usability tests with a mid-fi greyscale prototype. In contrast, my peers were moving right into high-fi prototypes for their first round of usability testing. While darker thoughts nibbled on my mind, I’m glad we approached the testing process as we did. Not only did conducting my usability tests in greyscale speed up the prototyping process, it also ensured that I wasn’t too attached to my design, allowing me to take criticism in its purest form.
2. Every user is different
When drafting the information architecture (IA) of the site, we spent a long time thinking about whether it was worth duplicating access points in our collapsable headers. Inevitably, when we presented our prototype, the fact that we placed multiple/overlapping access points in our IA sparked curiosity and discussion amongst our peers. But here’s the thing: every user evaluates information differently. Users have multiple ways of accessing and digesting information. So we felt that our job is to ensure that no matter the path he chooses to take on our site, information that might be applicable to his user journey must be there.
3. It’s okay to assume, it just means you have to test it
We had 14 days. So we decided that we’d take on Mark’s persona and map out his user flow of 1. exploring the course’s offerings, and 2. applying to the university. We’d then form assumptions after conducting a cognitive walkthrough. While an executive decision was made, it seemed that everyone around us conducted a walkthrough with actual users, instead of making assumptions. Because we were already 2–3 days into the project, we decided to go forth with our assumptions, and then test it. I think we lucked out, with most of our assumptions testing true. Still, a learning for me is to definitely conduct a user interview/walkthrough before forming links and assumptions, because you never know when your assumptions are inaccurate, leaving you almost no time to go back to the drawing board. Some might argue otherwise, but I think it boils down to a situation of #IMO and #ItDepends.
What I’d do differently
Paper prototyping. Having just learnt how to use Axure the day before, I spent rather long creating my first prototype (even though it was in greyscale). Opting for paper prototypes instead would have sped the process along, leaving me more time to test (at least twice) and iterate.
Be confident. As my instructor loves to say, “IT DEPENDS”. There’s no one set way of doing things, and there is definitely no room for self doubt. I now believe that the biggest flaw that a designer can make is to lack confidence in his/her design. As long as it makes sense, and is justifiable, then why not? I spent way too long doubting my design and comparing my process against my peers, when it really didn’t matter.
Design vocabulary. My design key wasn’t the most comprehensive, and I received feedback that the sitemap’s vocabulary wasn’t clear. Truth be told, the whole IA-sitemap thing made me really confused, and it is on my personal agenda to study and learn from industry professionals, till I am able to create effective sitemaps for my clients.
Send ‘claps’ my way if you enjoyed reading about my experience! I still have much to learn, and I look forward to sharing my next experience with you, where I’ll be redesigning a very very very established application. *Wish me luck*
-Lorraine
