We partnered with the University of Toronto Student Life Health & Wellness Department to diagnose the current problems with its website and reconstruct its information architecture. Our final product, the redesign of the website, is aiming to make the information easier to access for the users and help the Health & Wellness Department achieve its goal, which is to provide better service for students with health issues.
As the Project Lead, I was responsible for arranging and distributing tasks to group members and most of the Figma design. Besides translating our research findings into wireframes and prototypes, I also collaborated with conducting user interviews, questionnaires and research analysis.
Within this project, our team spent most of our time conducting user research, analyzing the research data and reconstructing the new information architecture. We used different methods such as card sorting and tree test to diagnose the problems with its current information architecture. Our redesign was based on the research findings that we came up with.
The goal of the project is to evaluate the current U of T Health & Wellness Department's website, reconstruct its information architecture and redesign a better solution to enhance the better user experience for students who have health concerns in campus.
Student Life, Health and Wellness provides a range of health services for students' physical and mental health, wellness programs and information to help support students in achieving their personal and academic goals.
To collect data about how U of T students think about their experience as users of this website, we utilized questionnaires and interviews as our research methods to investigate our questions.
of the users believed the function of this website was to help them book Medical Appointments and 33.3% of the users thought it was for getting health & wellness information
of the users believed their goals of using this website were mostly achieved
Quotes from the interview participants:
“The website is merely presenting what information they have instead of guiding its users through them."
“The designer should be aware of the student's real needs instead of using the site to showcase as much information as possible.”
After figuring out the problems we needed to solve for the website, we used the card sorting method to help us construct a better schematic diagram.
We modified the website's information architecture based on the key findings from our card-sorting study. After modification, we used the tree testing method to test how the user experience of the new information architecture. We designed 5 tasks to test the users.
100% of the participants succeeded in the task which asked them to find physical health services
80% of the participants succeeded in the task which asked them to book an appointment with the mental health clinic
Regarding to this website's current problems, we proposed three main strategies to redesign the website
Adding hierarchies to make information organized
Highlighting the most important information and eliminating clustered blocks
Increasing appropriate visual components to make key points much easier to access
We also made changes to the most popular quick links. For example, the make an appointment link was a in-text link in the why connect with us section, now we move it to the banner making it more standout and visible.
The reason caused the current clustered and unclear information display is that the website does not have enough appropriate hierarchies or sub-categories.
After the modification, we added a sub-hierarchy under the health and wellness department and a side navigation bar. Once the user clicks on any of the main categories on the main page, they will be led to this page.
Currently, when the users first get on the website, the screen they are going to see is like pic showing here. there is a big yellow banner that is showing some warning information but it can not be closed.
In our design of modification, regarding the yellow banner on the top, we believe these are important enough for them to be displayed here, we decided to not delete them, but we added a close button for users to close it if they find it’s too annoying.
As for the visual components, we add more icons to help users to understand the headings and links. For example, at the “Why Connect with Us” section, we change the in-text links to icon-based subheadings.
All copyright reserved by Hazel He @ 2023