Bri Piccari, Art + Design Fall 2013
CONTENTS Introduction 04 Charlotte Street Association
07
Dead Work Awards 19 New Hire Materials 29 White Good Web 35 White Good Holiday 53 Conclusion 61
INTRODUCTION White Good is a marketing and communications agency located in Downtown Lancaster, Pennsylvania. The agency has a 360 approach, fulfilling their clients public relations and creative needs. Working exclusively in the building products and home furnishings industries, White Good has long term relationships with their clients. From yearly financial planning for White Good’s services, to social media calendars and e-blast design, development and sending, every client need is met. As of December 2013, White Good’s client roster includes Rohl, who caters to the luxury bath and kitchen fixture industry, Thos. Moser Cabinetmakers, a company up in Maine specializing in creating beautiful and unique handcrafted furniture, GKD, a German manufacturer of metal fabrics, Miele, a manufacturer of high-end home and commercial appliances, also based in Germany, and Regupol America, the American branch of a German company, that creates track and gym surfaces from recycled rubber. In addition to these clients, White Good also works with Emerald Expositions and the National Kitchen and Bath Association’s (NKBA) to put on the annual Kitchen and Bath Industry Show (KBIS), an international trade show.
4 // INTRODUCTION
THE STUDIO White Good’s creative studio consists of two art directors and a digital strategist. For the entirety of my internship, I worked directly with all three members of the studio in addition to miscellaneous others depending upon the client and stage of the production a project was at.
RESPONSIBILITIES For the most part, I assisted studio members in day-to-day functions, ranging from attending kick-off and in-progress meetings to brainstorming and creative production. I assisted the digital strategist with gathering and organizing assets and content for the production of a client’s new website, and the art directions with layout flows in brochures, and designing e-blasts for various clients. Some of the projects I played a larger role in included the creation of materials promoting the Charlotte Street Association’s fall block party, the planning and designing of materials for the 4A’s Dead Work Awards, creation of new hire materials, conception and creation of White Good’s new agency website and conception of White Good’s annual holiday gift. I also became pretty proficient in InDesign.
INTRODUCTION // 5
CHARLOTTE STREET ASSOCIATION CHARLOTTE ST BLOCK PARTY
7
BACKGROUND For the last four years, the Charlotte Street Association has hosted a fall block party for the West End of Lancaster City to celebrate community and the end of summer.
OBJECTIVES ‘Have fun in the city’
DELIVERABLES Save the Date e-blast Printed Invitation
MANDATORIES Save the Date: Copy: Charlotte Street Association, Save the Date, September 8, 2013 4:30pm–8:30pm, Invite to Follow Invitation: Copy: Charlotte Street Association, Summer Block Party, Sunday, September 8, 2013, 4:30pm–8:30pm, rain or shine, Entertainment: Corty Bryon Band - Live Music, Pie Baking Contest, Bring a dish to share (serves 6–10), Admission $5/Adult, Free/Kids, benefits School District of Lancaster “Homeless Student Project”
8 // CHARLOTTE ST BLOCK PARTY
INSPIRATION After getting an idea of what the expectations were for the piece, I created a moodboard and began sketching out ideas. I explored an illustrated/handdrawn style to bring the area’s personality and a sense of fun to the invitation.
CHARLOTTE ST BLOCK PARTY // 9
After creating a moodboard and going through plenty of quick, ideation sketches, I went out and took reference photos of various houses within the designated blocks that were invited to the party. With the simple, illustrated style I envisioned for the invite in mind, I used the photos to help influence and guide the illustrations.
10 // CHARLOTTE ST BLOCK PARTY
CREATION With the illustrations well on their way, I had to consider not only the best way to include typography but how I could complement it in a way that keeps true to the intended feel. After giving a few typefaces a try, it became clear it that approach just wasn’t going to cut it. I moved onto the idea of incorporating drawn lettering, pulling from my independent study experience last spring.
CHARLOTTE ST BLOCK PARTY // 11
E-BLAST COMPLETED When considering all the mandatories, and organizing the hierarchy, the copy needed to not only be legible, but also stand it’s ground with everything else going on in the e-blast. Once the Save the Date e-blast was completed, the physical invitation was pretty easy to produce as well. A lot of the same elements that were created for the e-blast were used for physical invitation as well.
12 // CHARLOTTE ST BLOCK PARTY
PHYSICAL INVITATION The concepting behind this piece was a lot easier due to the theme and feel already being created. Obviously there were some additional items to add to the design. I came up with three concepts to present. A vertical postcard, a two-sided tag inspired design, and a one-sided flyer.
CHARLOTTE ST BLOCK PARTY // 13
14 // CHARLOTTE ST BLOCK PARTY
After presenting the concepts to the proper individuals, I moved forward with the tag-inspired idea. After a few typography and color changes, the physical invite was good to go.
However, due to production limitations and budget restraints, the tag idea had to be modified slightly. The tags now became door hangers. This required some design changes and the use of templates and diecuts to send to the printer.
CHARLOTTE ST BLOCK PARTY // 15
16 // CHARLOTTE ST BLOCK PARTY
To help promote the event, I also created a facebook cover photo for the event and a re-sized version of that for the White Good website’s rotator.
CHARLOTTE ST BLOCK PARTY // 17
4A’s DEAD WORK AWARDS
19
BACKGROUND White Good was asked to work in conjunction with Stargroup, based out of Philadelphia, PA, by the local chapter of 4A’s (American Association of Advertising Agencies) to put together the 2nd annual Dead Work Awards. The awards celebrate and recognize work ‘killed’ by clients before release or complete production.
WHAT WE DID White Good was involved in almost every step of the process, from theme ideation and creation to the last details of putting the event together. Personally, I was involved in most of the process along with the other studio members, sitting in on the weekly phone conferences, and assisting with various concepting and production peices. I also got to attend the event, where White Good won an award for ‘Best Brochure’. Stargroup set this year’s theme as a ressurrection, Victorian theme, reflecting the show’s location, the Mütter museum in Philadelphia.
DELIVERABLES From the physical save-the-date, to posters and t-shirts. Deliverables for this project had to cover all the bases.
20 // DEAD WORK AWARDS
POSTER Conceptualizing a poster idea following the set theme of ressurection brought about an interesting idea of something appearing one way in the light, another in the dark. The previous year, the poster was printed with glow-in-the-dark ink on top of the original print, showing a skull in the daylight, and a lightbulb in the dark. Following this idea, I came up with a list of possible combinations that would not only make sense, but fit this year’s theme. I eventually landed on the idea of a heartbeat/ EKG line and a flat line. The idea then evolved numerous times, due to printing circumstances. Unfortunately, the idea never came to full production and completion. We were unable to contact the designer of the previous year’s poster to find out who printed the glow-in-the-dark aspect of it. Most vendors we researched were either completely out of price range or were unable to do so for various reasons. This moved the idea to removing the glow-in-the-dark ink all together and following suit with the rest of the deliverables creatively and visually.
DEAD WORK AWARDS // 21
Above is the final iteration of the poster before it was scrapped completely. The image of the right depicts what would be printed with glow-in-the-dark ink.
T-SHIRTS Another item I was involved with was the designing of t-shirts for the event. Stargroup had created a number of creative items within their theme, giving me a jumping point stylisticly. There were a number of elements and flourishes used on the other materials that Stargroup provided White Good with. After recieving these, I was able to implement them into t-shirt designs that were, once again, scrapped.
22 // DEAD WORK AWARDS
DEAD WORK AWARDS // 23
PHOTOBOOTH BACKDROPS The third element I was most involved in did see the light of day. It was decided upon that at the event, there would be a photobooth for attendees to use throughout the evening. The use of props was eventually ruled out due to cost, but backdrops were a must. Photobot3000, a Philadelphia photo booth company, provided the technology needed. Instead of printed backdrops, a green screen was put up, and the backdrops were digitally placed in, randomly, momentarily after the photo was taken. There were two rotating backgrounds along with a grey footer that appeared in the foreground of every photo.
24 // DEAD WORK AWARDS
DEAD WORK AWARDS // 25
PRE/POST SHOW ANNOUCEMENT The last element of this project that I was involved with was a cross between the Dead Work Awards and White Good. To promote the event, I created a facebook cover photo and rotator image for White Good’s website announcing when the Awards were. Later, to announce the win for best brochure, I created a second set of facebook cover photo and rotator image for White Good’s website.
26 // DEAD WORK AWARDS
DEAD WORK AWARDS // 27
WHITE GOOD NEW HIRE MATERIALS
29
BACKGROUND Co-workers come and go. During my internship, I created new hire materials from existing templates for two new hires, both being Millersville alums.
OBJECTIVES Announcing additions to the White Good team, via e-blast, press release and on White Good’s website.
DELIVERABLES E-blast Rotator Image Landing Page People page images Because these materials are basically based off templates and previous materials, the ideation stage isn’t neccesary. Keeping in line with the previous materials but branching out slightly to show some variation, a few concepts are created and shown for each piece of the kit.
30 // NEW HIRE MATERIALS
NEW HIRE: TONY GUASCO Tony’s new hire materials involved an e-blast and rotator image for White Good’s website.
NEW HIRE MATERIALS // 31
NEW HIRE: KRISTEN JENKINS Kristen’s new hire materials involved an e-blast and rotator image for White Good’s website.
32 // NEW HIRE MATERIALS
NEW HIRE MATERIALS // 33
WHITE GOOD WHITE GOOD WEB
35
BACKGROUND White Good’s web design has been a few years in the making. Previous designs and ideas gave me a great starting spot. I worked on this project for the majority of my internship, along with other projects. This was also the largest project I was apart of while at White Good.
WHAT I DID Brainstormed new ideas, researched web trends and who White Good is as an agency. Created design after design, whether it was a slight edit or a complete rehaul. I presented ideas to the agency’s CEO and account manager and had numerous critiques and learning moments with the studio. It was a long, collaborative process, but the new site launches December 16th, 2013. While at White Good, this was the largest project I was apart of. I learned a ton about working with others on collaboration, communicating ideas to those outside of the design realm, and coming to mutual compromise. I also learned about limiting the number of ideas thrown at the creative team by others, and communicating limitations. The vision for the site changed quite a few times throughout the design process.
36 // WHITE GOOD WEB
GETTING STARTED Previous to me beginning my internship at White Good, some ideas were thrown around regarding White Good’s website redesign but due to a busy workflow, nothing came of them. Luckily, these gave me some pretty good insight as to where the studio saw the website going and where to start my mockups and wireframes. My first concept was a multi-page website, carrying out many of the same themes that were presented in the pre-existing designs by others. I then moved to a one page site, after an internal meeting compared the benefits and pitfalls of both. During the design, I used, and re-organized, the pre-existing content on White Good’s current website and implemented plugins recommended by the digital strategist for certain aspects of the site, such as a Google Maps API for an interactive experience showing where White Good has been, and where they’re going. When organizing the content and order of the site, we took a look at the Google Analytics, and were surprised at the findings. The most popular page of the current site was the ‘People’ page, followed by ‘Niche’. Order is incredibly important for a single page site, and we re-ordered everything according to its current popularity.
WHITE GOOD WEB // 37
MULTI-PAGE CONCEPT These are some screenshots from the multi-page concept I first presented.
38 // WHITE GOOD WEB
SINGLE PAGE CONCEPT The single page concept was inspired by design ideas existing previous to my internship. This was an early on, preliminary design. It’s incredible to see how much it has changed since this design. WHITE GOOD WEB // 39
SINGLE PAGE CONCEPT EVOLVED This version of the single page concept has the re-ordered sections in accordance with Google Analytics. 40 // WHITE GOOD WEB
FINDING THE RIGHT TYPEFACE Then there was the issue of finding the perfect typeface. During meetings with the president and one of the account managers, they made it clear what sort of font they were looking for, which changed a few times. This was, easily, the toughtest part of this project. WHITE GOOD WEB // 41
SO BACK TO THE STORYBOARD, AGAIN. After each meeting, there was a list of things to change, suggestions and things they liked. This led to a great deal of revisions, which spanned over a few months. 42 // WHITE GOOD WEB
Home - An image slider at the top of the site, features annoucements and events, similiar to the one that exists on the current White Good website. There was also a want for a direct Twitter feed and quick links to the latest blog posts. These can also be found while scrolling through the site via the “This week at White Good” tab. Since the entire website exists on (virtually) one page, there is a fixed nav that follows the user down the page, helping them get to wherever it is they’re going at any point in their experience. Niche - White Good is very big on expressing who they are as an agency. They work exclusively with few specific industries, which really gives meaning to the phrase “This is all we do”.
This is Who We Are - Looking at the Google Analytics for their current site, the people page was in the top 3 most visited pages. This led it to being the second part of the site. Each image has a color rollover (as shown in the bottom left), and when clicked produces a lightbox with a short bio of each employee (below). This also uses a responsive grid plugin.
Circle of Love - White Good employs the usage of the Circle of Love when working with clients. The circle represents a 360 approach. This was one of the toughest parts of the site to design. There were a lot of different directions being thrown out there and it was tough to decide what to include and what not to. Who We’ve Worked With - This section is similiar to ‘This is Who We Are’, with black and white images, color rollovers and a lightbox when clicked. Each image represents the different industries WG works with, and the lightbox displays the names of current and past clients within the industry that was clicked on.
Places We’ve Been - White Good attends a number of trade shows each year, supporting various clients. To showcase which trade shows, and when they are, a Google API map plugin was recommended for use here.
44 // WHITE GOOD WEB
People We Know - White Good belongs to and works with a number of associations and organizations, which is something they proudly display. Unlike any other section, the rollover for this section is a solid red with the association’s, or organization’s, name (as shown in the bottom left image).
The Path We’ve Traveled - White Good has quite the history. We found a plugin that has a responsive timeline. Each block allows for images, links, videos, whatever.
Contact - Last but not least, is the contact form. Pretty self explanatory, features a contact form, White Good’s address and links to social media.
WHITE GOOD WEB // 45
GETTING CLOSER After many more revisions, changes and meetings, the final design began to come through. There were countless typeface changes, image swaps, minds changed and research conducted. Some of the major parts of the site that changed: Circle of Love - There was a lot of confusion as to how to approach displaying the Circle of Love. On the current site, Analytics showed a sharp decrease in users following through the click-to-go-next design (shown below). Users got to the screen below via the ‘services’ link, and could go through the circle via clicking on the circle or ‘next’. From there users had to continue through the circle the same way, but nothing changed beside the text below the title of the ste.
Noting the drastic drop-off of users while on this section of the site led us to realize it was a tad dry and needed a makeover. A number of methods were considered to explore the circle. What began as a more stylized and interesting slider then moved to a prezi plugin and finally landed on creating a motion graphic video.
46 // WHITE GOOD WEB
Fonts - There was a lot of back and forth, as shown previously, on style of typefaces used, where each should be used, etc. What began as not using serifs, turned to serifs for headers, sans serif for body copy, then a more feminine serif but that was too feminine, then only sans serifs, and finally a serif for headers, serif for body copy and sans serif on the navigation. Who We Know - This section also had a lot of back and forth similar to the circle of love. While it could be displayed in a straightforward manner, there was also the idea of a prezi, or video, to also show how each association is leveraged. --------The background images were laid in with a parallax effect once coding began. The images moved with the user as they moved up or down the site. As a section changed, the background slid away in time for the new one to come up. The responsive plugin for ‘This is Who We Are’ and ‘Who We’ve Worked With’ automatically resizes images to fit them in a pre-defined area and then changes with browser size. For example, what may appear as three rows on a larger desktop, may have only two columns on a tablet or smaller desktop.
WHITE GOOD WEB // 47
FINALIZED. Above is the finalized website design, a collaborative effort from all studio members, before develpment began. 48 // WHITE GOOD WEB
Home - This section didn’t change too much through the various revisions. The final type desicions for this section came down to a serif for the body copy, and a sans serif for the navigation.
Niche - This section also didn’t change much, but shows the two serifs that were decided upon. It also shows the ‘This week at White Good’ tab that brings down the twitter feed and two latest blog posts below the fixed navigation.
This is Who We Are - Layout-wise this didn’t change too much. The rollover isn’t just a color image but also each person’s name in front of a black overlay. The lightbox also changed slightly. Instead of a gray background overlay when activated, White Good red is used at a lower percentage of opacity. The lightboxes also feature the black and white image of the employee, a small bio, their name, position and contact information.
WHITE GOOD WEB // 49
Circle of Love - As mentioned previously, there was a lot of back and forth over how to present the Circle of Love. The use of a video was the end decision.
Who We’ve Worked With - Again, this section stays consistent with ‘This is Who We Are’, the rollover image features the category name, and the lightbox carries a similar design as the employee lightbox.
Places We’ve Been - This was one of the few sections that didn’t change, besides the typefaces.
50 // WHITE GOOD WEB
People We Know - Similiar to Circle of Love, there was a lot of back and forth on how to present this one. Also like Circle of Love, it was decided a video was the best option.
The Path We’ve Traveled - This page didn’t change much through revisions either. The content and length depend upon what all is going to be included, which is to be decided upon on a later date by the higher ups.
Contact - Once again, this one’s pretty simple, the only changes that happened down here was a font swap.
WHITE GOOD WEB // 51
WHITE GOOD WHITE GOOD HOLIDAY
53
BACKGROUND Each year, White Good sends out a holiday present to their clients, and an e-blast to their e-mail list. In the past, presents have ranged from umbrellas to donations to New Orleans after Hurricane Katrina hit. With the new website launching, the agency wanted to tie the launch into the holiday gift. The e-blast would direct recipients to the new website, and the gift, which is sent to a limited number of people, would tie in as well.
WHAT I DID I helped with the original ideation and brainstorming. I also helped with some of the execution and production of various materials for project.
GETTING STARTED Thinking about where White Good is located compared to many of our clients, I came up with the idea of bringing Lancaster to them. I made lists of what sorts of things were special to this area, which kept coming back to food and Central Market downtown. I know the agency wanted the gift to be personal and have components that could be corporated with the new site.
54 // WHITE GOOD HOLIDAY
IDEATION Between thinking about Lancaster’s Central Market, and spending some time on Pinterest, I came up with the idea of sending the clients a recipe for a baked good along with the dry ingredients in a mason jar. Since I’ve been at White Good, we’ve held a number of baking competitions, and I felt doing this would portray the culture at White Good. I also considered how social media could be used along with the gift and how it could tie into the website. WIth the baking competitions in mind, I suggested having a bake off, with some limitations, and the recipe that won would be the recipe sent out to clients. I also suggested using social media to broadcast the competition and drive up some traffic. The clients would recieve a mason jar full of the dry ingredients for the winning recipe. They would also have a tag wishing them a happy holiday and the recipe. To tie into the website, the e-blast could drive traffic by listing the winning recipe and others on the White Good blog, which is accessible via the slider on the site and a navigational element.
WHITE GOOD HOLIDAY // 55
As I mentioned, during the initial meeting when I presented m idea, another idea came from it. Instead of a baked good, we could source teas and coffee from local businesses and send those to our clients. We would choose who would recieve what based on a personality quiz that matches the user up with their ideal tea. During the re-design of White Good web, a studio member created a moodboard presentation that included quotes from various figures that influenced the board and direction the website was going towards. The personalities of the teas and coffees would be derived from these individuals.
56 // WHITE GOOD HOLIDAY
With both ideas in mind, I went back and fleshed out the section idea, coming with the personalities and teas that would be reflected. When it came down to making a decision, the entire agency voted because we just couldn’t decide which to go with. The tea & coffee idea ended up winning. From there I helped come up with where we would get the coffee and taa from, what sort of mug we would include in the gift and how this could tie into the website. We decided the e-blast could send users to the quiz that tells them who their tea/White Good inspiration figure personality is. This would drive traffic to the website. The deliverables for this project include the physical gift, a tag for the package, an e -blast and the website quiz. Since the project overlapped with the ending of my internship, I wasn’t super involved with the creation of some of the ideas. I did do some concepting for the tags and e-blast and explored some of the directions we could go in. Below are some variations of tag ideas I came up with for the outside of the package.
WHITE GOOD HOLIDAY // 57
E-BLAST Above are concepts I came up with for the e-blast sent out to the e-mail list that would also drive the user to the website and quiz. The concept in the top left corner was combined with another for the final concept to be presented at a later date.
58 // WHITE GOOD HOLIDAY
Although I didn’t get to see this one in it’s final stage, I have a pretty good feeling it’ll be executed well. Personally, I felt this year’s holiday gift brought a whole new level of personality to White Good’s clients. From what I learned from previous years, this one was pretty different. I had also concepted a web component of this gift (White Good has a Christmas mini-site it usually incorporates each year). If this wasn’t being planned on being sent around the same time the new website is launching, the web component would feature roll overs of White Good’s employees and their favorite drinks and places around Lancaster. Instead, it’s leading to White Good’s new website, which is pretty cool looking.
WHITE GOOD HOLIDAY // 59
CONCLUSION
61
I learned a lot at White Good. Everything from presenting ideas internally to higher ups, to meeting with clients. I got to participate in nearly every stage of the creative process, and collaborate with not just the studio, but public relations and even account managers. Outside of design, I also learned a lot about work culture, and, more or less, standing your ground when you feel you should. With everything moving so quickly, being on top of e-mail communications is huge, especially when they contain the latest edits to that project you just spent all night on. Although this wouldn’t be my ideal place to work, it’s definitely help further shape and re-affirm my intended career field.
62 // CONCLUSION