This project is for UN 7OTH ANNIVERSARY ARMS TRANS MEDIA EXHIBITION. The exhibition is structured around five nodes. Each node brings together a critical moment in UN history.Our team chose Refugee flow during 1937-1951.

By using timeline to show the crucial point through the history. How UN and other organization played important role in all the events and incidents. And showing the evidence of what is  real life condition of the refugees.


  1. Showcase real human stories and connect them to the quantitative and historical information.

  2. Compare the overall flow and interaction of people and events to individual stories highlighted.

  3. This experience will be vivid and comprehensible in computers, tablets, mobiles and exhibition spaces, with the user always having the same great experience.


Based on the information we had, we decide using website and LED lights as media to show the information that we had.

We dug through the information that clients gave us. We decided what information we want to put on the website, and how the information collaborate with each other without overwhelmed the audiences. At same time we have an idea how the LED lights show the flow of the refugee through the time on the big screen while audience can interact with the website.


We decide to use LED lights as dots indicate refugee population. The movements of the LED lights represent how refugees's movements through the time.

We choose this way is because it gives at-a-glance view of multiple historical topics and could give audience a hands-free learning experience.

Through the dots, the user can hone in on their point of information and with the movements on the huge LED screen it will invite people to click and interact


After decided the basic information and hierarchy of the website, we started the wireframe of the website and style sheets for the whole project. 


Style Sheets



Introduction: Basic information about the project and the history.

Meanwhile, giving the option to audiences if they have a specific time or incident they want to explore more or they want to follow the timeline naturally. 

Timeline interactivity: It play the whole experience and navigate the whole experience manually

Legend:  Showing who helped the refugee and important events through the time. Separated the information by different colors.

Red: The people and institutions that made it happen. All of them are protagonists of their own story, but we chose to follow the point of view of the refugees, since the work was all about helping them

Yellow: Information on Origin and Destination, amount, frequency and special characteristics

Blue: Moments that shaped these people and institutions

Blurb/ Video: Related the incidents and events with refugees' personal stories. So audience could feel more related to the refugees.

Final Product