BRAND IDENTITY PROCESS BOOK DESIGNED BY
CHRISTINA POPIK
Project definition 4
The Quinnipiac University School of Communications (SoC) annual Media Mashup is in need of a new brand identity to reveal Com Con this upcoming April 2019. Com Con is an annual event for students in communications to network and learn from professionals in the field. In the past, Media Mashup was an event that has had low attendance due to its issues with accessibility to students and class conflicts. Along with new changes being made to the organization of the event itself, the SoC Career Development department aims to bring attention to these new changes with the rebrand. The goal with this project is to design a logo/brand, website, poster and email template that has a cohesive feel. The new look should communicate that this is an annual event in the SoC, it is energetic, fun, insightful, and a great place to network and prepare for professional careers. All elements should have a conference feel, and appeal to all attendees including students, faculty and potential employers.
PAST LOGOS
PAST WEBSITE
HOME – DESKTOP
HOME – MOBILE
The old Media Mashup website appears resemble a slightly customized website template. Overall, the site lacks consistent elements such as typefaces and colors. There is no apparent brand aside from the Quinnipiac-branded logo thrown on a few of the webpages. On some pages, type is formatted in a way that is difficult for the user to read, such as on the sessions page. The site is bland and lacks a clean, professional look that may turn people away from attending the event. The website is responsive for easy reading on both desktop and mobile views.
5
6
ABOUT – DESKTOP
ABOUT – MOBILE
SESSIONS – DESKTOP
SESSIONS – MOBILE
NETWORKING EVENT – DESKTOP
NETWORKING EVENT – MOBILE
PICTURES – DESKTOP
PICTURES – MOBILE
CONTACT – DESKTOP
CONTACT – MOBILE
7
Research 8
Because Com Con is a rebrand of the event previously called Media Mashup, SoC is looking to bring a fun, inviting appeal to students, faculty and staff to increase attendance. As addressed in the project description, the main goals of the event is to help set up students for access by providing useful information on tackling all things career development. Along with getting an understanding of the image SoC wants for their event, visual research into Com Con involved looking at various forms of inspiration including logo, print marketing and website samples.
9
10
11
12
13
14
15
16
17
casual
youthful
interactive
engaging
building
growth
IMMERSmIVotE iv a
community
18
energetic
GEOMETRIC
fun abstract
lfresh social block BOLD
lively
tin g bright
network
welcoming
19
Personas 22
Personas created for Com Con consist of people that the event aims to bring in for attendance, whether it be a student attending the event for informative purposes or a speaker/employer looking to hire.
MARC WESTON Employer seeking motivated and qualified future hires at Com Con
AGE 37 OCCUPATION Editor-in-Chief LOCATION Hartford, CT PERSONALITY
“I was given a lot of great opportunities out of college due to the helpful professionals I met along the way in college and I hope to give back and be that person in return.�
Experienced
Honest
Efficient
Resourceful
MOTIVATIONS Future success of company Money Personal achievement
BACKGROUND Marc is the Editor-in-Chief of the Hartford Courant. He attended Stony Brook University and got a BA in journalism. Because a professor helped Marc get the opportunity to intern at the Washington Post in college (and eventually get a full-time job there) he was able to build strong connections that set him up for success down the line in his career. Marc also credits his strong career development experience for allowing him to get the opportunities he did.
Implementing refreshing change in the workplace
GOALS Marc hopes to attend college seminars such as Com Con and offer advice/tips to students following in a communications career path like his own.
CONCERNS Marc is concerned that students may not take in interest in the advice he has to offer or his experience may not be applicable to their lives. Looking at attending a seminar from a networking standpoint, Marc fears not finding potential employees he could hire to create the fresh, young environment he desires at his own newspaper.
TECHNOLOGY-USE
60%
35%
5%
Laptop
iPhone
Apple Watch
23
TRINITY WELLS Full-time professor with a passion for teaching students how to succeed post-graduation AGE 27 OCCUPATION Professor LOCATION Hamden, CT PERSONALITY
“Eventually after college I found that my true passion was in teaching the unknown and preparing students for the too-common struggles of postcollege life.”
Reliable
Trustworthy
Empathetic
Tactful
MOTIVATIONS Helping other succeed/grow Being a resource for students Learning from past students’ mistakes
BACKGROUND Trinity is a Quinnipiac University professor of journalism. She also teachers first-year seminar which aims to help first-year student adjust to college life and academics. Her mission as an educator is to help students gain successful tactics to approach the workforce with. Trinity admittedly struggled to find work after college and helps educate those who are going to follow her same footsteps on how to better prepare for what is to come.
Knowledge
GOALS Trinity hopes to design a seminar that allows students to build skills that will help them flourish after their college career. This will include networking with professionals in the field, resume building, interview tips and developing an effective LinkedIn profile.
CONCERNS Trinity’s concern is making an effort to push education on career development to students who are uninterested in learning it. Another concern is not knowing exactly what the students need (possibly due to the changing environment), providing a seminar with unnecessary information.
TECHNOLOGY-USE
24
50%
45%
5%
Laptop
iPhone
Apple Watch
What kind of environment do you look for in a career development event?
I look for an environment where people are seeking to teach others the importance of how to navigate a successful career path upon graduation. – Amanda Perelli SCHOOL OF COMMUNICATIONS STUDENT 25
Logo ideas 26
After looking at visual inspiration and doing more brainstorming on the desired event image, I began sketching and drafting up logos keeping in mind the fun conference feel for people in the communications field and thinking of clever ways to visualize the words “Com” and “Con.”
i. Sketches
27
ii. Initial logos Many of the logos here resemble boldness with font and color choice. I explored different compositions of “Com Con� to make for an interesting format that draws eyes, while also keeping a conference feel.
COMNOC COM NOC COMNOC COM NOC
28
COMCON
COM CON
COMCON
COM 2019
2019
201 9
COMCON
COM
CON 29
iii. Brand board LOGOS
ADJACENT
STACKED
COM
COM
COM
COM
COM
201 9
201 9
201 9
201 9
201 9
BOXED
COLOR
#FBAF42
C: 0% M: 35% Y: 84% K: 0%
30
R: 251 G: 176 B: 66
#F05323
C: 0% M: 83% Y: 99% K: 0%
R: 240 G: 83 B: 36
#3D6CB4
C: 81% M: 58% Y: 0% K: 0%
R: 61 G: 109 B: 181
TYPE
Gotham ExtraLight Gotham Light Gotham Medium Gotham Bold Gotham Black
Gotham Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
Gotham Medium Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
STYLE
Headline Bold text with an unfitted black outline
#22A9DE
#5CC5C7
#3A3461
C: 71% M: 15% Y: 1% K: 0%
C: 59% M: 0% Y: 25% K: 0%
C: 87% M: 87% Y: 34% K: 24%
R: 34 G: 169 B: 222
R: 92 G: 198 B: 199
R: 59 G: 53 B: 97
31
CO 32
OM 33
Website
The goal of the Com Con website is to capture the same fun feel of the brand identity and act as a resource for event details including information on the sessions, speakers/panels. The website ideally explains in more depth why a student should attend the event and what they will get out of going.
Info architecture 34
Wireframes HOME
HOME
SESSIONS
SESSIONS
SPEAKERS
SPEAKERS
GALLERY
GALLERY
CONTACT
CONTACT
35
Web Comps Desktop view HOME The home page begins with a large image above the fold. The logo is laid over a photo from a previous conference, along with other vital event details. The navigation bar is aligned to the right side of the page with the active page in orange.
The photo collapses to a smaller image as you begin to scroll down (shown in all of the pages). Below the image is a countdown to the event and a small description of what the event entails. Underneath is a button to ‘learn more’ which will redirect the user to the sessions page that outlines the event schedule.
The final portion of the home page outlines why you should attend/highlights of the event with icons. Underneath are buttons for more information about the speakers and contact information.
36
SESSIONS
The sessions page outlines all of the sessions by name, speaker, time, location and a description. All sessions entries are associated with icons with specific majors and goal objectives so that attendees can easily see if a certain session may pertain to their interests. The right-side column shows the different icons as well as a list of items to bring to the event and suggestions for what to wear.
37
Web Comps Desktop view
SPEAKERS The top of the speakers page features placeholder boxes for the logos of organizations/companies who are going to be present at the event. The logo is shown in the top-right corner which is another option for redirection to the home page.
As you scroll down, the speakers page presents photos and bios for all of the speakers attending the event with a button to visit the session they will be participating at.
38
GALLERY The gallery page features photos from previous Com Con events. A caption appears when you hover over an image.
CONTACT
39
Web Comps Mobile view
40
The setup for mobile view is very similar to that of desktop view except the navigation bar collapses into a hamburger menu and the logo appears on the right side of the nav.
41
Email + Poster 42
Both the email blast and poster aim to carry out the brand identity in a simpler fashion than the website by summarizing key points such as what the event is, where and event the event is, and where to get more information.
The email blast resembles a simplified version of the website content, including the event details at the top, an event description, why you should attend, what to bring/wear and a link to the website where more information can be found.
43
44
Primary Poster
Secondary Posters
45
Final Print + Web 46
In order to align with Quinnipiac University’s branding, the colors of the Com Con brand were adjusted to match the university color scheme. Additionally, since SoC added a second career development leading up to Com Con, a career fair targeted towards communications students, logos were also made for this event. Typically at university-wide career fairs, communications is an underrepresented field. To provide wider opportunities for SoC students, Com Fair was developed.
Final brand LOGOS
COMFAIR ADJACENT
ADJACENT
STACKED
STACKED
COM
COM
COM
201 9
201 9
201 9
BOXED
COLOR
#4B8DCB
C: 70% M: 36% Y: 0% K: 0%
R: 75 G: 141 B: 203
#FDB71A
C: 0% M: 31% Y: 98% K: 0%
R: 253 G: 183 B: 36
#0C233F
C: 98% M: 84% Y: 46% K: 51%
R: 12 G: 35 B: 63
47
Final Posters I created an additional poster for Com Fair, implementing the altered brand colors. For the Com Con poster, the initial design was used, with only slight alterations to color and text placement. Com Fair uses a large white logo to market the event, while Com Con poster uses a pattern of smaller logos.
School of Communications Career Fair
2019
ster at
regi e day, and e about th Learn mor OM
N O C COM N.C
QUCOMCO
elopment ssional dev
School of
event
al profe ations annu
Communic
CO M CON
CO M CON
CO M CON
CO M CON
CO M CON
201 9
201 9
201 9
201 9
201 9
CO M CON
CO M CON
CO M CON
CO M CON
CO M CON
201 9
201 9
201 9
201 9
201 9
Wednesday, February 27th 11 a.m. – 3 p.m. • CCE Rotunda Network with representatives from 20+ companies, who are looking to hire you. Free LinkedIn headshots available.
FOR A LIST OF EMPLOYERS VISIT
QUCOMCON.COM 48
CO M CON 201 9
CO M CON
CO M CON
CO M CON
CO CON
CO M CON 201 9
201 9
ing
ct els conne s, and pan n io ry ss st se u d ops, ross the in nal worksh ssionals ac educatio and profe A day of i n m u al you with 201 9
201 9
5 L I R P A FRIDAY, M P 10 AM – 2UNICATIONS
R COMM O F R E T CEN ERING & ENGINE
Final Website The website gives off a slightly different feel than the initial comps. Instead of having event photos for the banner, I created a design using parts of the Com Con logos, using that same unfitted color/outline look. The design is used throughout the website for banners and provides a pop of color and is much visually clearer than the use of photos in the banner in my previous comps. For a live demo of the website, visit qucomcon.com.
49
Final Website
HOME – DESKTOP
COM FAIR – DESKTOP
50
HOME – MOBILE
COM FAIR – MOBILE
51
Final Website
SPEAKERS – DESKTOP
SESSIONS – DESKTOP
CONTACT – DESKTOP
52
SESSIONS – MOBILE
SPEAKERS – MOBILE
CONTACT – MOBILE
53
54
SPRING 2019