Information Design S’19

Reflections

Yoo Jin Shin
Jan 18 · 27 min read

Week 1 (1/17–1/18) — First lecture

It was a sudden decision to take this course, so I was honestly a total mess. But my Port Authority Transit (PAT) members caught me up to speed. In class, we were asked to group our findings from researching the current situation at Maggie Murph Cafe (from the previous class that I missed). It was interesting to see how differently each of the four groups categorized their post-its– one was a cycle, ours was a table. From across the room, it was quite difficult to see past the general shape of the ideation. As a class, we discussed three main takeaways:

  1. It’s important to take into account all parties involved: both the customer and the employees.
  2. You should first observe the natural situation and then interview to test your assumptions (without falling victim to confirmation bias).
  3. We should complement our findings with simple sketches for a more efficient delivery.

Week 2 (1/20) — Project 1 PAT Blind Experience

In order to learn more about our project context (PAT bus system) and users (visually impaired riders — EDIT: later narrowed down to blind riders), we decided to approach the research component via the Walk-A-Mile method. Rhea volunteered to cover her eyes with eyepatches and ride the PAT bus in order to truly immerse herself in the situation of a visually impaired rider and gain a better sense of their experience.

I think it was truly amazing that Rhea volunteered to take on such a task. Personally, I would have felt too uncomfortable, scared, and vulnerable to do such a thing, so I thought she was very admirable for going all the way to truly understand the visually impaired. Much respect. Much to learn.

Rhea role-playing the PAT bus experience of a visually impaired rider.

Week 3 (1/29) — Project 1 Presentation Runthrough

As I watched the other groups’ presentations and left them comments, I realized how the small details matter — if the color palette, font, or layout of the slides were inconsistent, it threw the overall balance of the presentation. Of course the content also matter; however, I think stylist choices are just as important.

It was helpful to receive feedback from our classmates, TAs, and professor. For our presentation on Tuesday, we plan to take these into consideration, especially being more consistent with our slides and trying to be more engaging (through visuals and photos from our bodystorming) rather than lecturing.

Week 4 (2/1) — Project 1 Final Presentation

Done with Project 1! We edited our slides through an iterative design process— incorporating feedback from the runthrough, sharing our edits with the team, receiving more feedback, and repeat. One example below:

Empathy Map Before (feedback: too bold compared to the rest of the slides) → After (edit: inverted colors → more style consistency with the rest, like the Stakeholder Map)

Overall, this project was really interesting because although the context of PAT wasn’t new, the target users were. I’ve never done accessibility design before, and this project definitely opened my eyes to a new perspective.

For the next project, I want to put more emphasis on visual design, working more meticulously with grid, color, hierarchy, etc.


Week 5 (2/12)–Project 2 Begins

To kickoff project 2, we were divided into 5 groups of 3, given the task to search the area for effective and ineffective poster designs.

Team 5–Search for effective and ineffective posters @ Hunt

This activity was a nice refresher of the five ways to achieve hierarchy — color, contrast, alignment, proximity, scale (CCAPS).

I started working on the first set of deliverables using Illustrator, adjusting linespacing, stroke weights, and horizontal shifts to see which adjustments were the most effective in creating hierarchy.

Playing around with linespacing, stroke weights, and horizontal shifts independently

Week 6 (2/17)–Project 2 continues

Using InDesign (for the Love Songs Poster below) and Illustrator (for all Project 2 exercises), I realized that “guides” and “grids” are two different things. I was familiar with inputting guides for alignment, but always called them grids. But now, it seems like guides are the lines that you place yourself, whereas a grid is more of an umbrella term for margins, columns, guides, etc. Guides are a bit tedious to individually place, but I think they’re worth the extra time.

I definitely prefer manually placing my own guides than setting margins and columns. I feel like the former allows for more flexibility, and even with pre-set margins and columns, I found myself breaking them anyways.

Left: Illustrator screenshot with manual guides for Project 2 Exercises 5–7 | Right: InDesign screenshot with set margins & columns for Love Songs Poster

Week 7–Color Theory

