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.
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
audit + brief: design brief
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
audit + brief: design brief
communication: excerpts
01
02
03
04
05
06
audit + brief: design brief
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
brand identity: process
questionnaire
01
02
03
04
05
06
brand identity: process
moodboards: exploration of environmental logos
01
02
03
04
05
06
brand identity: process
moodboards: exploration of branding identities inspired by recycling materials
01
02
03
04
05
06
brand identity: process
moodboards: exploration of branding identities with an original ecology-related approach
01
02
03
04
05
06
brand identity: process
moodboards: simplistic packaging design explorations
01
02
03
04
05
06
brand identity: process
sketches
sketches
01
02
03
04
05
06
brand identity: process
01
02
03
04
05
06
brand identity: process
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
brand identity: process
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
brand identity: process
sketches
01
02
03
04
05
06
brand identity: process
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
brand identity: process
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
brand identity: process
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
brand identity: process
digital mockups
01
02
03
04
05
06
brand identity: process
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
brand identity: process
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
brand identity: process
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
brand identity: process
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
brand identity: process
digital mockups: construction elements
01
02
03
04
05
06
brand identity: process
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
Vancouver Deconstruction Hub.
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
Vancouver Deconstruction Hub.
01
02
03
04
05
06
brand identity: process
digital mockups: exploration of “construction elements” concept
01
02
03
04
05
06
brand identity: process
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
brand identity: process
logo pitch 1
01
02
03
04
05
06
brand identity: process
logo pitch 1
logo 2: construction elements
representation of layers and elements in a simple form
01
02
03
04
05
06
brand identity: process
logo pitch 1
01
02
03
04
05
06
brand identity: process
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 identity: process
brand guideline: logo pitch 2
01
02
03
04
05
06
brand identity: process
brand guideline: logo pitch 2
01
02
03
04
05
06
brand identity: process
brand guideline: logo pitch 2
01
02
03
04
05
06
brand identity: process
brand guideline: logo pitch 2
01
02
03
04
05
06
brand identity: process
brand guideline: logo pitch 2
01
02
03
04
05
06
brand identity: process
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 identity: process
brand guideline: logo pitch 2 results
01
02
03
04
05
06
brand identity: process
brand guideline: additional iterations
01
02
03
04
05
06
brand identity: process
brand guideline: additional iterations
01
02
03
04
05
06
brand identity: process
brand guideline: additional iterations
01
02
03
04
05
06
brand identity: process
brand guideline: additional iterations
01
02
03
04
05
06
brand identity: process
brand guideline: logo pitch 3
01
02
03
04
05
06
brand identity: process
brand guideline: logo pitch 3
01
02
03
04
05
06
brand identity: process
brand guideline: logo pitch 3
01
02
03
04
05
06
brand identity: process
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 / Coordinator
+1 604 874 [email protected]
Lena Soots
604.874.6401citystudiocoordinator@gmail.comwww.citystudiovancouver.com
/ Project Coordinator
Lena soots / Coordinator
+1 604 874 [email protected]
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
sketches
01
02
03
04
05
06
website: process
sketches
01
02
03
04
05
06
website: process
sketches
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
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