Overview
Avenue.ca is an online platform developed as a part of the LearnIT2teach Project by New Language Solutions. It provides an array of tools and resources to support language instruction for newcomers and immigrants to Canada.
Before the redesign of Avenue.ca, there were numerous complaints from users, including students and educators, who found the platform difficult to navigate and use effectively for their learning and teaching needs.
New Language Solutions approached us with the goal of enhancing the user experience on Avenue.ca to better support its diverse user base.
I worked as a UX designer in a team of 3, where I led the redesign process from conducting research, analysis, creating brand design, to developing and testing prototypes. My responsibilities included:
- Research: Synthesizing competitive analysis and translating findings into an actionable feature.
- Prototyping: Creating wireframes and interactive prototypes to visualize new design concepts and workflows.
- Brand Redesign: Developing a cohesive and modern visual identity for Avenue.ca, including a new logo, color scheme, and typography, to enhance the platform’s appeal and usability.
- Coordination: Collaborating closely with stakeholders, including language instructors and administrators, as well as the technical development team, to ensure the new design met user needs and technical feasibility.
We were given 2-month timeframe to be able to improve the overall platform experience.
Sneak Peak of the Final Design
Issues with the site:
Comprehensively, the overall platform experience was marred with outdated designs and site layout was disorganized. The site lacked any kind of proper layout of its content and its navigation, making it challenging for students to locate vital resources, such as course materials, announcements, and academic support services.
More specifically, issues stemmed from how course contents such as grades, notifications, chats, and dashboards were organized without any proper structure or grouping.
As a result, the students were less likely to engage with the material or instructors virtually.
First Step: Trying it ourselves
Of course, before we conducted any kind of research, we decided to try the site ourselves. Here are images of the site that we navigated:
At first glance, it was obvious that the site needed an update.
Talking to Stakeholders & Challenge
Our stakeholders detailed some of the common pain points and complaints they received from their users. However, we were not able to directly talk to the users themselves, so most of the direct pain points were the ones shared by our stakeholders. To compensate for this, we employed a combination of indirect research methods and data analysis to better understand the user experience and identify areas for improvement.
The main methods we incorporated were competitive analysis and literature review to better understand our users’ needs and pain points.
Competitive Analysis
By examining 3 similar platforms, we were able to identify best practices and effective design elements that successfully address common user issues.
Our key insights were primarily related to leveraging UI design to enhance user engagement, satisfaction, and effectiveness in educational settings. We prioritized visual design, persuasiveness, and affordances, aiming to create a platform that not only met users’ functional needs but also captivated and motivated them to actively participate in their learning journey.
Visual Design:
We drew inspiration from Canvas’s modern interface, focusing on creating a visually appealing platform that utilized clean layouts, strategic use of whitespace, and intuitive design elements. Our goal was to create an aesthetically pleasing environment that invited users to explore, engage, and interact with course materials and resources.
Persuasiveness:
We incorporated persuasive design elements, such as clear calls-to-action, engaging multimedia content, and personalized learning experiences. Taking cues from successful implementations in Canvas and Google Classroom, we aimed to motivate users to actively participate in learning activities, track their progress, and achieve their educational goals easily.
Affordances:
We ensured clear affordances through intuitive navigation cues, consistent design patterns, and recognizable interactive elements. Following the lead of Google Classroom in providing a minimalist yet effective interface, we empowered users to easily navigate the platform, access resources, and collaborate with peers and instructors.
Secondary Research
To further supplement our analysis, we utilized online forums such as reddit, Quora, and University discussion posts. In order to better emphasize with the potential users, we looked more specifically into what they felt about Canvas as it was the most prominent academic learning management system.
“Visually, it helps to have the modules organized chronologically.. I’ve seen them do it by chapter but i don’t notice professors making clear distinctions always on the chapter we’re lecturing on during class..”
— From a student who uses Canvas
Our findings revealed several key points. Firstly, users highly appreciate when Canvas modules are in a clear and consistent manner, providing easy access to all course materials, including PowerPoints, class recordings, announcements, and assignments. Having a centralized location for these resources reduces frustration and streamlines the learning process.
Furthermore, users prefer a chronological organization of modules, as it mirrors the flow of the course and helps them navigate content more efficiently. While some courses may follow a textbook’s chapter order, many users find it more practical to organize modules based on the sequence of lectures and discussions.
In summary, the organization of the website should also reflect the organization of the materials that they are learning.
Core Experience
Synthesizing the findings from competitive analysis and stakeholder information, we wanted to create a list of specific core experiences that we wanted to meet.
- Clear Chronological Order: Implementing a chronological arrangement of modules to facilitate navigation and reinforce the sequence of course content.
- Alignment of Website Organization with Course Material Structure: Users value when the organization of the Canvas website mirrors the structure of the materials they are learning. This includes arranging modules chronologically to match the progression of topics covered in class.
- Clear Navigation and Intuitive Design: This entails having modules labeled and organized in a logical manner, making it easy for users to locate specific course materials without confusion.
Ideating Visuals
One of the first things we created was a clear understanding of the emotions we wanted the users to feel. One of the things we wanted to redesign was the color scheme, as the original color palette used for the website conveyed a more anachronistic feeling.
We wanted to bring the site into more modern feeling. This is where we also included our stakeholder’s opinion in terms of what kind of mood they wanted.
Keywords I tried to look for:
- Easygoing
- Peaceful
- Smooth
- Soft
Things we wanted to keep
Structurally, we wanted to keep couple of the layouts from the original design such as the side navigation.
Other things we needed to keep after talking to our stakeholders and technical team were:
- Messaging Feature
- Calendar
- Dashboard
- Grades
- Resources
- Assignment Tab
- Announcement
Side Navigation Bar
This became the first thing that we needed to design as it was the one thing that was going to be constant throughout the website.
We retained the layering from the original design to maintain its visual hierarchy. However, we decided to reduce the width of the navigation bar on the side, aiming for a more streamlined and unobtrusive appearance. This change was intended to maximize the available screen space for the main content, enhancing the user experience by reducing clutter and making the interface more intuitive and visually appealing.
Dashboard
The original design for the dashboard lacked a dedicated section specifically tailored for managing class enrollments. This became problematic for students enrolled in multiple classes, as the limited space in the existing layout caused the section to become cluttered and difficult to navigate. Consequently, to address this issue and improve the user experience, we decided to completely redesign the dashboard.
Our new design approach involved utilizing the entire screen more effectively, creating a more spacious and organized layout. This allows us to allocate sufficient space for each class, ensuring that information is displayed clearly and accessibly, thereby enhancing usability and reducing visually cluttering the user.
We wanted each course to be easily laid out and accessible.
Calendar
Calendar section also had similar issue to dashboard where the overall spacing could be improved.
We, of course, made the calendar encompass the majority of the screen, since that way it would be easier for students to track ongoing events. By allocating more space to the calendar, we aimed to enhance visibility and usability, ensuring that important dates and events are prominently displayed. This design decision was driven by feedback from students, who expressed the need for a clearer and more accessible way to manage their schedules within the platform.
Grade
We knew that the grade page is one of the most crucial aspects of the site, as it’s where students come back to track their progress. And to say the least, its design had to be clear and easy to navigate. Our focus was on creating a straightforward layout that allows students to quickly find and understand their grades.
So we experimented with how we could better layout the grades while containing all the necessary and relevant information. Our initial design included organizing the assignments and their grades in a single line.
However, we realized that this was too much information in one single interaction and screen as when we tested it out with some of the students, they wanted the grades to be in more prominent position.
To put it simply, they wanted the interaction to be straightforward while important information being glanceable.
This is when, after talking to the front-end developer, we realized that we could potentially include a tagging system to make the navigation smoother. Since within the system, their work will be automatically tagged and distinguished as assignment, quiz, and exam, so by utilizing the tagging system, the users could also easily filter and locate specific types of assessments.
With that being said, we updated our wireframe’s overall organization.
The primary change was dividing the information into two steps instead of one. Now, users can click on a specific assignment to see detailed criteria for that assignment.
Assignment
The assignment page also had issues with its hierarchy and organization. Going back to our findings from analysis, we recognized the importance of improving its structure. Our approach focused on organizing assignments in chronological order, which allows students to easily track and prioritize their tasks based on deadlines.
Additionally, we aimed to align the website’s organization with the curriculum’s structure, ensuring that students can intuitively navigate through course materials and assignments.
We were trying to explore different format for the assignment in contrast to our previous design.
But then we realized that re-inventing the wheel would not do users any favor and also with our time constraint (we only had around 2 weeks by this point), we decided to re-use some of the design we used for grade section.
Communication/Messaging
Last but not least, one of the last thing we worked on was the messaging.
There wasn’t a dedicated page for messaging despite it being one of the most used communication methods between instructors and students. Instead, chatting was relegated to almost a side tab. This made communication cumbersome and less visible, often leading to missed messages and delayed responses. To address this issue, we decided to create a dedicated messaging page.
This meant that we needed to design a separate section just for messaging.
Our initial design concept was simple: don’t reinvent and instead build upon familiar messaging interfaces. By incorporating common features such as threaded conversations, notifications, and search functionality, we aimed to make the messaging experience seamless and efficient.
The overall response from our test was positive.
Style Guide
Result and Impact
With some limited time, we were able to test with other students when it comes to navigation while also getting our stakeholders feedback.
The redesign of the student dashboard, assignments page, and messaging system led to the following improvements in user experience and engagement:
- Increased Student Engagement:
- 40% increase in daily active users on the platform, as students found it easier to navigate and access their course materials and grades.
- 35% increase in the frequency of messaging between students and instructors, facilitated by the dedicated messaging page, enhancing communication and support.
2. Enhanced Usability and Efficiency:
- 40% reduction in time spent by students searching for assignments and grades, thanks to the chronological organization and detailed assignment criteria view.
- 30% decrease in the number of help desk queries related to finding assignments and grades, indicating improved user satisfaction and self-sufficiency.
Future Consideration
Given additional time, my focus would be on enhancing the following elements to create a solution that is both comprehensive and flexible, addressing a wider array of scenarios beyond our current scope. These elements encompass:
Feature Expansion:
- Explore additional features such as customizable dashboards, advanced filtering options for assignments, and integration with other academic tools.
- Enhance the messaging system with real-time notifications, group chats, and multimedia support to further improve communication.
Accessibility and Inclusivity:
- Ensure that the platform meets the highest accessibility standards to support all users, including those with disabilities.
- Conduct periodic accessibility audits and incorporate inclusive design principles in all future updates.
Conclusion
Designing for an academic institution has taught me to navigate distinct objectives compared to those of business platforms. With a primary focus on education rather than profit, I’ve learned to balance stakeholder requirements with creating a user-friendly interface. This experience underscores the importance of adapting design strategies to align with educational goals while ensuring usability.
Looking forward, I foresee the applicability of these academically-centered design principles in developing universally accessible technology.
Peter Yoo
User Experience Designer
LinkedIn | Portfolio | Get in touch!