To gain practice with color and the 6 Principles of Design, we did an exercise to create a collage based on a category of color and a principle of design. I was assigned Monochrome & Similarity/Contrast. It was definitely a challenge to find different hues of one color in the two magazines that we were sharing. I ended up going with blue because blue appeared frequently in skies, ice, water, and various fabric spreads. I added a hint of orange to complement the blue and to add contrast. The different textures also add contrast. I tried to create similarity by aligning the rectangular pieces.

Left: Process. I ended up not using the ocean piece because it seemed more blue-green, unlike the other blues | Right: Final collage

Week 8–Wrapping up Project 2

We completed more exercises, trying to find the optimal, most effective combination of linespacing, stroke weight, horizontal shifts, scale, color, and image.

I found the combination of one linespacing, two stroke weights (bold and light/medium), and scale (one large title) to be the most effective in creating hierarchy.

In order to select an appropriate image, I carefully analyzed the content and picked out keywords and recurring themes. Then my image search began! I started looking up both explicit and implicit keywords beginning with transportation (rows 1–2), future (found none), innovation (row 3), and transit (rows 4–5).

Image inspiration from content

After collecting 18 potential images, I zoomed out and got a holistic view of all the images. I picked out five finalists that stood out, whether the reason was due to color or contrast.

Top Five Finalists

I tried to focus on portraying the mood of innovating for a brighter future, conveyed through a bright, bold, color palette.

However, I also picked a more toned down, brown-scale image (row 2 above) to portray the pressing need to include the marginalized groups. Studies have shown that negative emotions tend to be more powerful and lasting, but I personally tend to stray away from this method. I prefer to leave viewers more hopeful than dreadful about the present/future.

I was initially planning on creating a vertical poster, but realized that all the finalist images were horizontal, so I decided to pursue a horizontal poster. But I ideally wanted to keep a vertical orientation for the mobile version to align with users’ typical mobile device holding gesture.

Out of the five finalists, only one was clearly implicit with the lightbulb. This was also the only image with a solid background, a perk for readability. I thought that the lightbulb alone would be too simple, so I thought, maybe I can fuse the other images into this one somehow using Photoshop?

Blended pieces from other images into the lightbulb using feathering in Photoshop

Then I added the text and started exploring breadth and depth. I thought this was an interesting concept, but wasn’t 100% content with it, so I decided to try another direction with brighter image.

Two concepts

Interim Critique

For our desk interim critique, I brought two sets of designs– the darker one, and the lighter one. However, once I printed them, I knew that I leaned more towards the lighter set because it was more compelling. My biggest concern was that the image was too busy and distracted viewers from the text. I received a lot of feedback on the two mediums.

Printed drafts and feedback from Vicki from the interim critique

One thing that blew past me was one of the requirements for this project. The printed poster needs to be vertical orientation! I decided to keep the mobile design on-hold for now, and went back to the sketching board (aka Illustrator) to fiddle with the text and image. Vicki pointed out the interesting composition that resulted by simply rotating the paper 90 degrees! I took this tip and after some iterations (and lots of zooming in and out), I came up with the following two designs during the in-class work period:

Print, Top 2 Designs

After asking classmates, Tiffany, and Vicki for feedback, I observed that their reactions to right poster, the blue, more abstract design was stronger, suggesting that it was the more compelling, perhaps more effective design. I decided to run a test print.

Left: B&W print test | Right: Color print test & context placement

The B&W version was a bit weak, but I was happy the color version and how it stood alongside the others. The bold yellow text and the abstract image seemed to effectively catch your eyes; however the yellow poster in the middle was a strong competitor.

Before the final critique, I made some final edits to the mobile design based on the feedback received, for example, elongating its vertical height to take advantage of the scrolling affordance.

Final Critique

It’s interesting that I observed a similar phenomenon during the final critique. Again, this bold, yellow poster seemed to do super well in grabbing people’s attention first. It makes me wonder whether this is a heuristic that designers use for poster design? When in doubt, use lemon yellow as the background with black font.

Left: Mobile | Right: Print

For my print poster, I received positive feedback on the value of abstraction and experimentation, sideways orientation of the text, and the proportions of the overall piece. As Dan Bonarski(?) said, “One scream is enough.”

Final Edits

From the critique, I did not feel the need to make edits to my poster.

11 x 17 Final Poster

