Press "Enter" to skip to content

→ Alice Sun / Blog Posts

DWD Final: Annual Report

A definition of an annual report is a comprehensive report on a company’s activities throughout the preceding year. During January to February, I worked on the annual report for NYU Office of Global Services. Due to its “comprehensive” nature, it was inevitable to cover large amount of data, such as number of international students, visa types of international scholars, inbound data (NYC campus) and global campus demographics.

While the categories and wording weren’t so different from last year’s version, the most time-consuming process was contacting and collecting data from different teams. Furthermore, often the data had to be modified several times, which led me to revisit and edit the report again and again.

It was more time-consuming for other members in the office as well, because they didn’t have any other choices than going through me in order to make even a small change in numbers.

It led me to an idea of removing the middle step, and allowing different team members in the office to directly modify the data. To prototype the idea, I used the existing interactive annual report that contains relatively minimized information (compared with PDF version).


The report now consists of two pages: (1) a page for data input and (2) page with infographic results. Page 2 will be built based on data from page 1, which is only accessible by the office people – while page 2 is the public report for everyone.

Other graphs were built with chart.js since they only required small number of input. However, in case like student demographic over the world that contains at least 200 countries and populations – leaving it as a separate file seemed more reasonable. In fact, the current map uses Google Fusion because it’s easy to modify via Google Sheets. For my new prototype, I tried d3.js with topojson.

CSV format is easy to edit by Excel, just like Google Sheets, but one of the problems was that I didn’t want to collect stacks of CSV file every time it gets modified. As a solution, with multer.diskStroage I set up the file name to be always consistent as population.csv, thus the new file upload will only replace the old one.

Conclusion + Links

All icons by Dinosoft Labs

This structure will be useful if there’re more categories to present like its PDF version (which can possibly happen in our office.) The new system can achieve better results for both reporters and designers – because reporters don’t have to go through an extra step or feel sorry about making changes, while designers can solely focus on visualizing data.

GitHub: Code,
Annual Report: Page 1 + Page 2


And Our Faces, My Heart, Brief As Photos

An acrostic poem generator using some existing peoms from And our faces, my heart, brief as photos by John Berger.

Inporting 4 different poems: Leaving, Waterfront, A Forest I Knew, and Factory by John Berger; then combine them as one list. Initially I started with only a single poem, but soon I realized that an acrostic generator requires an adequate amount of source text, especially because I’m collecting lines, not words.

Now the list contains all lines from four different poems. The following code checks the first letter [0] in each line, and creates a dictionary of lines in alphabetical order.

The dictionary is completed, although it’s still missing some letters (those ones won’t be available to form the poem). Then, set up a word that will be the seed: first letters of each line. Once the seed word is decided, the next step is going through initials{} dictionary and check if it contains any sentence starting with the same letter. Then, it will choose randomly among the list of sentences, if there are more than one.




Box2D & Typeface

More typographic experiment based on Daniel Shiffman’s Polygon example using Box2D. Typeface: Brown Bold Full Screen, Code

  • How to build a physical boundary out of textToPoints()?
  • reference: Patrik Huebner’s typographic example


Quant Self Intervention

Assignment 05: Quant Self Intervention

Design or prototype an intervention that would help you to change your behavior based on the data you’ve gathered or based on the service you designed in you Quant Self Service. Tech or community or social based interventions are fair game.

  • make your intervention tangible; make it visual or physical in some way.
  • justify how your intervention works and why it is convincing for you and why it might (or might not) be a useful strategy for others.
    You might consider: – paper prototypes, a slide deck, a screen dummy, video, etc – using your quant self service idea as a foundation to build your intervention on

Language Usage Tracking

The following application only focuses on writing thorough keyboard in either mobile device or pc. If you are a new user, it will ask the access to data about when you change your language, because it can be sensitive information. Once the user confirms, it lands to the Welcome (Get Started) page and will set up language types and devices to synchronize.


After the registration, the application won’t ask accessibility question unless the user desires to stop the process of collecting data. Instead of Welcome page, now it will directly land on profile page and shows the average usage of different languages, list of languages, and list of synchronized devices. This page also has a role as setting page, so any visual change, language and device reset can be done in here as well. In order to see more details about data, tap the left top button and it will land on Time Map page. The default view of Time Map page is daily based.

Time Map

Once in the Time Map page, the user can navigate to further information as weekly based, monthly based, or yearly based data. Each page’s graphic is color-coded according to language, which is adjustable element in setting page. Through these Time Map sections, the user can discover such aspects like: “I use more Korean during weekends”, “English is my main language while I’m not on vacation”, and “My usage of English is increasing every year”.

