Spring 2019 | Group: Jaclyn Saik, Rachel Lee, Christine Chen
Every day, efforts are made to improve the ways people live, work, and enjoy themselves that are in harmony with other living things and the planet. Although such efforts are often well intentioned, they frequently fail to gain momentum and adoption because of communication breakdowns with their audiences. Nonetheless, clearly communicating concepts via multiple touchpoint that function as a well-connected system of pieces can often address the problems at hand. Working with the topics and teams listed below, your goal is to design a system of three pieces that inform and engage your audience, moving them to take action.
On Tuesday, we launched this project with a presentation from some of the people from dining services. As a student, it was a little weird to see the other side of the dining that I’m all too familiar with. I realized I don’t really give these people credit for how hard they are working on some of the healthy eating/sustainability initiatives.
My group was assigned to design “Systems that Encourage and Aid the Use of Reusable Materials”, so I am especially interested in reusable containers and their future with student dining. I know a lot of colleges, including Pitt, have recently used serviced like “Ozzi” to start a reusable utensil and container system campus-wide. I’m wondering what stands in the way of CMU starting this initiative.
Today we visited the swiss poster collection located in Hunt Library. Visiting the rare book room is always really interesting, but seeing this collection was a treat (we went in the back BACK room this time). I was especially impressed with the scale that these posters were designed and printed in. Not only are many of them meticulously designed and have impeccable egrid structures, but their design can afford to be scaled up to be almost taller than me.
I also noticed: a lot of these posters were fun to look at because of the way they treated the viewer. There were jokes, subtle word play, and minimalist approaches that all assumed the viewer was smart enough to understand, and a poster that makes me feel smart is a poster I want to keep around.
Work and Class 3/30-4/2
A lot of the readings I did over the weekend were concerned with the materiality of communication mediums, and they inform or are informed by type. The Crisp-Materiality reading touched on the traditions of typography and typographists who consider themselves to be purists and traditionalists; it’s a bizarre world, and I personally think that it’s a good thing there are people out there who consider an manipulation of type beyond it’s intended form an atrocity and sign of disrespect. I personally am a bog fan of making type look like another thing (the author mentioned letterforms that look like pickles, and I found myself wishing there was an image). But I’d love to meet a purist someday and learn how to set type by hand. And then I’ll probably go back to making wacky illustrative type with digital software.
In the context of this project, I do realize that there is a lot to recognize about using type and a user’s preexisting knowledge of typographic forms and uses. Most people subconsciously have expectations about how type should look and read — after all, we want out project to be legible. An important goal for us, I believe, will be to establish a balance between clear understanding/communication and surprise/delight for the viewer.
Over the weekend, Rachel, Christine and I started a little but of preliminary brainstorming to get started on our project. Again, we are focused on encouraging the use of reusable materials on campus. I got caught up reading about new recycling systems like Ozzi that are beginning to gain traction in other schools, and I started thinking like we are going to be redesigning an entire reusable container system. In class today, we confirmed:
We are primarily designing a communication systems that encourages the use of reusable materials on campus.
Some more bullets from class that I thought were important:
- illustrative role: society shapes design
- formative role: design shapes society (this looks like more the approach we are trying to take with this current project)
- Schemas: mental structures that describe our general expectations of the world
- stereotype: often based on limited or false information
- prototype: best example of something (when you say bird, people often think of a songbird, not a penguin, even though both are correct)
Our team met together and started our first brainstorming session together.
This class brought me back to some basics. We were given about a minute to draw, with any tools available, our best abstraction of 5 different words: loud, calm, helpful, timid and forceful.
I’ll admit, when we first started doing this I felt very “art student”, like most of what I was doing was up to personal expression or solely my own opinion. It wasn’t really until we all looked at the pieces together I realized the commonalities in what people think of when they associate graphics with feelings. “Helpful” illustrations had a lot of connections and multiplicity, while “forceful” illustrations had a lot of jagged lines, often that came to a point. I am curious what this exercise would look like if it was conducted on a wider range of people, especially people who don’t study communication or design.
We then came up with six adjectives, as a group, that described what we wanted to communicate to our audience with this coming project. We decided on:
Motivating, Smart, Educating, Omnipresent, Community, Interactive
And then came up with illustrations for each of the words. And then compared. I don’t think we really found anything right away, but a lot of the shapes we ended up with started some good conversation about the kind of message we want to represent.
I think that moving forward, we need to get more serious about the exact message we want to communicate.
I’m getting an itch to do more research. I feel very unqualified right now to tell people to start using reusable materials, mainly because I don’t know much about the best way to approach reusable material use. I think our group needs to narrow down our strategy: should we imaging that the campus is already using a reusable meal container system? Should we encourage the use of reusable materials brought from home? Should we do something else entirely?
We decided as a group to conduct some independent research. We sent out a survey to as many students as we could get to figure out whether
Through this brainstorm, I realigned my focus: this is about creating a design system. One that is scalable and can take many forms, and solid enough that we can always refer back to it.
Because again, we are focusing on creating 3 different things. The spaces they inhabit and the ways they are consumed are very unique:
- A large-scale communication piece (at least 30 x 40 inches)
- A digital communication piece. (responsive, multi-page website.)
- A physical communication piece. (people interact with physically)
I started also looking into some different ways that a design system takes shape in the professional world. The Invision app blog offers a web series about designing systems for corporate use, which I thought was interesting. They talked about a design system isn’t just a style guide or a UI kit: it’s an ethos that should be evident in every piece of communication that’s created.
My group had a long brainstorming session on Sunday morning. We documented and then erase what we had up on our whiteboard, and started digging deeper into the three different artifacts that we had up there.
I also explored some kind of funky versions of print ads for the food wrap idea:
I am overwhelmed. I feel like I continue to try to come up with a multifaceted solution to this issue, and I don’t have enough understanding of how dining services work. As a group, we keep thinking of propositions that just raise more questions: how does dining clean reusable materials if students own them? How do they make sure students are cleaning them correctly if they are doing it themselves? Where would the cleaning bins be locates? What reusable service should we use if it already exists?
Do we even need to answer any of these questions? I feel lost. I think my group members are lost too, and we are going to need to pull ourselves out of this together.
In order to give ourselves a little more direction, we teamed up with the other “reusable materials” group to create a survey to give the wider CMU community. We wanted to figure out what people are usually eating, and where they usually do it.
We started class today looking at the basic structure of a persuasive argument. I don’t actually know if this is consistent with all forms of argument, or if I’m using the term “argument” correctly. There are three basic parts: the catch, the validation, and the call to action.
This felt familiar (I think it brought me back to high school english, especially AP Lang) but useful to look at this structure as it applied to visual elements as well. Someone brought up that the catch could theoretically just be an image, or the call to action is the point at which the user interacts. We took some time to try to write out different versions of all three as they relate to our project. Mine were not great, but good to get in that headspace.
My team started working this weekend on narrowing down our visual style. Although we can’t figure out what form our exact intervention will look like, we wanted to at least brainstorm some of the visuals. Before this weekend, we were mostly using random mood boards and pinning images and posters we liked.
We got together and talked it out for over 3 hours on Monday afternoon. We finally nailed down our approach, or at least a couple versions of them, and I feel good about this. Figuring out a catch, validation and call to action was alarmingly challenging ti do, and we still our confident with our final options. I’m curious what kind of feedback we will get.
As part of our brainstorming process, we developed a kind of “word map”
I think it’s a good think that we had to slap together a presentation on Tuesday because it forced us to focus our thoughts together.
I did a little more exploratory research into data visualization, and the different options we have to making something generative that users could use and form an attachment with. I found some interesting basics for understanding information architecture, which was useful. Another site defined it as “is the practice of deciding how to arrange the parts of something to be understandable” which to me sounds like what we are constantly doing as communication designers. Interesting that we don’t hear this term come up more. but maybe it’s because it describes so generally what we study the specifics of, so using an overarching term like that doesn’t serve communications designers.
I think the NYC street tree site is a solid example of interactive data. It’s clean and shows the connections between data sets, but most importantly for our purposes, it allows a form of customization that I think could be expanded to graphics. I am a little concerned still that we won’t be able to create a robust enough system in this time, given our experience.
There’s also an option to integrate type into the data viz as well.
We presented today. It was a little rough.
I think the more we talk about this idea of customization/generative visuals based on data, the more excited my group gets about it. And the more we look into it, the more challenging it becomes. I’m very unsure.
Presenting was really helpful because we get individualized feedback from everyone in the class, and it was nice to be able to go back and read through people’s impressions of our work. I realize that we started out with a pretty strong pitch about emotional durability, but lost everyone when we talked about our dreams for user-generative art work. I don’t think the idea of customization was as engaging to my classmates because we didn’t have strong enough visuals — or a plan at all even — to support it.
I summarized some main points from the feedback, for my own reference:
- we outlines that we specifically want to target beverage cups, so paper and plastic waste: this is good to have that defined
- data viz: what would seeing data mean to users? How can we present this so that it is motivating, and that it specifically encourages the use of reusable water bottles?
- We have started exploring our phrasing, which is good, but we need to push it further. The connection between out current catch, validation and call to action is not strong.
- “Mine” is a little aggressive. Rethink that.
- We are taking on a lot. We should remember that we can design a larger system, but only flesh out the three communication pieces required for the project.
In the work time after class, my group and I ideated a little more on what kinds of visuals we would represent if we were to make art based on user feedback. I printed out these versions.
Meeting and Work 4/17
We scheduled a meeting with Stacie, but before that, we talked a little more about what we wanted to achieve with this project. We are currently stuck on this generative art: I took another swing at the types of forms we could explore with it (below):
But I’m feeling a little uncertain about how to incentivise our users to participate in this. It‘s a very voluntary activity, and since we are trying to change a pretty drastic behavior we might need an interaction that’s a little more engaging.
Something I should keep in mind (note to self): I have to consider my audience. We outline in the beginning of the project that we are mainly focusing on students, both those with a meal plan and just those who dine on campus. Although I wish I could, I can’t just design for design students. We appreciate different things, and making some cool, text-heavy neon posters might not motivate a broader range of students to recycle. One of my group members, Christine, often leans towards cute and playful ideas, and I’ve noticed that I usually am drawn to more serious or abstract forms. I am reminding myself to give more consideration to her suggestions because our audience often reacts positively to these ideas Christine likes. I think I need to work find a little more balance in our group aesthetics, because ultimately this will lead to a more relatable design system.
We met with Stacie today as a group. It was very helpful. She asked us at the beginning if we are excited or passionate about this data visualization idea, and it was nice to see our entire group on board. We are nervous about what we are doing, and we definitely need stronger language in order to keep going, but at least we are excited. Some notes from the meeting below.
One of my biggest takeaways: if we are integrating participatory design, or design where the uses actively adds to the result, we need to really incentivise it.
She also gave us a book on participatory design to borrow. My group found some of our favorite pages:
Another thing: this book gives a lot of examples of different user-generated content, and I’m realizing that in order to use data effectively, you have to establish a certain set of rules or guidelines. In a similar way to setting the structure for our visual system, we have to determine the way that we display our data and figure out how to communicate these rules to the viewer.
We wanted to come to class with some strong visual directions today. We met for a long time yesterday trying to flesh out what this will look like. We kind of forced ourselves into a “think tank” of sorts to get us to generate some more language.
As of now, we started working with these options:
Catch: Make your change, Bring it.
Validation: (a data viz based on counting): Today at La Prima (location specific), the CMU community has saved XXX disposable cups from landfills using reusable mugs.
Call to action: Bring your own mug today.
Note to self: the validation could expand to what this offsetting of waste means for the environment, and for the individual. Representation in the forms of other energy, etc? This is starting to feel like the freshman “Embodied Information” project all over again.
And here is the mess of visuals we prototyped:
We are interested in this idea of getting users to participate and then seeing the data stack up in real time as they do so. We realized that by utilizing the reusable cup discount that comes with most coffee shops on campus, we could theoretically track how many reusable mugs are used and connect a program that talks with the cash register in order to tally this number up. That way, we could create a projected visualization that could intervene in the space and accurately tally user behavior. Kind of like these water bottle counters on the refillable water stations:
…only much better. Here’s a very low fi idea of where the signage/intervention would go in the Tazza D’Oro in Tepper Quad:
We also got to talk with Andrew today about our idea. He mentioned he knew someone at who worked for Tazza D’Oro and might be able to offer us some information on how they handle reusable mugs/data on customer use.
This is also making me realize, maybe this discount is something we really leverage our campaign on. I like the idea of straightforward, even blunt messaging that embraces a user’s want to save money. My group needs to brainstorm a little more on language that could show this somehow.
I also am inspired by this idea of changing the norm. This system is targeting user behavior; people are used to buying coffee in a disposable cup, but we are trying to convince them to bring their own. Andrew mentioned that there is also a kind of trendiness and coolness to carrying a cup with a coffee shop’s name on it, so that’s another social norm we are trying to combat. If we are going to represent data in real time, shouldn’t we be saying something about how the user is affecting change in real time too? About how they are changing a social norm, redefining normal, etc. right now, currently, today? I’m writing all these alternative words to see if something will come out of it.
We have been going through a lot of different iterations. My group mates and I are eager about figuring out the correct tone with our color pallete and type, which means we are having a lot of conversations about the versions we make.
Although I am drawn to the fluorescent, internet-y look of neon blue and emojis, I polled our classmates and a couple of my friends outside of design for their opinion on the color palette and tone: it’s not as approachable as we want. Our original goals with this campaign included approachability and community, and we have to make sure we don’t lose sight of them for the sake of a “cool” aesthetic.
So I mocked up some more designs, trying to push us in a bit of a different direction:
The challenging part about this project is being able to find a place to start and then build out different artifacts from it. I think we added a challenge onto ourselves by trying to project data visuals in real time, since mocking it up as a printed piece doesn’t fully communicate its final form. I’m find myself overwhelmed when I try to decide if I want to build from the handheld piece (right now we are on stickers) up to the large scale, or just start on web and then figure out the physical objects after that. A lot of time, when building those type spec sheets and explorations above, I lose track of where exactly they would be implemented.
We talked about emojis for awhile. I’m hesitant to use current emojis, or even make our own icons, because I our audience to take our campaign seriously. However, emojis do often represent user participation and that is a value we want to stress, so I’m a little torn.
We have been throwing around the term “the new norm” for the past couple days, and I think we want to move forward with it. We like this idea of communicating change in real time, and trying to involve people in actively seeing and participating in changing the norm on campus. I personally am drawn to the phrase “the norm” because it feels like vernacular but still somewhat serious.
After playing around with a bunch of ideas, we found an intersection between emoji and words: a visual that displays a message, building up a users continue to participate in the campaign and revealing itself to the viewer when the community successfully reaches the goal. We immediately prototyped a way that we could show type as data:
After figuring out that we can project onto a printed grid, we narrowed down our design to focus how we can print and project.
Points to focus on in our notes:
Rachel and I started mapping out the content that would go on the webpage. Up to this point, we have been mainly focusing on what form the projected information would take, so now we tried to narrow down on what kind of information we want users to access when they experience this initiative online.
In class, we had a discussion about color, specifically color percentages. We talked about how color combinations have certain intuitive connotations, and the amount of each color that you include is essential to your message. Composting for example, a mix of differing hues along the same value gives a feeling of mixed soil/composting materials, whereas recyclable materials might warrant a more plastic — but still earth friendly/conscious — tone with brighter colors and cleaner integration of them. After taking “Color” from Mark, I’ve become more aware of how to involve color decision in the making process, instead of just slapping it on in the end. I think we are in a healthy design cycle when we continually go back and revisit our color combinations each time we make big decisions with layout or type.
Our most recent pin-up:
Projection trials! We figured out that the projector actually works quite well, and we measured the correct dimensions. It has a pretty high quality display, but we have yet to do any in-depth color testing. It may make sense for us to not try to to match a color on the printed backdrop to something that is projected, since it will likely appear different as two different mediums.
We tested out our first projection. It actually worked a lot better than we initially anticipated, but we definitely need to adjust the colors of the projected video depending on the color of the poster we print.
As a group, we have been working on organizing the content on the site in order to divide the coding work. As of Sunday, we haven’t started coding which makes me a little anxious, but I do think that if we have a solid plan, we can probably wrestle with html and css to get things to where we want.
Also something I’m worried about, and I keep going back and forth on: Do we need to include icons/illustrations of reusable containers? People know what they are, but to encourage people to do something it might help to be a little obvious. My small attempted to include illustrations of reusable containers make the compositions look forced and kitschy, so I’m not sure whether to continue to push it.
This is the first prototype I made of the movement for the projection. I played around with the different effects to figure out what kind of motion we want to add to the data points. I want the user to understand that they are looking at live data, and animation may be the way to go. Also, figuring out how to make new data appear was a test in the balance between cute and unnoticable.
We played with different ways to format the poster.
Also, our colors are lacking a little. They print dull. We know that we have a peer review next class, and I personally wanted to refine them a little so that we could get more constructive feedback in class. I know that I personally get fixated on colors when I’m critiquing other work, especially if they are too distracting or don’t fit the tone. We updated out palette slightly for the rest of the work we made this weekend.
Class 4/30: a
We had a group walk-around critique in class today. We set up our projection in preparation for it, and received a lot of good feedback. I need to remember not to put up super early iterations when we want current feedback, as some of my classmates kind of got stuck on our early emoji ideas that were up there.
The questions we posed:
- Does the projection make sense? Do you understand that this is real-time data?
- What do you read first? What feels disjointed?
- Do you understand the color? What does it convey to you?
- How do we design stickers as a way to remind user to participate? (Maintain/encourage behavior, the third part of our mission)
And here’s what we got:
The feedback isn’t in the picture, but we presented some XD files of our site to show what kind of content we want to include.
My main takeaway from feedback:
- the data vis makes sense (more than I thought it would) but the validation could be clearer.
- The colors are a little distracting sometimes, depending on ow we choose to present information. Using a pink or grey/blue background is pretty, but it pulls focus from our point.
- Type hierarchy could be improved.
- The use of lines an a graphic element makes sense with the data-representation vibe that we are trying to create, but we should try to make this consistent throughout our systems.
- What is our handheld? :) Yes, it’s sticker, but what form are they going to really take?
- Rethink colors. Sometimes they looked like Christmas.
- On that point, Christine pinned up some stickers prototypes that really looked like Christmas. They had crosses and ornaments, basically. So that’s a big weakness in our system right now.
Feeling pressured to get our stuff together, we worked hard after class today. I personally was very worried about how we’re presenting the information on the data vis. Because this is supposed to be our first touchpoint in the system, users need to understand the representation right away.
One change we made was simply in our language. Our “call to action” wasn’t really pushing users to do anything. So we changed the word “change” to “changing”, after a discussion in class about how “we” language can better involve the user in the movement.
In addition to this, we also included a link to the website on the poster itself, so that the user can access other parts of the system.
Also a priority in our site: making sure students are aware of the specific ways they can participate in the initiative. We decided that emphasizing the discounts and reusable materials available at campus locations is a good way to connect campus services directly with the students. We realize that just asking students to bring their reusable mugs without supporting them in this act wouldn’t make our system very effective.
Rachel prototyped different layouts for out “resources” page.
Also in class: we realized we needed to make some new sticker ideas. I think we were getting too caught up in redesigning an entire new artifact, while we could just let our already built-up system guide the form the stickers would take. We prototyped using the shapes we were already using to make up the type. Here’s a before and after look at our sticker design.
And from here, Rachel and I finished a sticker set for printing. I tried to see if people would like the shapes without any type on them. My starbucks cup:
I asked my classmates if they would use plain shapes if they saw them on a sheet. Here’s what a friend pointed out she would like:
This was our last class before our final presentation. We worked furiously. We were really torn between projecting light colors on green, or darker colors onto cream. We also decided to change the way we were discerning between reusable and “for-here” cups: we wanted them to communicate a similar message instead of 2 colors working against each other, so we determined that the for-here cups would be rectangular shapes, while the reusable would be circular. We were already using a mix, but this made it clearer to the user since the color difference in the projection would sometimes be unclear.
We also started brainstorming ways that e can iterate on our stickers. Right now, we are concerned that the waterproof ones we have prototyped for students to place on their water bottles may be too permanent for students who care about a neat, clean aesthetic. We were inspired by the collection (additive) data vis from our projection to explore non-permanent sticker options. Rachel and started thinking about window clings, which don’t damage the surface they grab onto. Our amazing TA Allissa showed us the clear vinyl printing abilities of Tartan Ink, and Rachel and I tested out our most recent iterations.
Rachel and I also did a ton of color testing today. We absolutely needed to find the correct green (we were appalled at how dull our original green printed).
This marked a big step in our color decisions as a whole. We realized we were working with pretty muted colors, but our designs were simplified enough that they could definitely afford to be brighter and louder. Printing this much green in a space is a pretty significant intervention on it’s own, so this had to be the right green. From here, we settled on our newest and final, simplified, color palette:
And from here, our spec sheet. We picked the Neue Haas Unica family, after much deliberation, because it’s friendly but stable, and we could be very straightforward with it.
The home stretch.
This weekend was a grind to finish everything. There was a lot that just needed to be printed and cut, and it was challenging to find all the time to put in both creative work (design decisions), literal labor (cutting out stickers and posters) and coding the entire site.
I spent a ton of time wrestling with css and and html to get this navigation to work:
We set up the site organization so that we could all code a page. Christine worked on the Stick It page, while I worked on the “learn” page and Rachel took over “Locations”. As we progressed, Rachel made the most headway with her 3 columned layout, and we ended up basing most of the structure of the rest of the site on her original code. On Sunday, we handed over our work to Rachel and she worked on compiling everything and making sure everything is responsive.
Printing large scale was also scary. Our first print was done with the wrong settings, so it came out terribly and we had to cancel it 1/8 of the way through.
With Matt’s assistance in Smillie, we figured it out.
I also worked on refining the after effects animation so that users could understand when new data appeared. I created a 2 minute loop to play in during the show, and then grabbed segments to make gifs for the site.
Also, an addition to our window clings: because we plan to pass out stickers at the point of sale, like a reward for using a reusable mug, we wanted to see what other ways we could intervene at the cash register. Rachel brought up that there are a a lot of asian clothing stores that print on the back of their receipts. I immediately mocked up some ideas for the back.
We did think about how much receipts are used. In places like La Prima Espresso, you don’t see a receipt unless you specifically ask for it. But at both Tazza D’Oro locations, you receipt is your number that’s called when your drink is ready. This isn’t an intervention that solves all the problems, but interesting to try to mock up something that doesn’t require adding an entirely new artifact to the system.
Overall, this project was really exciting to work on. Rachel and I both had really big and wild ideas for how we were going to try to show our audience their data in real-time, and I think we came up with some really interesting concepts that pushed the bounds of what I thought I could do with this project. I feel like I also explored a lot of different mediums in this process, and I realize I am especially interested in further learning about how to treat type across these different mediums and scales.