However, despite not getting much feedback on my mobile version, I decided to adjust the layout, especially because the image appeared slightly blurry on the phone screen and the positioning of the title seemed awkwardly placed. Perhaps I zoomed in too much on the bus blur. Therefore, I created a version that was zoomed-out slightly. This led to a more crisp image and displayed a less abstract scenery. However, I also created a version that resembled more of the printed poster to see how it would look on the screen. Once I did, I knew right away that this version had the biggest impact. This became my final mobile design.

Left: version for the final critique | Middle: version after zooming out | Right: final version, resembling the poster

Check out how it looks on the intended iPhoneX here!

Reflection

I did a similar poster project in CDF, but the biggest difference between the two projects was that for this one, we had the option to incorporate an image. I didn’t think that the addition of this one element would impose so many challenges. It was difficult finding the “right” image that reflected the theme of the content, while also being unobtrusive to the text. However, I got around some of these through the Context-Aware Fill feature on Photoshop. This was my first time using this feature, and I think it’s definitely helpful in manipulating stock images to align with your design vision (especially when trying to create solid areas for text). I can see myself using this in future projects! Other key takeaways:

  • “one scream is enough”–one entry point
  • scale/proportion based on the 50ft/5ft/5in rule
  • simple can be powerful (e.g. the triangle, yellow poster)
  • choose your image based on the context of the poster and the intended audience, but don’t be afraid to experiment
  • you never want your design to be “pedestrian”
  • keep in mind unintended communication (e.g. color palette: coral + black = Twilight?)

Week 9–Project 3

Storyboard

For Project 3, we reassembled with our Project 1 team members. Our original theme of PAT continues as we try to create a more visual communicative piece. To start off, we individually created scenarios and storyboards. I have some experience creating them for another course, Interaction Design Overview, but in that class, we were limited to only 4 squares (Context, Problem, Solution, Resolution). I had mixed feelings about having 8– it was a plus to have more freedom to elaborate, but at the same time, I wondered whether I needed all 8. I actually had trouble filling up all.

Week 10–Spring Break

Week 11–Project 3 Poster design

Our group returned to Rhea’s studio to continue working on our poster draft for the interim critique.

Rhea, Eli, Ken @ Rhea’s studio in CFA

Then Eli plotted* our poster by the architecture department.

*first introduced to the term “plotting” and the “plotter,” which is essentially printing with a special huge printer that uses a rolled up sheet (similar to a cash register), so you can hypothetically print until that roll runs out.

We then presented our poster draft for the interim critique and received a lot of constructive feedback, mainly focusing on the lack of white space and design elements aside from the storyboard that signal the content (transportation) of the poster.

Left: printer poster actual size | Right: interim critique feedback

After the interim critique, we went back to the drawing board and created more iterations using the back of our poster draft (going green!).

Left: zoomed out iterations | Middle: close-up of one of our top ideas | Right: idea recommended by Vicki

We received more feedback on our sketches and although we were leaning towards the middle one above, we were nudged to pursue the right iteration due to its clearer hierarchy, especially the linear graphic that signal three phases, which was our intention.


Week 12–Project 4 Competitive Analysis

Project 4 will focus on data visualization (content TBD). Before we get started, I investigated a few that I came across.

http://www.aaronkoblin.com/project/new-york-talk-exchange/

I recently ran into a data visualization by A. Koblin on the New York Talk Exchange. It’s a compelling design and I can’t help but be drawn to it— at face value, it’s neat and aesthetically pleasing. However, even though it captures viewers’ attention, it doesn’t seem to use the best method of conveying the actual content. Do the uncolored squares mean that no one in that region has any contact with the outside world? The list of cities & percentages also seem to get too crowded as it goes down and doesn’t seem to be related to the colored bars that they’re next to which is misleading because of their proximity. I think the description of the data and the visualization should be close enough that viewers don’t have to go back and forth between the description and the visualization. Considering that this was designed for MoMa, people must have highly regarded the design, but I’m conflicted whether I would rate it entirely effective. It seems like I should remember the tradeoff between being clear/simple and making the data simply nice to look at.

http://www.thehappyhypocrite.org/tmobile-data-coverage-maps/t-mobile-s-coverage-is-getting-way-better-in-2017-bgr-interesting-ideas/

