University’s website revamp
Tasked specifically to do the revamp of Singapore Management University (SMU) Accountancy website, we first have to understand why the school requires to do a website. According to SMU’s statistical highlights, there are 1327 enrolments in 2016 and that reflects the amount of future potential students we need to cater information to. A good website that serves the users needs well will: 1. Reduce the dependancy of staff educating prospective students hence reducing staff’s workload. 2. Attract more enrolments, improving school’s reputation. 3. Attracting more quality students positively affecting school’s ranking.
Setting example for other schools to follow
Tasked specifically to do the revamp of Singapore Management University (SMU) Accountancy website, we first have to understand recognise that SMU has different schools with different stakeholders. The user could navigate across the different schools to see the different specialism available but each school will be in charge of the courses in detail.
Ideally, all schools (Accounting, law, social science, etc..) should share a similar navigation architecture and layout template, this would help the users to surf across the different schools in ease. What we could do first, is to, as originally briefed, revamp the accountancy school’s website and propose to use the the architecture & template for another schools to follow as well. Nevertheless, each school should customise and personalise their sub-categories and content to their respective school users.
Understanding other universities’ business model helps us to see where SMU currently stands, what we can learn from others, and to come up with an unique SMU approach that stands out from our competitors.
Based on our findings, SMU have an relatively low engagement rates and high drop-off rates compared to the other universities. I have compared their websites and found that they are laid out similar and therefore the problem clearly lies beyond the visual communication but the holistic experience of using the site itself.
Heuristic evaluation for SMU’s site
This is followed by the heuristic evaluation for SMU’s site, we should keep the good and find solutions for what is not working out.
The plan for team work
Particularly for SMU accountancy revamp, 3 of us were expected to come up with our individual solutions. We understand that revamping the website requires a huge amount of research work and therefore decided to work together as much as extracting information from current website, user interviews and research.
We bounce off what methodologies we can utilise to come up with solutions, and this is the rough(flexible) game plan we came up with and we have decided to worked on point 2 and 3 together.
Current Information Architecture (IA)
Information Architecture is defined by Abby Covert as “the way we choose to arrange the parts of something to make it understandable as a whole”. As below, the current site map is mapped out for reference and helps us identify places that requires adjustments.
A good IA helps the user to find out what they want and need to know for easily. Firstly, we have to do user-testing to gather their feedbacks about the current website and also some user’s insights. The criteria set for user recruitment was not very specifics but needs to be either
- Students who are looking forward to join a university
- Current students (have experienced university hunting and admissions)
- Graduates (who have thoughts about masters’ programme)
We started with a survey to screen out the different personas but not restrict to knowing their background. Because we decided that it is easier to recruit users by going down to the school or personal contacts, we used the survey to ask some questions that could give up some insights on the personas’ point of view and behaviour.
How we recruited our users for user-testing instead is to go down to SMU and also speak to a few contacts we have on hand. They are good user-testers because they have been a prospective students and also SMU students who great context on what is useful but is not existing in the current site. We started off with open card sorting exercise as a way to evaluate how users would see where the categories belong. We also chatted to them to get feedback on the current website and what they think could be better.
From the card sorting results, we are able to place the results in tree-testing, and the above are the results.
As you can see from the chart, there are 4 main branches and we group them as “About” “Programmes” “News & Events” and “Student and Alumni”. For “Faculty & Research”, it is understood by the users to under programmes. For the 3 isolated categories with no core relation to one and other, we will access their importance to the user before deciding at which level of the navigation would it be placed. The site map below is the revised architecture as understood by the users.
While we have regrouped the architecture based on user’s understanding, through the user interviews that we did with the card sorting have yet to make the site useful or desirable to the users themselves. Many of these categories were not well visited.
Therefore, we did a second user test in a way they would navigate on the site as prospective students; where and what would they be visiting. We avoided leading the users to specific task because we wanted to observe their most natural surfing patterns, which would imply those categories and content are important to our users.
From the open card sorting exercise earlier, we also did an user interview to gain understanding of the site’s problem, and find out how it could be better.
This is the point where me and team could evaluate and make sense of the research by ourselves that we have collated. From talking to our users during the user interviews, there are 3 major issues that was evidently obvious. They are:
- The categories are not understandable.
- There are a lot of categories that the user’s are not interested in.
- Limited uses of the site. It has not successfully addressed user’s concerns.
Based on the 3 points mentioned, I have proposed 3 counter solutions.
To make it usable for our users, we need to prioritise our content so that our users can find the things that important to them quickly. Therefore, we conducted a second round of card sorting exercise, and this time, we ask them to prioritise according to importance to themselves as a “prospective student”.
From the chart above, the five vertical rows are the different users we have tested with. They are supposed to rate the importance. 3 = high, 2 = average, 1 = low, 0 = totally irrelevant. We collated the score and ranked them according to highest score, which implies how important it is.
This set of data would effectively justify the priority points of the website, reducing my bias affect the information architecture. Therefore we can now further simply the architecture by weighing the importance of each and every categories. B.J. Fogg’s behavior model states that users will have more motivation to complete a task if it’s easy to do.
Once this is simplified, we can now add new categories or content that can help resolves the pain points of the users. Firstly, we need to identify the different kinds of users.
For this instance, we have chosen mark as our persona to work on considering the main traffic would be coming from prospective students looking at bachelor courses. We have spoken to many existing users and found out do not require to use the school website but instead, use the student portal to handle their administrative matters.
As we have identified the pain points and needs of Mark. We have to come up with new categories to cater for Mark’s needs. While thinking of the categories, I also want to make sure that the categories I come up is feasible in implementing in the site itself. Therefore, it helps by first sketching the current wireframe, and other better ways of expressing the navigation bar.
To address the Mark’s pain points, for example, “Learning about extra curriculum activities” “Learn about new town”, I have created categories such as “Extra-curriculum activities” and “Visitor guide” as a solution and recategorised the main navigation’s “News and Events” to be called “Campus Life”. This helps to make it more relevant and holistic for the persona.
As you can see from the revised information architecture above, the orange labels “Admission” are new categories implemented. Purple labels are sub-categories that have been implemented. I know that some of these content such as “Admission” are supposed to be under the main SMU website to cater not just accounting students, but what we want to do here is to create accountancy school site to be one-stop, all-inclusive informative site that an (prospective) accountancy would need.
Only when the student is his/her application for admission would then be required to link out to the main SMU site.
With the sketches in mind, I mocked them up using Axure. I focused my attention of the navigation and the template of the site with grey boxes and different labels. I do not add any imagery at this point in time because it would be used to test with real users and I do not want them to be distracted by visual elements but just focus on the navigation experience.
Once I have mocked the prototype on Axure and linking it to it’s respective sub-pages, I tested it with 4 users. There were some tweaks to how I categorised certain things. Such as under admission, [Awards] were taken out because they are for current students and should not be under admission. [How to apply] was also added in as a call-to-action after users seeing all the information provided on the site.
Here are the results of iterations, making the site even better after testing with the users.
For the 3rd part of making the site better, we can take reference from other websites to give us some ideas in the way they build features that will further enhance the experience of using the site.
I think we should not fear of copying other success examples, in the face where you think copying means not being original. More importantly, the website should maximise usability and make it desirable to the user instead. Do not demand the user to have to learn new navigation styles nor use it just for aesthetic reasons. We do need to think about the feasibility of building certain features and having some references can help assure that in development phase, what we propose, can be done.
The below are 3 unique and useful features that I have implemented:
They can bookmark important things to them and refer them at a later stage. As long as the content has embedded the bookmark icon, users can click on them to bookmark it.
Search becomes the header
The search bar can become the part of the headers in the sections so it is more usable to the users themselves.
Content like events, clubs, news can share the same layout, just like tiles of pinterest. Its use of modular content blocks, with customised filters on the side allows users the filter relevant content that he/she is looking for, and allows easy summary of the different content pieces.
The 3 points mentioned to make the site better also helps achieve the stakeholders’ business objectives.
- Analyse the content layout, whether it is well presented. User-testing will be required to understand if the users find it easy to digest the information within the pages.
- Expand on the Information Architecture (Level 3 onwards)
- Consider the imageries and copywriting that will best help the user to understand and digest the information.
- Make sure that the current design is mobile responsive and then mock up mobile wireframes.
What did you enjoy most? —The whole process of coming up with the solutions and prototype. Formulating data points intrigued me as well.
What did you find the most interesting? — Speaking the real users, knowing them personally like a friend and learning from their point of view.
What did you find the most challenging? — As there are many methods for research, finding the best method that brings effective results is challenging. There is a need to rethink about another method to get the insights that I wanted.
Was there anything else that surprised you (including anything that took longer, or was more difficult or easier than expected)? — Research process. The SMU site is more complicated than initially though, and there are a lot more problems that lies beyond the accountancy domain but SMU home site has as well.
If you had more time, what would you want to do more of to develop your design concept? — Consider all 3 personas when coming up with the solutions.
How did the project turn out? — I had a good time.
What were the 3 most important things, in your opinion, you learned from doing this project? — Be adaptive, be relentless and be passionate.
Thank you for reading.
/ Visit the prototype link at http://2q4vxj.axshare.com/