Back to Portfolio

Lend-2-Friend + Aalto entrance submission

Table of Contents

  1. About Aalto
  2. About New Media Design and Production
  3. About the 2016 year Assignments
    1. Creative Task: Lend2Friend
      1. The guidelines
      2. The code
      3. The video
      4. The animation
      5. The audio
    2. Writing Task
      1. The guidelines
      2. The evaluation criteria
      3. My essay
  4. Cool next project ideas

Lend2Friend - Laura Meskanen-Kundu from Laura Meskanen on Vimeo.

Aalto what?

Aalto University is a prestigious university located in the Greater Helsinki in Finland and harbors nearly 20 000 students and 4 500 employees. Aalto University was founded in 2010 from 3 old universities (Helsinki University of Technology, the Helsinki School of Economics and the University of Art and Design). The university is named in honor of Alvar Aalto, a prominent Finnish architect, designer and alumnus of the former Helsinki University of Technology, who was also instrumental in designing a large part of the university’s main campus in Otaniemi.

New Media Design and Production

Since graduating from Media Engineering from Metropolia University of Applied sciences, graduating with my thesis Making Data Accessible: An Overview of Interactive Data Visualization Using D3.js as Applied to a Scientific Dataset : Making a Static Visualization Interactive (project code: and site) and working as a full time front-end programmer at canter I’ve learned a few things about being an engineer and about best programming practices, but I was feeling the lack of having an official degree in anything visual. I’m a self-taught graphics designer with playing with Photoshop from the age of 11 and first website at the same time.

Over the Christmas break of 2015 I went ahead and just looked through the possible masters degrees out there and focusing on a possible hybrid between engineering and art. I found Media Lab Helsinki in Aalto offered masters and doctoral degrees in various fields and took the plunge. I had a week and a half to write my letter of intent and scrape together all the rest of the needed documents, from samples of work and recommendations. It was tough, but i just made it and submitted without much thought. I even decided I’m not going to make a big fuss about it and didn’t mention or tell about it to anyone except my husband. Not even my parents knew. I was certain this was going to be just a try and that I would apply next year with more conviction. I was happily surprised when i was requested to submit the tasks and then passed onto the final stage of the interview. In these second (assignments) and third (interview/portfolio) phases I was beginning to take this application process seriously, but in the beginning it was more on the whim. The application process and needed documents can be found here and about the degree: here.

The 2016 year Assignments:

I hope this links stays at least for some time on the pages so here to the official instructions. I short there was 2 tasks with their own subtasks before the interview that was the third phase of the application. I’ll put these shortly descriptions below with links to what I did and how I proceeded with each task.

1. Creative Task: Lend2Friend

Based on the concepts around the ”Sharing Economy” as a starting point, create a piece dealing with the phenomena and give your piece a unique descriptive title.

Now don’t laugh. I had never heard the term “Sharing Economy” so after reading this i was like what?!?!? Next I of course googled it. Below is a quote from wiki that was the first hit. Then I realized the term refers to the business model that is used by the likes of Uber and Airb&b. Of course then i was like wow shoot what should i do? My mind was blank. I couldn’t build a whole new user platform with an idea, code, graphics, promotional material, etc. with only 14 days of time. Realistically only 2 weekends because I was working full time with partial evenings free. So for the first Monday to Friday I just thought what the hell am i going to do!

Sharing economy (also known as shareconomy or collaborative consumption) is a hybrid market model (in between owning and gift giving), which refers to peer-to-peer-based sharing of access to goods and services (coordinated through community-based online services). The concept is not new. Sharing economy - wikipedia

After a week of thinking I asked myself what do I love to do? If I made a service of some kind what would it be? And the answer was simple. I loved books and I’ve always loved reading so why not make something with that. So that’s where the idea came from. Next I thought yes I have 2 weekends so I’ll build the platform, make a promotional video, do all the graphics, etc. This of course wasn’t realistic as I found out in the end with only able to produce the practical code + the graphics, but I luckily decided to concentrate on the video and explain the concept through that with all the rest supporting it. I submitted with shaking hands having worked 26 hours straight from Sunday to Monday morning 8am getting everything done before the normal working day.