My fam and I are in the process of switching over to T-Mobile from AT&T and found this map. I think the three shades of pink were not the most effective color choice because I can clearly see the darkest and lightest shades, but can’t distinguish those from the middle shade. Also, since this is a kinetic display(?), it’s highly distracting that the positioning of the constant elements between the the two images are moving ever-so-slightly. It would have been more effective if only the elements that are changing are changing, and those that are the same like the legend, stay static. If anything, I think it does do a good job conveying that there’s some coverage nearly all across the country, which was most likely the intent of the data visualization.

http://www.cannongroupinc.com/blog/an-lte-comparison-infographic-att-sprint-t-mobile-verizon/

Looking at these maps, I can clearly see that AT&T has more “LTE sightings” than T-Mobile. But what is “LTE sightings”? Is that the same as coverage? In this case, it may have been more effective to make this display interactive so that viewers can toggle which services to see on one map and directly compare between them. For example, I would have liked to see the AT&T and the T-Mobile coverages on one map to see where they overlap. In such a design, the dots could have reduced opacity so that the dots don’t entirely cover the ones below, and the overlap can be seen clearly.

Tazza @ Gates

I coincidentally ran into this image as I was walking and it made me stop and take a closer look. Upon looking at the details, this seems more like an information visualization(?), categorizing the items as-is through a circular visual hierarchy, rather than a data visualization, which seems to incorporate some numerical significance in its display. I wonder if I’m on the right track?

Week 13–Data exploration

Abstract/summary

Is there a relationship between race and income?

I plan to use the population_density and education_income datasets to explore race composition (% by neighborhood) and income (2009 median income by neighborhood).

I will create a visual narrative through an interactive map, using the map to distinguish between neighborhoods, a color gradient scale for income levels, and another visual element (maybe color or symbol) for race. Viewers will be able to see the Pittsburgh neighborhoods on the main page and can click on each neighborhood to zoom in and see specifics. If this doesn’t seem necessary, I plan on making a simpler, static visualization (possibly a bar graph with race on one axis, and average median income in the other) so that viewers can see the overall relationship between race and income (without distinguishing neighborhoods).

This can be shown in popular online platforms like Facebook and Twitter to spread awareness that “systemic racism” is still pervasive in our society. Through the word of mouth, it may potentially reach policy makers who hold more power to propose initiatives to fill in the gap, possibly increasing funds toward financial education in more heavily affected neighborhoods.

Draft Plan

4/4 (R)–Summary and plan

4/9 (T)–Present abstract & competitive analysis

4/16 (T)–Work session (have rough sketches for feedback)

4/18 (R)–Sketches due; work session

4/23 (T)–Work session (feedback before prelim review)

4/25 (R)–Prelim review

4/30 (T)–Work session (make edits from feedback)

5/2 (R)–Final review

Week 14–Abstract presentation feedback

After receiving some feedback over email, I decided to add another variable, gender, into the mix and refined my question to

What is the relationship between gender, race, and income in Pittsburgh neighborhoods?

Using this question, I made adjustments to the above abstract. I presented my idea and received more feedback outlined below:

Feedback received from abstract

I realized that even if I use the given data, I will have to data mine (which I wanted to avoid). This made me more open about the scope of this project (not only focusing on Pittsburgh neighborhoods). I decided to resume breadth exploration and see what other questions I can ask and what datasets I will need to answer them. I am considering questions such as

Does the “stress culture” at CMU exist (sleep rates compared to other universities)? How has the legalization of marijuana in certain states affected its use rate and use-related accidents? In what ways does exercise make you “healthier” (physically, psychologically, spiritually, professionally, etc.)? What makes Finland the “happiest” country? For undergraduate students who switch majors, are there patterns in where they switched from?

Week 15–Breadth Exploration continues

I continued exploring other topics, beginning with sleep. I was interested in seeing how many hours students sleep across other universities, and how that affects factors like mood, academic performance, and mental health and how such trends changed over the years. I came across many papers and articles relating to the subject, but they either consisted of using percentages obtained in previous research to highlight the issue or reported results based on too specific samples like “urban Midwestern university” or Dartmouth. I was looking for raw datasets in xls or csv files to visualize either national, general trends across university students or CMU students, but those do not seem to be publicly available online, perhaps because they are not (and cannot be) formally measured unlike more concrete factors like national income, poverty levels, etc.

https://www.tuck.com/best-colleges-sleep/#additional_resources

