Visual Planner: BeyondPrerequisites, Designing anInteractive Course Planner for a21st Century Flexible Curriculum

Zhen Li

Arts Media and EngineeringArizona State UniversityTempe, AZ 85281 USAli.zhen@asu.edu

David Tinapple

Arts Media and EngineeringArizona State UniversityTempe, AZ 85281 USAdavid.tinapple@asu.edu

Hari Sundaram

Arts Media and EngineeringArizona State UniversityTempe, AZ 85281 USAhari.sundaram@asu.edu

Copyright is held by the author/owner(s).CHI 2012, May 5–10, 2012, Austin, TX, USA.ACM 978-1-4503-1016-1/12/05.

Abstract

In the 21st century knowledge economy there is a growingneed for the types of creative thinkers who can bridge theengineering mindset with the creative mindset, combiningmultiple types of skills. New economies will need workerswho have ”diagonal” skill sets, who can develop systemsand content as an integrative process. This requires a newtype of training and curriculum. In the newly formed”Digital Culture” undergraduate program at ASU, weattempt to support new types curricula by structuringdifferently the way students move through courses. Witha constantly shifting and changing curriculum, structuringcourse enrollment using class prerequisites leads to fixedand rigid pathways through the curriculum. Instead,Digital Culture structures course sequences based on thestudents accumulation of abstract ”Proficiencies” whichare collected by students as they complete courses, andwhich act as keys to unlock access to higher level course.As a student accumulates more and more of theseproficiencies, they are increasingly able to unlock newcourses. This system leads to more flexible and adaptivepathways through courses while ensuring that students areprepared for entrance into more advanced classes. It ishowever more complicated and requires that studentsstrategically plan their route through the curriculum. Inorder to support this kind of strategic planning we havedesigned and deployed a course planning system where

students can simulate various possible paths through thecurriculum. In this paper, we show our design process incoming up with our ”Digital Culture Visual Planner”.This design process starts with a network analysis of howall the Digital Culture courses are interrelated by,visualizing the relationships between proficiencies andcourses. A number of possible design directions resultfrom this analysis. Finally we select a single design andrefine it to be understandable, useful and usable by newundergraduate Digital Culture majors.

Author Keywords

User interface design; visualization; design planning;interdisciplinary curriculum

ACM Classification Keywords

H.5.3 [Group and Organization Interfaces]: Web-basedinteraction.; J.1 [Administrative Data Processing]:Education.

General Terms

Design

Introduction

(1)

(2)

Course Pro!ciency

Figure 1: Structures illustrationof the course-based linearcurriculum (upper) and theproficiency-based dynamiccurriculum (bottom).

In this paper, we present the Digital Culture1 VisualPlanner, a web-based interactive course-planning [4] toolto address the challenge of designing a tool for studentsto interactively explore various routes through a complexcurriculum. This tool must allow students to interactivelynavigate the complex web of relationships between coursesand proficiencies to iteratively discover optimal pathwaysthrough future course offerings. This is a complex,multifaceted problem. Any interface design must besimple enough so that undergraduate students can quicklyunderstand how to use the tool, yet complex enough that

1http://digtialculture.asu.edu

students can truly explore various future scenarios andvisually comprehend the impact of their decisions.

The sections are organized as below: 1. We introduce theDigital Culture educational context and specify thechallenge. 2. We present our design strategies for solvingproblems in this specific context. 3. Finally, we proposeour future thoughts and work.

The Digital Culture Context

Most academic curricula operate under the model ofprerequisites, where completing one course will openaccess to the next course in a specific series. The DigitalCulture curriculum is a new interdisciplinary,undergraduate curriculum developed by the School ofArts, Media and Engineering (AME) and its 15 partneringunits at Arizona State University (ASU). Digital Cultureaims to train the next generation of cultural creative whomust be skilled not only in making creative content, butequally so in designing and creating next generationdigital tools and systems. In order to address the inherentinterdisciplinary requirements [5] of such a curriculum, weadopted a ”proficiency-based” course framework [6] (seefigure 1) designed to flexibly move students throughcustomizable course sequences. The curriculum designatesa list of 27 important digital culture proficiencies spanningdifferent disciplines including social science, media,humanities, art, science and engineering. These can bethought of not only as actual learned skills andtechniques, but also as generic keys or badges which areprovided by courses and gathered by students to laterunlock access to higher level courses. A single coursemight provide one or several new proficiencies from thislist. When a student successfully completes a course, theyreceive a few more proficiency keys which add to theirpersonal collection. Higher level courses are open only to

those students who have gathered the specific necessaryset of proficiencies for that course.

