Designing Communications for Interactions Studio: Project 2

Featured Alumni: Victor Ng

My alumni that I get to “investigate in depth” is Victor Ng, and I’m excited. I have been reading about his work since before I even applied to CMU: he stood out as one of the first and youngest designers I’d seen to use their work for social change. As I started to research him for this project, I learned more about how much ethics and social awareness inform his practice.

First off, I got some background information about him from the survey questions he initially filled out. These are some highlights that stood out to me:

  • There is a lot of potential to use design to reshape our civic lives. He pointed out how poorly the first rollout of healthcare.gov went: good design could fix this

2/12–14: Diving deeper

Now is a time to take a serious look at my alumni and the a designer that I can connect to him. I didn’t immediately want to pair Victor with the designer he said most inspired him, but Tibor Kalman is a really interesting guy and I ended up spending a lot of time learning about his work. Kalman was a really interesting person who influenced a lot of the graphics and visuals we see today in advertising and editorial illustration, but very few people know his name. He was the editor of the magazine Colors, published by Benetton, and I discovered a lot of the early issues are scanned and published online. It’s really interesting to look at.

Very purpose driven design. Very different from popular magazines at the time.

I’m starting to get a sense of Tibor’s graphic style. I see it in the clever Colors logo:

Smart.

I did notice a parallel between Kalman and Victor: they both are interested in designing for service, particularly people with disabilities or just varying backgrounds. They demonstrate empathy for the diversity of their users. Victor, for example, was part of the team that implemented expanded gender options for Pinterest users. Kalman’s color magazine accommodated a global audience by combining 2 different languages in one spread about HIV.

Kalman’s work, and Victor’s.

In class, we went over a set of spreads created by past students on renowned communications designers. We were mostly looking at how the actual writing was structured, and then how the spread was organized to accompany this. I found it challenging to not immediately critique the visual elements on these pages. I noticed that many of the narratives were organized around a timeline, with most of the transition between paragraphs guided by the main influences on the designer’s life. The spread I specifically analyzed utilized a graphic timeline that paired global events with the designer (Seymour Chwast)’s life events. It seems like an obvious addition, but it was helpful. I’m not sure if I’ll want to use something similar, or turn this narrative more on it’s head.

Also in class, we explored a set of interactive webpages. Some were very well executed and interesting to use, and gave me a lot of inspiration for what I’ll be trying to incorporate in the interactive version of this site. Specifically, Alice and I looked at “Places of Intimacy”, an anthology of 30 stories describing intimate relationships in different places, sponsored by the condom company SKYN. I was drawn into the site mostly because of the combination of immerise imagery/graphics and the scroll function in order to navigate. I’m jotting down all of the little interactive elements I like to remember later.

Speaking of collecting things, I’ve begun the process of physically mapping out the parallels between Victor Ng, Tibor Kalman, and myself. I’ll be honest, it felt weird to place myself on the same sheet of paper as these two.

Right now just scattered thoughts, but I’ve already found some affinities between the three of us.

2/14–2/18: How to visually represent a narrative

I’ll admit, I came into this process thinking I understood it well: I have written a fair share of essays and short stories in my lifetime and therefore have brainstormed a lot of outlines. But I don’t think I’ve ever approached this by first jotting down key characteristics and then physically moving them around to explore sequence. I kind of wish I could go back to my high school self and tell her to try this out for her next newspaper article.

I got a book on Kalman from Stacie, and there was a lot of helpful information in there. I keep learning more and more about what a game-changer he was, and now I gained a better sense on his perspective of the role of designers as well. He was very against ego (although I suspected he still had some. While working at M&Co, he called himself the “Aesthetics Overlord”).

This weekend I was using a lot of sticky notes for a bunch of other projects and I was getting unorganized and confused, so I switched to the computer for awhile. I wrote down some of the key characteristics, quotes and facts about Kalman and Victor and myself, and then organized back into stickies that I could play around with some more.

I really struggled to fit myself in there. I need to revise.

2/19: Representation

Although still focused on the narrative, I am beginning to shape my research and exploration by both the literary elements and the visual components. I am going to be designing both a static zine and an interactive mobile version of this site, so understanding how these two elements combine will be crucial to the success of my final artifacts.

In class we talked a lot about representation. I especially wanted to remember the difference between a sign and a symbol: a sign is something from which we encode meaning, such as the spelling of the word cow. It doesn’t look like a physical cow, but we know it to have this meaning because we have an agreed upon representation of this. A symbol is non-linguistic: it is still agreed-upon, but it is often more related in form to the thing it is describing.