There was one data visualization that caught my eye (above) comparing the weekday bedtime across U.S. universities, taking account their national ranking. Unfortunately again, the raw dataset for this was unavailable. It seems like the company that produced this is no longer running either.

Tl;dr–there are lots of information out there, but limited raw datasets.

From reading papers and articles relating to sleep, it seems like sleep has a close relationship to mental health.

Vicious cycle of a student

I tilted my direction towards this topic and this time around, I generalized my search rather than fixating on a specific type of data. In search of mental health, I came across the World Health Organization (WHO), which provides datasets that can be downloaded on many health-related factors like mortality, disease, violence, substance abuse, and mental health. Their measures of mental health revolve around suicide rate and available government support in mental health ($, legislations, policies, plans). I began sketching here.

Initial Sketches Part 1: more traditional styles
Initial Sketches Part 2: more visual

After receiving both TA and peer feedback, I am leaning between the map and the doughnut visualizations. However, I am wondering how I can more visually represent the topic which is relatively heavy and serious.

image creds: https://hbr.org/2018/10/ais-potential-to-diagnose-and-treat-mental-illness / idea creds: Tiffany

For the doughnut one, I am thinking about positioning the graph in the brain region to symbolize that suicide is highly related to the mind.

Sketch gif version

BUT………………… this topic is so heavy idk djkafdka;fnawiejwoa. I’m not 1000000%. I will definitely think more about it this weekend.

With that in mind, I explored more potential datasets and came across the CMU IRA (Institutional Research and Analysis). They have tons of datasets about students and even run some of their own brief studies. There was one in particular that involved sleep data which was my original desired topic, but the study was only run for one year. It makes comparisons with a past study from 2013, but those datasets are unavailable online. I emailed them for more information, but was told that they do not provide data for individual projects. Similarly, I emailed other people/labs to request datasets on some of the other questions that I wanted to explore, but had no success.

Dataset Request on CMU Major Changes (CMU IRA and CMU Admissions)
Left: Dataset Request on CMU CaPS | Right: Dataset Request on New York Talk Exchange (from my competitive analysis)

After these attempts, I decided to move forward with suicide rates.

Week 16–Digital Iteration + Informal Crit

Even though I was leaning more towards the doughnut idea, one thing that Tiff questioned really struck me–why are you using a pie chart? I think I was influenced by our physicalization exercise a few weeks back. The multi-layered doughnut allowed Anna & I to go more into specifics within a whole, which seemed highly appealing compared to the typical 2-dimension matrix that I always use.

Physical data visualization exercise from several weeks ago

But I began thinking back to what Tiff said and I questioned, why did I decide on a doughnut chart? I never really thought about it, but I think I did so because it was visually appealing. However it’s important to remember the nature of pie charts–they function as a mode to display pieces of a whole. What whole was I trying to represent? Top 10 countries with the highest or lowest suicide rates are only a small fraction (14% and 1% respectively) of the entire world’s total suicide rate. I thought this was important to display (to prevent overdramatizing the data) so I added a pie chart that represents the portion of the data that I am diving into, and reformatted the information that was previously displayed in the doughnut to a more traditional chart. The layout allows for viewers to clearly see comparisons between the countries with the highest and lowest suicide rates by being able to see all the information on one screen.

I analyzed and incorporated the following datasets in my first digital iteration of my data visualization: suicide rates, alcohol consumption, government mental health support.

Organizing data using Google Sheets
Left: first iteration | Middle: second iteration–added in mental health data and rearranged to create a clearer flow | Right: feedback

I received a lot of feedback on the above design that it was too too too much. In hindsight, I feel like I was biased from the beginning about the data I was working with. I already had preconceived notions that I thought I would be visualizing, but the data kept proving me wrong when I compared them against each other. While an info graphic has an intention/specific message to share, data visualizations should display objective data, allowing viewers to make their own interpretations.

What makes certain countries have higher or lower suicide rates? It seems like geography plays a role, and some articles suggest that alcoholism or religion or atheism also play a part. From my data exploration, it’s difficult to say, but I think that’s okay. My purpose isn’t to show a specific pattern, but to show data and have viewers interpret it.

My next steps will be to subtract from my current design to more clearly display the analyzed data.