This method of organizing and planning our studentseducation offers much flexibility but comes at a greatprice: complexity. Students have to keep track of whichproficiency keys they ”own”, and strategically gather newproficiencies in order to open up access to certain coursepathways they wish to pursue. Instructors and facultyhave to decide on what proficiencies each course willrequire for enrollment as well as which proficiencies will beprovided upon completion of each course. Administratorsmust look at the entire network of course/proficiencyrelationships to make certain the overall network ofcourses, linked by proficiency keys, is coherent and freefrom ”islands” and ”dead ends”.

Currently, this proficiency-based curriculum relies heavilyon face-to-face meetings between students and academicadvisors. Each student is required to consult with anacademic advisor in order to determine which courses totake next. The advisors are very experienced and familiarwith the curriculum. With a small number of students,this face-to-face support is acceptable but as enrollmentnumbers increase, students will need to be able to exploreand plan their own routes through the curriculum. Whatis needed is an online tool for students to interactivelynavigate course sequences and build their own optimalpaths though courses.

Ideally, this dynamic proficiency-based curriculum offersseveral advantages compared to the traditional linearcourse-based curricula. Students can tailor their paththrough the curriculum to suit their career goals. Forexample, students who would like to pursue videogamedevelopment can take a collection of courses that maydiffer from other students who dream of being hired by

Google or Facebook to help design user interfaces. Inpractice, achieving this kind of flexibility andcustomization in the curriculum depends on overcomingseveral challenges.

Challenge 1 - Interdisciplinary Program Both faculty andstudents who may have been accustomed to theirself-contained individual disciplines must now adapt toactive and deliberate process of integrating a variety ofdisciplines into their thinking. This becomes somewhatproblematic when students are suddenly required to buildeducational paths within multiple disciplines that they arenot familiar with.

Challenge 2 - Excessive Choices The dynamic curriculumprovides a wide range choice for students to build theireducational paths. Each student makes their own choiceswhen planning their own courses, yet there is no fixedstrategy for students to determine an optimal path.

Challenge 3 - Self-Directed Planning Students are giventhe freedom to choose courses and can take into accounttheir own personal backgrounds, interests and careergoals; however, they must spend time and energy to keeptrack of their own collection of proficiencies, requirementsand plan several semesters in advance in order to takeadvantage of the flexible curriculum.

Design Goal - An Interactive Exploration Tool

To address the several inherent challenges in operating acurriculum based on proficiencies, we proposed a web-based, interactive course exploration tool to assist DigitalCulture undergraduates in customizing their educationalpaths. We envision a tool whereby a student can track hisown progress through the curriculum, make short-termplans and adjustments to course schedules and enrollment,and make long-term plans several semesters in advance.

Our initial design phase consisted of a brief student surveyin tandem with a detailed analysis of the complexinterrelationships between courses and proficiencies. Wecreated a visualization method for mapping out thesecourse/proficiency relationships and created several largeposters illustrating the resulting visual patterns.

Student Survey

Course/Pro!ciency

Critical Warning Free Texture

Outgoing Incoming Critical Free

Connection

Table 1: Visual Metaphor

We interviewed four undergraduates who were preparingto major in Digital Culture. The survey helped usunderstand our target users, while validating somepreconceptions and intuitions. Their feedback can besummarized as follows:

• Students enjoy Digital Culture courses, finding theminteresting and practical; however, students are notaware of the overall curriculum structure.

• Students rely heavily on their academic counselorsfor short and long-term information and advise.

• Students have general ideas about career goals butrarely have concrete plans or knowledge about howto achieve these goals.

• Students are able to schedule courses in the shortterm but need advising to make long-term plans.

Visual Analysis and ExplorationTo better understand the proficiency-based curriculum, weanalyze course data as a series of graphic charts in orderto study the relationship between courses ( please seeFigure 2). Specifically, in each table, we arrangedproficiencies on the X axis and courses along the Y axis.Within this frame of reference, we mark out whichproficiencies are required and provided by which courses.We mark a required proficiency as a circle and a provided

proficiency as a triangle. We can start to determine whichcourses and proficiencies are lacking sufficient connectionsto other courses. Some courses actually lack any possiblepathways to them and are labeled ”critical” in red. Inpractice, no student could ever enroll in one of theseproblem ”critical” courses. Similarly, courses with too fewpathways to them are labeled ”warning” in yellow.Healthy and sufficiently linked proficiency/courses arelabeled ”free” in green. See Table 1.

Figure 2: Linking Pattern Analysis

These very complex charts and plots gave us a good senseof the design problem space but are too complex topresent information to end users. The analysis gave us agood overview but did not suggest any obvious visualdesigns for moving forward with user interfaces.

Visual Planner Introduction

With a good visual overview of the relationships betweencourses and proficiencies, the next step is to design anonline course-planning tool for the students to plan their

enrollment in future courses. The main requirements forthe tool are as follows:

• It must provide a way for students to track theirpersonalized inventory of proficiencies andcompleted courses

