dEco Hub Brand Identity

Vancouver Deconstruction Hub

Elena Syrovatkina, Hyemin Lee

DESN 320 - F002

Process Booklet

independent client project:brand development & web tool development

contents

01. background• project outline• client

05. website• process • final

02. audit + brief• design audit• design brief

06. conclusion• references

03. brand identity• process• final

04. print collateral • process • final

01

02

03

04

05

06

objective

Develop a brand for Vancouver Deconstruction Hub that

distills and reflects the multifaceted mission of the hub,

including waste reduction, job creation, and transforming the

marketplace.

Create a virtual hub that will connect people, potential buyers

and contractors. Design the interactive web retail component

of the virtual hub.

deliverables

1. Print collateral:

• business cards

• letterheads

• forms

• folders

• brochures

• flyers

• promo items

2. Website that includes:

• web inventory tool

• web retail component

• interaction component

• information component

background: project outline

01

02

03

04

05

06

background: client

CityStudio Vancouver is an energetic

hub of learning and leadership where

students design and implement

Greenest City 2020 solutions. It directly

involves students in designing

solutions for Vancouver’s Greenest City

2020 goals. Students work with city

staff and mentors to develop projects

and get them going on the ground.

This Spring Semester (2013),

CityStudio is working with the City of

Vancouver’s Sustainability Group on

a special project focus for Partner

Course Network: Zero Waste &

Vancouver’s Deconstruction Hub.

The Vancouver Deconstruction Hub is

a proposed facility that will divert

construction and demolition waste from

disposal in landfills. The hub will offer

the following services: collection,

sorting, warehousing, remanufacturing

and retailing of used building

materials. The hub will also offer a job

training and employment support

program.

The hub will demonstrate how munici-

palities can address large-scale waste

diversion and materials reuse in the

construction and demolition sector

while also investing in green jobs for

their local communities.

about

01

02

03

04

05

06

background: client

mission

• promote the concept of deconstruction over demolition in

order to reach Vancouver’s Greenest City 2020 goals

• create more green jobs and help the community

values

• sustainability

• ecological integrity

• responsibilty

• collaboration

• productivity

• innovation

• efficiency

01

02

03

04

05

06

objectives

• develop high-impact projects that contribute on the

ground to Vancouver’s Greenest City 2020 Action Plan

• process materials with an emphasis on maintaining the

highest value - moving materials up the “5R hierarchy”:

• reduce, reuse, recycle, recover, residuals - preferring

• reuse over recycling or recovery

• divert 80% of all waste from demolition, landclearing and

construction, and ban wood waste from disposal by 2015

audience• architects

• designers

• students

• social workers

• unemployed

• environmental activists

• retailers

• contractors

background: client

01

02

03

04

05

06

audit + brief: design audit

publications - brochure

problemAdvancedPermitting

forDeconstruction: One & Two Family Homes

February 2012Printed on 100% post-consumer recycled stock.

Resources

List of salvage contractors,

deconstruction contractors, recycling

haulers and depots in Metro Vancouver:

metrovancouver.org/

MetroVancouverRecycles

Metro Vancouver’s Demolition,

Landclearing and Construction Waste

Management Toolkit:

metrovancouver.org/buildsmart/

BuildSmartDocuments/dlctoolkit08v19.

pdf

List of materials banned and prohibited

from disposal in Metro Vancouver:

metrovancouver.org/services/

solidwaste/disposal/Pages/

bannedmaterials.aspx

Recycling Council of BC’s

“Recyclepedia” is a searchable

database of local recycling facilities:

rcbc.bc.ca/recyclepedia

Opt in to demolish by deconstruction and

receive your permit to deconstruct in advance

of your building/development permit.

• choice of color doesn’t reflect the content

• hierarchy of information could be improved

• pictures need captions for more clarity

• needs better imagery

• needs uniform look and branding

solution

• organic choice of colours

• attention to typographic details

• good hierarchy of design elements

• simple but effective

• text is combined with images so that the

reader can understand the information

01

02

03

04

05

06

