TeachatSLC Webpage Redesign.
UX Case Study:
​
Our Team.
Project timeline - 12 weeks, Our team member included Bhoyasa, Dhanashree, Digvijay and Siddhant all UX Designers. The research process we followed for this project is - Heuristic Evaluation, Competitive Analysis, User Interviews, Usability Testing, Wireframes, Prototyping.
In this case study I’ll discuss how me and my team members worked with our clients, the SCTL staff members to improve the user experience of their Getting Started page of their website Teach at SLC. The teach at SLC website is designed to cater to the faculties at St. Lawrence and help them with their onboarding, orientation and everyday information needs.
INTRODUCTION.
MY ROLES AND RESPONSIBILITIES.
Heuristics Evaluation
User Interviews
Usability Testing
Hi Fidelity Wireframes
Prototyping
PROBLEMS IDENTIFIED
The focus of this project was to improve the user experience of the Teach@slc website and the following problems were identified.
-
The webpage needed improvements in terms of content structure and fonts hierarchy.
-
The page needed changes in the verbiage used for headings.
-
The page lacked use of proper icons and imagery.
-
Accessibility issues were also identified with the webpage.
LITERATURE
REVIEW.
A 2015 doctoral research paper by Carol Ann Samhaber at Walden University stresses the
importance of professional development for Canadian community college faculty. The study,
based on interviews with 12 educators, identifies concerns about outdated and inadequate
training in course design and student assessment.
A competitive analysis was conducted of Algonquin college, Conestoga college and The University of Toronto and it was observed that the competitors include orientation, support, and professional development pages but there is no specific section for a “Getting started” page which the teach at slc website has. It was also observed that Algonquin College has a structured and in-depth content structure, they have a good use of the right-hand section to highlight important information and provide quick links.
COMPETITIVE ANALYSIS.
Heuristics evaluation.
Visual design.
In terms of visual design, it was observed that there is no hierarchy in the structure of
the content, there is a need for improvement in color variations, as the colors used on the website are not contrasting or differentiating enough which causes accessibility issues.
It was also identified that there is a need for more icons. The side menu does not get
highlighted when clicked. There is also a lack of use of icons which could be useful for the webpage as there are many buttons on the web page and no clear indication of the action the button performs.
Functionality.
In terms of functionality the buttons used for all the resources look the same. It is not specified
If the resource takes the user to another website, pdf or a video. Which is exactly what most buttons do on the webpage.
There is no notification or pop-up message if the resource takes you to another page. A help feature is absent on the website.
user interviews.
We conducted two semi-structured user interviews of faculties at SLC remotely. In these interviews we asked them about
-
Overall visual feedback
-
Ease of navigation
-
Common tasks
-
Content relevance
-
Accessibility rating
positive user responses.
We conducted two semi-structured user interviews of faculties at SLC remotely. In these interviews we asked them about
-
Overall visual feedback
-
Ease of navigation
-
Common tasks
-
Content relevance
-
Accessibility rating
user responses about improvements.
Users mentioned issues with the layout such as loading problems, font size challenges, CSS issues, and alignment inconsistencies.
Users have suggested enhancements in engagement and interactivity, such as incorporating vibrant colors, establishing a strong brand identity, and enhancing visual appeal.
Users have mentioned that there is an abundance of information on the Getting Started page, which can be overwhelming for newcomers and part-timers.
Users have suggested improving the search bar placement so that it is easier to find. Additionally, staff would be able to search if they are unable to find what they are looking for.
Users have recommended providing a contact list to reach the person required, especially for newcomers and part-time staff and to improve the FAQ sections.
solutions.
Based on the above research, we designed some low fidelity wireframes and tested these with the users.
Early stage wireframes.
Added breadcrumbs
Changed the look of the search bar to make it more visible
Added icons where needed to indicate the button's action.
Changed the headings and added clear hierarchy in the fonts, with appropriate sizes and thickness.
Added a selection state for the side menu
TESTING PHASE.
We tested our wireframes with the same users we interviewed before and gave them a few tasks to perform on our design to identify any possible issues with our re-design. We did this To assess whether the low-fidelity wireframe requires any enhancements. To achieve this, we conducted usability testing to create a high-fidelity wireframe that not only meets user needs but also enhances functionality and accessibility.
Our Method - 2 participants, identified as P1 and P2, performed 6 tasks to assess the website's user experience. The System Usability Scale (SUS) was used to quantitatively measure the usability. Qualitative feedback was also collected.
To read more about the usability testing report click button.
Our Findings.
01
User-friendly, but there were initial confusions that cleared up after explanations.
04
'Learning Space and Delivery Methods contents should be reorganized' to better differentiate the sections and align with user expectations.
02
Revisit and clarify terminology, particularly in the navigation and the section titles.
05
Relocate apps and equipment information to the 'Delivery Methods' section for better coherence.
03
Improve the visual cues for navigation to ensure users can find FAQs and other resources without confusion.
06
Ensure iconography is intuitive and accurately represents the actions or links it is associated with.
Improvements after testing.
-
Renamed learning spaces to classroom spaces as it shows mostly contents related to in-person teaching and in classrooms
-
We have renamed most of the buttons and icons to indicate where these icons will redirect us.
-
We relocated the Apps and Equipment section from Learning Spaces to Delivery Methods based on user feedback.
-
We made some changes to the visual hierarchy to make it look cleaner. Sections are well-highlighted and more user-friendly.
Hi-fidelity wireframes.
Added the brand color to headings2 and added sample images
Renamed orientation to faculty orientation and learning space to Classroom space. As these names were creating confusion for the users.
Introduced pdf, video and website icons. Also used proper naming for buttons to help accessibility screen readers.
Moved virtual and learning content to the delivery methods page from the classroom space.
conclusion.
In conclusion, our collaborative efforts led to significant improvements in the user experience of the Teach at SLC Getting Started webpage. By addressing issues identified through thorough research and user feedback, we were able to create a more intuitive, visually appealing, and accessible interface. Through iterative design and testing, we ensured that the final product meets the needs of SLC faculty members, ultimately enhancing their onboarding and everyday information access.