• It must provide a way for them to look at futuresemester course offerings in both a long-termoverview and with immediate detailed coursedescriptions as depicted in Figure 3.

• It must allow students to visually explore the impactof certain decisions. Students must be able toessentially perform simulations of various possiblefutures and be able to see the results andimplications of these possible futures.

Interaction With The Planner

My Courses

Semester-based Courses

Course Description

Pro!

cien

cies

Figure 3: Layout of the page

Figure 4: Hover over aproficiency to highlight relatedcourses

Figure 5: Hover over a course tohighlight related proficiency

Figure 6: Pin a course to openmore future free/possible to takecourses

The basic layout of the user interface presents the userwith several screen areas. One area shows a list ofproficiencies including highlights for proficiencies that thecurrent user has already accumulated. The central screenarea is reserved for showing courses. This area showscourses that the user has already taken as well as courseswhich the user is currently able to take. Lastly wedesignate another screen area for displaying detailed textinformation on items that have been clicked on.

As we lay out this initial framework for a user interface itbecomes clear that how we dynamically highlight variousscreen elements is a key aspect of the visual language weare designing. We have determined that the interactivebehaviors of hovering and clicking are the key actions thatusers may take.

Prior to any interaction, the basic background visualinterface will present the user with their own list ofaccumulated proficiencies as well as a list of all thecourses they have completed. Based on whichproficiencies the user has accumulated, it will illustratewhich courses are currently possible to take byhighlighting them in green. Courses that are ”almost”possible to take are highlighted in yellow. Courses thatcannot be taken are highlighted in grey.

In this application it is often necessary to present the userwith visual cues to the relationships between variousgraphical elements. Users will see a grid display of all thecourses offered in the following semesters. Hovering overany of these elements will highlight not only that elementbut also proficiencies required to take this course, andproficiencies that this course will provide as depicted inFigure 5. Alternatively, hovering over a proficiency willhighlight all the courses which provide this proficiency asdepicted in Figure 4. We rely heavily on this ”linking andbrushing” [3] interaction technique of interactivelyhighlighting related elements.

Clicking on a course icon has the effect of simulating theimpact of having completed this course. This changes itsicon to illustrate that it has been pinned into a simulation.By ”pinning” various combinations of courses in futuresemesters, students can explore the impacts such as othercourses becoming available or not, as depicted in Figure 6.

Visual Design

For the visual design, we utilize four colors (Black, White,Green and Yellow) and two visual metaphors (Checkboxand Pin) to state the meaning of the statuses of eachproficiency and course.

Only the ”free” green courses can be pinned. The”pinned” courses are highlighted with a white frame andwhite triangular symbol. This action reveals futurecourses that the student can take if he or she successfullycompletes the ”pinned” course - these courses are alsoborded by a white frame.

Implementation and Discussion

The Visual Planner is implemented using HTML, CSS,JavaScript and jQuery. We use Ruby on Rails as aplatform to collect data from and communicate withenrollment databases. Many course planners have beendeveloped such as Rutgers course schedule planner [1] andthe course timetable planner of Toronto University [2].Also, other early manipulation retrieval systems, such as”FilmFinder”, achieve a similar end using avisualzaition [7]. To the best of our knowledge, our visualplanner is the first to operate within a curriculumdesigned around proficiencies rather than prerequisitesusing a visualization.

Conclusion and Future Work

In the future, we plan to run formal user studies toevaluate the quality of the design and the usability of thetool. At this point we have only informal user studies anduser feedback but initial responses are very positive. Thetask of simplifying a very complex set of courserelationships is not a simple one. If the tool is too simple,it will lose the flexibility and usefulness we need, but if itis too complex, then usability will suffer. We feel we havestruck a good balance between complexity and usefulnessin this tool which will be in use by the Digital Culturecommunity in the spring of 2012.

Figure 7: Visual Planner

References

[1] Course Schedule Planner.http://sims.rutgers.edu/csp.

[2] Course Timetable Planner.http://utm.utoronto.ca/12627.html.

[3] R. A. Becker and W. S. Cleveland. Brushing scatterplots.Technometrics, pages 127–142, 1987.

[4] N. J. Curiskis. Online course planning. MERLOT Journalof Online Learning and Teaching, pages 42–48, 2006.

[5] J. J. Duderstadt. A University for The 21st Century. TheUniversity of Michigan Press, 2006.

[6] E. M. Ritter and D. J. Scott. Design of a proficiency-basedskills training curriculum for the fundamentals oflaparoscopic surgery. Music Educators Journal, pages107–112, 2001.

[7] C. A. . B. Shneiderman. Visual information seeking: Tightcoupling of dynamic query filters with starfield displays.Proc. ACM CHI ’94 Conference, pages 313–317, 1994.