Web UX Redesign | Fall & Winter 2021
Redesigning the web academic experiences for UVA students & faculty
My Role:
UX Design Lead, Project Manager
Duration:
2 Months
Tools:
Figma
Industry:
Education
01 /
Background
Collab is the primary platform used by students and faculty at the University of Virginia (UVA) for academic tools such as accessing assignments, checking grades, and receiving announcements. Since the onset of the COVID-19 pandemic, the site has become increasingly crucial for both students and faculty, who have transitioned to remote teaching. Despite the platform's various features and customization options, some professors have opted to use other platforms, resulting in inconvenience for students. Additionally, students have expressed dissatisfaction with Collab's outdated user interface and unnecessary features, as well as a lack of visual hierarchy.
Collab is the official communicative site used between students and faculty at University of Virginia (UVa) for essential academic tools, including assignment access, grade checking, announcements, and so much more. While all classes have transitioned into remote teaching mode since COVID hit, this site has become increasingly dependent for both students and faculty. However, we figured that despite the site’s diverse features as well as customizable options, a lot of professors still partially, or even entirely turned to use other platforms, including but not limited to UVa Box and Gradescope. This has made students’ life extremely inconvenient. Meanwhile, we as student users are also not satisfied with the site’s outdated UI, complicated yet useless features, lack of visual hierarchy, etc.
Collab is the official communicative site used between students and faculty at University of Virginia (UVa) for essential academic tools, including assignment access, grade checking, announcements, and so much more. While all classes have transitioned into remote teaching mode since COVID hit, this site has become increasingly dependent for both students and faculty. However, we figured that despite the site’s diverse features as well as customizable options, a lot of professors still partially, or even entirely turned to use other platforms, including but not limited to UVa Box and Gradescope. This has made students’ life extremely inconvenient. Meanwhile, we as student users are also not satisfied with the site’s outdated UI, complicated yet useless features, lack of visual hierarchy, etc.
Fig. 1, 2, 3
Screenshots from current Collab site
02/
Challenge
What steps can be taken to enhance Collab, making it a comprehensive academic platform with versatile customization options, a clear and well-organized layout, and contemporary design?
03/
Discover
Survey
As frequent users of Collab, we already possess an in-depth understanding of the platform's intended use, features, strengths, and weaknesses. However, since Collab offers a plethora of features, we aim to gather additional perspectives from a wider range of students and gain a more comprehensive understanding of their use cases and experiences with the platform.
33 Total surveys distributed
98% use Collab only for online meetings and assignments/quizzes and don't use other features like Discussion, CensusAccess, Site Email, and Chat.
30% use Collab to join sites related to University recruiting and other organizations.
80% thinks the website is not efficient or ideal. They wish it could have a clearer information structure and a more user-friendly interface."
User Interview
In addition to gaining a more comprehensive understanding of students' experiences with Collab, it is also essential to consider the perspectives of professors, who ultimately decide which platform to use in their classes. We will conduct user interviews as our method of choice in the second phase of our research because it allows us to gain a deeper and more detailed understanding.
After interviewing with professors, we wish to know:
01. How they think Collab is serving their courses’ purposes.
02. The reasons that they choose an alternative platform (if they do).
03. Their experiences while using these alternatives.
04. The areas Collab can improve in order for them to switch back to this platform.
We specifically interviewed 5 professors from diverse fields.
The results show that only 1 out of the 5 interviewed professors is using Collab, the others are using alternatives such as UVa Box, Blackboard, Microsoft Teams and other custom-made websites. The professors cited that the main reason for this is that Collab has many unnecessary functions, and the essential features are not easily accessible or are missing.
🎨 “Honestly, Art classes only need the Resources folder in Collab for students to upload their work. So why do we stick to such a complicated site? UVA Box is just way easier to use.”
━ Professor F. Art Department
💻 “For my CS class, I want more flexibility to design my course and that’s why I built my own website. The two main things I love about my website is that I keep a gradebook progress bar for students so that they can see exactly how far they are away from getting an A. Also, I love to keep my course schedule in a calendar view just to get students on track with their daily tasks. But I do also use external websites such as Gradescope for students to submit their assignments.”
━ Professor T. CS Department
04/
Define
Key Painpoints & Opportunities
From the survey and user interviews, I have identified the following four pain points experienced by students and professors when using Collab, along with their corresponding design requirements for improvement:
05/
Design
Mid-Fidelity Wireframe & User Testing
01 | Home Screen
02 | Announcement Tab
03 | Assignment Tab
04 | Gradebook Tab
05 | Quiz Tab
06 | Online Meeting Tab
07 | Resource Tab
Design System
Prototype
01 | Home Screen
-
Students can see the announcements from all of their classes on the navigation bar
-
Students can have a clear overview of their classes, as well as their organizations/collaborative sites
-
Students can also customize their home page by adding/deleting the cards
02 | Announcement Tab
-
Clicking into each class, the announcement tab on the left lets students track the messages sent by their professors from that specific class.
-
Students can filter what and how many messages they want to see on the screen.
03 | Assignment Tab
-
The assignment tab lets students see their previous as well as upcoming assignments, and submit their work.
-
It can also show students their assignment progress: how many they have accomplished and how many left to do for this semester.
04 | Quiz Tab
-
The quiz tab lets students see their upcoming and previous quizzes as well as feedback.
-
Students can also add the questions to Favorites so that it would be easier for them to review in the future.
05 | Gradebook Tab
-
The gradebook tab lets students see their grades and request regrading.
-
They are also able to see the details of their grades, including the comparison with the class average, class median, and students’ previous exams.
-
Students can also see their cumulative grade progress for the class --- how far they are away from the next highest grade.
06 | Resource Tab
-
The recourses tab gives students access to the files necessary for the class, and for the students to view/download.
-
Recourses can be viewed in a calendar/list view.
07 | Online Meeting Tab
-
The online meeting tab helps gather the zoom links as well as meeting ids for students’ online sessions.
-
It also lets students quickly get access to previous cloud recordings.
06/
Reflection
What's Next?
This is an initial plan for Collab’s redesign, and there sure will be much more to explore and improve.
-
More ways of sorting items
-
More efficient features offered to users, such as “mark all as read” and “add all to Favorite”
-
More customizations available for users, such as an entire tab of Favorites, so that users can add not only quizzes to it, but also other items, such as assignments and resources.
Besides that, we are also trying to connect with the school and to see if our design proposal can actually be made into real products.
More Genuine Thoughts...
This was my first experience participating in a group UX redesign project. In my role as project manager and design lead, I gained valuable insights in team collaboration and effective communication with team members in various situations. Throughout the project, I made user-centered design a priority, and being familiar with the platform being redesigned made it easy for me to switch between the perspective of designer and user, ensuring that the end result was as seamless as possible.
Moving forward, for future case studies, I would like to incorporate more research methods such as conducting competitor analysis and creating user personas. Additionally, I plan to conduct more rounds of usability testing, particularly for high-fidelity wireframes and prototypes. This will allow me to gain a more comprehensive understanding of users' thoughts and experiences.