Information Security Website
A redesign and exploration of the primary information security website at the University of Toronto
Role:
User Experience Designer
Date:
January - May 2024
Team:
Project Manager, Developer, Technical Writer
Tools:
Figma | Optimal Workshop | Wordpress | Miro
Project Overview
Managing information security for an entire organization is no small feat, and when it comes to delivering that information to the right people, things can get tricky. Our project began with a clear challenge: three separate websites, each offering security-related content, but all struggling with the same issues: a confusing structure, scattered content, and frustrated users who couldn’t find what they needed.
The websites were managed by the same department, yet the lack of organization made it difficult for anyone—whether it was an IT staff member, a compliance officer, or a risk manager—to get the right information quickly.
Problem
Unclear information pathways, hierarchy and flows make it difficult for users to find resources and information on website.
End Results
We created a unified website that made it effortless for users to find the information they needed based on their roles. Internal security staff could quickly access risk assessments and incident response guidelines, while students could easily navigate security resources and best practices. At the heart of this solution was a user-centered information architecture (IA) that transformed a fragmented system into a smooth, intuitive experience.
Discovering Accessibility and Usability Issues
Our first step was to dive into the existing websites and figure out where things were going wrong. We conducted a heuristic analysis, comparing the sites to established usability principles to pinpoint where users were running into issues. Here’s what we discovered:
Cluttered layout with excessive links and pages makes navigation challenging.
Difficulty in finding relevant content for different user groups.
Design and accessibility issues hinder user engagement.
On top of general accessibility issues such as cluttered pages and poor site navigation, we discovered a main problem was the lack of focus and clear information for different user groups across U of T, which was something that we prioritized in the redesign.
What do our Users think?
Next, we turned to the people who would actually be using the website: staff members, faculty, students, security professionals. We crafted a survey to gain insight into their pain points and needs, asking key questions like:
How are you using the current information security website?
How do you currently navigate the site, and where do you run into issues?
Which topics would you like to see on the homepage of the new information security website?
The results echoes the concerns brought up in the heuristic analysis, which were that the current websites were hard to navigate and find relevant resources. Users want the new website to address this issue as well as having easy access to services, training material, and current news and updates on information security.
How did we address navigation issues?
The main problem was that users didn't not know where to look for resources, many resources had multiple navigation paths, making the resources difficult to find. There was also too much information linking fro the website that made it difficult for users to find relevant information.We conducted an audit of all current pages and resources across all three information security websites and review this list with the the informaiton securty team to determine what to keep and which documents to archive.
Based on the results of this audit, we conducted a hybrid card sort with 14 security team members to see which areas on the website they would expect to see certain documents or resources.
I mapped out the pages and resources in a site map to be able to see the total picture of the information architecture based on the card sort and survey results from users. This diagram gave the team a clear overview of the website’s main pages and key resources. It also served as a visual tool to show stakeholders the progress of development.
Creating Relevant Resources for Different User Groups
The unique aspect of this website is that there are resources for different user groups, whether it be for students to learn more about information security and how to secure their data, or IT professionals at the university to access resources and services that aid them in doing their job. Due to this, it was an important challenge for us to create user flows that would accommodate the different types of users visiting the website.
The three main users for this website:
Student
Wants to learn more about information security best practices involving AI, social media and fraud.
Faculty
Wants to learn more about how to secure data for research and guidelines on Generative AI technology.
Staff
Wants to access resources such as VPN, remote work guidelines and tools for helping with work.
Resources for User Types
Having the option to explore resources for student, staff and faculty on the home page allows new users to easily navigate to information that is relevant to them and acts as a call to action to explore resources. Using simple language to explain resources makes them easier for users to understand.
Initial Design for Services Catalog
Designing the services catalog was challenging because we needed to categorize services by both audience type and category. The initial solution was to use multi-select dropdown menus, allowing users to filter by audience and category. This made it easier for users to search and find the specific services they needed.
Updated Design for Services Catalog
Due to the technical limitations of the WordPress website, we had to adjust the design while maintaining the same functionality. I implemented top and side navigation to help users explore service categories, along with a search bar for finding specific services.
Improving usability through design
The last major issue that came up in the heuristic analysis and surveys was that the design decisions of the prior websites hinder usability and accessibility. One example of this was the Report an Incident button. An important purpose of the information security website is to give users a place to go to report security incidents that they encounter. In the old website it was a red button in the header that did not have much context about what was the purpose of this button. Is it a health incident, police incident or another type? To improve the usability and accessibility of this page, I moved the button to a sticky banner under the main header that gives users context about the type of incident that would be addressed once they click " Report an Incident".
The information on the page was also cluttered and diffucuolt to find the relevant contact or resource especially in times of emergency.
To improve the usability and accessibility of this page, I moved the button to a sticky banner under the main header that gives users context about the type of incident that would be addressed once they click " Report an Incident". This banner will also be on all pages of this website in case users need to access it on another page. The webpage also uses cards to clearly explain different security situations to users and how to handle them.
Lastly, one key improvement was adding a website description to set expectations for visitors. This addressed the lack of clarity we identified in our research. The new homepage design now states the Information Security department’s vision and provides essential website details
Documentation
To simplify maintenance for the Information Security team, I created a design guide outlining component use and specifications, ensuring scalability as the website grows.
Impact and Lessons Learned
As a result of this redesign, we successfully decommissioned two other information security websites, consolidating all essential information into a single, easy-to-navigate platform. This improvement made it simpler for users to find what they needed. The conversion rate for key service pages such as UTORMFA, UTORVPN, and UTORid rose by 60% compared to the previous website. Engagement also increased by 30%, with more users visiting the site to access resources.
From this project I learned:
Reviewing all current pages and resources is key to re-organizing information in a way that's easy to navigate.
Technical constraints can be opportunities for creative solutions.