audit + brief: design audit

compliance form

• too formal

• not user friendly

• could be more visually enganging

• could benefit from the use of infographics

• needs uniform look and branding

problem

• specific sections

• effective grid

• clean, legible typefaces

• use of infographic elements

• branded look

solution

01

02

03

04

05

06

audit + brief: design brief

summary

Vancouver Deconstruction Hub didn’t have any unified

branding available and had only several random pieces of

collateral. Consistent brand identity and visually engaging

website will help people learn more about this program.

approach

Vancouver Deconstruction Hub needs a strong and

recognizable brand identity that will be implemented

throughout all print and web materials. The use of clean

typefaces, earth tones, high resolution photos, and

uncluttered layout will create a professional impression while

maintaining the eco-friendly feel.

The visual language of the print pieces and the website will

speak to the community in a friendly and inviting manner. The

website organization will be very clear, and the users will be

able to see the difference between the four venues:

information hub, store, inventory tool, and discussion board.

01

02

03

04

05

06


communication

We had several meetings with City Studio and kept

contacting them on a regular basis throughout the

term. Our communication also consisted of multiple

emails.

Our contacts included CityStudio Coordinator Lena

Soots and Green Building Planner Rachel Moscovich.

Elena’s contacts were UBC students Raymond Chow

and Michael Silverwood who coded a website for

Vancouver Deconstruction Hub.

01

02

03

04

05

06


communication: excerpts

01

02

03

04

05

06

brand identity: process

Our branding process consisted of gathering all

information about Vancouver Deconstruction Hub from

CityStudio, and researching all the possible ways of

deconstruction. We also found some resources that

explained the difference between demolition and

deconstruction.

We listed some keywords associated with Vancouver

Deconstruction Hub and created a questionnaire for

Rachel Moscovich in order to find out more about her

brand vision. We researched the logos of similar

companies in order to identify Vancouver Deconstruc-

tion Hub’s existing competition and created several

moodboards for inspiration. After sketching some

possible logo variations, we created three distinct

concepts in Illustrator.

We had two meetings regarding the logo design, and

developed four more concepts based on the feed-

back from our instructor, our peers, and CityStudio’s

comments. Our third draft of the logo was successful.

process

01

02

03

04

05

06


questionnaire

01

02

03

04

05

06


moodboards: exploration of environmental logos

01

02

03

04

05

06


moodboards: exploration of branding identities inspired by recycling materials

01

02

03

04

05

06


moodboards: exploration of branding identities with an original ecology-related approach

01

02

03

04

05

06


moodboards: simplistic packaging design explorations

01

02

03

04

05

06


sketches

sketches

01

02

03

04

05

06


01

02

03

04

05

06


sketches

This sketching phase explored the

construction elements concept further

and gave all the necessary ideas for the

digital iterations.

01

02

03

04

05

06


sketches

01

02

03

04

05

06


brainstorming

Brainstorming and mapping ideas right

after the client’s feedback helped us to

keep our design process more dynamic

and generate ideas right away.

01

02

03

04

05

06


brainstorming

Mapping the message of Vancouver Hub

and making a diagram representing the

proposed facilities helped us envision

the final product.

01

02

03

04

05

06


digital mockups

color scheme

Initially, our mockups included the names “Green-

est Hub“, “Vancouver Deconstruction Hub”, “Green

Hub Vancouver“ and “VDH“ abbreviation. There

was no set concept yet, just purely typographical

explorations. Color scheme consisted of different

shades of green, yellow, and brown.

01

02

03

04

05

06


digital mockups

01

02

03

04

05

06


digital mockups: experimenting and applying Green Hub logo to the print

collateral, in order to find out if it is appropriate to use with a wooden texture

01

02

03

04

05

06


digital mockups: typographic approach

Our next set of sketches included three concepts

derived from our earlier sketching process and

discussions with our instructor:

• typographic approach

• wooden textures

• construction elements

01

02

03

04

05

06


digital mockups: exploration of “typographic approach” concept

This set of mockups explored our “purely typo-

