Information Design (51–236)
Week 1
First Day of Class
Right off the bat (even though just the other day I was itching to finish up and graduate), I am so excited for this class. As an Information Systems major and HCI minor, a lot of my primary focus is on people, and how technology and processes are able to aid people. Design is like the missing piece to this equation.
I was so struck by the empathy video that was shown. I have often reflected on what it means to empathize, what is the best way to express empathy, when does empathy become projecting, when does truth accompany empathy to be the most effective way of encouragement — so this video was able to summarize so many of my thoughts. I even sent it to a few people who I have had conversations on empathy with and struggled with compassion, and they likewise shared it with others. To think that something I am so passionate about is the center of design-thinking is very exciting to me.
The first thing I thought of when we were assigned to go to our various food venues was “oh no, not another ethnography.” We completed one for our capstone project course, and my group members were so bored that we really only observed for 20 minutes out of the required 3 hours. I’m hoping to be much more intentional this time around.
Week 2
Observations
I was kind of unsure what we were exactly supposed to be looking for, but I’m sure that was the point of the assignment: to objectively observe and to later piece together any conclusions based off of them.
Our group decided to split up based on location and observe different parts of the library. I happened to wander up to the 2nd floor in the music department, which was quite a delight to observe. There were computers, books, sheet music, CDs, DVDs — many things to play with and interact with. I even played the piano for a bit, and was pretty impressed by the sound quality.
On my first day, I was overall pretty impressed by the library design. There were enough outlets near desks, many signs to inform important facts, and the librarians were constantly making sure that people were able to find what they were looking for.
On the second day, my observations continued, but also got a chance to interview Will and Kirby, and the latter worked at the library for the last 40 years. We had a very informative and moving talk about the library now — its purpose despite the changing culture, the changes that technology brought, and even the library architecture.
There were many observations that I’m excited to document and to sort through, and I’m glad that my worries about not being able to find anything or being unsure of what to look for are more or less calmed.
Week 3
Practice Presentation and No Class
I was actually pretty nervous for the presentation. Our group members are pretty busy so we had a lot of things juggling while assembling different pieces, but it all turned out pretty decently, and ultimately I was glad that we had the presentation (and wish that we were able to do a bit more) because we got some great feedback that would help us for the final presentation in front of our stakeholders.
As we were discussing with the PAT group and continued to look at our slides compared to the other groups, we realized that one of the library’s core issues / opportunities is the fact that it’s a public facility that tries to serve the needs of everyone in the community. We decided to go the breadth route, while the PAT team decided to go the depth route, and chose a very specific stakeholder type. I think this information and observation will be very helpful when continuing our synthesis.
Lastly, this weather and the fact we have no school and the fact that I’m a part-time student and the fact that I just dropped a class is making me feel maybe too relaxed. Time to step it up a bit.
Week 4
Presentation day
Our group felt pretty confident going into our presentation, having made sure to cover the library and both breadth and depth. While I may have been slightly disappointed that we weren’t able to provide that many innovative / feasible solutions for the library (which pictures of I currently can’t locate), I am happy to hear that our research aligns with that of the library’s.
Leah later caught up to us after class and was very excited to chat with us a bit more. I shared that I had a great conversation with Kirby, and she shared that apparently if you whistle any classical song to him, he would be able to guess the song name immediately. We each took a business card and hopefully will be able to see her in a newly designed library soon.
Karen’s fun design exercise
We had the pleasure of doing a fun design exercise that involved categorizing and organizing tools and utensils that helped demonstrate the familiarize → development → refinement process.
I volunteered to do the familiarize part of the activity because I think I enjoy doing that the most — making sense of the things before me before doing anything with it. I felt kind of nervous trying to make sense of things I didn’t know — wasn’t sure if I could ask Karen or not. I also started getting sort of impatient when we began to run out of time and we still weren’t sure what the overall plan of organization was. I suppose this revealed to me that collaborative design is effective, but also takes time and effort to go through all the stages.
I actually am not as fond of the refinement stage as most people. Maybe this will be something that I will learn to develop through the course.
Week 5
Poster re-designing
We actually didn’t realize we were supposed to take aspects of the good poster and use them for the not-as-good poster. I don’t think I was particularly satisfied with our product (probably the trade-off of collaborative work requiring time and effort), especially because I think the hierarchy got a little fuddled and confusing as we started to design the poster.
Exercises 1–4
I felt like after my first line-spacing product, I really had no other way to design it. But after some playing around, I realized that sometimes the last one that I created would be the one that I would find the most effective.
The mobile screens (like everyone else) were kind of funky because of the suggested 7pt size, so I just used 20pt font size to make it more legible in Adobe XD. As of now, there isn’t much difference between these and the posters.
Week 6
Exercises 5–7
When going into this exercise, it made me think more about what kind of information I wanted to emphasize. Echoing what we discovered in class, I decided that of all the information on paper, I wanted to bring out the titles of the events and “February Teen Events”. Interestingly, however, these were the iterations that I created last for each exercise.
Color
I had no idea how to begin experimenting with color, so I created many iterations and chose pink as the main font color because of “February.”
Week 7
Images
I found 3 images — one with a heart with lots of negative space (playing off of February), one with a person with a book on her face, and then another with a person reading a book amongst some shelves.
This being the first time I was designing a poster, I began with the heart poster and threw on the hierarchy that I thought worked best in my previous exercises, along with the color that I experimented with in my color exercises. From there, I only continued to iterate — probably around 30 times, being that I just had no idea what I was doing.
Looking back at my first iteration, my text (especially for the event name) was definitely way too large, and the alignment of my events was not working well. It was difficult orienting the heart in a way that I wanted.
I next fooled around with the “book on the face” image, making it black and white first because there were so many colors. In the left screenshot, I tried various orientations for my image. At some point, I decided to re-examine the original color of the image, and thought the colors in the image and the text colors went well together. I thought that this iteration was okay, but did not complete the mood I was necessarily targeting.
This one was more of a silly exploration (a lot of these ended up looking like funky movie posters), but ultimately the legibility was minimal and the blocks of text were not productive to communicating information.
Final
After Vicki’s comments on my iterations in class (text too big, side text not working well, liking the heart image better), I decided to go back to my first image and to play around with it more.
I found a nice orientation for the image to tuck my text within, and changed my pink color to red in order to match the red heart. Another piece of feedback I got was that the black of the category names drew eyes to the names first, so I changed it to a gray and capitalized + minimized the font to draw eyes to the red titles instead. Another piece of feedback I received was that I could change my font to a softer font, such as Avenir. Lastly, there appeared to be a lot of tension between my image in the text, so I adjusted it a bit to allow for some breathing room.
My mobile version looked almost exactly the same as my poster (which Vicki actually thought was almost passable), which I will also modify for my final upload.
The left displays my attempt at printing it out to look at the color, but clearly the printer was not happy.
The right is my crumpled up poster after class hanging on a bulletin board. Asking some people where they gaze directed to first…unfortunately was NOT my poster (as also pointed out in class), since most of my poster was white/off-white. Their eye directed more towards the Ballroom poster and “Dvorak’s Seventh” poster.
If I were to redo this assignment, I would probably choose a more colorful image / background to iterate off of.
Week 8 (oops didn’t do this week)
Beginning project 3
I did do a good amount of sketching and painting before college, but I’ve mostly had a knack for abstract / impressionist art, and not so much fine-tuned images. I found that practicing drawing people was actually very rewarding, as I often have trouble being able to portray people in quick sketches. It also helped being able to experiment with the different dimensions of shapes and cubes.
(Yikes, I accidentally threw out my post-its)
I decided to do the navigation app for the library as well as the collaboration room. I chose to do the app because it was rather related to my major (Information Systems), and would’ve had an interesting storyline to portray it. I found myself really milking a lot of the technological benefits, which made me grateful for the interdisciplinary discipline I was receiving. I chose to do the collaboration room because it seemed to be one of the most feasible and beneficial solutions for the library.
Week 9 (now we’re on track!)
Group project portion of project 3
I wasn’t in class before spring break due to some issues, but my team chose the collaboration room solution, which I thought was very appropriate.
We did some brainstorming on how it would look like. We had a bunch of ideas going around, which included:
- Collaboration station as the name — related to trains of some sort, which could tie back to Pittsburgh and the library’s history
- Cute storybook / comic book-like visual
- Emphasize the storyboard and different-sized panels
We split up our work accordingly: one member does the sketches, I complete the text/presentation script, and two members make iterations of posters. However, two of our members ended up having a difficult week and missed out on some meetings and class, so the sketches we had were rather rough, and our resulting poster was a combination of our two members’, which ended up looking rather messy. At this moment, we’re a little lost on how to continue without the presence of our members, so we’re just thinking how to revise our poster based on the feedback we got in class:
- Pick a better background image / space-oriented
- Revise hierarchy and typography
- No sideways title
- Storyboard is not coherent / organized
However, I think the text and persuasive argument we had was rather clear.
Week 10
Presentation was great — but here are the visualizations asked for!
Effective:
- 4 different types of data able to be displayed (% budget recovered, average critics %, budget size, genre)
- Circle size useful for comparison
- Interprets the % budget recovered (flop, break even, hit, megahit) which helps decrease mental effort
- Can easily see trends (for example, very few movies are hits that receive low ratings)
- Able to pinpoint that the bottom left quadrant is considered more of a failure and the top right quadrant is considered more of a success
Ineffective:
- Colors clash and don’t create cohesive color theme, especially with the light blue-gray blends into background. Doesn’t go along with the tone of movies.
- Probably should have added y-axis markers for the movies off scale (120% is okay to chart as well)
- Y-Axis description was hard to locate because it’s in the same alignment as the other buttons
Effective:
- Structured like a timeline, which helps adapt to the user’s mental model
- Different colors correspond to different activities
- Aligned right on top of each other for easy comparison
Ineffective:
- Could have added more visual cues (bike for exercise?) to differentiate easier between the colors; or picked colors that corresponded better to the activities
- The names overlaid on top of the bars seem to become one massive blur and look rather squished, adding to the cognitive load
- Conclusions can be more compelling and “go big or go home”
- Right now, it’s ordered by who gets up the earliest. Something more effective might be order by famous person occupation.
Week 11
(Pictures of physical data exercise to come!)
Project 4 Dataset
I was looking into the Pittsburgh education datasets because I have affiliations with a non-profit called The Education Partnership that makes me relatively passionate about education.
HOWEVER, something that I would be really excited about (like, adrenaline pumping through my veins, tell everyone that I’m doing this, share it widely after I finish this) — is the different characteristics of members in one of my organizations.
Project 4 Abstract
Although I wasn’t sure about how useful this data might be, there are a few answers and impacts this data might have:
What questions might the data answer?
- What kind of correlations are there between different personality types and majors?
- How many different combinations of traits exist within this group?
- How common is your particular trait?
- How do the results of our group (consisting of mostly being Asian and Christian) compare with the general population?
What kind of visual narrative can you construct?
I can imagine the visual be an interactive system (pie charts, bar graphs — maybe some other illustration that I can think of) in which users can explore in depth the different ways their personality types (Meyers-Briggs, Enneagram, Spiritual Gifts) might manifest and correlate with each other. Through this, I hope that the narrative of it might be to display certain patterns within the group as well as highlight the group’s unity in light of diversity.
In what scenario/context would the visualization be seen?
The context would probably be through a link posted online or via email, sent to members of the organization and later shared with their friends.
Who might the audience be?
The members of the organization, affiliated organizations, and friends of these members.
What impact do you want to have on the audience (convince, stimulate, educate, etc.)?
Some basic keywords: Stimulate, Encourage, Entertain
ACF studied 1 Corinthians 12:14–21 during one of the retreats based on the theme of the year (ONE):
“For the body does not consist of one member but of many. If the foot should say, “Because I am not a hand, I do not belong to the body,” that would not make it any less a part of the body. And if the ear should say, “Because I am not an eye, I do not belong to the body,” that would not make it any less a part of the body. If the whole body were an eye, where would be the sense of hearing? If the whole body were an ear, where would be the sense of smell? But as it is, God arranged the members in the body, each one of them, as he chose. If all were a single member, where would the body be? As it is, there are many parts, yet one body. The eye cannot say to the hand, “I have no need of you,” nor again the head to the feet, “I have no need of you.”
The speaker at this retreat mentioned how based on how many Meyers-Briggs personality types, Enneagram types, Spiritual gift types, genders, ages, races, experiences that can exist in one congregation, likewise, the roles that everyone plays is unique. Since then, the fellowship had been going through a phase of investigating such data, so I’m sure it would be a great learning experience for them.
Project 4 Personal Schedule
T 4/9 have complete data collected
R 4/11 brainstormed different ideas for sketching
T 4/16 have sketches in progress
R 4/18 have completed sketches, begin digital visualizations
T 4/23 digital visualization drafts in progress, begin experimenting with interaction
R 4/25 have some visualization + interaction drafts near final
T 4/30 hopefully have near final prototype
R 5/2 final review
Week 12 (I slacked on my blog again)
For my first sketches, I was experimenting with the different visual narrative ideas that I had:
- Let the viewer input their personal data, and data visualizations can be generated in comparison.
- Take someone through a journey of breaking down the feeling of insignificance in the organization and walking through how unique every individual.
- Do both!
However, I thought that some of my design was perhaps too infographic and thought of something perhaps more complex that would combine the data in a unique way rather than walking through all the different data.
After talking with Vicki, however, there were 2 main things I began to consider from my sketches:
- To consider toggling
- To evaluate whether or not its bringing someone into the body or making someone stand out from the body
Week 13 (which I also slacked on)
Considering this, I had an idea of how I wanted to design and create my visualization. I decided to try and combine both visual narratives and create a personal quiz portion which would lead into a more complete narrative of the member, which includes animation of toggling different categories that would bring certain members in and out of focus. I also decided for the members to be color-coordinated by Enneagram, which I think is an important and accurate distinction amongst the members.
There was some feedback given:
- Change Enneagram square (which is not illustrated because I did not screenshot it, whoops) to a Enneagram circle to match the configuration around the other categories.
- Change every single Myers-Briggs label option to individual letters (which is also not illustrated here as I had changed this).
- Change the dots to something more meaningful to ACF.
- Lessen the saturation of the dots that are faded in the back.
- Make the text in the spiritual gifts buttons bigger (which I also already did — maybe it’s still not big enough).
For “more meaningful dots,” only 3 possible symbols came up: cross, fish, and person. I feel like cross and fish are really tacky, so I tried to visualize what a person would look like.
I think I would like to stick with the dots, because the other symbols are just too clunky to play around in this manner.
I also decreased the saturation of the faded dots, and the difference is still kind of subtle, but I will also incorporate the feedback.
I also began to code it, because the data was just too interesting. It’s not good-looking right now, but hopefully it will be.
So far, it’s been really fun handing off this website to members of the fellowship as they try to single themselves out while also finding who is the same as them while also trying to single other people out. Seems like my visualization is already doing its job!
Week 14
Feedback received in class critique on Tuesday:
- Very polite — make gray bolder
- What is my color scheme?
- Colors draw a lot of attention to the enneagram
- Spotlight — only scale or opacity
- Which enneagram type is which? Do they know?
- Ask ACF for critique
Very polite — make gray bolder
This was an easier fix that hopefully increases visibility and interactibility.
What is my color scheme? // Colors draw a lot of attention to the enneagram // Which enneagram type is which? Do they know?
Regarding the last piece of feedback — it’s popular enough in my fellowship now that people are beginning to know the different types and research them. I feel like if I need to label each enneagram type, the same would have to go for the Myers-Briggs (which I also spelled wrong), so I think I will keep the coding as it is.
Spotlight — only scale or opacity
(Reverting back to the original rainbow scheme for this out of simplcity sake)
Ask ACF for critique
- The people I did ask did not have any strong opinions whatsoever — I think because they care more about the data than the actual visual aspect of it.
- I will ask some designers — coming soon! It was a busy week for a lot of members so will hopefully get around to it ASAP.
Week 15
More feedback:
- Rainbow one looks nicer (hehehe)
- Coding features possibly could help (more differentiated headers + ordered dots)
- Buttons too close together, make outline lighter
- Un-hyphenate buttons
- Title: “Many Members, One Body — How does a member fit within the greater ACF body?” // Asian Christian Fellowship put somewhere
- Review alignment
- Consider hovering
Overall, I was told that I can just pick a direction and go for it at this point, since my explorations have been satisfactory. I agree! I’m excited to begin coding.
After considering the feedback concerning my toggle buttons, I came up with this:
Afterwards, I began to experiment more with the way things were aligned.
Radial/Clusters
Vertical straight lines
After user testing amongst some members, they commented that they liked the clusters better than vertical straight lines, but would like to see the straight lines horizontal first.
Horizontal straight lines
Arranging the dots into horizontal rows gave me an idea to add another data aspect to my visualization:
When user testing this, they liked the horizontal rows better than the clusters and vertical lines and the extra information that it gave. However, they (and I) still really liked the big group cluster, so I decided to keep that, but organize everything else into horizontal rows when items were toggled.
Current prototype (please excuse the weird button animation that happens sometimes — not sure how to fix it. Also, the animation is really slow right now):
Final Project 4 Deliverable
The biggest piece of feedback I received during the presentation was that I did not provide enough context for those who may be unfamiliar with the Enneagram and/or Myers-Briggs.
After making those adjustments, here is the link to the deployed website: https://alinayu8.github.io/ACFVisualization/
However, the current website does not meet the design standard I wish it could have because I was not able to code enough / debug some issues to fulfill some of the lacking or missing features as listed here:
- “Explore the community by using the filter on the left.” — is not formatted correctly
- Difficult activating hover over the enneagram circle image
- The dot representing “you” blocks the dots in the row below it from floating completely to the left
- Did not implement diagonal movement
- Did not create 3 rows that correspond with the different parts of the enneagram circle (as portrayed in the prototype)
- Sometimes, the dot representing “you” jumps around
- There’s a bug with the spiritual gifts where all the gifts are listed sometimes (and that’s not my intention)
Regardless, I hope to brush up on the application past my submission even more to present to my community.