Overall Wireframe



Assignment 05: Reflection

A short paragraph or phrase on what you learned this week.

There has been some confusion on the order of documentation posts, so I merely spent time reorganizing and making some updates on existing posts. The previous comment by Joey on assignment #6 is now under the proper post as a copy. It is definitely my mistake to carelessly overlooked the assignment details. On another hand, I realized that my assignment #4 and #5 were in a combined form after looking at some other classmates’ work – and how I’ve been often thinking user research and design as one chunk of practice, but they’re not.

It’s important to conduct user research in isolated manner from the design work itself, especially to keep objective view in both areas. One of the best ways to increase accuracy is testing many users as possible – which wasn’t an option in my assignment #4, because I was the only user to form the persona figure. At the same time, I’m aware that this service is targeted towards very limited user pool: people who speak more than one language. However, I still decided to proceed the idea regarding that this class is more about “I” and personal data.

p5 & Typeface

Assignment 4 was based on one of generative font examples in Processing. The original version could directly input text but I wasn’t successful in transferring the part. Full ScreenCode

Second trial based on Daniel Shiffman’s Particles code and textToPoints() example – interactive with mouse hovering and clicking. Typeface: GT Sectra Super Full ScreenCode


Quant Self Service

Assignment 04: Quant Self Service

Develop a mini service concept around your own personal data.

  • Go through the process of and document creating persona, creating an empathy map, mapping your user journey (experience), sketching your service blueprint, and creating evidence of some of your service touchpoints.
  • State clearly (if possible) the opportunities you’ve identified based on your research and exercises and follow them through to make a convincing and thoughtful collection of experiences in your service.
  • make tangible some of your service touchpoints (for example paper prototypes, simple sketches, photographs/video). It is encouraged to prototype an aspect of your service or a video showcasing a scenario in which your service might operate to help make your idea more tangible.

Mental Model

  • Motives: Can the usage of certain language itself influence one’s mind or ways of thinking?
  • Expectation: Those who use more than one language have different occasions and tasks for each language.
  • Challenge: Hard to manually document every moment I change my language usage.
  • Currently using:
    • IP Tracking Extension (considering to stop it due to having less connection with language usage)
    • Reporter Application
  • Experience: The two tools are not working very harmoniously, and has low accuracy


  • The persona figure is solely based on myself.
    • Bilingual in Korean and English
    • Daily uses both languages
    • English for work, class, research and projects
    • Otherwise, mostly uses Korean but English rate is increasing
    • Has hard time tracking things daily
    • “Too tired. Don’t want to use the Reporter App”
    • “I forgot to put my Reporter App to Asleep mode!”
    • “Wait, this is Korean site but has Japanese IP address”
    • Uncomfortable how simple process became complicated
    • Fun to see unexpected aspects about my language usage
    • Curious about some IP address locations
  • DOES
    • Casually checks website’s IP location
    • Ignore report notification because it’s class time
    • Input my reports carelessly



Assignment 04: Reflection

A short paragraph or phrase on what you learned this week.

The main reason of making a service about detecting language usage was because it was something that I was searching for in the beginning of this class. There are many related research papers and article about relationship between language and mind development, but it was interesting that there wasn’t any automated tool to measure it. My idea for the assignment 4 has many flaws, and has incomplete quality. However, at least the moment when I merely imagined about this tool gave me the feeling of satisfaction somehow. On the other note, it’s tiring to collect two different sources of data (that don’t perfectly suit my purpose of tracking), but at the same time there were many unexpected aspects I found about myself. For example, during weekends my usage of Korean increased along with the number of added photos – which implicates that I take far more selfies when I’m with my Korean friends, compared to when I’m not.


Questions and Topics

What will be the ways for technology to increase or decrease the gap among people?

Research Topic:

  • Income and lifespan inequality
    • across different countries
    • and inside a country
  • Areas to look into (from class feedback)
    • pattern of income inequality; when are the moments that the gap got widened or narrowed
    • middle-class and their age
    • how many generations does it take for poor to be rich (economic mobility)?
    • role of education
    • relationship between time and income inequality?

Reference: Hans Rosling’s Talk

The quality of life in overall countries got dramatically elevated, however, with significant amount of inequality. It is visible by how bubbles that represent different countries are located in scattered shape in 2008, compared to 1830.

It gets more interesting when he takes apart some cities in China and starts locating them next to other countries. In 2009, China had relatively lower lifespan and income level than Italy – while Shanghai alone was in comparable status. Then, he takes Guizhou apart and locate next to Pakistan. Furthermore, within Guizhou, the poorest rural area was comparable with Ghana.