Project 2: Rethinking the Strategy of Further Education
The Brief
The task for the second project was to redesign Singapore Polytechnic’s Professional and Adult Continuing Education (PACE) Academy. The site is generally messy in terms of information hierarchy with little regard to visual design as well.
As there were two groups of two working on the same project, we decided to team up and work together during the research phase, before splitting up to do create the wireframes and implement the design at a later stage.
Cognitive Walkthrough
We took on the role as the user, navigating through the site with a given set of tasks to be accomplished. We realised that the number of clicks to get to a particular page from the PACE website is relatively little, on the average about three clicks. However, we were confused and often took way longer than expected, toggling back and forth between, to actually find the correct information before getting to the correct page.
Fun Fact “Cognitive Walkthrough”
To navigate through a site with fresh eyes. The cognitive walkthrough method is a usability inspection method used to identify usability issues in interactive systems, focusing on how easy it is for new users to accomplish tasks with the system.
Card Sorting (Internal)
After which, we did one round of internal card sorting to figure out what worked and what did not for the current site, and made adjustments and improvements to the headings as well as the flow.
We renamed different sections because the previous site had many ambiguous names such as “Skillsfuture series”, which basically is a filter for the courses, but parked under a separate tab.
After we agreed internally that the new user flow made sense, we proceeded to test it out with users in the contextual inquiry phase.
Contextual inquiry
During the contextual inquiry phase, we observed users and their habits while navigating through the old site. This was done in order to validate our assumptions we had before we went on to redesign the pages. There were many great insights drawn from the results, such as having a much better flow for users navigating between pages. However, some setbacks that we faced were the clarity of the names given for the section headers.
The users also had difficulty navigating the site in general. The fonts were too small and the descriptions in each page were too wordy. They complained that they missed out certain sections such as “course fees”, which is of significant importance for a school’s website. There was also a myriad of redundant information that did not need to be on the page, as well as complaining about the pages being too long and having to scroll very far down to get to a particular section. There is also a great discourse in the information, which users feel should be together on one single page. These would apply to course fees and course calendar, which are not parked under courses.
Content Audit
The next step was to archive every page on the PACE website. However, because PACE is essentially a microsite of Singapore Polytechnic, there was no need to map out the pages for Singapore Polytechnic. Rather, just the pages for PACE itself. A secondary navigation bar located below the main navigation bar of the site allows user to navigate the site accordingly.
We came to a consensus that we will only archive the site for PACE. The content inventory was extensive, however not exclusive to individual courses as there would be repetition if so.
As you can tell, the depth of the sitemap is very long, with little attention being paid to the breadth. After reshuffling the pages around, we concluded that our goal would be to reduce the depth and increase the breadth to make the sitemap easier to navigate and information to be more accessible for the user.
Pushing out assumptions
However, these were only assumptions that we had, which we needed to test with users to validate. We arranged the pages with post-its, and got users to test it out by doing a physical card sort. It is good practice to push out our assumptions from the beginning.
In that way, we can either validate our assumptions through user testing to dispell any doubts we have of the revamped sitemap; or rework the entire sitemap again. This would be known as the iterative process in UX terms.
Heuristics Evaluation
During the heuristics evaluation, we took into account the ability of a site to have a sorting page for the different courses, the navigation bar placement within the page, placement of the breadcrumb links, the description page for the individual courses as well as the number of clicks required to get to a specific course within the school’s site.
Number of clicks
What we found was surprising because we realised that PACE’s clicks are at the lowest compared to the other universities. However, the overall direction is very much unclear with users going back and forth to navigate through the site ineffectively. We felt that this behaviour would have caused users to feel frustrated, causing some of them to abandon the idea of applying for a course altogether. This was also validated during the contextual inquiry stage when users voiced out this frustration.
Navigation bar placement
The placement of the navigation bar for PACE was unconventional because it is located below, where users would not have noticed it at a glance. The layout of the navigation bar is messy as well because they are inconsistent across different pages.
Hague School of Art had an interesting take on the navigation bar because it is located vertically instead of horizontally and appears as a push out when one clicks on the menu button at the top right of the page.
Republic Polytechnic has very clear navigation bars, with ample breadth to accommodate for lesser depth in the page as compared to Singapore Polytechnic.
Naming conventions
The naming of items across the site of PACE is poorly done, with some courses starting with “introduction to …” while others having direct names such as “psychology” This will cause users to be confused because the naming is inconsistent.
Republic Polytechnic naming convention is clear and concise which allows users to navigate the site cohesively without hiccups. The names are all short and consistent across courses.
Hague’s naming convention is clear as well, with clear labels whether the course is a master’s, bachelor’s or PhD.
Placement of breadcrumb links
The placement of breadcrumb links for PACE is at an awkward position, between the main navigation and sub navigation bar. This is unconventional because the breadcrumb link has lesser importance as compared to the sub navigation bar when users navigate through the site.
This was done well compared with standard practices in Republic Polytechnic’s site, because they follow convention to have it below the sub navigation bar.
This was similar for Hague’s breadcrumb links as well.
Sorting page for courses
The sorting page for PACE is inconsistent. There are tabs for the different courses, which should actually be more of a filter instead as these are not of significant importance in the scheme of the page. There are tabs to view all the course listings, one for skillsfuture and finally the course type. When the user navigates to the course type page, there is no clear indication of school faculty like “school of business”. Instead, the courses are sorted according to their purpose, such as “skillsfuture series” or “short and modular courses”. While this is not wrong, PACE should follow usual practices to avoid confusing the user and disrupt the flow of the site.
Republic Polytechnic’s sorting page is clearly labelled with “courses”, “programmes” and “schools” to allow the user to choose which type of sorting they wish to have. This is a good practice to allow the user to make informed decisions about what they want to view. One surprising thing observed was that Republic Polytechnic presented the user with choices when they navigate across pages. This is very clear as they present the different options clearly on each page for the users to make informed decisions, and lead the users to specific pages. We can clearly tell that this is what great user experience feels like, when navigating through a site becomes seamless rather than a hassle.
This would be similar for Hague as well, with the different options presented as a filter for users, to sort what they want to see.
Description page for course
The description page for PACE is poorly designed, with little regard to visual hierarchy as all the point sizes are the same, disregarding any headers and labels. There are tabs for the different functions such as “register”, “course information” and “fees and funding”. However, with an overload of information, the page would just appear as verbal diarrhoea, caursing user fatigue when searching for specific details. The text are misaligned which causes users to break the flow of reading as well.
The description page for Republic Polytechnic does have sub tabs as well. There are headers, pointers and text in bold to signify the importance of certain copy.
This is similar for Hague, with the different sub tabs listed vertically on the left side, rather than horizontally as compared to PACE or Republic Polytechnic.
Information hierachy and Visual Design
The information hierarchy of PACE can be improved upon greatly, with improvements that can be made to headers, use of negative space as well as point sizes. The visual design for PACE can definitely be much better for an educational institution.
The information hierarchy of Republic Polytechnic and Hague is much clearer, evidently with high regard to importance of user experience and visual design.
2x2 Competitor analysis
With the heuristics evaluation, we then proceeded to do the 2x2 grid testing where the axis were measured via information hierarchy on the vertical and visual design on the horizontal. We also evaluated against two other schools; namely National Technological University and Ngee Ann Polytechnic.
Personas
Mark is a 17 year old prospective student that wishes to apply to a university. His key areas of interests for visiting the site are admissions requirements, scholarship opportunities, student body make-up, teacher ratio, college programs and campus housing info.
Some pain points he might encounter are learning about a new city/neighbourhood, choosing a major, checking the schedule and learning about extra curricular activities of the university.
The key aspects 21 year old Jessica is looking for when visiting the university site are to check the syllabus to evaluate the class content, whether a class fulfills a degree requirement, finding out about extra curricular events, checking for career advice and getting contact information for various people.
Her pain points include scheduling conflicts, that class may not be fun, scheduling and paying of school fees when due.
John is a 38 year old working father that wishes to further his education. He looks out for information about continuing education, upcoming schedules, specific learning outcomes, background of faculty, a feeling of relationship with the brand when visiting a school’s site.
His pain points are a lack of sufficient descriptions, finding childcare for his children, often feeling like the oldest person in the room, managing costs in addition to tuition and checking the schedule of classes.
Among the three of them; scheduling, fees and finding out about the school’s activities are of significant importance. When designing the wireframes, it was crucial to keep these points in mind to ensure that the needs of the users are met in general, and that the user flow is clear and succinct.
However, because PACE is catered for people who wish to further their education, we feel that John would be the best persona to base off our redesign. We therefore created the user flow for the site to best suit the needs of John.
User Flow
After consulting within our group, we decided to rename the labels again with the information presented to us; this time with the new addition of having to keep the personas needs in mind. We shifted sections within PACE around, and debated whether the user would be able to identify with the new names for the different categories, and proceeded to retest the userflow with a card sorting test.
We tested the card sorting online as with 27 users.
Old Information Architecture vs New Information Architecture
Comparing the old sitemap with the newly designed one
Increased breadth and reduce depth of sitemap.
Card Sorting Internal 2
We proceeded to do a second round of card sorting internally to finalise the different sections and keeping in mind John’s pain points and needs as well.
Card sorting Round 2
After attaining the results from 17 users, we regrouped and synthesised the findings to clear labels to ensure that we were on the right track. The number allocated at the side of the post-it signifies the number of users.
Tree Jack Testing
We performed the tree jack testing, giving users a specific set of tasks to perform, navigating with the new site in mind. This was done remotely and we collected the results and found out that there was an increase from 60% to 79% in terms of time taken.
Creating wireframes
We then went on to start creating and designing the wireframes according to user’s feedback. This was when the team split up to work on the site in pairs of two.
usability testing
After which, we got users to test the pages individually with a series of tasks. We probed them to ask why they made certain decisions and what were their intents.
Second round of affinity mapping
We then went on to synthesise the findings one final time, marking out in a 2 by 2 grid, what we have done well, what could be improved upon and other interesting behaviours.
We adjusted out prototype with regards to the feedback given by users on our newly designed wireframes. And finally, we populated the pages with content and updated the colours and fonts according to the brand guidelines created by PACE. Attached below are the screenshots of the prototype and the link that accesses to the prototype.
Final Prototype