I began exploring other color palettes in search for one that seemed appropriate to this serious content–a more toned down palette.

Based on the feedback received, I decided to try digitizing the gif above, starting with creating a pie chart for the continents. Then I added the countries on the outer layer, making sure the slice lengths were proportional to their relative suicide rate by using the lengths made from a bar graph created in Google sheets.

Pie chart process

Then I rearranged the continent slices to map it to the actual world geography as closely as possible (using the world map in the center with countries labeled). After, I masked each countries’ flags to each outer slice.

New digital iteration direction: concept from gif above (working progress)

Then I inputed the chart in the brain. This time around, I decided to keep the background simple to keep the focus on the pie. Is this still too infographic-like? Are comparisons not apparent?

Week 17–More iterations upon feedback

For the above iteration, I received the following feedback:

  • Consider moving map out; too much clutter right now
  • Head = non-representative; suicide is not an individual problem
  • The black head and background reduces the contrast of the doughnut (better on white background)
  • Need a clear title
  • Clarify “Asia+Europe”
  • May consider a click-through model to show changes over the years (change in size, countries, etc.)
  • The title should be representative of the content; data visualization doesn’t need to straight-forwardly illustrate it (like using the head)
  • Where is the comparison?

Tl;dr = it’s too much, need to simplify

Taking these into consideration, I made some adjustments. Upon research, although the top search result from Google lists Kazakhstan and Russia as spanning both Asia and Europe, the United Nations lists Kazakhstan under Asia, and Russia under Europe so I decided to use those labels. Title TBD, so removed for now.

Left: removed background, head, and map | Middle: Increased color opacity to lesson flag impact | Right: changed colors for more contrast (warm colors = 3 countries in top 10, cool = 2 countries)

But I still had mixed feelings about this so I went back to the drawing board.

Note: there are some unknown color transition problems…

I think this (very rough) layout displays comparisons more effectively. I also incorporated income levels to make it multivariate. From this, a viewer can clearly see that:

  • Countries in North America and Australia are not within the top 10
  • Those in the top 10 are in the medium/lower income (gross median household income) groups (with the exception of South Korea)
  • Africa and Europe have 3 countries each, together consisting of 60% of the top 10
  • Countdown to top 1 (but this may perhaps may be inappropriate and insensitive here)

But from this display, the following are lost:

  • Comparison with the world average

I decided to combine both of these ideas into one data visualization. However, I removed income level because although it does provide an interesting insight, I think it becomes distracting in the overall purpose which evolved into: to highlight that the reasons behind high suicide rates are complex and unknown, but there seems to be an interesting pattern involving geography and a lack of awareness of those countries that are suffering the most.

Why is North America and Australia not among the ten? Why did I assume USA and Japan will be among the ten? Why did I assume Asia will be overwhelming the top rates? Why have many that viewed my visualization never heard of the countries with the highest suicide rates, like Guyana and Lesotho?

Through this visualization, I want to make a comment that suicide is a global issue, but people (including me) only see problems within their vicinity–those within their culture and country. We are often too highly focused on our inner circle that we don’t realize or become aware of others that are more highly affected and suffering.

I learned that I have been so highly focused on me and those around me, but we should broaden our awareness and empathy. Before empathy, awareness comes first. We need to spread awareness that more than 800,000 people are choosing to end their lives yearly worldwide. This is more likely an underrepresented number due to the fact that suicide is illegal in certain countries. People are suffering and we need to know why.

https://www.who.int/gho/mental_health/en/

I think there needs to be more research on the causes of suicide and more education especially in early education so people learn from a young age to cope with strong negative emotions, can identify those who are suffering, and slowly eliminate the stigma against seeking help.

I have personally witnessed several loved ones go through such struggles, which is probably why in hindsight, I felt motivated to continue on this data visualization even though it was not my original content of interest.

Refined Abstract

Research Question

  • Exploration: How does government mental health support, alcohol consumption level, income, and geography affect suicide rates?
  • Final: How does geography affect suicide rates?

Variables

  • Suicide rates in 2015* (by country, top 10 average, world average), continents, countries (with ten highest suicide rates)

*I used 2015 for my data visualization because my original intention was to compare the trends across 2000, 2010, 2015 (10 year gap, 5 year gap), but mainly due to time constraints, visualized only 2015. WHO had limited public data for suicide rates (2000, 2010, 2015, 2016).

