UX Case Study: Singapore Polytechnic Website Information Architecture
Singapore Polytechnic Website Information Architecture is a case study of my design process for my class project at General Assembly. It describes the steps involved in a school website redesign, including content-auditing, heuristic evaluation, card-sorting, tree-testing etc. The project took 11-days to complete.
Project Brief
Redesign the Information Architecture (IA) and key pages layout/wireframes of Singapore Polytechnic website.
Background Information
Singapore Poly, established in 1954, was the first polytechnic in Singapore. Initially, it offers Diploma courses, but in 2010, it set up PACE Academy to provide skills training for working professionals. With the government pushing for Lifelong learning through its SkillsFuture initiative, SP and other tertiary institutions in Singapore will play a more important role in adult education.
Problem Statement
Since PACE Academy was launched at a later date, the site was separated from the main website. This continues to portray SP as an institution for young Diploma students rather than a school for a professional career development.
User Personas
3 core user personas were assigned to this stage of the project, Mark, a prospective student, Jessica, a current student, and John, a working professional.
While Mark is interested to find information relating to admissions and scholarship opportunities, Jessica wants details relating to a particular class or school activity.
For John, he wants to know more about continuing education, whether these courses will help in his career development. In addition, he wants to know if the courses can fit it in with his family commitments and work schedules.
Focus Statement
The aim of this Singapore Poly website revamp is to integrate continuing education and training (CET) programmes with existing content on the current website.
As the project duration is short (11 days), it was impossible to redesign the entire 200+ pages website by myself. It was necessary for me to focus on a section of the website, such that the project can be implemented in stages. I narrowed down the project to focus on meeting John’s (working professional’s) needs while leaving the rest of the content intact for other users.
Project Execution
This project should be executed progressively in stages without affecting all existing groups of users. The first step is to integrate CET programmes to the current site and improve on the content presentation of these pages.
Heuristic Evaluation
The first step of the research includes a heuristic evaluation of the current website using Jakob Nielsen’s 10 Usability Heuristics for User Interface Design.
For example, when John attempts to find a short course, he had problems looking through a list of topics that were not alphabetically ordered. This can be classified as a problem with ‘flexibility and efficiency of use.’
At the end of the evaluation, I discovered problems at every stage of the registration process.
Since John cannot register for a course on the current site it could not fulfil his needs.
Competitive Analysis
I conducted a competitive analysis of Singapore Poly with 4 other polytechnics in Singapore. I rated the schools according to how well it meets John’s needs and highlighted the best school in each category.
At the end of the analysis, I found that SP tied with Ngee Ann Poly in fulfilling the needs of adult learners.
In fact, I found SP’s site to be better as it was easier for John to find the resources he needs. This is assuming that he can filter through the cluttered website.
Content Auditing
As part of information architecture process, I performed a content audit on the current website. This tiresome process helps me to understand the current site structure and records the information on the site. In addition, I constructed a sitemap of the current site as a starting base for a sitemap for the new site.
Cart Sorting
To determine the structure of the new website, I conducted a series of opened and closed card-sorting with Optimal Workshop’s OptimalSort. The series of tests helped me to understand how users group information. A majority of the tests were conducted face-to-face even though the tool may be used online. This allowed me to observe the participants and conduct a post-test interview.
Open Card Sorting
The first test I conducted is an open card sort where 16 participants grouped 40 cards in any way they like. The words on the cards are sets of information found on a page rather than on the navigation bar. For example, among the cards include, ‘entry requirements for business diploma’, ‘scholarship eligibility criteria’, ‘list of student career counsellors’.
Among the participants was a foreign student from Korea. As he was not a native English speaker, he revealed that his card groups helped him to understand information on the site. The session was particularly insightful since schools serve not only local students.
Closed Card Sorting
Following the open card sorting, I conducted a closed card sorting with 7 participants using 25 cards from the previous session. They were tasked to arrange the cards into 3 groups:
- Diploma Courses
- Further Education
- Student Administration
From the test, users could separate courses for diplomas and further education programmes. It was also revealed that they preferred to group information relating to fees, subsidies, and admissions separately.
Tree Test
I created the first draft of main navigation buttons for the new site with the results from the closed card sort. The test with 2 set of tasks, was completed by 8 participants on Optimal Workshop’s Treejack. Although the navigation buttons were grouped according to the results from the closed card sorting, it did not achieve the same success rate in the test. Participants were undecided on matters relating to fees, subsidies, and admissions. The solution is to separate ‘Finance’ and ‘Admissions’ in a second tree test to provide greater clarity for users.
The second tree test proves to be a success, with 89% out of 11 participants completing 6 assigned tasks directly. This sufficed for me to conclude the structure of the website for this project.
Creating a Sitemap
Before prototyping the new website, I had to confirm the structure of the website with a new sitemap. The process is a lot quicker since I had created a sitemap of the old website earlier. It was a matter of rearranging existing pages, eliminating some, and adding new pages to the site. Keeping most of the pages on the current site rather than deleting them is a better SEO practice too since it avoids broken links.
Creating an Interactive Prototype
Due to time constraints, after a few rough sketches of wireframes, I skipped immediately to a high-fidelity prototype (guilt-stricken). I was tasked to complete the project with an unfamiliar tool, Axure, to create an interactive prototype. While Axure isn’t the easiest tool to use for beginners, it was a powerful tool to create interactions. Micro-interactions can be created with the software to present a more realistic prototype. (The feature may be available in the upcoming InVision Studio.)
A copy of my prototype can be viewed at this link. The new clickable sitemap is also included in the prototype. (Note that the size of the prototype is 1280px width so as to fit the full screen of the projector used in my presentation. To hide the sidebar, click on the down arrow at the top left corner.)
Usability Testing
I conducted 3 usability testings with the prototype (the recommended number of tests is 5–10). These participants were filtered to match John’s profile. Due to a lack of pages created for the prototype, I created only 2 tasks for the participants (recommended 7–8 tasks).
I gathered qualitative results through the tests. Users could complete task 1 easily but struggled to find the page for facilities from the hamburger menu. However, all participants referred to Life@SP (student life) for the facilities, hence prompting me to add it to the mega menu.
To gather quantitative results for the usability testing, I had to use ‘The System Usability Scale’ by John Brooke. However, I skipped this step due to a lack of participants scheduled for the test.
The Next Step
Although this is a school project, I was tasked to set out steps to take to implement the project.
In the short term:
- I propose to conduct more user testings and implement the changes from these tests.
In the mid-term:
- Optimised the site for other users, such as for Mark & Jessica. This includes prototyping and conducting user testings with these users.
Other considerations:
- Other personas can be identified (e.g. staff, alumni) to ensure that the website meets their needs.
Presentation
After a gruelling 11 days of preparation, it was presentation day. It was a pity that I was too nervous during my presentation, and I read from my cue cards when my presentation ran too slowly. After all, being able to present your design clearly is as important as creating the design.
Feedback from Presentation
Overall, the audience like the new website design. Other comments include:
- Hiding the utility pages (portal logins, contact information, map, FAQs, search) in a hamburger menu may not be intuitive and requires more tests
- However, they like that it was a cleaner design
- User-based initial filtering is helpful in providing tailored content
- The prototype is realistic and easy to implement on the current site
Project Reflections
Overall, I was happy with the outcome of the project. Some points to note:
I hope that I had been more adventurous in reinventing how users interact with a school website.
- The prototype design is a ‘safe approach’ to the project brief, as it was not particularly creative or memorable. I set out with a mindset to ‘clean up’ the site for an established institution without disrupting existing users.
- For e.g. the navigation bar can be tailored to a particular persona
- Or the layout can be more experimental, such as having a news/activity focus layout on the landing page.
Although the number of participants for the various tests conducted was insufficient, it was adequate for me to move on with the project.
- Tests that turned out poor results (such as the failed tree-test mentioned earlier) should be halted quickly and reviewed for subsequent tests.
- Likewise, tests with a clear trend sufficed to move the project forward to the next stage.
About the Author
Hou Teng is a current student at General Assembly, Singapore, User Experience Design Immersive (UXDI) programme (21 Nov 2017–09 Feb 2018). The project is the second project assignment given in the programme. Before attending this programme, he has worked as a graphic designer at an advertising agency and launched an e-learning startup.
His design works can be viewed in his portfolio, and digital marketing writings are available on his blog.
If you like this article, you might also like my project 1 documentation, Chefbox App: User Experience Design Retrospective
