Usability testing and IA testing for a website redesign
I was approached by a content strategist who needed help performing user testing on new information architecture (IA) and taxonomy she had proposed for two BCCampus websites. After testing, I took the new structure and sketched wireframes for on overall site redesign.
Working on this project helped me understand the importance information architecture has on overall site navigation and usability, and helped me fine-tune best practices in designing good navigation experiences.
What is BCCampus?
BCcampus facilitates the creation and distribution of open education resources to ensure educational materials are accessible to all students, no matter where they are in the world and regardless of their economic status.
Goals and Questions
My goal was to validate the proposed IA and taxonomy, to make adjustments based on findings from testing, and to sketch out a new design that incorporated better navigation between the BCCampus site and the Open Education site.
To test the information architecture, we used a tool called Treejack from Optimal Workshop. Each test had 10 questions. Respondents needed to select a navigation path (and a final answer) that they thought would lead them to the correct response. For the BCcampus (BCC) website, we received 54 responses. For the Open Education (OE) website, we received 73 responses.
Overall look at success/failure rate for tree test questions
If you're interested in learning more about tree testing, take a look at this handy guide, or this sample tree test by Optimal Workshop. Personally, I found tree testing very useful as it prevented visual distractions from skewing users' responses (tree tests only test navigation not wireframes).
Another thing I love about Treejack is the variety of data collected. Below is a pietree showing paths taken by respondents for a specific question.
We also collected data on users' first clicks, and the exact path they took in getting to their final response. Having this variety of data helped us figure out the bigger picture (e.g. if a question failed miserably, we had other sources of information that could tell us where users got it wrong, what path they took instead, where they were expecting answer to live, etc.)
Based on the results of the tree test, I created a document analyzing and making recommendations for the site's information architecture.
After completing testing, I worked on wireframing for the two sites' redesign. My process included:
Hand sketching the proposed design
Reviewing with client (remotely via video chat, with comments recorded on Gallery.io)
Digitizing wireframes using Sketch
Reviewing digitized wireframes with client (again, via video chat and using Gallery.io)
Commenting on wireframes and Collaborating with client on design via Gallery.io
After iterating on wireframes and getting them as close to the final design as possible, I wanted to test them on real users.
I used first click tests and navigation tests on Usability Hub. What I like about Usability Hub is the variety of testing available. You can use different test methods on different questions, all within the same questionnaire.
I also like that you can view responses via Heat Map. The heat map shows hotspots where users were most likely to click (red = hot, blue = cold). This made it easier to see popular spots where users had clicked, and to determine whether the number was significant enough to signify need for design change.
Users could also explain why they had chosen a specific spot to click, which helped demystify some of the confusing responses.
Another cool feature is the ability to create variations of the same test. This means that when users clicked on the test link, they were randomly selected to receive eiter Variation A or Variation B of the same test.
I used variations mostly to test desktop vs mobile version of the same wireframe, to see if the responsive elements translated well. I also used variations to test how well carousel vs non-carousel elements would work in displaying information on the Home Page.
Once the test results were finalized, I created a document outlining test results, and recommended changes to design based on significant findings.
After completing the low-fidelity wireframes, I passed them on to a visual designer to incorporate style and branding.
One of the biggest takeaways I had from this project was learning to adapt to technological constraints. I had a lot of ideas and designs that couldn't be implemented due to constraints with the existing framework. Although frustrating, it definitely helped me practice my skills in communication, negotiation, and compromise.