Color Run

Process Book

Nate Faraci
IDD 410
Fall 2017
 Table of Contents
Information About The Topic..................3
Moodboard. . . . . . . . . . . . . . . . . . . . . . . 4
Poster Research. . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Brand Board Comps. . . . . . . . . . . . . . . . . . . . . . . . 6
Brand Board Finals. . . . . . . . . . . . . . . . . . . . . . . . 7
Empathy Map. . . . . . . . . . . . . . . . . 8
Personas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Info Arch. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
User Scnerio. . . . . . . . . . . . . . . . . . . . . . . . . . 11
Logo Idea. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Final Logo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
First Comps. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Second Comps. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Color Study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Type Study. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Final Comps. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Poster Visual Research. . . . . . . . . . . . . . 20
Posters. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Mailing Card. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Paper Promtional Piece. . . . . . . . . . . . . 25
Final. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

2
 Information
About The Topic
Hurricane Maria struck Puerto Rico as a high-end Category 4 hurricane
on September 20, 1017. Maria is regarded as the worst natural disas-
ter on record in Dominica, and caused catastrophic damage and major
humanitarian crisis in Puerto Rico. This storm destroyed 80% of the
islands crops, left 3 million Puerto Ricans without power and 1 million
without potable water for drinking or bathing. Only 11 out of 69 hos-
pitals have power or fuel to keep running. To date, there have been
48 reported deaths and 76 reported missing. Many deaths and missing
persons reports are also being hindered by the fact that 54% of Puerto
Rico’s cell towers were also destroyed.
Puerto Rico is in a state of crisis. In the wake of Hurricane Maria,
mass flooding and destruction have put children throughout the island
at risk. The governor has warned that this is “the worst hurricane in a
century,” and that rebuilding will be a tremendously difficult undertak-
ing. After mobilizing to get immediate critical support — Emergency
Relief Kits — to the children of Puerto Rico, UNICEF is rushing ship-
ments of fresh drinking water to families across the island. UNICEF is a
global leader in emergency response, last year reaching children in 344
humanitarian emergencies across 108 countries. We stand ready to pro-
vide aid before, during and after a crisis.

3
Moodboard

4
 Poster Research

Here are some websites that we looked

at for inspiration. Some of the things that
we liked and wanted to implement into
our site were the brightness and use of
the colors. We liked how that grabbed our
attention and we were sure it would grab
the attention of our visitors. Something we
didn’t like about the sites was the orga-
nization. It was hard to find information
so we wanted to make that easier for our
visitors as well.

5
Brand Board Comps

6
 Final Brand Board

Our brand board displays what we wanted our brand to look like. At the
top is our main logo featuring an open hand holding the letters “PR”
standing for Puerto Rico. Next is secondary logo which features the Puerto
Rican flag and our sub mark which features paint to represent the color run.
After that is our color palette. We wanted to use the Puerto Rican colors, so
we made two sets on dark and one light. After that is a couple type studies
and some pictures we looked at for inspiration for our brand and theme.

7
Emapthy Maps

Our Empathy Maps show how a common

customer might think, hear, see, and feel
when thinking out Hurricane Maria. These
maps give us a better idea on what to
focus on when designing our product. It
also puts our minds more into their point
of view and how they would want to see
our product displayed. We want to design
this website and event around our users.

8
 Personas
Simialar to the Empathy Map,
Personas allow us to dive
deeper into the minds of
our customers to really get a
sense of how they feel. This
makes the design process
easier because we know now
what areas we need to focus
on to grab our customers
attentions such as emotion
and thoughtfullness.

9
 Info Archs
Here we start to see the design of our
website come to life. We wanted to make
sure that it was easy to navigate because
that was on of our complaints about the
other sites. We didn’t want to have a lot
of extra pages so all the information was
easily accessible. Our main four tabs we
wanted to have wee an about page, a
cause page, a sign up page, and a donate
page.

10
 User Scenario
George
George is a Hamden resi-
dent whto recently found
out about the Hurricane
that hit Puerto Rico.
This is an example of a user
scenario on of our customers
might experience. Scenar-
ios are used to give us an
idea on how someone might
stumble upon our event. It’s
a step-by-step guide about
how and where someone
might get information about
the event.

George was walking to

work one day when he
came up upon a poster
on the telephone pole for
a Color Run at Hamden
High School.

George told some of his

friends that he would be
attending the color run and
asked them if they would like
to come and support Puerto
Rico by bringing some goods
for them.

George and his friends went

to the event and it was clear
that word got around because
it was packed. They had trucks
full of goods and food for
Puerto Rico. The Color Run
was a success and a fun time
like it was supposed to be.

11
 Logo Ideas
