Designing Visual Systems: Pittsburgh Offerings
Christopher Reyes, Liam van Oort, Chloe Kim
C Studio II: Designing Communications for Interactions
Project 3: Designing Systems
Task
Many people continually make formal or informal decisions to improve aspects of their lives. Although the goals may be set by an individual relative to his or her specific situation, many of the intentions actually apply to a larger body of people. Working with the topics and teams listed, your goal is to design a system of three pieces that inform and engage your audience, moving them to action.
Components
A large-scale, flat communication piece — This should be something that is at least 30 x 40 inches. Form ideas may include but are not limited to a: poster, banner, game board, panel, chalk on a sidewalk, etc.
A digital communication piece — This should be something that is viewed continuously, such as a video, or something that requires interaction, such as an app or website. Note, a prototype of interactions using a tool like InVision is a fine deliverable for this component.
A hand-held, physical communication piece — This should be something that people interact with physically, such as a carrier (envelopes, bags, etc.), cards (of any kind), stamps, stickers, coasters, etc.
Topic: Pittsburgh Offerings
Who are you designing for? Why?
Undergraduate students at Carnegie Mellon University. We feel that we’re best suited to create a campaign that speaks to that audience simply because we’re a part of that audience, and we understand the barriers that are keeping students from exploring the city around them. Additionally, a lot of these barriers, while could potentially be carried over to other universities if altered, are highly CMU-specific due to the intense working culture that inhibits outside exploration.
What do you want to convey? Why?
We understand that students at CMU are busy and focused on their work, but want to point out several bite-sized opportunities in Pittsburgh for exploration and adventure, and that students don’t need to sacrifice and entire day to enjoy themselves. While this campaign is not meant to address the working culture, it is meant to work with this deeply embedded system.
What do you want your audience to do? Why?
While we won’t discourage it, we’re not expecting students to plan massive high-commitment excursions. Instead, we want our audience to take a step back, and explore the city at a gentle pace with smaller trips — even if it’s during a lunch break.
1–2 hour trips that will encourage an activity that is not connected to school. It can be getting food, going to a museum or gallery, or an activity. Something to get peoples mind of school.
What contexts do you think would be effective for your messaging? Why?
If we get to create any kind of web medium, it will be great to locate some type of interaction where there are a lot of student population to passing through. We could provide students with flyers or create physical interaction that will trigger students’ interest toward Pittsburgh Offerings and visit web medium if they want to see more information about particular events.
What mediums do you think would be effective for your messaging? Why?
It would be effective to use web for its availability to use links that can bridge the student who are interested to the website or social media which has more detailed information. Also, maybe creating a social media page where students can receive updates about weekly Pittsburgh Offerings just like Design sandwich that are sent every week.
Words & Abstract Forms
While we want to encourage our audience to explore the city around them, we understand the reservations they may have — students here often point to the amount of work that they have, or the lack of funds available to really take a moment and enjoy themselves in the city they’re in. Because of this, our approach to promoting exploration has a gentle slant to it . We want to promote these opportunities in a way that’s low-pressure and doesn’t demand a significant investment in time and money so that our audience can enjoy the city in bite-sized adventures.
Campaigns geared towards younger audiences focus on free-spirited adventure tend to have an extroverted lean and imagery of vibrant youth with a peculiar amount of sparklers and bonfires (Levi’s Go Forth campaign comes to mind). While we like the energy that kind of campaign gives off, we’re not sure that’s the right path for us.
We arent advertising a rebelious lifestyle or an exciting adventure, but a simple escape from the bubble CMU can create around a person. Also that puttsburghs offerings arent for the extroverted and young at heart but for everyone. Although we are targeting undergrads (freshman and shohmore), they range form the introverted and extroverted and it’s important to show that our solution will be accessible for all.
Initial motions to capture the visual language of our campaign involved rapid mark-making sessions to express terms in an abstract manner.
Current Words: Open-minded, Welcoming, Accessible, Curious
4/10/18 Group Meeting
Inspecting our abstract drawings, we tried to find similarities and differences as well as things we would like to try. I found that there was a theme of symmetry that came up in many of the compositions as well as position, color, and type of line. The compositions take up the whole page and use tha space allotted. They do not however go off the page and feel content with the space they inhabit. These observations may connect to our goal to create a balance in people life with their school and out of school activities and our tendencies to try and make the most of our time. our compositions are colorful, dynamic, light, and fulfilling in a sense.
What I would like to try is what we could do with the paper itself. How can we fold the paper and create 3D things that might inform ideas? also can we use color paper? and how will colored paper interact with our ideas and concepts. I want to try and make paper airplanes because not are just people fond of folding them and throwing them around, but I think they will create a good metaphor for getting away and taking a break. Throwing a paper airplane is sometimes literally throwing away your work and taking joy in a break to do something fun. Including this in our campaign/ project might be appropriate and fun!
Some things I was thinking of during class was maybe creating panphlets with fold lines that will turn into a paper airplane. This will create and interaction with the information given. Also can we advertise our message in differnet way with wearables or other utility thing slike water bottles. A lot of students have water bottles on their desk. What if our message of refreshing yourself by leaving campus was engrained with your refreshments.
Also bus stops are the easiest and cheapest way of leaving campus. what if we had signs by the bus stop the showed places approaching buses would go and how much time it would take. This would be a reminder of the posibilities so close to campus and might encourage one to take a quick break and take advantage of pittsburghs offerings.
These initial ideas are interesting but it’s tough for us to create specific examples without having some questions answered. What kinds of places are we going to advertise? How do we want to advertise this? and where?
In class we also talked about Catch, Validtion, and Call to Action. These are three things that we will be required to come up with for our project. ‘Catch’ is the thing that draws people in and piques their curiosity. Validation is what makes it believable and Call to Action is what we want our audience to do. So, by creating a catch will provide a bit of a foundation for us to build around and use as inspiration for our prototypes and final deliverables. as phrase might be something like “Don’t be a bore, Go explore.” as we brainstorm we’ll all agree on a phrase and/or phrases.
4/11/18
During our meeting today, we brainstormed ideas relating to the digital, Print, and Physical piece. We also thought of this in terms of the catch, validation, and call to action.
We first recounted what we had already agreed upon. Our audience is going to be undergrads (freshman and sophmores). Our Pittsburgh offering wouldn’t be high cost or high commitment unlike the Pittsburgh Connections program which takes a large chunk of commitment to get involved in. We want students to be able to take a break from work and find what pittsburgh has to offer. We also want to brand pittsburgh as a happier place than it is and not go with the clichè black and yellow steel country vibe.
our key words are: small, inexpensive, accesable, welcoming, flexible, and curious/intruiging.
We started with brainstorming slogan and phrases that might work with our “branding” of Pittsburgh’s offerings. We wanted this to be broad so that we could use in many different ways and weren’t stuck with one idea. So, we thought of “ make Pittsburgh ____” or “Pittsburgh is _____” this would allow us to have a consistent theme but change it according to the medium in which is lived.
We decided to narrow down Pittsburgh offerings to food places within 30 minutes in order to make it easier for us to create a more targeted campaign for undergraduate students.
For our digital piece I think all three of us where at consensus to create a crowdsourcing map of some sort that would allow the audience to interact with a map of pittsburgh and with other people. It’s hard to fully express what pittsburgh has to offer just between the three of us and it would be much more beneficial to gain perspective form a much larger body of participants. This would act as the validation, which I will explain later on.
For the print piece we had multiple ideas. One of which was having decals for business that rated well on our app. This would encourage businesses of the apps usage and would also be beneficial for the apps users. Another idea was signs in buses or at bus stp that coincide with the apps data. Shwoing you what is on the bus routes and how people are rating/ enjoying these places. We also thought of pamphlets that advertises the app but also has fold marks that once you fold will turn into a paper airplane, making it interactive as well. Lastly we thought of installations at paths that would also tel of our app and advertise nearby food places.
Lastly for our physical object we thought about things that where always either in students view or possesion. We thought of things they found useful in order to inadvertantly remind them of the offerings off of campus. “Persistent Utility.” This can come in the form of buscard holder, water bottles, lanyards and or other objects that one uses daily. What could be inscibed on these objects could be customizable maps with the use of sticker and decals. This location tracking could be a fun acticity and remind students while they are stressed that they are able to make quick break of campus that is not high commitment.
So in class we talked about three things that would be beneficial to think about in order to implement our ideas; the Catch, Call to Action, and Validation. Our catch would be the physical object or tool that gets or campaign into there head and get them interested. This is what will pique their curiosity. The Call to Action would be the print piece which is what ultimately gets people to go out or use the app we create. This is what will ultimately be the prosuct of what we want people to do. Then the validation would be the app which is kind of the center of this system in which everyting else revolves around a bit. It what makes everything else possible and believable.
From here we have to narrow down and make some decisions on some things like what exactly we are going to do, and how we will split up the tasks.
4/12/18 In-Class Group Meeting
In class, we worked on narrowing down the mediums:
- Digital- An Application that is crowdsourced but, differentiated from existing applications such as yelp
- Physical- Poster Series
- Hand-held Objects- Persistent Utilities including bus card holder and water bottle.
After narrowing down the mediums, we discussed color palette and graphic element of our mediums. Choosing the theme color for posters seemed like the first thing to do in order for us to use those theme color throughout the app and hand held objects.
Initial Proposal & Critique
Proposal involved fleshing out our initial concepts and deciding on how they would exist in a greater context. Because our target audience members are Carnegie Mellon freshmen and sophomores, we wanted to figure out how we could embed ourselves into the current system. To do this, we decided on placing our flat piece in the student eating hubs on campus, where students are already primed to think about food, but the campaign provides just enough of an unexpected twist to get them to pay attention and consider the message. Additionally, for our physical piece, we were hoping to integrate ourselves into the freshman move-in/orientation process. When students first check in, they’re already given a set of items (both utility items and promotional items like coupons). Because the items we’re hoping to distribute are things that an individual only needs one of, and will last a long time, by being the first to give them necessary items like a water bottle or card holder, they’re immediately introduced to our message and will be constantly reminded for as long as they have it.
At this point, we’re still developing our visual system and refining how the digital platform should work, so the critiques we received were invaluable:
Key Points:
- Be more specific in the ‘Catch’ and ‘Call-to-action’ premises, potentially use more specific taglines and phrases
- Consider edge cases — how would this system work for students with allergies, those of low-income, vegetarians/vegans, etc. ?
- Differentiate the digital platform from pre-existing things like Yelp. How can we utilize the small, hyper-specific scale of this platform?
- Continue to develop the visual style — it’s headed in a good direction, but needs to be cleaned up and softened
- Make the system more specific to the city of Pittsburgh (without using standard Pittsburgh visual language)
- Ensure that the platform doesn’t just perpetuate the ‘CMU Bubble’
- Does the platform need to be an app?
Response:
Because our digital piece has become the central aspect of our system, we want to take the time to figure out precisely how to cater it specifically to our audience, and make it useful enough that students will want to use and contribute to it.
CMU-specific web platform, CMU Eats!, came up during discussion. It’s an incredibly simple platform — all it really does is tell the user what’s currently open on campus and when it closes. However, because it’s a web-based piece, it has a low barrier-to-entry and allows users to dip in and out of the piece and continue throughout their day. While our platform would be a lot more complex than CMU Eats!, we feel that it would greatly benefit from being web-based because of the quick accessibility that the web provides over an application. Of course, more exploration is necessary, but it’s good to keep in mind as we develop our pieces more over the next few weeks.
Also in regards to the digital piece, with the given feedback, we want to make it clear that the piece is Pittsburgh specific with a map-based setup. Users will be able to explore various neighborhoods of Pittsburgh (potentially with color shifts to give each neighborhood a distinctive personality), and see both general city hubs and what locations are popular among student users. Additionally, because we want the piece to feel like a recommendation from a friend, we’d like to utilize a tag system of categories that are specifically tailor to college students and specific needs. A new student may not know that a local place is nut-free, but an older student who goes there often does.
Besides that, but to further encourage more exploration, the digital platform would be able to supply a random place or area based on how much time that user has. It’s not often that they’ll have a full day to explore the city, but should they have more time than usual, they’ll receive a suggestion that suits them and their schedule.
Of course, as we’re developing the digital, we also intend to refine our visual system. The hand-drawn illustrations were fairly successful, but might require some adjustment in terms of color and form to make them not as flat and harsh. Again, we also want to try to define neighborhood personalities through color, and have that be reflected in our print pieces. In terms of our catch, we’d like to shift away from static nouns like “pho” when we say “Pittsburgh is _____” and instead use adjectives that can work both as a food description and a descriptor of the city (fresh, sweet, spicy, etc.).
4/25/18
For out print piece we have been iterating on defferent design for a poster series. On the image above it shows a bit of the process from the top left to the bottom right.
above are two of the earliest iteration that experiment with text and placement of image. With this iteration we found the text to be awkward. We did however like the vertical theme and the choice of type ( Montserrat, and handscript).
We also had a series of iterations going parallel to the vertical block posters. These keep the same color and type but experiment more with the overlap of image, color, and type. This as a series does not work as cohesively than the vertical block iterations do but do continue on to become a promising iteration later on.
We really wanted to incorporate hand drawn imags within these posters to not just connect with the handwritten type but to create a fun and energetic feel. Our color scheme is to create a positve message that is dissimilar to the usual pittsburgh campaign. We want to make this interesting and relevant to our audience of undergrads, so having a poster that is serious while palyful at the same time is something we wanted to focus on.
Continuing with the virtical-color-block-theme, I created a couple iterations to bring dimension to the imagery and to create hierarchy within the iterations. I think the one on the right is the strongest visually since it works well with multiple posters and it’s the least flat out of the three iterations.
Our theme “pittsbutgh is” benefits from this format because it highlight well the adjective we chose for each seperate poster while the “pittsburgh is” is constant. Our plan would to change the color scheme, subject, and drawing for each poster and have them side by side.
Above are more iterations of possible alyouts. On the left we have what we had previously but in a differnet color scheme. Then on the right we wanted to see if we could highlight th “pittsbrurgh” aspect more which didn’t quite work out. Then all the way on the right we change to a horizontal bar instead of a vertical block to focus on the the pittsvurgh is pho and then use thh images overlapping on the colored block to make the page more dynamic.
After meeting and talking over some specifics, we decided to instead of having our subject “pho” be a noun, change it to be an adjective. This will make the posters message more general and widespread, allowing us to talk about multiple places at once. We will instead o fusing a handscript font, we will draw the words ourselves to really give it a handwritten quality.
I continued iterating and tried to make some more posters that related back to the series we where doing parallel to the center colored block one. These show the possibilities available with differnet subject matter and images. Playing with color and combinations between the color blocks and images creates a movement through the page that feels professional and witht he times a bit.
With all these iterations, we need to sit down and focus in on one design in order to iterate on the adjectives and images that will accompany the adjectives. Actually the adjectives we have chose are “fresh, spicy, and sweet.” We chose these because this gives us a good range of what pittsburgh has to offer food wise. We hope to create three posters that together feel cohesive, but through color and image will be specific to the word that describes each. These posters will also advertise our app that will allow them to explore the places that offer these experiences hinted at by the posters. The stickers with the water bottles will act as a constant reminder of the possibilities off campus and the app will be the main database of information and will allow thusents to navigate to these places effectively.
4/26/18 Stacie’s Critique
Digital piece: Integrate Pittsburgh buses or something that show this app is designated for CMU students and main focus location is Pittsburgh.
Physical piece: Focus on customizing water bottles because sometimes its life expectancy is so short so if customized with stickers it would last longer. Also find a way to bind water bottle and card holder together.
Poster: Be careful with the color palette, we need to watch on hierarchy when seen from different levels of distance. Also integrate pittsburgh map or anything to hint viewers that this project is for pittsburgh offerings.
Our plan for next week
We decided to focus on three adjectives: Spicy / Sweet / Fresh
and the food that represents each are ramen/ ice-cream / salad
4/29/18 Group Meeting
Digital piece: Add more element that focus location in Pittsburgh
Improvements from last week: Pittsburgh map implemented in the application, and chose theme color for each neighborhood.
Physical piece: Design stickers that can individualize each bottles for each student
Improvements from last week: Designed illustrations for stickers
Poster: Fix some of the overlapping elements and change the letter in the middle with handwriting cursive. Also, include QR code for introduction of application on the poster.
As a group, we tried to come up with different ways to scan in some illustrations and letters made out of real food materials.
Then, we decided on staying with the color blocks and layout on the right poster. However, wanted to include pittsburgh rive shape and find ways to merge the image of water and illustration together in a cohesive way.
Regarding the digital piece, we want to emphasize the diverse neighborhoods of Pittsburgh as well as a sense of exploration by limiting the amount of control users can hold over the locations that they can find through the app. Locations are either randomly given or ambiguously presented through tiles only displaying the food of that area so students will have less possible opportunities to turn down a location. Users will have the choice to either let the app decide for them, or browse a neighborhood with a limited set of parameters. Color palettes when browsing or viewing restaurant pages will reflect a color palette that’s reflective of the neighborhood to play off of that message of diversity.
Current name for the platform is PittStop as a play on the city’s name and our message to encourage students to take a break and explore Pittsburgh. There’s some potential concern regarding it being confused with being University of Pittsburgh-specific rather than CMU-specific, but that depends on the rest of the visual language.
Below: Rough prototype for flow of interaction using inVision
This is Stacie’s comment on the posters worked so far.
“I think you’re making some progress in contacting food and place. However, the components that comprise the piece — maps, food, type — aren’t working as a cohesive unit yet and you’re still running into some hierarchy problems. In terms as all of the components working well together, I first encourage you to explore how the illust of thrations (maps and food) can become a single entity as opposed to two different types of objects that just happen to be on the same poster. Once you have the illustrations well established, then I urge you to explore how the type can be INTEGRATED into the piece rather than just placed on top of the graphics. How might you use the illustrations to guide the consistent placement of type? How might you encourage exploration of place through the strategic position of text? Right now, they type appears quite disconnected from the graphics and more stately than inviting (For example, why center the type? Why use those specific faces? Why all caps? Etc. All of these decisions should be well connected to the message you want to convey) As for the hierarchy, many of the components are still vying for attention. You have a high contrast border (not sure of it’s significance/meaning) that draws a lot of attention away from the text content, which gets lost in the graphics. You may find it beneficial to simply move away from the computer for a bit to sketch your thoughts on the illustrations and how you want people to move through the text content.”
Regarding to Stacie’s comment we tried to try out different ideas by playing withe the scale of illustration and type.
In-class Stacie’s critique:
Digital piece: Be careful with the consistency of colors, look at the greyscale version of each color variation. On the Pittsburgh map section it looks like the yellow is popping out too much. Since we want users to explore every region equally, turn each color into grey scale and see how it works
Physical piece: It will be fun to see the map as a background on the bottle and transparent so we can see fluid inside. Also make sticker system cohesive with other mediums.
Poster: work to integrate the map with the illustration. And play with the placement of text. Also try out new way of hand written letters and don’t use cursive.
5/2/18
On teusday, our group wanted to finalize the poster. We however felt that it hadn’t been developed enough, and that it needed a bit more iterating to get to that final point. ABove are some of the examples that we came in with. We definitely want to ue the lake as a consistent alement hat relates to pittsburgh. We are still contemplating on the color blovk in the middle and if that is necessary or if the contrast is too much. Also we are thinking about a way to decrease the contrast it creates through color or overlapping elements.
During class, to Stacies request, we printed out our posters in black and whit enad drew on them. After class I tried this myself and came up with these.
These led to some more iterations on illustrator that look like this..
These are better than the previous I showed but still have some issues. First off, the contrast makes some of the writing unnoticeable and illegible. The white fades in the yellow and the white illustration, orange rivver and yellow background are all a bit too close to eachother.
I’m glad I tried rotating the text, but it doesn’t really work and looks awkward. I think a solution to this, if we do decide to work with non horizontal text would be to bend the text to go with the river or another element in the poster. The “fresh” is not cursive anymore which makes it more legible. I think the long strokes makes it dynamic and draws atttention to it in particular which works in our favor. It is still however lacks contrast in line weight and could use some work to look more professional.
Although these are not the only iterations we have, I think with all of our ideas combined we have enough information at the moment to finalize the poster sooner than later and begin thinking about printing techniques and finalization.
We struggled to figure out what are the problems and contrast issues, however based on stacie’s comment we are now done with the final iteration.
- The color contrast of blue and salmon color is too strong
- big images used as background doesn’t work
- typeface can be improved
Digital Piece
Most of the development in regards to the digital piece came in the form of echoing the developing print piece as well as defining the personalities of Pittsburgh’s neighborhoods through color.
Interaction flow hasn’t really changed from the initial wire-frame — users can still either let the application choose a location for them based on parameters or can explore possible locations on their own. However, we emphasized the sense of exploration more with a few subtle changes, and limiting the amount of information available to the user. User likes are only displayed on the restaurants specific page, and users only have images of that location’s food to guide their decisions, rather than limit them by factors like location or popularity. However, we still include some ability for users to apply filters to get a more refined selection of locations. Tags aren’t meant to just describe the locations in terms of the food they serve, but also allow for more specific classifications, such as whether or not that restaurant is allergen-free, or has vegan options, or is simply a good place to study.
5/8/18
For our physical piece, we created a vinyl cut of pittsburgh and applied it to a water bottle as a decal/ canvas for people to decorate. We also printed our stickers that would allow the user to personalize the water bottle. The imagery used in the stickers is the same that appear in the posters to create continuity and familiarity with the PittStop brand. We personalized this bottle as an example of how one could go about decorating.
The map of pittsburgh is thin while all encompassing to allow space for the user to locate certian areas and personalize based on the areas. The decal also uses the imagery of the river which is also present in our posters. All this combined creates our fun and colorful rebranding of Pittsburgh that will be more convincing to undergrads who are unsure of exploring the environments around school.
The cardholder uses the same colors, imagery, and logos that are used throughout all of the other mediums as well. What was once a boring cardholder is not a subtly colorful and fun reminder of our app that makes it easy to find food places nearby that are suggested by filters that specify to your constraints. Having this in your pocket or on your desk will always be in your view and acts as a subtle reminder. Also when a freshman or sophmore goes to eat on campus and brings out their card holder to grab their ID, our branding will be present everytime making it difficult not to think of our app and the possibilities that are available off campus. These two items combined cover bases in the work spaces and at home in order to not just be used for their function, but maintain the relevancy of PittStop in ones mind. Hopefully this will encourage one to explore pittsburgh for it diverse food and take a break from life off campus.
Final Thoughts
Ultimately, we’re fairly pleased with the end result, and while it took us a while to find the right approach, we firmly believe that it’s one that appeals to our audience and shows Pittsburgh in a unique manner. I think changing the typeface from Montserrat to Filson made our visual system finally click — we had been developing the graphics for a while and it was beginning to make more sense and work the playful, exploratory aspect of our system, but once we had a typeface that reflected that same energy, it made sense.
Because a lot of our system hinges on introducing younger students to Pittsburgh at the beginning of the year, we weren’t able to put our visual system to the test. However, it would be interesting to see what would happen if we were able to introduce elements of our system into Carnegie Mellon’s orientation process, as our physical piece uses objects that incoming students will likely need and use for a significant period of time here in Pittsburgh.
Additionally, it would be interesting to flesh out the digital piece into a working platform rather than a static prototype, and potentially do some more research to see what exactly students here at Carnegie Mellon are looking for in an off-campus restaurant. In our conversations with our peers on campus, we would constantly find new perspectives that we hadn’t immediately considered (those with allergies, vegetarian/vegan diets, etc), and so it would be an interesting continuation to develop the tagging system for the digital piece to include more of those perspectives, and have a list of commonly used tags so that there’s more visibility to those kinds of needs.
In general, the three of us are incredibly proud of the work we were able to produce within a short timeframe. We all have wildly different perspectives when it comes to our design approach, but from that difference, our visual system became much more rich and meaningful.
