Self Portrait of Social Media Usage
Individual Project | Visual Design

Self Portrait of Social Media Usage
Individual Project | Visual Design

Quick Facts:


Visual designer


Spring, 2014 (3 weeks)


51-731: Mapping and Diagramming course


Data visualization, design thinking, information & communication design


Pen & paper, Illustrator, HTML5/CSS3



Quick Facts:

Please see previous slide

Under the instruction of Prof. Keren Moyer from the School of Design, CMU, I completed this data visualization initiative to track one week of my habit in using social media. This is a 2-week project in the course of 51-731: Mapping and Diagramming.

Goal: As a girl studies at U.S. during the graduate education, I want to understand the usage of my social medias, and I believe by tracking one week of my time spending on it with regard to types of different social medias and things I did with it should be interesting enough to capture as a self portrait. And of course, this brings in the visual element that will help communicate with others about my social media habits.

Am I doing the same kind of things and am I spending same amount of time doing that thing while I was using facebook V.S. while I was using linkedin?

Final Product



My challenge included what contents to track in one week and how to communicate them in a right form, so that it is both informative and delightful to consume the “stories” behind the scene.

I started out with simple ideas that depict usage in time by areas of shapes – I want to make sure that the graph can communicate what I want to convey to the audience with the simplest form.

Try out the possibilities to add one more layer to it – the scattered usages in time.

At first, I realized that maybe it can be a good idea to think of the information presentation dynamically, so that it can render different levels of states when interacting with it differently, say hovering over to the each of the social media icons, the bubbles of times will add one more layer related to that social media to show the information about dispersed uses of time over a week (or one time use over a week). This helped me fully express different levels of information in a way that will attract users’ attention, as the interactive part grasps more of users’ cognitive focus and if that piece of info works better interactively, the gist of communication for that piece of info should be succinctly captivated in a print media, where the interactive elements are taken out.

Also, if go with the print media, the interactive part should still be represented in some other way, maintaining the capability to show both the total time of one social media usage and the scattered times over a week. So I then come up with a visualization pattern in my:

1st iteration

Design rationale for the 1st iteration:

The reason that I chose to use a shade behind the social media icons is that it creates a connection between the social media and its own usages. Also, using a shade to carry the scattered times does not necessarily take up spaces within the social media icon (like the ones I tired out previously), but still enables the immediate mapping between them by having the shade attached to the icon.

Mapping between social medias and the contents

I had the idea to show what I was doing with these social medias, and want to know if my focus of doing things will be different with respect to different social medias. From the 1st iteration, I just listed a bunch of things I had recorded, but I had not visualize that level of information yet. Am I doing the same kind of things and am I spending same amount of time doing that thing while I was using facebook V.S. while I was using linkedin?

Here I come up with a solution with a kind of line graph, and gradually made it happen and visually appealing in Illustrator:

2nd Iteration

I made some orientation adjustments before heading to present the final product. Below are two of the approaches.

See in full view

See in full view
I had some interesting discussions with my peers from the mapping & diagramming class under Prof. Karen Moyer’s instruction regarding the orientation and backgrounds. Though the black background had the intention to make the line graph to be placed in a more comparing and contrasting area of focus, the white background actually makes it very neat to see, and feels even more refreshing from the audience’s view.

Key components constructing the final product

Below are two key components in my final product: 1) the time & use pattern visualization; 2) the content consume visualization.

The story:

From the time & use pattern visualization, you’ll see different patterns of me using the social media. For example, I tend to use Facebook in tiny little chunks than other SNS, which is true – a lot of times I just simply scan through it by simply tapping the app open on my phone while I was multitasking (not so encouraged, though ;-p). I use LinkedIn in the same sense as Facebook – either use it seriously, or just tapping it open and scan through a few things there that’re constantly refreshing. While for WeChat, it has more even time chunks, which indicates I always use it within similar time, this may because I planed on it on purpose, or willing to spend even amount of time to talk when interacting with intimate friends (WeChat is also designed as a quick chatting & video chatting app with close friend network, supported by great voice input functions).

From the content consume visualization, you’ll find more reasons about why I may use that social media, as it revealed what contents I was interacting with when using that social media.