Usability Improvements

Learnability

I improve learnability of the course website by increasing the spacing within each day's table cell. Currently, all of the day's information is squished together on one line which makes it hard to read and digest when you first start to use the course website. Now all of the day's information isn't on one line so it makes it easier to read.

Efficiency

I improve efficiency of the course website by providing feedback on hovering over the three most important links on the course schedule: the lecture notes, the video link, and the chapter link. By changing the color when hovering you can more quickly get to the link that you're looking for just by observing the color rather than reading the link. As you get comfortable with the course website, looking for the different colored links will be second nature.

Safety

I improve the safety of the website by making the due dates of the psets much clearer and more striking than it originally it is. This way people are less likely to miss their deadlines. The spacing within a calendar day cell also makes the design safer since people would be less prone to misclicking the wrong link.

Graphic Design Improvements

Contrast

I improve the contrast of the design by differentiating the lecture title and number from the rest of the information in a given course day. This way it is much more clear what each lecture is about and when it is.

Repetition

I use repetition through the colors I used when you hover over the lecture note links, which are complementary to the different module colors used by the course website.

Alignment

I changed the date part of each cell of the course calendar to match what it would like in an actual calendar, in the corner and separated from the rest of the square. This alignment thus matches a person's mental model of the calendar.

Appendix

Before and After

CSS Code

				
body {
	font-family: Helvetica Neue, system-ui, sans-serif;
}

table.calendar tr {
	vertical-align: center;
	height: 16em;
}


td.mod1 > .date, 
td.mod2 > .date, 
td.mod3 > .date, 
td.mod4 > .date, 
td.mod5 > .date {
	float:left; 
	display:inline;
	margin-bottom: 10px;
}

td .date {
	font-family: Helvetica;
	font-weight: 300;
	background-color: edeceb;
	padding: 5px;
	padding-right: 6px;
	border-bottom-style: solid;
	border-right-style: solid;
	display: block;
	width: 10%;
	text-align: center;
	margin-right: 10px;
}

td > b {
	font-weight: 400;
	font-size: 16px;
}

.mod1 > a:first-of-type, 
.mod2 > a:first-of-type, 
.mod3 > a:first-of-type, 
.mod4 > a:first-of-type, 
.mod5 > a:first-of-type {
	font-weight: bolder;
	display: block;
	text-decoration: none;
	padding: 8px;
	text-align: center;
	color: black;
	border-style: solid;
	border-color: #333333;
	border-radius: 20px;
	margin: 30px 10px 10px 10px;
}

.mod1 > a:first-of-type:hover {
	background-color: #e29b77;
}

.mod2 > a:first-of-type:hover { 
	background-color: #e3ca8f;
}

.mod3 > a:first-of-type:hover { 
	background-color: #7ed3a4;
}

.mod4 > a:first-of-type:hover { 
	background-color: #80a6df;
}

.mod5 > a:first-of-type:hover { 
	background-color: #ae8ee3;
}

table a:visited {
	color: blue;
}

.assignment {
	color: black;
}

.mod1  a:nth-of-type(2), 
.mod2 a:nth-of-type(2), 
.mod3 a:nth-of-type(2), 
.mod4 a:nth-of-type(2), 
.mod5 a:nth-of-type(2) { 
	font-weight: bolder;
	color: black;
}

.mod1  a:nth-of-type(3), 
.mod2 a:nth-of-type(3), 
.mod3 a:nth-of-type(3), 
.mod4 a:nth-of-type(3), 
.mod5 a:nth-of-type(3) { 
	font-weight: bolder;
	color: black;
}


.mod1  a:nth-of-type(2):hover, 
.mod2 a:nth-of-type(2):hover, 
.mod3 a:nth-of-type(2):hover, 
.mod4 a:nth-of-type(2):hover, 
.mod5 a:nth-of-type(2):hover { 
	font-weight: bolder;
	text-decoration: none;
	padding: 3px 5px 3px 5px;
	color: black;
	background-color: rgb(164, 202, 253);
}

.mod1  a:nth-of-type(3):hover, 
.mod2 a:nth-of-type(3):hover, 
.mod3 a:nth-of-type(3):hover, 
.mod4 a:nth-of-type(3):hover, 
.mod5 a:nth-of-type(3):hover { 
	font-weight: bolder;
	text-decoration: dotted;
	padding: 3px 5px 3px 5px;
	color: black;
	background-color: rgb(153, 255, 157);
}

.deadline > a{
    font-size: 18px;
}

.deadline b {
    font-size: 18px;
    color: red;
    background: black;
    padding: 5px;
}