Visual Narrative

  • Using color, form, and contrast in an interactive display, visualize how the highest suicide rates are clustered on a map.

Purpose

  • Above spiel & quote.

Audience

  • Everyone of all ages and backgrounds.

Location

  • Social media (optimized for web browsers)–effective platform to spread awareness to a wide range of people.

One of the final steps remaining was to choose an appropriate title. I had four in mind, but they were all quite lengthy. That’s when I received a short, yet impactful suggestion by Vicky–Global Suicide.

Narrowing down on a title

I thought it was perfect so I decided to go with that, with “Which countries have the highest suicide rates?” as the subtitle.

Week 18–Final Critique

The below gif shows the five screens that I displayed for my final critique. This was displayed on the iPad and the clickable interactive version (created via Adobe XD) was displayed on my laptop in which a viewer could click through the pie chart to view each continent and its countries in isolation.

Final critique: gif displayed on iPad
Final critique: click-through displayed on Macbook + prints of my process

Critique feedback → edits

  • Can’t recognize flag and the country names are difficult to read → I decided to remove the tiny country labels from the pointer and create enlarged labels using lines, only visible when one clicks on the pointer or continent
BeforeAfter, edits highlighted in teal box
  • Can’t read the blurb on the bottom right; text is too small → Enlarged text size and right-aligned (was a bit hesitant since we’re drilled to left-align, but I think it was an appropriate situation to do so)
BeforeAfter
  • The little piece of Russia on the left is distracting → Hid this piece to create continuity (unfortunately it was a bit too complicated to move it to the right side on all the screens due to bad-layering-practices)
BeforeAfter
  • What about USA? → Added an overlay text box describing that North America and Australia are not within the top 10, appearing when a user clicks either continents on the map
Added overlay
  • Datasource? → Nobody asked where the data came from, but I wanted to create an external hyperlink to WHO in case someone wanted to find out more. However upon research, found out that this feature is currently unavailable and under review for XD

Not a feedback but an interesting comment that I got from a student visitor: he worked as a research assistant in a lab that investigated suicide and one insight he shared was that the lab noticed how the data collection methods for suicide rates have been consistent throughout decades, and the big question is, how can we improve it? I definitely see opportunity to improve data collection methods for mental health worldwide.

Final Deliverable

The final version is an interactive click-through data visualization made using XD. Check it out below!

Warning: The link below will open in the current window (working on figuring out how to open in a new tab)

Final deliverable: individual screens

Project Reflection

This project turned out to be an unexpected journey with many twists and turns. I switched my topic several times especially when my assumptions about the data were constantly proven false. Throughout this project as I was creating design iterations, in parallel, I was also constantly looking for other, new datasets that I may potentially decide to pursue (this topic was a bit too heavy so I was always hesitant to commit). To look for datasets, I mostly used Google search, but was introduced to Kaggle, a website with all kinds of datasets, by Ken, midway into the project. This ultimately split up my time between design and new dataset-search when it could have been invested all into one data visualization. I think my biggest takeaway is to explore extensively in the beginning, but at some point choose and commit to a direction, rather than continuing exploring.

I didn’t want to fall victim to the sunk cost fallacy, but realized the importance of quickly finding the balance between exploration and time constraints.

The next steps for this project would be to show more comparisons. This may include adding how suicide rates have changed over the years and maybe even compare it side-by-side with countries that have the lowest suicide rates, similar to my earlier sketches. Overall, this project was definitely the most challenging, yet rewarding projects this semester. I now have a clearer understanding between infographic and data visualization, which before, thought were interchangeable.

Course Reflection

Thank you Vicky for admitting and welcoming me into this class in the middle of the first week of classes. I was hesitant at first, but the lively and safe atmosphere that you set definitely nudged me to stay. I gained practice with fundamental design skills, reaffirmed the necessity of feedback for an iterative design process (special thanks to TAs Tiffany & Tammar!), and got to work with great peers (special thanks PAT team & my physicalization partner, Anna!). I will carry on what I learned from this class when working on future projects.

Thank you for a great semester and have a great summer! 😊

    Yoo Jin Shin

    Written by

    The works below are my first steps venturing out into a whole new field.