Senior Studio Fall ’22 — Impact & Empathy (brought to you by Company & Co.)
Impact and Empathy is a collaborative project, and our goal was to redesign a project found on Hyperakt. After browsing (for what felt like hours), we decided to expand on the topic of unproductive work hours (You Waste a Lot of Time at Work). We were initially overwhelmed by how open-ended the assignment was, so we further explored the experience/idea of being unproductive and what that meant in the workplace.
We began our brainstorming process by collecting images that reflected this idea of “unproductive productivity”, and used those images to create a mood board. We knew that we wanted to visualize the idea of putting in unnecessary hours with no real output, and our initial inspiration and sketches were more conceptual. After our meeting with James, we decided to take a more satirical approach to representing the employee experience in the workplace. We found that having the audience experience our project would be more impactful than simply presenting data about unproductive work hours.
Before we began working on our deliverables, we decided to keep our color palette sterile and limited, and used blue, white, and black. We mainly used the typeface “Forma DJR Display” and “Forma DJR Deck” to keep a consistent look throughout all the deliverables — this was also the typeface for our logo. However, we used a diverse range of typefaces depending on the deliverable we were working on; for example, for the print materials, we also used “Menlo,” a mono-space typeface which mimics the look of a typewriter, and for the website text, we used the classic “Arial.” Having this range of typefaces allowed us to surprise viewers by creating unique deliverables, and made the materials look more realistic in their respective mediums.
Hannah’s Process
The Logo: As we started designing our respective (numerous!) deliverables for this project, we knew we needed a way to create visual consistency. I began iterating on a logo design that could be applied across all mediums and formats, taking inspiration from famous corporate logos such as IBM and Apple, and even templated Canva logos. My main goal was for the logo to seem generic and sterile.
We brainstormed things related to the office space we were trying to recreate, such as stationary, desks, and computers. Eventually, we came to the shape of a cubicle — it represented something that was physically closed off, as well as the associated environment of a corporate worker. The shape was also simple enough that I could find ways to abstract it without straying from the solid, rectangular shapes that made it up. I experimented with different angles the cubicle could be represented, but knew I wanted to keep the shapes solid in order to be scalable/understandable across all our deliverables. I settled on an isometric view of the cubicle, as it was a much more dynamic shape.
The name of the project itself, Company & Co, was meant to be a nonsensical rip off of the corporate names that have “and Co.” or “inc” after it. Because we wanted to create a universal and familiar office environment, we thought simply using the word “company” played on the satirical nature of the project. We had other ideas such as “Cubicle & Co” and “Co & Co,” but eventually went back to the original “Company & Co” name.
The Website: While looking for inspiration for this project, I came across 2000s tumblr sites, which further led me to the early versions of Windows computers. I was really inspired by the three dimensionality of everything, from the small icons to the windows — it seemed that the computer screen served as an environment for these seemingly-physical parts. Corporate culture and the notion of a 9–5 has not seen much innovation over the years, so we wanted to incorporate the look of older technology to visually represent this.
It was incredibly fun creating all the assets of the website and experimenting with all the gradients and colors. I’m used to using 3-D features on Illustrator, but because this technology didn’t exist back then, the visual language was off when I applied these same techniques. Instead, I challenged myself to create everything using only flat shapes. This also helped to create visual consistency across all the graphics I created for the website.
Content wise, I incorporated nonsensical corporate jargon and unprofessional photography (ie. badly photoshopped images with watermarks across them) to create a fun contrast in tone and visuals. I thought about things a worker would do while bored at work, such as playing random computer games or thinking of their next vacation plans, and included windows that displayed these thoughts. I included windows that became less and less related to work as the viewer scrolls down so that they could experience going down a rabbit hole of distraction themselves. To create some more motion, I created a range of different animations, from abstract animations of rectangular shapes and a multi-layered space dimension, to a YouTube video of a cat playing and piano and simple loading animations.
Thinking of how this project could exist past our presentation, I wanted the website to be a place where people could come and experience as much of the orientation process that we acted out for final critique. I linked assets such as the orientation video and employee handbook through the application thumbnails, which prompted us to add Easter egg links as well.
After many rectangles and gradients, I finished creating all the assets of the website and imported them to cargo. Go to www.companyandco.cargo.site to view the website!
The Punchcard: In the similar vein of the look of the earlier versions of the Internet, we researched old-fashioned work-related technologies, such as punch cards. I designed a punch card for our Company and Co, but put modern slang and imagery (an emoji of a face that’s winking and its tongue out!) through the punched out holes. This further pushed the narrative of a satirical workplace environment and added another physical layer to the stack of orientation materials.
Overall, I really enjoyed doing deep research into this era of technology and recreating them with modern twists. I learned a lot about paying attention to the smallest design details and creating numerous iterations of similar designs while thinking of new content to differentiate them.
Mina’s Process
Employee Handbook: As I began to put together my 25 image mood board to help myself better understand and to solidify my insight for our group’s topic, I began to realize that I was most interested in the experimentation with treatment of typography using corporate documents and language.
Like how any equipment, machine, or furniture comes with a manual book, teaching the user how to use the product, I felt as if corporations view employees like a compartment of a machinery. While corporations expect employees to work non-stop during their 9–5 hours and be dedicated to them, we all know that there are a lot of unproductive moments at the office. I was then struck with an idea to create an employee handbook/ guidebook that new hires would receive during the orientation process. It is a book with such important work policies, expectations, and regulations but something no one truly pays attention to look through deeply.
With the handbook, I wanted to highlight the human aspect and debunk the expectation from companies. The content focuses on the theme of “unproductive productivity” during the 9–5 work-hour. The content reflects on the human urge to daydream during a meeting, doodle on sticky notes, play desktop games, or run off to the break room. If you read through the content carefully, you will see where the employee reading this book begins to doze off during the orientation meeting :-)
The publications that James brought to class relating to our project and the visit to the Katherine Small Gallery helped me tremendously in solidifying my content idea for the book. It was inspiring to view brand guide books that heavily relied and followed a specific grid system throughout. (ex. NY transit, polaroid, Nasa)
I began to design the booklet with spreads full of ascii art, abstract charts, and blurbs of work policy. However, I slowly began to feel lost and jotted down a couple of questions:
The issue arose as I initially had too many ideas that I wanted to include in my handbook, while being unsure what the order of the content should be, or how to balance the satirical yet comedic slides with the more formal content that would exist in real employee handbooks. The direction of the book fully settled during a separate meeting with James when he advised me to create a solid grid system and stick to it throughout the booklet. And having a strict grid system actually helped me organize the content and pacing of the handbook better.
Restrictions:
- Efficiency: James reminded me that cost & convenience plays a big role at corporations so I decided to create a spiral bound booklet with a no bleed mark 8.5x11 sized spread (for no trimming).
- Grid system: Inspired by one of my spreads about the “attention span of an anonymous worker at company and co during the day”, I decided to create a grid of 5 rows and 4 columns, reflecting on the 5 days a week/ 8 hours per day work schedule.
- Color/ image: Using blue color for both the text, image, and background color, not going outside the grid into the bleed marks, using bitmap image treatment (thank you James again for teaching me how to do it!)
The employee handbook begins with the usual welcome onboard message from the co-founders, then the policies, and some history and statistics regarding Company & Co.’s success, which is the point where the employee’s attention to the orientation starts to drift away. I wanted to have surprising moments in the handbook with full spread images of ascii art or text of employee’s thoughts exploding/ breaking into the company jargon. Unlike the ordinary and formal content in usual employee handbook, I wanted my version to be more humorous with content, such as manual for employee dress code, graphics for ideal arrival time, a guide to socializing in workplace, what is discussed at the break room, then occasional honest thoughts from the employee changing from the voice of the company to the employee’s.
Once the 50 page handbook was completed, it was ready to be printed! With 2 sets of thicker paper and 1 set of regular copy paper, the three sets of prints were cut in half, organized into correct order, then put into the spiral bound machine to be hole punched. (To my surprise, creating a spiral bound book was a lot more simpler than using the perfect bound machine). While I can say this handbook was a big challenge for me, it motivated me to improve my editorial design and enhanced my eyes for having balance in design to better portray my concept. Design might be about reducing: it can become more complete once you don’t have something to remove. Overall, I had tremendous fun adding humor to the content and experimenting with text and images.
The full spread can be found here!
Business Cards & Signage: Based on the Company & Co.’s set branding style (color, typefaces, logo, etc), I also designed each of our team member’s business cards and office signages! Some of the focal points of these deliverables was to nail down the corporate look while inserting a pinch of humor to it to stick to our satirical take on unproductive productivity.
When it came to business cards, I created 4 types of business card layout that hones into the grid and corporate branding style. Although I expected to choose one design at the end, James suggested why not keep all of these corporate/ Swiss type layout? So we have all four now :-)
Reflection: One of my biggest takeaways was that you can still play with creativity with restriction and be experimental! It was challenging to stay cohesive throughout the editorial publication, while experimenting with typographic treatment & image treatment. But considering the balance between text and image (what is the focal element of the spread) helped a lot. I also realized the power of incorporating humor into design as I had huge fun with this project with our team! It was exciting to see how the ideas we were bouncing at each other started to become more solidified and eventually become a physical product. I am very proud that our group decided to create an immersive, interactive experience for the viewer! :-D
Michelle’s Process
As one of our deliverables, we decided to recreate objects that can be found in the office environment.
The first thing that came across my mind was an employee ID card as it is one of the most noticeable features when we think of an overall look for an office worker. Exploring different options in the medium was fun and as a group we came to a conclusion that we should utilize acrylic board and EPIC’s laser cutter from last semester’s makers lab projects. We chose the frosted clear acrylic board over complete transparent ones/colored ones to recreate the texture of an old, used / scratched part of the clear plastic material that is commonly used for employee ID cards. Instead of using a headshot photograph of ourselves, we added a repetition of text “don’t be awkward” filling up the entire photo space as a humorous way of depicting what people would be thinking while their headshots are being taken.
Another deliverable we wanted to include was a resume. Although it is not something that we (company) would give out to our new employees, it is one of the most essential content when it comes to the process of getting into the corporate world. I tried to make the content as humorous as possible, almost like a fantasy version of a resume that could not exist in the real world. I wanted it to be relatable to our main audience (senior studio class) so I created all the content as relatable as possible yet generic within the BU community. Our deliverables such as the welcome video is filled with corporate jargons fitting into the satire concept and the handbook is expressing the employer’s expectations from the company’s perspective. Resume deliverable is almost like showing the opposing side, what the newly hired employees for the company are like, which still connects to the idea and concept of what our “Company and Co” is like yet from another point of view.
Towards the end of the process of finalizing all the deliverables, we took Grady’s advice and added a backpack to tie all the print materials and objects together. As we were preparing our presentation, we were heading towards the way of creating a new employee orientation kind of a setting and we thought the backpack with our company logo printed would be a fun “welcome merch” that is cohesive with everything else we’ve created. I found a backpack that was exactly the same color as our Company & Co brand guideline, and got our logo engraved in EPIC. It was a bit difficult to get the mixed polyester material / dark blue engraved in the laser cutter so it was important to control different levels of power each time I ran the cutter, to make sure the backpack was getting burnt enough for the letters to get engraved yet not cut through the entire bag.
Jacqueline’s Process
Pamphlet: The purpose of our pamphlet was to ‘reflect’ and introduce our company through text and sterile graphics. In order to implement text as a textural element, and to make our content appear more corporate, we decided to use a corporate jargon generator (rather than writing informative content) to put more content into our deliverables. We felt that using meaningless company jargon better reflected our goal with our project, which was to simulate the point-of-view of an uninterested employee, and to show how the language companies use blend together and lose meaning over time.
Before I began designing, I looked at the images we compiled and took inspiration mainly from graphs and outlines. I also looked into pamphlets and booklets made by old school companies and was heavily influenced by IBM’s clean and structured style. After experimenting with different colored backgrounds for the pamphlet, I ended up sticking to a black background in order for it to juxtapose with the other printed materials.
I wanted the cover to rely heavily on the silhouette of the logo, and created various vectorized versions of the logo to test out. I also played with different logo scales, with one of the versions being really small and sitting in the corner of the grid, and another version where the logo stretches across the page. I ultimately decided on using the logo with a white outline and expanded it across the cover. I also decided to include only the year instead of the company name in order to suggest that people should already know what company the logo represents, as we are acting as a larger, more established corporation.
In one of my spreads, my goal was to emphasize how disconnected companies are with their employees. In order to do this, I incorporated silhouettes of workers and instead of using actual images of them. As a result, the workers appeared anonymous and acted as a form of data instead of as people. To further push this concept, I assigned numbers for each silhouette and added company jargon to go with each person.
I also tested out different geometric shapes behind the silhouettes to add an extra layer and to suggest that the people are a part of a chart/graph. I ended up deciding to use the logo outline instead to further push the company identity and make it appear more company-oriented instead of people-oriented.
Video: To complete the employee orientation experience, we wanted to include a company video that would loop in an office space. We had several options when deciding on the location to film, such as the 5th floor of 808 (since we initially thought it would be interesting to contrast a chaotic background with a sterile/professional subject) and a classroom in 808. We ended up deciding to film in an empty classroom in 808 and arranged it so that it appeared like desks in an office. We filmed ourselves ‘talking’ and doing other mindless office tasks.
Video Audio: For the audio, we decided against having a voiceover with real content, and instead went with a ringing noise to recreate the experience of somebody zoning out when watching the video. When we filmed our ‘talking’ portions of the video, we ended up mouthing empty words and repeating gibberish to give the impression of speaking.
Video Treatment: After testing out various video filters/treatments, I stuck with a grainy, old-TV effect and applied it to both the type and the footage. My goal with the video was to create something generic, yet old school, for it to appear outdated and meaningless/repetitive. I also implemented type through adding visually dramatic jargon that ‘described’ the company values in the introduction. I also added captions, as there was no real audio, and used it as an opportunity to add more company jargon (that most people would only glimpse over) and as a way to add another visual layer. For the color I tested out white, yellow, and blue, and went with blue in order to restrict/limit the number of colors used.
Alongside using filters, I also added a blurred, rounded frame around the footage in order to create an old TV screen look to emphasize the old school work culture and aesthetic. The color in the footage was initially more muted, so I tested out different color grading to make the video more saturated.
Screensaver Animation: Another video element I wanted to add was a screensaver animation. I wanted to add this as another layer to the video and have it also play on loop in the background when presenting to the class. The screensaver was inspired by other old school screensavers used in TVs and computers, and people usually enjoy watching it move around when zoning out or wasting time.
When creating my first iteration, I initially used Final Cut Pro to animate the logo and to make the logo change colors when it hits the edge of the screen. It ended up moving awkwardly and inconsistently so I tested out After Effects (and followed a tutorial) to solve this problem. As a result, the animation played out smoothly and was able to loop. I ended up sticking to the Company & Co. blue for the background, and kept the logo white. I also added the same grainy filter over the screensaver.
Background: In order to make the website appear like a company-issued desktop, I designed simple backgrounds with the grainy, old-TV effect, and expanded the logo size to take up the screen.
I tested out light and dark version of the logo and we ended up going with the darker version. We also inserted the background as a video to keep the staticky movement.
Spreadsheet: We also wanted to include easter eggs into the company website to make the site more interactive. I thought it would be a fun idea to utilize a platform typically used in the office, like Google spreadsheets, and use it as a pixel drawing platform instead. I wanted it to appear as if an employee made the spreadsheet for fun and to pass time. I also thought it would be a nice touch to name the spreadsheet “im so bored!!! when can i go home :/” in order to further reflect their boredom/thought process!
Takeaway: Overall, I found that the design process for this project was really enjoyable. I loved coming up with fun ideas with my team, and it was an amazing opportunity to experiment with different softwares/platforms. I also enjoyed the brainstorming process, especially once we decided to be bold with our ideas and make the experience seem realistic.
Final Presentation/Performance
After we finalized what our deliverables were going to be, the next (and final!) step was to prepare how we were going to present it to the class.
Our group decided to follow the concept of being the four co-founders of ‘Company & Co.” and use the 10 minute presentation time to mimic an onboarding experience for new hires in the IT department. To truly immerse ourselves into character, we dressed up in business attire and wore our company ID cards, with the business card in our pockets.
Beginning with Hannah and Jacqueline’s welcome message to the class (as the new IT department employees), we guided the class to the office desk setup we had in the hallways to room 406, with all of our deliverables laid out.
When the class arrived at the door, Mina and Michelle, who were waiting inside the office area, opened the door for the class who were having issues with the ID card system. Pretending as if we were asking the class to figure out a system error on the laptop, we allowed the class 5 minutes to take a look around the deliverables on the table as well as the video projected on the wall.
Afterwards, we regrouped in the studio and resumed our New Hire Orientation presentation, which went over all the design assets we created, but with the notion that the new hires would be receiving them. This presentation concluded our project.
