A Process Book of
Emily Carr University of Art + Design Communication Design
Kyu Lee
Creative Process
1
2
3
4
introduction
d e s i g n p r o p o sa l
thesis
s e co n da ry
p r i m a ry
research
research
Research Focus
Research Focus
Articles
Co-Creation #1
Insights
Co-creation #2
My view
(4)
Problem Space Problem Analysis Brainstorming
Thesis
(10)
(6) (12)
5
Answers Research Review Insights
(18)
2
6
7
8
9
10
v i s ua l i d e n t i t y
w e b s i t e p r otot y p e s
final website
p r o m ot i o n
f i n a l d e l i v e ra b l e s
Design Direction
Layout sketches
3 Pillars
Tape
Website
Design Precedents
Wireframes
Main Pages
Business Card
Promo. Materials
Brand Strategy
Prototype v.1
User Profile
Posters
References
Logo Sketches
Prototype v.2
General Pages
Promo Video
Bridge Request
Installation Plans
Final Logo
(46) (36)
Account Setup
(64)
3
(84)
(100)
1
Introduction 4
my view Choosing a creative path for one’s career often requires strong selfbelief and supports from others. I was previlleged to be raised from a family that was supportive of my passion. Thus, I had always been optimistic about my choice of education and pursuit of a creative path. However, I have increasingly become aware of cases in which young creatives struggle to land onto suitable jobs and receive fair payments for their time and effort. It is also quite disheartening to hear some of them expressing their regrets for choosing their paths and that they have considered moving to completely different directions. I could not help but to think that works produced by young visual creators are often under-valued and the doors for opportunities are quite narrow in Vancouver. My question around finding opportunities in Vancouver started growing even more when I moved into the senior year. I have been asking myself this question: “Is everything okay in our local creative industry?”
5
2
Problem 6
p r o b l e m s pac e Despite Vancouver’s growing creative industry and educational institutions, the doors of opportunities for young graphic designers are narrow and do not correspond to the rate of industry growth. Fresh out-of-school designers usually lack professional network, experience and confidence while industry professionals prefer to hire experienced designers. Hence, the gap between young designers and professional world remains wide and deep.
7
p r o b l e m a n a lys i s
lack of young designers’ professional network
portfolio-focused industry standards
young designers’ lack of understanding of professional world and expectations
lack of opportunities for industry professionals to get to know young designers before hiring
8
b ra i n sto r m i n g The further I analyzed the problem space (the gap between young designers and industry professionals), the more I began to question whether the gap was simply a literal gap or it could also be an emotional distance resulted by discrepencies of experience and confidence levels between young designers and industry professionals. I also analyzed the portfolio-focused industry standard that equates a designer’s skills as his competency. In order to discover ways to challenge or subvert these issues, I explored ideas such as promoting young designers through video campaigns and holding an intense workshop or bootcamp in which industry professionals and young designers can collaborate on the same project to understand each other more comprehensively. I also thought about creating an online community where these two parties could deeply understand each others' qualities before they connect. 9
3
Thesis 10
problem
thesis
Lack of opportunities for young design students
creating an online community where young
to connect to industry professionals to personal
designers and industry professionals can have
and comprehensive level.
meaningful connections.
m i ss i o n Create a platform that is “personalized”, “insightful” and “engaging” to facilitate meaningful connections between young designers and industry professionals.
11
4
Secondary Research 12
research focus I wanted my secondary research findings to reflect the raw reality that many young graphic designers end up facing when they leave schools. While I valued numeric hard data, I wanted to focus more on personal remarks from public that reflect individauls’ opinions as well as their feelings towards this issue. I also looked into industry professionals’ expectations and their positions in order to understand both sides.
13
Graphic Designer Salary Report
National Salary Average for Graphic Designers
C$40,988/year Vancouver’s Salary Average for Graphic Designers
C$40,800/year Entry-Level Graphic Designer’s Salary Average
C$38,234/year = $17.00/hour
14
“What Employers Look For #2”
“I wish I’d known that”
by Jim Walls (Executive CD, 160over90)
by Chris Arnold (Founder & CD, Creative Orchestra) “Personalize all communications and do your homework.”
1. Chops Do candidates have solid understanding of basic design elements?
“Be different…Be employed for who you are, not who the college wanted you to be.”
2. Versatility Show a wide variety of work in portfolio, not all “samey”.
“You are fresh but green and making claims you are great makes you look arrogant and deluded.”
3. Conceptual Ability Designers with the ability to develop initial concept to broader systems, solutions, and campaigns will go far.
“Forget money. It’s not the money but the work that really matters.” “It’s not just about the work but about people.”
4. Originality If you’re going to include an identity for a cupcake shop in your portfolio, it had better be the ne plus ultra of cupcake shop identities.
“Think of yourself as a brand. You need to be remembered.”
5. Editing Best. Work. Only. 6. Interviews - Process - Communication Skills - Personality - Past-history
15
“What graphic design schools are lacking� by David Airey (Graphic Designer) 1. Communication Skills To other designers and businesses 2. Commercial Work Skills Heavy focus on personal portfolio building does not always help. 3. Web Design Teaching 4. Legalities Design Brief for client, Client Contracts, Approvals, etc. 5. Business Mindset 6. Lessons on the real world 7. Production Skills Preparing printing files, website domain, etc. 8. Client Interaction 9. Lessons on pricing
i n s i g h ts
young designers need more real-world
young designers need many skills other
understandings and resources.
than simply design skills that are taught in schools.
there should be a platform or a venue
conventional standards of determining
for young designers and professionals
a competent candidate solely based on
to network and bond.
skills and portfolio should be shifted to understanding the candidate more deeply and comprehensively.
17
5
Primary Research 18
research focus I decided to design 2 separate co-creation workbooks (one for local business owners/industry professionals working in creative firms and another one for young designers/students). I originally intended these workbooks to be in a form of group workshop; however, due to the difficulty of coordinating schedules for busy participants, I created a digital version of workshop that I could individaully send out to participants. Each workbook comprises 4 pages (each page for a question and answers for the question) that are intended to collect input such as professionals’ standard expectations, what qualities they value from a candidate, and what kinds of question they would ask during an interview. From young designers, I wanted to gather their understandings of the word “professional� and also how they would design a creative resume to appeal to industry professionals. I carefully crafted each question so I could collect useful insights from every participants to help defining my design direction. 19
co - c r e at i o n b o o k #1
Lead-in spread describes my overall project and the purpose of the workbook. It also contains the overview of the workbook questions.
20
Activity One was designed to understand what the participant values and looks for when he gets to know someone new. By asking them what they want others to know about themselves, I can get an overview of what aspects and values they prioritizes from someone.
21
Activity Two was designed to understand how the participant approaches to comprehensively understand other person. Knowing what questions they would ask during an interview was helpful for me while designing the structure of the online platform.
Activity Four was intended to understand industry professionals' imagined ideal graphic designers. I thought this knowledge would be a great information for young designers to know of and also for desinging the interface for the website user profile more creatively.
Inputs from Activity Three was useful for me to determine visual direction for the design of the platform and visual identity. I selected 4 keywords: Connected, Integrated, Community and Opportunity which I think best describe the community. I asked participants to write associated colours, graphics and typeface for each keyword. 22
co - c r e at i o n b o o k #2
Lead-in spread describes my overall project and the purpose of the workbook. It also contains the overview of the workbook questions.
23
Activity Two was helpful to determine the visual direction for the online community that should be differentiated from existing platforms for online professional networking (ex. LinkedIn, Behance, etc).
Activity One was intended to comprehend young designers' current situations and their emotional states. I wanted to understand what the word “professional� means to them and how they associate themselves to the professional world. 24
Activity Four was meant to be useful for designing unconventional user profile for the website. Also, it was intended to understand how the participants would differentiate themselves from other professional designers and appeal to employers creatively.
Activity Three was intended to find out what young designers feel like they are lacking and what aids or tools can be useful for them to empower them in their professions.
25
Answers from an industry professional by D. (Branding Project Manager at Kit & Ace)
Here, the participant provided some amazing insights. He stated that “the designer needs to get as much informaion as they can at the beginning...[in order not to] waste...time”. This statement implies that time really matters in the industry and efficiency is highly prioritized.
“In order for a designer to best fulfill the job, it's good to understand the following about the client so the designer knows how to approach the creative process and the walkthrough process of presenting to the client and selling the ideas. The designer needs to get as much information as they can at the beginning of the project so that they don't waste both parties time. If they can understand what the client is looking for and what they wouldn't like, the better. Certain things are important to know depending on what the project is, but in general the following aspects are important:
The participant listed out several points that are important to know about a designer. He stated everything heavily based on employer's point of view which was valuable for me to learn from.
- name: so you know who you're talking to of course - culture, beliefs, values, taste: this can provide useful information of what to consider including or avoiding in your design, or how you approach your work or engage with the client - hobbies: just a good way to connect with the client on something outside of work and make things more approachable (if they are up for it) - vision, goals: this is good to know the expectations of what they want the design to do for them.”
26
Answers from an industry professional by D. (Branding Project Manager at Kit & Ace)
Clearly, the participant would ask these questions to evaluate candidates’ reasons for applying the position, to understand how they work and what they're like as a person, and also their level of commitment.
- why do you want this position? what attracted you to this opportunity over others? - when you wake up in the morning do you make up your bed or do you leave it as is? - what do you do for fun? do you have any hobbies? - do you drink coffee? if you do or don't, why? - do you do freelance work on the side? - what accomplishment of yours are you most proud of and why? - how would your friends describe you?
Sorry, I don't know what context means in this case.
The participant shared his criteria of prioritizing skillsets that are not limited to technical skills. His point on pitching creative presentations was unexpected and I learned how comprehensive hiring process can be since he also expects the candidate to explain her creative profess and thought.
I'd want to ask them what skills/proficiency they have in order to evaluate what work I feel they could accomplish, how well they could do it on their own, and gauge how much they should be paid or what further training or knowledge they will require: - what adobe creative suite programs do you have experience. to what degree do you have experience with them - have you pitched creative presentations before? what role did you have in it? did you lead it? if you presented, how many people were you pitching to? - explain your creative thought and design process
The participant's expectations on the candidate's experiences seem to be quite intense, yet with valid reasons. They focus on candidates’ work ethics and how they can handle difficult challenges and lead the project to success. He also seems to care about flexibility of candidates’ skillsets.
I'd ask the following questions to evaluate what they have done in the past to understand what they are capable of and how that may affect things if they are hired: - how have you handled times when a client asks for something that you feel strongly against? what is your approach to handle this situation? - provide an example in your previous job where something you owned went wrong and what did you to do fix it - provide an example of what you felt was most rewarding in your previous job - what is something you've done in the past that would be transferable to today to contribute to its success? - what traditional design projects have you done (print, identity, packaging, branding) and what digital design projects have you done (website, digital advertising/email/ banners/apps, video, motion graphics)?
27
Answers from an industry professional by D. (Branding Project Manager at Kit & Ace)
This activity provided me with many interesting ideas. His choices of colours, graphics and typefaces for each keyword are very thoughtful and intentional. For example, for the keyword “Integrated”, his colour choices are complimentary colours that will give other colour a strong presence by comlimenting each other. Also, for “connected”, he wanted the typeface to be close together to convey a close distance between each letter in order to convey the meaning. I also found his choices of “bold, large, all caps” of typeface for the word “opportunity” really strong as they really spark the idea of chances.
blue, purple, silver
complimentary colours
web, chain, meditation, universe, social media, technology
lego, blocks that build up/form something, people of different backgrounds working together
words close together
forms into a shape
typeface
orange, blue
ty pe fa ce
green, yellow, gold
people, hand reaching out
28
san serif, fun, approachable
bold, large, all caps
typeface
TYPEFACE
Answers from an industry professional by D. (Branding Project Manager at Kit & Ace)
The participant's expectations on an ideal graphic designer is clearly presented here. He highly values a candidate's capability in a collaborative environment and also proficiency in Adobe CC programs, branding, web design, mock-ups, presentation, animation/motion graphics, etc. Strong work references are also something he looks for, which indicates that he values candidatesďż˝ work experiences and reputation.
- Able to work unsupervised or in a collaborative/team environment when needed. Manage timelines - Advanced in Adobe Creative Suite programs - Experience with identity and logo design - Experience with branding - Experience with digital design and web design - Prepare mocks and presentation deck and can walk through entire thought process to non-design audience - Experience with building brand design guidelines - Can save out and package final assets in appropriate formats for both digital and printed asset delivery - Experience with estimate cost of materials and time to complete graphic design and managing budgets - Some experience with animation/motion graphics - Some experience with photography and photo editing software - Some experience in HTML/CSS - Great work references (from long term clients or previous supervisors)
29
Answers from a young designer by J. (COMD student at Emily Carr University)
This student described her feelings associated with the term “professional� as anxiety, self-consciousness and insecurity. Several other students aside from her also replied that they feel anxious and unsure about how they will fit into the professional design firm.
I generally feel anxiety when seeing this term - I often feel that I don't have the necessary skillset that a respectable designer is supposed to have and it makes me feel like I am behind my peers. ECU especially doesn't put in a lot of teaching for things like colour theory, how to use Adobe Creative Suite, etc. I think it would be great if they had a course in 1st or 2nd year for these types of essential skills. (for summary: anxiety, self consciousness, insecurity)
30
Answers from a young designer by J. (COMD student at Emily Carr University)
The student described herself as being “creative”, “enthusiastic”, “quick learner” and being good at “teamwork” and problem solving. These descriptive words were useful to later develop strategies for highlighting yong designers' potentials and capabilities.
I use words like creative, enthusiastic, and a quick learner. I would also say that I am good at teamwork and being good at problem solving.
I like her choice of pairing toned-down neutral colours to a bright colour in order to brand herself (dark gray and white colours paired up with bright yellow). Her colour choices seem to reflect the ideas of “professional” and “playfulness” that is associated with creativity. Her graphic choice was a series of simple shapes that are arranged dynamically in a diagonal line, conveying progress and activeness. For her type choices, she wanted her personality to show through serif typefaces along with her preferred san-serif typefaces.
white, dark grey, black, with one bright, happy accent color like golden yellow or deep fuschia
most simple shapes but with dynamic movement (i.e. diagonal lines)
I prefer sans serif (DIN, Futura, Univers) and serifs with personality (Clarendon, Rockwell, Mrs, Eaves)
Typeface
Typeface Typeface
Typeface
Typeface
31
Answers from a young designer by J. (COMD student at Emily Carr University)
What's notable about this section is that she literally mentioned physical tools (sketchbook, drawing tools), and technical softwares (Adobe CC), as well as skills (strong networking and talking skills). It indicates how challenging it is for young designers to acquire effective communication skills and networking skills while they are still in schools, under-experienced.
32
Answers from a young designer by J. (COMD student at Emily Carr University)
Her creative resume design is quite unique. She paired up different concepts with physical attributes of herself. For example, she paired up “traits” with her head (brain). She also connected her “passions” to her heart. For her “skills”, she connected it to her hands and she linked “achievements” to her feet, implying her current position that is based on her past achievements. I thought her idea of symbolizing different qualities to her body parts was very thoughtful and visually interesting and that I would possibly explore this option for user profile design.
33
research review In the end, I collected answers from 6 design students and 3 industry professionals (business owner, working graphic designer and project manager). I was surprised to find out that the majority of the student participants were feeling anxious about moving out to the real world and pursue their creative path because they felt underprepared and had limited network for their future career. From the other group of participants, I found out that they had high expectations on candidates for employment, yet they really valued designersďż˝ attitudes towards job opportunities and their qualities as individuals. After reviewing I began to feel strongly about creating an online community where both young designers and industry professionals could network with informed knowledge about each other's attributes and qualities. 34
i n s i g h ts
It's important to both emotionally and technically assist young
Co-creation workbooks demonstrated that both designers
designers who often feel under-prepared and anxious about
and professionals have something to offer and learn from
their current positions in relation to the professional world.
each other in the creative community. It helped me believe
The visual design and function of the online community should
that they need a common ground where they can connect and
facilitate these aspects.
share their expectations, knowledge and personal qualities.
Indusry professionals already have comprehensive standards
The truth I found from my primary research is that one's
to evaluate designers. They look for not only one's competency
qualities as a person are what matter the most when it
in skills but also his creative potential, problem-solving skills,
comes to employment. These qualities include one's abilities,
level of commitment, ability to be productive in a collaborative
attributes, personality and much more. The main challenge
environment, etc. Therefore, this project should convey the
I found for this online community project was to best reflect
reality of the creative firms, while it still empowers young
a person's qualities to allow others to have comprehensive
designers in a positive way.
learning about that person.
35
6
Visual Identity 36
design direction
Colours Through my primary research, I was able to select a few options to determine the visual direction for the project. For example, gold or bright yellow paired up with neutral white or gray were popular selections of the majority of the participants. They also preferred other refreshing and popping colours such as green, blue, pink and purple. Many participants preferred the idea of “connection” and “building-up” that can be illustrated through graphics such as link, web, lego blocks and stacked up bricks. Interestingly, many design students chose simple geometric shapes. I assume that the main reason is
Graphics
their design background and their aesthetic preferences towards simple shapes such as a triangle, a line and a dot.
37
design direction
Imageries The participants' choices of imageries were relatively personal and abstract. However, many of them still retained the concepts of “connection”, “integration”, “link”, etc. I noticed fascinating difference between answers from two groups of participants. While some professionals explored the concepts of keywords (opportunity, community, integrated and connected) through dynamic arrangement of letters or words, most design students chose certain fonts to convey feelings and styles. Combination of san-serif and serif fonts was popular whereas most people chose san-serif, modernist fonts
Typography
for a single choice of font.
38
d e s i g n p r e c e d e n t : stac k ov e r f low
Stack Overflow Website Stack Overflow is an online community forum specifically for interaction designers and web developers. It's main feature is Q&A forum with posts that are filtered up and down based on users' votes around their usefulness. The organization and categorization function effectively and the users can gain badges based on their number of contributions in the community (ex. by answering another users' questions). I personally appreciate how the focus of this website is simple and clear so that users know where to visit when they have certain problems or questions from their practice. I also enjoy how the function of the website is entirely dedicated to forum discussion within the community, making the purpose of the website clear.
Colour Scheme
39
d e s i g n p r e c e d e n t : d e s i g n e r n e ws
Designer News Website Designer News is also an online community forum for designers but not limited to UX/UI designers. The content here is more inclusive and broad than Stack Overflow because of its diverse audience. The website also features “Jobs”, “Podcast” and “Projects” categories where people can connect to different job opportunities and designers who have outstanding projects and also listen to featured podcasts.
Colour Scheme
40
d e s i g n p r e c e d e n t : f wa
FWA Website This is a platform where creative members can submit and showcase their projects to get selected for awards based on “innovation, progression and future thinking�. The interface is quite unique and advanced becuase users can scroll down feed along the timeline and see the content in chronological orders. The design is simple and clean, giving a professional impression. I was also interested in integrating timeline feature into user's profile so that users can display their personal histories more narratively.
Colour Scheme
41
design precedent: aiga
AIGA official website AIGA official website has the closest structure and organization of content I was envisioning for my project. The idea of community, resources, opportunity, connection and professionalism are all included in the website. Although only paid members can have the previleges offered by this association, other visitors can still assess lots of useful information and view other members' portfolios. I was also interested in its organized structure and content management system.
Colour Scheme
42
b ra n d st rat e gy
Name Exploration
Vision + Mission
• Bridge
We aim to bridge the gap between young designers and
• Gather
industry professionals by creating a diverse, creative
• Mesh
community. At BRIDGE, all members can share their
• Hub
qualities to allow other members to better understand
• Connekt
themselves and to fulfill their career goals by networking with like-minded members or members with unique
Rationale
qualities they seek for. We also envision to inform and empower young designers with professional knowledge
I wanted this online community to be a space of coonection,
and understanding to be prepared for the real world.
opportunity and integration. Hence, I thought BRIDGE would be a wonderful name because its core mission as a creative
Trueline
networking community was clear. Conceptually, BRIDGE also conveys support, reliability and exchange of information. I
We are an integrated creative community where young
also thought that this name had a lot of potential for visual
designers and industry professionals can connect with
explorations.
deeper-level understanding of each other.
Qualities/Personality
Taglines
• Personalized
• Open-minded
• Individualities Create Opportunities
• Opportunity
• Transparent
• A Bridge To Your Future
• Integrated
• Supportive
• Draw Your Line Further
• Connected
• Reliable
• Build For Your Career
• Professional
• Approchable 43
lo g o s k e tc h e s
44
f i n a l lo g o
Individualities Create Opportunities
Logo
Font
After multiple stages of logo exploration, I finalized the logo with a yellow
GOTHAM BOLD
strip that runs across every letter of BRIDGE. Instead of using a conventional corporate colour (blue), I chose yellow that is more playful, inviting and creative. I also like how this logo visualizes the concept of “bridging the gap� with a simple yellow strip that catches an attention.
45
Colour Scheme
7
Website Prototypes 46
l ayo u t s k e tc h e s Before creating digital layouts, I did a number of sketches to organize structure, userflow and to determine key features of the website. In the beginning, I studied different categories of the website, level of skills, core values and personality graph for the user profile. Then I moved on to sketching overall structure and user flow of the website. The process was very quick and spontanous.
47
l ayo u t s k e tc h e s
Homepage
User Profile (Introduction)
User Profile (My Story)
User Profile (My Skills)
User Profile (Focus Areas)
User Profile (Personality)
48
User Profile (My Process)
User Profile (My Favourites)
User Profile (My Travel History)
For the homepage sketches, I wanted to highlight Q&A forum, featured members and useful articles. For user profile pages, I wanted to highlight individual user's focus, skills, personality, etc to allow other users to have more immersive and storybook-reading experience when scrolling down someone's profile. I also wanted to integrate data visualization to display users' qualitative data. I thought this will be useful to allow members to discover compatible members based on their qualities.
49
w i r e f ra m e s
Homepage
Job Opportunities
Members' Projects (Portfolio)
50
w i r e f ra m e s
Project View Page v1
Project View Page v2
User Profile Page
51
w i r e f ra m e s
User's Projects Page
Designer Discovery Page
52
Articles (Resources Page)
w i r e f ra m e s
Creating rapid wireframes helped me understand how effective userflow and website interface can offer intuitive user experience. Also, I became familiar with creating balanced texture and space for layout. After creating several wireframes, I moved onto designing website prototypes.
Full Article Page
Discussion Forum Page
53
p r otot y p e v .1
Homepage
Job Openings Page
Member's Projects Page
54
p r otot y p e v .1
Portfolio View Page
User Profile (Intro + My Story)
55
User Profile (Focus Areas)
p r otot y p e v .1
User Profile (My Skills)
User Profile (My Process)
56
User Profile (My Favourites)
p r otot y p e v .1
User Profile (Travelled Cities)
User Profile (My Projects)
57
Discover Designers
p r otot y p e v .1
Resources (Articles)
Full Article
Discussion Forum
58
p r otot y p e v .2
User Profile Preview 1
User Profile Preview 2
59
User Profile > Culture > Active Areas
p r otot y p e v .2
User Profile > Culture > Statistics
User Profile > Culture > Connections
60
User Profile > Culture > Favourites
p r otot y p e v .2
User Profile > My Qualities > Focus Areas
Focus Areas (Setting 1)
61
Focus Areas (Setting 2)
p r otot y p e v .2
User Profile > My Qualities > Personality
Personality (Setting)
User Profile > My Qualities > Core Values
62
p r otot y p e v .2
User Profile > My Qualities > Skills
User Profile > My Qualities > Process
63
User Profile > My Story > My History
8
Final Website 64
3 pillars After several rounds of group critique, I realized that I needed to keep these 3 pillars in mind in order to improve the website features and design. I revisited my thesis statement and problem space to imagine a better community model.
Cultural Intelligence → Discussion Forum
A Mode of Connection → Data Visualization
Storytelling → Personalized User Profile
Create discussion forum and other
Create a user profile feature that can
Design a personalized user profile that
informative resources (articles) to
present visually engaging data of users'
can display users' history, background,
enhance cultural intelligence of the
qualities. This is a way to promote
vision, values, etc. to encourage them
community and provide relevance to
connections and deeper understanding
to share their stories and consider their
the context.
of community members.
personal traits and individualities as a part of measurable strengths.
65
m a i n pag e s
1. Homepage Homepage screen is a compilation of recent activites in the community showing featured article, featured members/projects, featured forum discussion and recommended members.
2. Connect Page In Connect page, users can select professions of another users (student designers, industry professionals, local businesses) and search users using filters that will narrow down the search result based on their preferences (ex. compatible qualities, similar core values, etc).
66
user profile
3. Landing Page The landing page for user profile is a preview page that displays each key section of all categories of the user's profile. It shows a summary of user's “Introduction”, “Top 4 Qualities”, “Featured Project“, “Favourites” and “Story”.
4. Introduction The first section of the user's profile is “Introduction” where the user can display his career motto at the top and below, he can display his photo gallery and biblography of himself.
67
user profile
5. Qualities: Top Qualities Under “Qualities” menu, “Top Qualities” section appears at the top, displaying the user's 4 key qualities. The next section, “Focus Areas” presents diagrams of the user's focus areas in his practice (ex. data visualization, research). These diagrams are interactive, allowing other users to click one of the focus areas and view a list of other recommended users.
6. Qualities: Personal Traits This section displays a graph showcasing the user's personality, divided into 10 different traits with numeric measurement (1 to 10).
68
user profile
7. Qualities: Core Values This section displays the users top 3 core values with icons and rationales behind his choices.
8. Qualities: Skills “Skills� section displays two sets of comparative bar graphs divided into 4 different categories of skills: Applications/Tools, Design Skills, Creative Skills, Business Skills
69
user profile
9. Projects: Projects The first section of “Projects” category displays the user's portfolio.
10. Projects: Process “Process” section shows an interactive graph where the user can reveal different steps of design process in a chronological order. Under this section, he can also attach his PDF processbook.
70
user profile
11. Favourites “Favourites” category displays the user's favourite creatigves, projects and brands.
12. Story “Story” category shows a timeline of the user's personal history.
71
g e n e ra l pag e s
13. About “About” page contains a brief explanation about the Bridge community and contact information.
14. Resources: Articles Under “Resources” menu, there is “Articles” page where users can access useful articles about creativity, design, employment tips, etc.
72
g e n e ra l pag e s
15. Resources: Forum “Forum” page is where the Bridge members can get involved with community discussion such as Q&As. The structure is similar to that of Quora website in which users can vote every posts based on their usefulness, bringing the most voted post to the top of the forum page.
16. Resources: Projects At “Projects” page, users can discover other members' projects.
73
b r i d g e r e q u e st
2. Request Sent After David sends a request to Nicholas, Request Sent notification will pop up on David's side.
Nicholas Felton vancouver
Message
Bridge
1. Bridge Button
Bridge Request Sent! Your request is now pending approval from Nicholas (Profesisonal). Wait to hear back from Nicholas!
Match me with other members
Before a user (David) sends a Bridge request, the other user's (Nicholas) Bridge button remains yellow with a plus sign.
74
b r i d g e r e q u e st
4. Request Notification Once Davids sends another user a Bridge request by clicking the yellow Bridge button, Nicholas receives a request notification. This
Nicholas Felton vancouver
Message
David wants to Bridge David (Student) wants to Bridge with you.
Pending
notification box shows 3 matching qualities and a percentage of personality compatibility between these two users. Nicholas can either approve the request or visit David's profile. He can also simply close this window and revisit this request later in the future.
3. Request Pending Once the request is sent, the Bridge button in Nicholas' profile box changes to gray, displaying its request pending status.
You are matched with 3 top qualities and 83% compatible personality. Approve
Take me to David's Profile
75
b r i d g e r e q u e st
6. Bridged Both Nicholas and David receive a notification box informing that they are both bridged in the community.
Nicholas Felton vancouver
Message
You are Bridged! Congratulations, David! You are now Bridged with Nicholas.
Bridged
Send Message
5. Bridged
Go to Nicholas' Profile
After Nicholas approves David's request, the status button for both users change to “Bridged�.
76
acco u n t s e t u p
1. Introduction Page A visitor who has not signed up for the Bridge account will first land onto this page that introduces the Bridge community and its special features.
77
acco u n t s e t u p
2. Create an account
3. Basic Information
Once the user chooses to sign up, he will be asked to create an
In this section, the user will fill out his basic information such
account by filling in his name, email address and password.
as his username, date of birth, location and status (student, industry professional or a local business). He can also upload his profile image and background image.
78
acco u n t s e t u p
4. Focus Areas The user can select his focus areas and arrange these items in the order of importance. Then the system will allow the user to preview his data into a visual chart.
79
acco u n t s e t u p
5. Personal Traits In this section, the user will go through a series of personality test questions and later he can preview his test result visualized as a spiderweb graph.
80
acco u n t s e t u p
6. Core Values The user can select top 3 core value items represented in symbols and fill out an explanation for each of the items which will be displayed as the image above.
81
acco u n t s e t u p
7. Personal Skills In this section, the user can choose upto 5 skills for each of 4 skill categories using drop-down menues. After he completes his selections, he will be asked to fill out a number of years for his experience with each skill, which will be displayed as a bar graph.
82
acco u n t s e t u p
7. Done The user is now done with his account and profile setup. He can enter the Bridge website and join community activities. Once he enters the Bridge website, he can also complete rest of the sections for his profile page such as “Introduction”, “Projects”, “Process”, Favourites” and “Story”.
83
9
Promotion 84
ta p e The general concept behind the promotional materials is to use the yellow strip from the Bridge logo as a medium of connection and networking. Initially, I planned to create a conceptual tape consisting of spaced out alphabets that would be connected by a yellow strip. On a yellow stip, there would be different adjectives describing distinct personalities using big alphabets behind the yellow strip as the first letters. For example, “D” from a word “dilligent” would be displayed with a large black letter and a yellow strip covering this letter would contain rest of the letters, “illigent”. Although I thought this conceptual tape would be a playful promotional material, it would not be very functional and useful. Hence, I decided to explore other options further.
85
b u s i n e ss c a r d My second concept was a half-size business card
WE’RE BOTH
Name
Contact
that both students and industry professionals can exchange their contact information after asking each other's personalities which they can
Find me at bridgecommunity.com
write on a yellow strip contained inside the card. After writing, they can use that yellow strip as a sticker to paste on top of two business cards, indicating their matching personality. I thought that the act of asking someone's personality can
Find me at bridgecommunity.com
WE’RE BOTH
be a nice way to initiate a conversation and get
Name
Contact
to know each other more personally.
free-spirited LOGICAL Business Card Dielines
86
b u s i n e ss c a r d
 Combined Business Cards
87
b u s i n e ss c a r d
 Combined Business Cards (Front)
 Combined Business Cards (Back)
88
b u s i n e ss c a r d
 Single Business Card + Stickers (Front)
 Single Business Card + Stickers (Back)
89
b u s i n e ss c a r d
 Writing personality on a sticker
90
p o st e r s Through posters, I wanted to communicate these two main messages: 1. Skills may pay the bills but traits are
what it takes  At the Bridge community,
personal traits are valued more than what the conventional industry standard does. Skills can still be important; however, Bridge allows individaulities to create opportunities. 2. Fresh Creativity Meets Experienced
Ingenuinity Bridge is a community where young creative individuals can bond
with experienced industry professionals, complimenting each others' strengths. Based on these key concepts, I created different sketches, leading to 2 final posters.
91
p o st e r s
Final Poster 1
Final Poster 2 92
promo video
 The Exchange by Linetest
 Google Accelerator by Gentleman Scholar
For a promotional video, I wanted to narrate a story of a design student who struggles to find a compatible job based on his personality. To get inspirations, I watched various examples of promo animations selling product concepts such as "networking", "improved lifestyle" and "digital platforms".
93
promo video
After studying different animation examples, I created a storyboard. While I wanted to communicate the concept of Bridge (helping young designers and industry professionals to connect based on their individualities), I wanted to narrate the struggle that the main character (design student) had and how Bridge helped him resolve this issue. I also wanted to include some of the key user interfaces of the website.
94
promo video
This is the first version of the illustration. After the critique, I decided to change the style of the illustration to be more mature and less childish. 95
promo video
This is the second version of the illustration. Although I managed to create more mature version of the character, I still felt like the style of the illustration and colour scheme does not match with the established branding of Bridge. I decided to integrate more hand-drawn style of line work and yellow colour to the next version of the illustration.
96
promo video
For the next illustration, I decided to use simple black line with a minimal use of yellow to match the illustration style with the branding of Bridge. The promotional video is still in progress. The final version of the video will be vavailable to view after May of 2017 at: www.kyuleedesign.com
97
i n sta l l at i o n p l a n s
98
i n sta l l at i o n p l a n s
Exhibition design is still in progress. The final look of the installation will be available to view after May of 2017 at: www.kyuleedesign.com
99
10
Final Deliverables 100
 Website Presentation 101
 Website Mockup 102
 Website Mockup 103
 Business Cards 104
 Posters 105
resources
ac k n ow l e d g e m e n ts
⋅ Graphic Designer Salary Report
ECUAD Faculties
Free Agency Creative
Tak Yukawa
Lisa Boersma
Don Williams
Max Olson
www.payscale.com
⋅ What Employers Look For #2
Haig Armen
www.davidairey.com
Katherine Gillieson
⋅ I Wish I'd Known That www.davidairey.com
⋅ What Graphic Design Schools Are Lacking www.davidairey.com
ECUAD Students
Others
Maria H. Coz
Daylan Wong
Jie Eun Park
Daniela Buitrago
Bing Zhang
Jeff Kee
Ian
Oliver Gao
Leslie Mu Delayne Lee Sharonna Chen
106
Kyu Lee www.kyuleedesign.com acooarin10@gmail.com 778.868.2350
107
108