A lot of these themes we’ve been looking at in the past week all have to do with a user’s preexisting understanding of representation, and how much choice you would like to give a reader as they read or interact with an artifact. In the context of my own project, I’m thinking that finding an interesting way to communicate both Tibor and Victor’s passion for social chance will be the most engaging. Some ideas to explore:

  • Using hand graphics: tie into community involvement/grassroots movements
This is from the Hillary campaign. The highly textured human body parts remind me of Kalman’s work.
  • Abstracting this: bold, simple graphics in politically-tinged colors
  • type-based illustration only: pull quotes set dramatically, titles are loud, bright colors, high contrast
  • more subdued, still editorial approach: choice pictures of victors work, set to a simple serif

2/20–24: Remembering How to Write, Preparing for type

In addition to figuring out my graphic approach to the spread, I’m also working on writing the actual piece. I’m finding it challenging to balance talking about different sections of Victor’s career, amd how to fit Kalman’s work and my own perspective into all of it. I am finding great pull quotes from the interviews I conducted with Victor, which is promising at least.

“My parents owned a Chinese takeout restaurant when I was younger. One of my very first pieces of graphic design was the menu, artfully crafted using Microsoft Publisher and gratuitous amounts of clip-art. ”

“Design is not magic, but rather a process of deliberate and practiced skill.”

“Since working on the campaign, I’ve been increasingly interested in the ability of everyday people to shape public policy.”

“Having worked at scrappier places (startups and political campaigns), I think there is a lot to learn from doing more with less.”

I created a moodboard last week, but I revised it after critique. I had treated it like a catalog of potential ideas I wanted to include, but now I want it to be an artifact you can immediately look at and understand the character of the featured alumni and their work.

This is the first moodboard I made. I focused on expressive type, but there isn’t a good place for the viewer to enter.

I made a second one, this time focusing exclusively on the large, in-your-face images that both Kalman and Victor have used in their work.

With this board, I wanted to lean into the political and social justice work both men have done.

This is pushing me to think about how to use image in this spread. Although a lot of Victor’s work now is strategic and not visual, he did publish a set of books that he made on his site (I think this project was self-initiated). They won an AIGA365 Design Excellence Award for book design.

This project is very touching. I can see now how he designs with his whole heart.

Victor is a gifted with integrating type and photography, similarly to Tibor, but the big thing behind both of their work is that they have something very specific and important to communicate, and all of their design decisions reflect that.

For this spread, I want to use image, but I’m not sure how to get the images or where it would make sense to do so. I like the cut-out idea, keeping it simple and letting the edges of the cutouts speak for the activity in the spread, but I also don’t want anything to look too comical or random.

Some questions I’m asking on my image search:

  • What images communicate accessibility? Accommodation for disabilities?
  • What would ignite feelings of protest?
  • What would encourage empathy to the user? Tibor would use the shock factor, but Victor is much more sensitive in his work I think.
  • Should I/How would I incorporate my own perspective at this point in the process?

I’ve experimented with some typefaces for the spec sheet. I don’t want to make my spread look like an extension of the Hillary campaign or a page in Colors magazine, but they are good impersonations.

My first spec sheet. I wanted to look for a clean and geometric sans serif that makes a statement. I can’t afford the licensing for Sharp Sans, but this can work.
After I learned about baseline gridding, I need to adjust so that the leadings for each setting have common denominators.
This is a lot of type. Probably not accurate to the content on the final spread.

2/26: Getting Technical

Thank god we revisited grid structures in class. I feel like everytime I’m in a lecture about baseline gridding, I learn something I’d never known before. There are a lot of tricks, and it makes sense to be so rigid in order to be able to intentionally break the grid later. Especially if I want to use cut-out images as a graphic, I need to have a strong grid structure to break.

I’m struggling to sketch out different layouts, probably because I don’t have a concrete idea of the images I want to use. In class we talked about how establishing hierarchy when sketching out these spreads is really important, and I realize that was something I was ignoring when I initially just went at the layouts.

We were looking at Kevin A. Lynch’s book The Image of a City, and all the different parts he describes when describing the architecture of a city, which in turn can be applied to print design and data visualization. Alice and I analyzed these spreads for the 5 components: landmarks, nodes, edges, paths and districts.

Weirdly easier to analyze when it’s not in english, since I don’t get distracted reading the type. However, this means I have to infer meaning based entirely on hierarchy and image.

A lot of Victor’s work is based in process and strategy: this led me to consider a layout that addresses this part of design work with my layouts, instead of just trying to mimic his aesthetic. I found these pictures from his campaign work that show the process they went through during ideation.

What if my layouts were messy and appeared like they were process work themselves? It would definitely facilitate more organic conversation between myself, Kalman’s facts and Victor’s narrative.

So I’m considering using post-its in the same way.

Layout with post-its. Might feel too arts-and-craftsy, if I don’t do it correctly.