These are our first drafts of our logos.
Something that pops out immediately is
the color scheme. Some of us went with
traditional color run colors while others
went for a Puerto Rican color scheme. At
this point in the process, our group had
determined what path we were going
to take. Thanks to the feedback of our
colleagues, we decided to stick with the
Puerto Rican colors because it made the
emotional and personal connection we
wanted to make with our customers.

12
 Final Logos
These are our final drafts of our logo.
We decided to stick with the hand
logo because it fit all the categories we
wanted to hit. It is empathic thanks to the
hand, yet the colors and the flag prvoke
a feeling of nationalism and pride. The
imagery that we hold Puerto Rico in our
hands and it is our responsibility to help
them is also strong. The two logos to the
left are our secondary and sub mark logo.
Each have the hand, one represented
with paint and one without.

13
First Comps

14
 These were our first attempt at
the comps of our website. Two
of which are more traditional
websites with a navigation menu
followed by boxes filled with an
array of information. The other
composition showed a more
modern and dynamic concept
of the webpage. We agreed
that we liked certain concepts
from all the websites such as
different emotion provoked
through different images or other
functions that others didn’t think
of. We combined these together
and took another shot at the
compositions.

15
 Second Comps

Here we see what we imagined our final web site to look like. We
took all the things we liked about the previous compositions and
combined them. We think that this web site is unlike any other color
run web site thanks to its modern, minimalist twist. The shapes used
provoke a feeling of happiness, yet the dark colors bring the feeling
back down to Earth because this event isn’t for a good reason. The
other pages are clean and simple which allows us to display all the
needed information fast and easy.

16
 Color Study

R: 16 R: 212 R: 255
G: 83 G: 35 G: 255
B: 162 B: 45 B: 255

R: 106 R: 208 R: 224

G: 177 G: 70 G: 229
B: 182 B: 83 B: 219

R: 18 R: 164 R: 145
G: 24 G: 29 G: 146
B: 48 B: 33 B: 139

After we showed our colleagues our first drafts of our logos and compositions. There was
a glaring issues. We all had a different color scheme. This proceeded with our first comp
drafts We as a group didn’t really put much thought into the color scheem beforehand
because we wanted to get the concepts down first, but it was clear that if we wanted
to proceed with a successful brand we needed a colo scheme. We choose to use Puerto
Rican colors to make the connection with our customer. We also added a light shade and
dark shade. The fromer to provoke happiness and fun while the later represents the sad
circumtance in which the event was formed for.

17
 Type Study
Color Run Type Study. Avenir Pt 25
Color Run Type Study. Avenier Oblique Pt 25
Color Run Type Study. Avenir Light Pt 25
Color Run Type Study. Avenier Heavy Pt 25
Color Run Type Study. Avenir Black Pt 25

Color Run Type Study. The Unknown

Color Run Type Study. Gill Sans Pt 25

Color Run Type Study. Gill Sans Bold Pt 25
Color Run Type Study. Gill Sansa Italic Pt 25

Color Run Type Study. Bodoni 72 Pt 25

Color Run Type Study. Bodoni 72 Italic
Color Run Type Study. Bodoni 72 Bold

18
 Final Comps

After we figured out our color scheme, we thought our brand

was finally coming together. Comps and drafts started to look
like they were suppose to, it just looked right given the event and
circumstances. We kept the modern and minimalist style because it
was easy to view and find the information needed. We also showed
a wide range of pictures to make our customers know just what
happened and how much help is needed.

19
 Poster
Visual
Reseach
These are some more visual research guides that
we drew inspiration from. Most of the inspiration
drawn from these images was for our poster and
mailing card. We wanted to know what other color
run posters and mailing card looked like to see
what worked and what didn’t. The thing we liked
about poster was also the same thing we didn’t like.
That was the use of color. While some posters used
color well, some poster overwhelmed them with
color, which made it hard to read. The use of paint
splatter made text hard to read as well. We were
aware of both these elements during our poster
process.

20
Posters

21
We create a wide array of posters, each of which had the
elements that we wanted to emphasize, color and legibility.
The first set is all duplicates just with different color
combinations from our color scheme. We attempted to use
actual images of color runs, but the paint makes it hard to
read like we mentioned, this is probably why the other posters
weren’t successful. Our final poster choice was the first one.
We thought that that poster best caught the eye, and have a
good balance of color throughout using a wide range of colors
from our scheme.

22
Mailing Cards

23
Our final mailing card was as reminiscent to our poster and
overall theme thanks to the colors and shapes we used as well.
It matches our poster in term of color and the big text grabs
the reads attention very quickly displaying the most important
words bigger than the rest.

24
 Paper Promotional Pieces

These are some of our paper

promotional pieces. Sticking with
the light blue color, we found
that the top one worked best at
displaying the information quickly
and effectively. The choice of color in
the poster, mailing card, and paper
promotional piece are all very inviting
and we hope that gets more people
to pick it up and read it.

25
Final

26
27
28