Website Redesign — don’t judge a site by its UI
Here we go again
With the completion of our first individual project it was time to move on to the second project. Thankfully for the second project we worked in pairs and were given the option to work with other pairs that were working with the same client. I had the opportunity to work with Boyang who has a background in architecture. We came to a agreement to work with the other pair for the initial stages of research and decided to break into our separate ways during the design phase.
So you must be wondering what is our project all about. We were tasked with redesigning Nanyang Technological University of Singapore’s School of Electrical and Electronic Engineering. When we found out that we had to redesign one of the world’s top university we were pretty relieved. I was thinking to myself how bad could a top university’s website be. Then we sat down as a group to began surveying the site and we had a-lot to say about the website. The deeper we went into the site the more grows than glows we found.
Getting to know our users
user persona & user interview
Our redesign had to cater to three of our user personas which were Jack , Jessica and Mark. Brief User interviews were conducted with people that fit our user personas to get a better understanding of their needs and pains when visiting a University site.
NTU website
Content catalogue
To be honest i was very skeptical with doing a content catalogue but i realised by doing one its easier to identify the issues with the site. We gained important insights just with content cataloging.
- duplicated information
Information was duplicated across different pages leading to user confusion
- site navigation wasn’t visually consistent
navigation links were sometimes displayed horizontally and at times vertically
- nested information
information was nested so deep that some users tend to believe that they are in the wrong path and end up navigating away without getting the information that they needed
After a good 2 hours of content cataloguing we narrowed down the content to stuff that were only necessary to our user personas and proceeded to conduct a card sorting test.
Card Sorting> IA>Tree Test 1>IA 2.0>Tree Test 2>IA 3.0
card sorting
We conducted a first round of card sorting with the hybrid method. This was to figure out how user would group our content. We then proceeded to do a second round of card sorting with more users via optimal workshop to validate our content headings. Based on the results of our card sorting we were able to deduce that majority of users agreed on the placement of subitems within the various headers.
The issues we identified with the results were that users were split between where to place ‘visiting the school’ and ‘accommodation & housing’. We also realised that the headings ‘campus’ , ‘campus life’ and ‘vacancies’ seemed to be misleading to users. To solve the issue we felt that removing the header ‘campus’ and renaming ‘vacancies’ to ‘job openings’ would be much clearer when creating the IA.
IA 1.0 (the word IA invoked memories of my time in the army. it meant immediate action and its a taboo phrase that people did not want to hear especially during a combat shoot)
With the card sorting results, we proceeded to generate a preliminary information architecture for our redesigned website.
Based on the current NTU IA we realised
- There were a lot of duplicate information under different headers thus we streamlined that into fewer sections and removed unnecessary duplicates.
- We surfaced some of the deeper elements in the original IA to parts of the site which were not as deep and easier to find with just the navigation menus.
Tree Test (No trees were harmed in our testing)
Based on our preliminary IA we translated it into a tree test. We gave users a set of 6 tasks and asked them to go through the process of completing the tasks. We did tree test for the current NTU site as well. This was done in the notion to identify that our redesigned IA was better and users would find it easier to complete the tasks as compared to the Current NTU IA.
We were shocked to see the results as we were confident that our redesigned IA would be better but users found its easier to complete most tasks with the Current NTU IA. this called for IA(immediate action in this case) we had to rethink our IA. so we came up with a second draft and did another tree test with users.
with the second tree test results we got a more desired outcome. Users were able to complete the tasks easily with the redesigned IA.
The only issue we had was that users weren’t able to complete the tasks of finding accommodation and housing thus with the backing of the results we decided to shift ‘accommodation & housing’ from student services to campus life.
Wireframe usability and proto
With IA being finalised we then broke off into 2 pairs to work on our designs of our sites. We began creating wireframes to be used for our usability testings. With the completed wireframes we set off to test them with users. Even with a very basic wireframe we were able to get substantial feedback and insights to our designs. these information were beneficial to us when we began creating prototypes of our actual website.
top level menu
When we first showed user our wireframe most of them missed the top lvl menu. This behaviour actually matches the f shaped reading pattern where they notice the EEE nav menu followed by the content on the page and missing the NTU navigation menu.
To help users notice the NTU menu we decided to add contrast to help it stand out more. For the EEE navigation menu we used different fonts and colour to differentiate between the EEE microsite nav menu and the NTU nav menu which will be present even in the other faculty sites.
home page
We recieved feedback on the headings of the content on our faculty hm page.
The heading opportunities was misleading users into thinking that it was about jobs and we also received feedback about asking for donations on the home page not being appealing to prospective students.
We decided to improve our headers to make it less confusing to users. The main job of the home page is to appeal to prospective students. Hence we showcased what they can expect in their careers after graduation and also replaced ‘give back’ with ‘faculty highlights’ to showcase an active vibrant environment within the faculty.
campus life campus facilities
One of the learning pts from our user studies was tht it was okay to repeat similar content in multiple places becos diff users woiuld look for it in diff places based on their understanding of the tasks.
To use the eg of childcare some of the users saw it as a facility whereas some saw it as a service. Hence we decided to link them to the same facilities page under different headings in both campus life and student services
Under campus life we named it campus facilities and other stud services we named it other services. They both link to the same page where users can find all the info they need on facilities and services available in the school.
We also minimised the depth of site by organising the info better so that they could all be in a single page and users don’t have to go through so many clicks to find info they need.
student finance tuition fees
This another example of the above mentioned learning point with the topic on fees. Originally it was only found in stud services but we found users also looked for the same info in programmes.
Hence we decided to Duplicated ‘tuition fees’ info in both the ‘Study’ submenu as well as the stud services sub menu.
Looking into the future
there are 3 things that we would like to focus on developing in the future.
- quick links in the home page
we would like to conduct more interview to find out which parts of the site users visit the most and provide them with quick links to speed up the process of getting to their desired information
- course comparison tool
we would like to come up with a course comparison tool which the current site doesn't have. As when we spoke to our users most of them actually mentioned their method of comparing courses and it is very tedious. we would like to simplify the process with this feature
- adaptive and mobile responsive site
lastly we feel this is the most important. With the rise of the usage of mobile making the site adaptive and mobile responsive will be beneficial as users don’t have to use a desktop to view our website with ease.
Links
link for presentation slide:
https://docs.google.com/presentation/d/1gIVArG-vO0NHT_tHr84NHET06fcN25u0mA6RMZ5dxnY/edit?usp=sharing
link to Redesigned NTU site:
https://g1w6yi.axshare.com/#g=1&p=home
link to current NTU site:
A funny thing that happened to us was that a day before our presentation the current NTU website was down. Soon we realised that they had updated their site. thankfully it wasn't much of a major revamp. The IA for their site remained the same. The UI for the site was improved to a certain extend but nevertheless i feel there is still room for improvement on both the current NTU site as well as our redesigned version. Do feel free to share your feedback.