ITLS Course Redesign
I worked on a team of designers that were tasked with redesigning a course that had received specific problematic feedback from students. The instructor requested that we integrate a hub-and-spoke information architecture (fun fact - this is the same IA that Disneyland uses). And that we also incorporate a communication resource for students and task management tool. We redesigned the student view of the course homepage to reflect a hub-and-spoke IA and incorporated consistent links along the top of the page to assist students in course content navigation. We simplified the link options from the homepage to three main links that categorize the rest of the course links and resources into the topics: ‘Communication,’ ‘Plan,’ and ‘Do.’
Design Areas
of Focus
Homepage
Emphasis on navigation and button labels
​
Collaborative Tool
Communication, project management, and file-sharing
​
Organizational Tool
Task management, pacing, documenting progress, meeting deadlines
​
Course template
Simplified options, asynchronous vs synchronous learning, instructor communication
Homepage
Redesign
I redesigned the student view of the course homepage to reflect a hub-and-spoke IA and incorporated consistent links along the top of the page to assist students in course content navigation. We simplified the link options from the homepage to three main links that categorize the rest of the course links and resources into the topics: ‘Communication,’ ‘Plan,’ and ‘Do.’
Rationale
Simplifying the homepage to three main navigable categories creates persistency. This allows users to better scan the web page. Research shows users really don’t read, they scan. The icons chosen reflect conventions to make the pages more scannable. Check marks are understood to be associated with completing tasks; the calendar is associated with planning, and the conversation bubble is associated with communication.
Collaboration
Redesign
The Collaborative Redesign consists of a ‘Teams’ tab that leads to canvas- inclusive tools for teams/groups to utilize within a course. These tools include a chat feature (similar to Skype instant messaging), Video Conferencing, Kanban tool (to track group tasks), and a Files tool that acts as an in-canvas Google Doc and Google Slides feature.
Rationale
I wanted the page to be simple, scannable, and use conventions that made understanding the information easier. The team tools are also organized on one page, to illustrate that the tools are “related logically.” Keeping all of the tools on one page also improves that navigation; users know where they are and exactly where they will be going when they click on the appropriate links.
Organizational
Redesign
​The Organizational Design consists of an in-Canvas Kanban tool. The tool consists of teacher- or student-created tasks/assignments that are color coded by course. The tasks will automatically progress from To-Do to In-Progress and finally, Complete as the student progresses past teacher-created milestones. Students are given opportunities to personalize this tool as needed.
Rationale
The design was chosen so users could quickly scan their workload and be able to complete assignments. Visual hierarchies are an important aspect of the design. The categories of progress are displayed prominently to signify how important the information. The categories also break part of the web page into clearly defined areas, which allows users to quickly decide where to focus their attention.
Template
Redesign
The Course Templates consists of more options for teachers to design their courses. There are two main types of templates: one that focuses primarily as a communication tool with families. This is geared more toward lower grade level teachers who want to share what is going on in the classroom, and communicate important announcements dates. The other type of template would be for older grade levels, as well as higher education for traditional and online courses. There are different options depending on the purpose of the course. It can serve more as a supplement to a course, or it can be the entire online course.
Rationale
The course template design heavily uses signifiers. Minimal verbiage is used to describe which template a user should select, and the users are told how to drop down menus through the signifiers to “make a selection.” Breadcrumbs and the use of a left hand menu help users better understand how to use the site.
Project Management and Reflection
We used the Kanban method of Agile.
As a team, we did well in following the Agile principles of placing a priority on our interactions with each other and our collaboration, responding to change, and creating a prototype that works well enough to demonstrate the value of our ideas. Agile is a set of principles that determine practices, and our practices have changed and adapted as necessary over the course of this project.
Tools we utilized in this project:
Adobe photoshop, LucidChart, Mural, Vectr, Marvel, JustinMind