Should I use a columnar grid? (Just learned what that is). Actually here’s all the grids I learned about:

Should have used a ruler.
More layout sketching.

2/28–3/3

Because we worked more with Andrew on the mobile layouts, I’m attempting to sketch those out as well. I’m not sure what to based an app layout on besides the existing apps on my phone. This is a narrative, so I wanted to look at the ones that are specifically geared for reading.

Screenshots from the Medium App. Very clean, geared to handle a variety of content.

I realize that with a mobile interface, there is a pretty limited amount of horizontal space on a screen, but technically an infinite amount of room for content because of the scrolling ability. Navigationally, I have to make sure I don’t trap my reader at the end of a story or quotation, and constantly give people a way back to some sort of “home base”.

Should I include such a long scrolling page? Is that helpful or annoying? What type of in-app interactions facilitate easy reading?

I’ve also moved to indesign to prototype a lot of my ideas. I reached out to Victor again to clarify exactly what he was a part of when he was working for the Hillary campaign, and he pointed me to some really interesting projects. Not only was he doing branding and identity for the campaign, but he also created usable tools like the college calculator and Love trumps hate generator. It makes me wonder if I want to this layout to be focused on his visual work, or push more towards his role in social outreach/community organizing.

3/6–7

I finalized three spreads for crit today:

Where I am right now. I am not particularly inspired by this, but it’s what I have to work with right now.

I’m enjoying playing around with how I handle the images of his and Kalman’s work, but this activity is proving to me how little I have planned out for the actual progression of his story. I went back to sketching, trying to figure out if I am dividing this content in a meaningful way.

My app progress so far has been mainly limited to just learning how to navigate the “overlay” function, among other small animation shortcuts.

We also prototyped in XD a little more: I learned how to kind of “fake” a flipping interaction, which is fun to do.

In class, we synthesized a couple of the points made by the readings we did last week, and this was a reminder to me to brush up on those. I went back and re-read a lot of them, and pulled out these important points to remember when going forward.

  • Lynch: landmarks: you don’t enter them, they are more there for you to orient yourself.
  • Moyer: napkin sketches: there are multiple quick ways to visualize data, and they are crucial for helping the viewer understand more complex information
  • also, they’re just less boring

3/18–3/19

I just got my computer back after a week of repair during spring break. I realize how much I depend on it.

I have been re-attacking this project at full force, after taking a much-needed break away from it. Andrew mentioned in class that this is the point to start just making decisions and moving forward with them, and this feels very real right now.

I haven’t yet started thinking about the front and back cover, so now I’ve started to push myself to look at the different things I could visualize using this space. I looked back over the Moyer reading (Moyer, Don. Napkin Sketch Workbook) for examples of data visualization. The timeline example seems like the most obvious choice for my spread, but I’m worried there’s going to be a similar timeline on the back of everyone’s zine.

Sketching the timeline. This is very crude

We have the option of comparing our alum to other alums, maybe based on career decision or where they currently live, etc. I’m not sure I want to do this, as I feel like the zines are pretty disconnected from each other and and I would rather use this opportunity to say something interesting about Victor’s personal path. I liked Moyer’s “web” examples for visualizing a bunch of different relationships centered on a central person. Because Victor is part of a lot of organizations and events focused on social work and design for change, this might be something worth mapping out.

Sketching out a web of some of the themes in his career:

Made me imagine plotting out a kind of blob map that relates his projects to each other:

Now, I just need to figure out a way to make this look professional.

I’ve also updated the XD model so that it’s a little more current with my spread designs. This is requiring a lot of guessing and checking to figure out the right size for type and image, and how wide to make the columns in an app. I’m at a disadvantage because when I check my prototype on my iPhone 6, the dimensions are inaccurate. I wish I could build for my screen size instead of the giant iPhone X, but this would make my designs look dated.

I feel very new to designing mobile interfaces, especially designing for reading.

Using some of the style from playing around in XD, I was able to better inform my next iterations for the spread. Here, there is more of a horizontal layout:

Starting to “spread” out more (haha).

At this point, I knew my paragraph styles needed some work, so I revisited the Lynch reading and looked at the different types of thresholds I could incorporate into the spread. The vertical line I tried out was working as an edge, but in the spread to the right, it was too distracting. I need to figure out how much distinction is enough when seperating my own voice from the narrative.

And then, I changed the type to blue. Just to try out colored type at first, but after going back and forth with a couple colors I realized that using blue was like a breath of fresh air on the spread.

Changing the type to blue gave me a new excitement for the project.

It took a lot of printing tests to get the correct shade of blue and background tint. I realized that even minute changes in tone and shade really alter the mood of the piece. If I’m making a bold statement with the type color, I have to be very intentional about it.