graphic“ concept. We developed a wordmark

relying on the description of Vancouver Hub

provided by CityStudio.

01

02

03

04

05

06


digital mockups: wooden texture In order to produce more ideas around the digital logo design

stage, we applied some of them to a business card, as if our

decision was final. We used one of the most successful itera-

tions derived from our “wooden” concept. The hand rendered

spiral was intended to represent the rings on a tree. This iteration

wasn’t final, but it helped us to visualize the ways of a possible

logo usage and to learn how to create an appropriate back-

ground for a particular logo iteration.

01

02

03

04

05

06


digital mockups: construction elements

01

02

03

04

05

06


digital mockups: exploration of “construction elements” concept

These mockups explore the “construction

elements“ concept further and incorporate

the earth colors from the pallete mentioned

earlier. Different shades of color represent

different types of material used in the process

of deconstruction, and provided for sale at


These mockups explore the “construction

elements“ concept further and incorporate

the earth colors from the pallete mentioned

earlier. Different shades of color represent

different types of material used in the process

of deconstruction, and provided for sale at


01

02

03

04

05

06


digital mockups: exploration of “construction elements” concept

01

02

03

04

05

06


logo pitch 1

Our first logo pitch to CityStudio was success-

ful, but presenting the first three concepts

produced some additional thoughts and con-

cerns from the client: the logo didn’t quite

represent the message of the Hub at its fullest.

They asked us to overlap two concepts: purely

typographical and the one with the

constructed elements.

01

02

03

04

05

06


logo pitch 1

01

02

03

04

05

06


logo pitch 1

logo 2: construction elements

representation of layers and elements in a simple form

01

02

03

04

05

06


logo pitch 1

01

02

03

04

05

06


refined typographical + constructed logo

This is the product of our “overlapping” procedure.

We slightly tilted the triangles in order to create an

angle that would be parallel to the rest of the logo.

We created a brand guideline book, hoping that after

seeing the rest of the brand, the client will be more

drawn to this concept.

01

02

03

04

05

06


brand guideline: logo pitch 2

The client wasn’t able to meet face to face, so we

emailed them our pdf file with our explanations

attached. They enjoyed the look of the industrial

font, and they were quite fond of the concept of us-

ing the constructed elements, but it was still vague

and didn’t go along with their distinct goals that they

were planning to achieve. It needed more elaborate

research about our client’s brand view.

After creating an online survey and sending it to

CityStudio, we were able to gather the final pieces

of a puzzle and concentrate on our next step.

Next logo pitch consisted of 4 distinct concepts.

01

02

03

04

05

06


brand guideline: logo pitch 2 results

01

02

03

04

05

06


brand guideline: additional iterations

01

02

03

04

05

06


brand guideline: logo pitch 3

01

02

03

04

05

06

brand identity: final

brand guideline: final logo

Our client picked a logo from the first concept,

and we applied it to the brand identity guidelines,

changing only the graphic element.

01

02

03

04

05

06

print collateral : process

sketches ( business card layout ) : I tried to put contruction graphic elements and our logo on the business card. These elements can explore different variations of layouts for both horizontal and vertical versions.

These symbol representsthe logo part for deco hub

Every business cardsmust contain the contruciton graphic elements

03

01

02

05

06

print collateral : process

digital iterations ( business card - horizontal version )

04

Lena soots / Coordinator

+1 604 874 [email protected]



Lena Soots

604.874.6401citystudiocoordinator@gmail.comwww.citystudiovancouver.com

/ Project Coordinator



01

02

03

04

05

06

print collateral : final

stationary package

01

02

03

04

05

06

print collateral : final

final package

01

02

03

04

05

06

website: process

collaboration with ubc

platform and orientation. The practice

consists of a mix of flexible grids and lay-

outs, images and an intelligent use of CSS.

As the user switches from their

laptop to iPad, the website should

automatically switch to accommodate for

resolution, image size and scripting

abilities. In other words, the website should

have the technology to automatically

respond to the user’s preferences. This

would eliminate the need for a different

