A conducted UX audit pointed towards certain issues related to the website’s Information Architecture, which we wanted to solve before diving into website UI redesign.
Even with plenty of space to display navigation, the current website hides everything under a hamburger menu. Studies show that hiding navigation hurts the UX metrics - there’s around 20% drop in content discoverability on sites with hidden navigation and task completion is slower for desktop users. (NNGroup)
The image shows the current sitemap of the Student Body Council website. With 13 items placed at the top level of navigation, it is hard to believe that all of them have the same hierarchy and that the content is properly placed in logical clusters. This is what I wanted to test out.
This is how the navigation looks like when opened from the hamburger icon. When a student wants to read something about the Student Body Council, the content is placed in 2 categories — in Foreign Students and in SHÍ. If the students want to learn about their rights, they will have to think whether what they are looking for is in Foreign Students, Students Rights, or in Rights-Ronja (for students with disabilities).
Same content can be found on multiple places which might prolong the time a student needs to find information they need.
In order to map out the mental model that the students have, I've decided to do an open card sorting exercise with all existing website content.
Since the workshop was done in Iceland, with students at the University, I needed help with facilitation. That’s why I made a detailed preparation for our colleague in Reykjavik — Benedikt Hauksson.
I’ve collected all the pages of the current website and placed them on cards that were ready for printing and cutting. There were also blank cards for adding new content pages or duplicating existing ones, as well as cards in a different colour for naming categories.
I’ve created a card sorting facilitation guide & given presentation for a colleague in the field.
Cards with content, ready for cutting.
Debriefing document for collecting qualitative feedback.
Students found it easy to rename and cluster pages into new categories - discussion at the end developed the new content organisation.
Highlights:
The next step was to learn how the workshop solution worked - I've decided to go with A/B tree testing.
The question that we wanted to answer was actually very simple — Is the new Information Architecture better than the old one? We wanted to find out whether the users will manage their way through our tasks better with the new sitemap that we have created with the client.
These are the 2 options:
The results were mixed: In only 2 out of 3 cases, the new architecture came out as a winner.
In one of the tasks, the new architecture was underperforming so much that, in total, the old sitemap has 13% bigger success rate.
Quick workshop with client resulted in final architecture:
The new architecture had around 70% success at tree testing. In the future, we would want to make further improvements by analysing the live website data and tweaking the designs. The client gave overall positive feedback on the new look & feel. Website is live at student.is
The wireframes for the new navigation had a mega menu and a secondary navigation for quick access to important resources. All pages that students marked as important in the debriefing were placed directly on homepage for quick access.
In collaboration with a UI designer colleague, we have finished the new website for the Student Body
Council, just in time for their 100th anniversary.