The task guidelines:

  • The creative piece with a unique descriptive title: end result can be anything from an artwork to design, but it needs to be documented and submitted in a format that fully explains the idea.
    • Restrictions: Browser-based projects submit the URL’s in a text document and possible executable files should be downloadable as a ZIP file and preferably cross platform (Java/processing) that can be executed on Apple OSX with the latest version of Java and flash player. The piece can be submitted as a SWF, MOV, MPG, PDF, JPG, PNG or ZIP-files. Page based piece can contain up to eight full screen slides or be fully dynamic but should take no more than maximum 5 minutes to experience. The documentation should be submitted as TXT, PDF or RTF.
  • A short written documentation in addition to the actual piece.
    • Restrictions: The textual description should not exceed one A4 page (400 words).

My submission:

  1. Written documentation (pdf)
  2. Project video
  3. Project website (an ongoing coding project)
  4. Project on github
  5. Project mockups: Below
App login screen Application when logged in Screen Mockup 1 Screen Mockup 2 Application logo

Lets talk CODE

So I started by writing the code for the “to be full blown” web app. Yes unrealistic, but lets see how far I got. And yes it’s not anywhere near done so bear with me here. So I wanted to create something that was beautiful looking but also was easy to access with accounts that generally people already had. So I went with facebook (they have an api and used by almost everyone) and goodreads (because anyone who reads books have at least heard of the site even if they don’t have an account). I started with reading the facebook api. From there i created my own Facebook App ID.

1
2
3
4
5
6
7
FB.init({
  appId      : 'xxxxxxxxxxxxxxx',
  cookie     : true,  // enable cookies to allow the server to access
                      // the session
  xfbml      : true,  // parse social plugins on this page
  version    : 'v2.5' // use graph api version 2.5
});

Then I started reading the facebook code they had in the documentation and worked myself to use it in my project. But I realized very quickly that I need to store information about the session somewhere so I started playing with cookies. I had to do some reading on this because I hadn’t used much of cookies to store user data, but I found that Mozilla had some great documentation on Document.cookie. From here I was able to build my cookie functions:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
function setCookie(cname, cvalue, exdays){
  var d = new Date();
  console.log(d)
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires="+d.toUTCString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0)==' ') c = c.substring(1);
      if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
  }
  return "";
}
function eraseCookie(name) {
  setCookie(name,"",-1);
}
function eraseAllCookies(){
  var cookies = document.cookie.split(";");
  for (var i = 0; i < cookies.length; i++)
    eraseCookie(cookies[i].split("=")[0]);
}
function checkCookie() {
  var userId=getCookie(globalcname);
  if (userId!="") {
    alert("Welcome again " + userId);
  }else{
    FB.getLoginStatus(function(response) {
      statusChangeCallback(response);
    });
  }
}

As you can see the cookies do exactly what their names suggest, but these would be needed in logging in and out of the application and other information when using the app. So this project is still an ongoing one, but the javascript can be found here.

Lets talk VIDEO

Lets start by saying that this was the most work by far! First the filming, then the video editing, audio editing, and finally the graphics with the animations. I did the filming with my Canon iVIS HF M31 and Canon EOS 500D and audio recording with the Blue Yeti microphone.

Video editing I had done before so Premier was very familiar to me, but never the less found this tutorial really useful:

Also had to revise my knowledge of Rolling and crawling titles from the adobe website.

Lets talk ANIMATION

Next was the graphics and animations using After effects and this tutorial in “Creating shape layers from vector layers for easy animation“ really was helpful. I used the graphic assets from here: Bookshelf and open book.

Lets talk AUDIO

Next for the audio editing and I had never done this before so everything from audacity to recording with a pop filter was new to me. These two tutorials where the key to my good voice over on the video and I just love all of the music radio tutorials:

And fantastic suggestions for removing the echo off of the sound that you get from your camera recorder:

2. Writing Task

Write an essay on the pros and cons on the debate surrounding “Free Basics” and ”Internet.org”.

The task guidelines:

  • writing style should be academic
  • targeted to readers who are already knowledgeable about the topic
  • three A4 pages (800-1200 words)
  • .TXT, .RTF or .PDF document file

Evaluation criteria:

  1. Ability to organize and communicate ideas
  2. Ability to reflect on your own work
  3. Ability to analyze and criticize.
  4. Ability to use sources
  5. Quality and finish of written communication

My submission:

  1. Written essay (pdf)

Project ideas arising from this Project

  • A full blown song with lyrics and audio editing
  • Podcast (topic unknown)
  • Music video