3/21–22

In class, we had some one-on-one discussions about our progress, which I found really helpful. I got some really good feedback about how to integrate images into the spread: Stacie brought up that varying size of the images keeps it more interesting, and letting the images bleed off the page can have an activating effect on the entire composition. I discovered that altering image size and placement also establishes a hierarchy: which can be both useful or detrimental depending on whether or not I want to place importance on a specific piece or not.

Up until this morning, I had been working with a piece of writing that was complete in length, but really lacked the breadth of content I wanted to include. I finished it up, and I feel like I have much more to work with.

I played a little with how I integrate type here. Laying type over images and breaking the grid is exciting, but I don’t want to get too crazy where it’s not cohesive. I want my spread to have a certain element of respect and “less is more” feeling, since I feel like Victor is the type of designer whose work really speaks for itself.

Different iterations of the center spread. Should type overlap? Is that crazy?

I was able to finally flow all of the content onto my three spreads.

My first fully fleshed out iteration, with a cover design (but no concrete back cover)

I needed to resolve what I include on the back. I liked the idea of using artifacts that both Victor and Tibor Kalman used, but I realized that the back cover needs to be aware of the front as well. I want these two sides to interact well with each other.

I considered just using a single piece of work from both Victor and Tibor, and then including images of the two men so that the reader can better understand them even before opening the zine itself. I am forgoing a lot of the initial ideas I had for the back cover (inspired by Moyer) because most of the venn diagrams and timelines I had sketched out didn’t afford a respectful handling of image. I realized I wanted to relate directly to the zine that was on the front cover, and this meant I needed to be very selective with the rest of the elements I used.

A complete back cover idea. It printed kind of funny, like it felt unfinished rather than purposefully open, the opposite of what I was looking for.

Spending two nights on this spread helped again inform the content on the mobile. I changed the app design so more accurately reflect the paragraph styles used on the spread. Something I’m curious about: how do you promote longer reading on an app? Sure, we read instagram captions and text messages everyday, but how do I make a layout comfortable for someone to read a couple paragraphs of content? I looked at the News, The Wall Street Journal and The New Yorker apps for advice on how to make articles easier to read.

Unlimited space! Oh my!

I am struggling with the way that the user enters this app. I realize I have an opportunity to create a memorable, even dramatic, entrance into this experience, and that pressure had made me second guess myself.

I tried out more visual-heavy entrances like these:

An also quieter, more type-based ones:

I guess it’s time for some…usability testing! I kept it informal. I tried out a couple of these landing pages on my classmates and friends, trying to make sure some of the people weren’t also working on this assignment.

Results were mixed. People who had seen the zine felt like the type-based landing page was more characteristic of the work. But the images made people more likely to click on the links. Someone specifically mentioned that they were too small for them to really look at what they were tapping on, which is good to remember.

Andrew also showed us Nielsen’s 10 Heuristics for User Interface Design, which I had seen pop up briefly before but never fully analyzed in depth. I was interested in how much these are about effective feedback for the user. Even more so, I was interested in how to balance what users already know with what I was introducing to them in my app. For example, a person is likely to click at the top left of the screen to go back, so using that intuitive reaction is a good way to make the app easy to use.

From here, I tried to integrate both image and type. Here is a little run-through of my final entrance page.

Using image, but more understated, and then shifting to the sole type interface for the active home page.

In the time frame, this is the best I could complete, and it worked much better when I ran by more users. I didn’t think about this when initially planning my time, but working with this much content means I have to block out time and energy just for citing, proofreading and editing the rag. This takes a huge chunk of available time out of my workflow, and I had to learn to adjust for this.

3/23–24

This weekend is all about refinement and final decisions. It’s challenging to push myself to settle. As much as I like experimenting with giant pull quotes and bizarre typefaces at 3 AM in the computer cluster, I need to pull it together, for Victor’s sake as well as my own. I don’t want to disrespect him by turning in work I’m not proud of.

The layout of my third spread was made quickly, and I wanted to revisit to see if there was a better way to combine type and image. Some more iterations below.

It also changes a lot when I print it out versus when I look on screen. Printed, I felt like the last iteration (bottom right) was the most effective at spreading out his multiple accomplishments without establishing a significant hierarchy on one achievement versus another.

I do regret that I picked the safest option. If I were to revisit this project, I would try to go a little wilder before I dialed it back. I only went crazy once:

Lil crazy

After many long hours printing in Reese (the printer is misaligned so that printing the booklet will offset the pages by literally 1/32 of an inch, inconsistently), I completed the zine.

Written by

Designer. Currently at Asana, previously at Khan Academy. Language + Data + Digital + Print.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store