Michael Zalla G R C D 4 0 6 2 « I n t e r a c t i o n D e s i g n I I1 of 18

× chosen platform

For this project, I’m proposing to redesign the core components of

the MIT Open Courseware desktop website. This platform is dedicated

to the “open sharing of knowledge” by distributing collections of vid-

eo lectures and related materials for a large number of the institute’s

course catalog. OpenCourseWare offers materials from 2150 courses

to nearly 125 million users (three times the population of California).

The OpenCourseWare platform delivers free educational materials

to equal parts students and self-learners (roughly 42% for each demo-

graphic); the majority of use cases for the platform involve enhancing

personal knowledge (46% of student users) and exploring academic

areas outside of one’s professional field (40% of self-learners). The

platform is funded by donations from its users and other donors.

(http://ocw.mit.edu/about/site-statistics/)

“The idea is simple: to publish all of our course materials online and make them widely available to everyone.”

Michael Zalla G R C D 4 0 6 2 « I n t e r a c t i o n D e s i g n I I2 of 18

× formal evaluation

While a user’s initial exposure to the platform would likely be through

a course page linked through a search engine, the institute’s intended

introduction to OpenCourseWare is homepage, found at ocw.mit.edu.

The homepage follows a typical landing page layout: basic branding,

followed by a primary navigation strip and a rotating carousel. The

carousel includes slides displaying calls-to-action for “Getting Started”

or donating to the foundation, as well as highlights of newly added

courses. Remaining homepage content includes community endorse-

ments, a carousel of “Featured Courses”, a recent news preview, as

well as links to special instructor profiles.

The largest call-to-action on this page is the red “Get Started” button,

which leads users to a text-based introduction to OCW that includes

search tips as well as a short site FAQ. A right-hand sidebar allows

users to navigate to more specific help sections such as “Finding

Courses”; these subsequent pages offer written walkthroughs and

supporting screenshots for a number of site features.

Michael Zalla G R C D 4 0 6 2 « I n t e r a c t i o n D e s i g n I I3 of 18

× formal evaluation

Students and self-learners can locate courses relevant to their in-

terests through two methods: the site’s search bar, and the course

submenu found in the site’s main navigation. String-based search-

es take users to a search results page similar to most library web-

sites, with options for more advanced searches being displayed.

Alternately, users can take advantage of the “Course Finder”

option (linked from the site’s main navigation), which allows

users to narrow down MIT’s online course catalog by applying

three filters sequentially: “Topic”, “Sub-topic”, and “Specialty”.

Additional filters may be applied based on the kinds of materials,

such as “Audio Lectures”, offered online through the course.

Overall, MIT’s OpenCourseWare gives the impression of focus and

credibility, as a platform that is true to its mission. The amount of

information available on the site is truly impressive, and helps to

remove any doubt that the materials presented aren’t valuable

or legitimate to any serious self-learner. However, the manner in

which this information is presented leaves much to be considered.

Michael Zalla G R C D 4 0 6 2 « I n t e r a c t i o n D e s i g n I I4 of 18

× external benchmarking

Coursera’s mission is focused on “empowering people to improve

their lives”, and the lives of their families and communities, through

free education. Much of the site’s content is provided (and curated)

by their partners, course developers, and universities, as opposed to

the company itself. Because of this, Coursera places less of a focus

on donations, and instead encourages new users to jump right into

searching for courses. With over 110 official partners, they now offer

over 700 courses to an audience of over 8 million registered users.

The site’s search bar provides real-time results and suggested search-

es to users as they type, an improvement over MIT’s simpler function-

ality. However, the community-driven aspect results in a site aesthetic

that is fairly unsophisticated and generic.

Coursera.com

Michael Zalla G R C D 4 0 6 2 « I n t e r a c t i o n D e s i g n I I5 of 18

× external benchmarking

Academic Earth works “to bring together the best available content

… and distribute it in an engaging and useful way …”

I found Academic Earth to offer an aesthetic and experience that is

significantly more developed and considered than Coursera, while

maintaining a similar architecture. The website effectively serves as

a repository for links to externally-hosted videos and course mate-

rials, and offers far less detail about its courses compared to other

platforms. Academic Earth’s site navigation is entirely dedicated to

locating courses, and highlights one of the platform’s unique features:

course playlists, which allow users to define collections of videos

spanning courses from multiple universities, to help self-learning

create their own courses to meet their own learning objectives.

The company offers a collection of curated courses that feature

beautifully-crafted, representative cover images that strengthen the

consistency of the site’s visual aesthetic. The site also features one of

the simplest footers I’ve encountered in my benchmarking; a stark

contrast to the OCW footer, which includes over 180 words!

Academic Earth

Michael Zalla G R C D 4 0 6 2 « I n t e r a c t i o n D e s i g n I I6 of 18

× external benchmarking

Lastly, the company Udacity offers one of the highest quality websites

within the online education space, together with a unique business

model funded by its users. Udacity makes clear to new users its focus

on education for the sake of career advancement and professional

growth; this is communicated to users on the site’s homepage, which

reads, “Stand Out. Get the ideal job. Grab that promotion. Stand out

by learning in-demand tech skills.”

Udacity, which is not a brick-and-mortar “university,” instead works

to build trust in its users (and legitimacy for its content) by working

closely with top tech companies such as Google and Facebook to

develop its courses. They place special value on hands-on learning

that goes beyond the video lecture, and allow their users to filter

courses by difficulty (as opposed to only by topic). Udacity makes use

of “Tracks” to organize collections of courses, similar to the playlist

feature offered by Academic Earth.

Udacity

Michael Zalla G R C D 4 0 6 2 « I n t e r a c t i o n D e s i g n I I7 of 18

× project focus

I would like to redesign the interface through which users watch

sets of video lectures from the different courses hosted on MIT Open-

Courseware. Currently, this viewing experience is not, in my opinion,

far enough removed from the array of supporting information and

materials included with any particular course.

I would like to design a new interface that encourages a focused

learning experience without distracting users with supplemental

information up-front; such information should still be quickly

accessible to users without being in the way.

I plan to accomplish this by considering exactly which tasks or infor-

mation should be immediately available to a user who is watching a

video lecture, and explore ways to provide access to these within the

interface without creating learning environment that is distracting or

overwhelming.

Michael Zalla G R C D 4 0 6 2 « I n t e r a c t i o n D e s i g n I I8 of 18

× major criticisms

My first criticism of the platform as a whole is that OpenCourseWare

suffers from an overly-selfless use of screen real estate. The platform

makes inefficient use of its user’s increasing screen size, and restricts

the content on many of its pages to a width of less than 700 pixels.

This results in a high concentration of information, which can threat-

en a user’s understanding and focus. To put it simply, OpenCourse-

Ware would benefit from a generous helping of whitespace.

My second criticism involves four of the main features of a given

course: lectures, readings, assignments, and exams. Each of these

resources are, as expected, presented in a linear manner, with their

orders coinciding with the order of topics presented in the course.

However, these resources are organized in such a way that each

type is more-or-less isolated from another.

Were I in the middle of a course, it would be more efficient to have

access to course materials organized by topics (that is, the current

stage of the course) than by type. Then I could see, at a glance, those

materials — slides, problem sets, etc — that were directly relevant to

what I was learning at the time. This could be solved using some sort

of dynamic “timeline” that tracks a student’s progress in the course.

Michael Zalla G R C D 4 0 6 2 « I n t e r a c t i o n D e s i g n I I9 of 18

× use case assumptions

In part to establish a manageable scope of the project, and in part

because we have only been asked to redesign one section of an exist-

ing application, I’d like to state my assumptions about someone using

my redesigned interface:

• The user has at least a basic understanding of the MIT Open-

CourseWare platform and its purpose

• The user has already located a course that interests them, and

is intent on following a set of video lectures in order to learn

the course curriculum

• The user may want to quickly access to any notes or assign-

ments associated with a given video lecture

• The user may want to take advantage of transcript or translated

subtitles included with each lecture (suppose that English is not

their first language)

Michael Zalla G R C D 4 0 6 2 « I n t e r a c t i o n D e s i g n I I10 of 18

× intended deliverables

I am interested in designing a new interface that is specifically

crafted for use on an iPad. Nearly all of my experience with interface

design has been focused on desktop and small mobile form-factors,

and I’d like to take this project as an opportunity to explore the new

constraints imposed by design for tablets.

I’d like to explore methods for showing and hiding content in order

to eliminate the need for scrolling (e.g.—the interface size would be

“locked”, unlike a desktop website which may shrink or grow).

My second motivation for this decision is based on the fact that MIT

does not offer versions of their OpenCourseWare platform developed

especially for mobile or tablet devices. Integration with a mobile

operating system such as iOS 7 would make possible a number of

tempting new features, such as Calendar synchronization.

I intend to design at least as many refined style-frames as are neces-

sary to communicate my concept and illustrate the architecture of my

interface. These style frames will form the basis of a brief animated

demo of the app created with Adobe AfterEffects.

Michael Zalla G R C D 4 0 6 2 « I n t e r a c t i o n D e s i g n I I11 of 18

× paper wireframing

Michael Zalla G R C D 4 0 6 2 « I n t e r a c t i o n D e s i g n I I12 of 18

× paper wireframing

Michael Zalla G R C D 4 0 6 2 « I n t e r a c t i o n D e s i g n I I13 of 18

× paper wireframing

Michael Zalla G R C D 4 0 6 2 « I n t e r a c t i o n D e s i g n I I14 of 18

× paper wireframing

digital wireframing

Michael Zalla G R C D 4 0 6 2 « I n t e r a c t i o n D e s i g n I I15 of 18

×

Michael Zalla G R C D 4 0 6 2 « I n t e r a c t i o n D e s i g n I I16 of 18

× digital wireframing

Michael Zalla G R C D 4 0 6 2 « I n t e r a c t i o n D e s i g n I I17 of 18

× digital wireframing

Michael Zalla G R C D 4 0 6 2 « I n t e r a c t i o n D e s i g n I I19 of 18

× icon development

Michael Zalla G R C D 4 0 6 2 « I n t e r a c t i o n D e s i g n I I20 of 18

× form & aesthetic development

Michael Zalla G R C D 4 0 6 2 « I n t e r a c t i o n D e s i g n I I

motion demo

24 of 18

×

Michael Zalla G R C D 4 0 6 2 « I n t e r a c t i o n D e s i g n I I

motion demo

25 of 18

×