Tangible Course Search – Final Documentation


For my final project, I created a combined physical and digital interface for the course search that used physical buttons, dials, and faders to filter through manually created JSON files of the most popular courses/majors available to IMA students. This is a noted change from the start of the projection, as it was originally intended to use a data-scrapping API to search through all the courses for all majors at NYU, both undergraduate and graduate.

Important Note: Unfortunately I have left my photographs and videos of the physical prototype on my DSLR’s SD card back in my dorm room and am now back at home in California, so there won’t be any pictures in this final documentation for now until I get back from break and am able to offload them from the SD card. 

Original Flowchart

User Flow 1

Final Flowchart

User Flow 2

Changes Since Prototype

The most notable change since the prototype of the projection has been adding the increased filtering controls that allowed control of time, credits, and a randomizer. Here is the isolated HTML code for the digital interface of those additions:

<div id="filterScreen">
        <div id="filterTitle"></div>
        <div id="creditFilter">
            <div id="creditFilterVertical"></div>
        <div id="timeFilter">
            <div id="clock">
                <div class="hand" id="firstHand"></div>
                <div class="hand" id="secondHand"></div>
        <div id="dateFilter">
            <div id="monday"><span class="dayTag">MON</span><span class="dayValue">✓</span></div>
            <div id="tuesday"><span class="dayTag">TUE</span><span class="dayValue">✓</span></div>
            <div id="wednesday"><span class="dayTag">WED</span><span class="dayValue">✓</span></div>
            <div id="thursday"><span class="dayTag">THU</span><span class="dayValue">✓</span></div>
            <div id="friday"><span class="dayTag">FRI</span><span class="dayValue">✓</span></div>
        <div id="randomFilter">
            <img src="img/diceIcon.png" alt="Dice Icon">
        <div id="masterConfirm"></div>

And here’s the function that animates the change over from the major selection screen (what used to be the career select screen)

function careerDialConfirmed(){
            if(stage == 0){
                $("#chooseCareer, #dialBackground").animate({
                    left: "-50vw",
                    opacity: "0"
                    left: "-20vw",
                    opacity: "0"
                    "background-position": "left bottom",
                var filterScreen = $("#filterScreen");

Another major change since the first prototype was changing the career selection criteria from all-university careers to simply IMA-related majors (IMA, IDM, ITP, MCC, and Open Arts) to take courses in. This change was put in place because:

a) Once the data scrapping side of the project failed, it was no longer feasible to show many different majors as it would all require manual creation of the JSON files. I needed to figure out a way to restrict the amount of data the user could theoretically see

b) When presenting my project to various people I got many comments about wanting to filter by major, and I didn’t have any good method other than just putting a keyboard in front of them and calling it a day. I felt this went against the dashboard-like interface for the project. So instead I limited the number of possible majors to what could be fit onto a dial and used that.

Thankfully, because of the way that I programmed the javascript and CSS before to be irrespective of the content of the dial buttons (mostly so I can use this code again in the future), all I needed to do was change the HTML and add a couple Javascript variables for the final filtering mechanism.

<div id="confirmCareer">
        <div class="confirm-right"></div>
    <div id="dialBackground"></div>
    <div id="chooseCareer">
        <div id="chooseMCC" class="chooseItem">MCC</div>
        <div id="chooseIDM" class="chooseItem">IDM</div>
        <div id="chooseIMA" class="chooseItem">IMA</div>
        <div id="chooseITP" class="chooseItem">ITP</div>
        <div id="chooseTOA" class="chooseItem">TOA</div>
    <div id="chooseDial" class="dial">
        <div class="arrow-right"></div>

The CSS stayed the same because it used nth-Child for its margins:

            text-align: center;
            color: #999999;
            font-size: 1.7vw;
            cursor: pointer;
            font-weight: bold;
            border-radius: 1vw;
            padding: 0.5vw;
            width: auto;
            transition: all 1s ease-in-out;
                margin-left: 8vw;
                margin-left: 14vw;
                margin-left: 16vw;   
                margin-left: 14vw;
                margin-left: 8vw; 

For the physical construction of the final interface I decided to go with cardboard instead of wood. This allowed for more rapid modifications should anything go wrong or needed to be changed, and also meant that I could work away from the busy shop and without the perpetually used shop equipment during this pre-show stretch of time. It did however mean that I needed to get creative with the way I made dials and faders.

Leave a Reply