design and development phase for each

new gadget on the market.

After picking the background and

sketching the structure of the website, we

went through several iterations and were

able to apply the branding later.

The timeframe for this website was very

limited, and collaboration with UBC

students started before the brand was

finished. The initial idea was to make a

neutral website with all the items arranged

on the page, and then apply the branding.

UBC student Michael Silverwood

suggested to try responsive web design

- a brand new approach to the website

design. Instead of developing three

different websites: desktop version, iPad/

tablet version or mobile version, you can

use the same website for all your devices.

Responsive web design is the approach

that suggests that design and develop-

ment should respond to the user’s behavior

and environment based on screen size,

01

02

03

04

05

06

website: process

sketches

01

02

03

04

05

06

website: process

wireframes

link 1 link 1link 3 link 3

email

password

new user? sign upforgot your password?

link 5 link 5link 2 link 2

description 1

Welcome!

description 4

description 2

description 5

description 3

description 6

link 4 link 4sign in sign in

sign in

link 1 link 3 link 5link 2 link 4 sign in

Description

Condition

Quantity

owner profile

link 1 link 3 link 5link 2

users’s events

• event 1

• event 2

link 4 sign in

Description

something about a user goes here

similar to this user

Quantity

owner profile

read moreuser’s itemsoffline

01

02

03

04

05

06

website: process

wireframes

Condition

menu item 1

menu item 2

menu item 3

menu item 4

menu item 5

01

02

03

04

05

06

website: process

mockups

01

02

03

04

05

06

website: process

mockups

The website acts as a tool that connects

people, customers, and environmental

activists. You can create your own profile,

sell items, purchase items, create events,

and communicate with other community

members. The layout of the website is

rather simple, but its functionality allows

people to adjust easily, create account from

any device, and enjoy the high resolution

photos of the featured products.

01

02

03

04

05

06

website: process

toolbar refinement: before

toolbar refinement: after

UBC students didn’t use my previous designs and tried to create something completely

different from the original version. I pointed out some mistakes, such as a misplaced search

bar, incorrect logo graphic, and the lack of contrast between green letters and background.

After several emails, I just simply enhanced their existing design, placing a screenshot of

their website into Photoshop and roughly correcting some areas of the website. With the

help of that file, we were able to come up to a much more refined and professional looking

layout that complemented the functionality of this website.

01

02

03

04

05

06

website: process

sitemap

01

02

03

04

05

06

website: final

cfz.herokuapp.com

The extreme flexibility of the website allows it to stretch according to the width of the browser. It has a smart naviga-

tion bar that avoids clutter, collapsing into a dropdown menu when used on a mobile device. The navigation bar

design has a fixed opacity that makes all the elements of the navigation legible, no matter which device is being

used and the amount of stretching applied.

01

02

03

04

05

06

conclusion

• Demolition / deconstruction permit: http://vancouver.ca/home-property-develop-

ment/ demolition-deconstruction-permit.aspx

• Deconstruction versus Demolition: http://www.greenbuildingadvisor.com/blogs/

dept/green-communities/deconstruction-versus-demolition

• Deconstruction vs. Demolition or How To Take A House Apart Gently: http://www.

my-green-home-project.com/deconstruction.html

• Deconstruction: http://www.ct.gov/deep/cwp/view.asp?a=2714&q=469620

• Demolition and Deconstruction Services - There’s an Art to Green Salvage!:

http://www.vsdemolition.com/

• 30 Useful Responsive Web Design Tutorials: http://www.hongkiat.com/blog/

responsive-web-tutorials/

• 15 Responsive Web Design Templates: http://www.responsivewebdesignblog.

com/2012/11/15-free-responsive-web-design-templates/

• Responsive.is: http://responsive.is/typecast.com

• Kuler: https://kuler.adobe.com/#themes/rating?time=30

• Subtle Patterns: http://subtlepatterns.com/

• Google Web Fonts: http://www.google.com/fonts/

references

dEco Hub Brand Identity

Documents

Transcript of dEco Hub Brand Identity