[vc_row][vc_column][vc_empty_space height=”50″][vc_column_text css_animation=”fadeInUp”]

PROJECT GOALS

Creating and conceptualizing from scratch a branding campaign for place with responsive web design.

[/vc_column_text][vc_empty_space height=”50″][vc_column_text css_animation=”fadeInUp”]

TOOLS

SLACK

Used for remote communication and file sharing with Mentors.

SKETCH

Used for turning mid fidelity wireframes to high fidelity mock ups.

GOOGLE DRIVE

Used for keeping files.

INVISION

Used for high fidelity prototypes with hotspots and animations.

INDESIGN

Used for creating the branding manual.

PHOTOSHOP

Used for manipulating photos, moodboards

ILLUSTRATOR

Used for creating logos, icons, watermarks,

[/vc_column_text][vc_empty_space height=”60″][ult_buttons btn_title=”Let’s Talk” btn_link=”url:http%3A%2F%2Fembernavarro.com%2Fcontact_me%2F|||” btn_title_color=”#ff3a3a” btn_bg_color=”” btn_bg_color_hover=”#ff3a3a” btn_title_color_hover=”#ffffff” icon_size=”32″ btn_icon_pos=”ubtn-sep-icon-at-left” btn_border_style=”solid” btn_color_border=”#ff4e3a” btn_color_border_hover=”#ff3a3a” btn_border_size=”1″ btn_radius=”0″ btn_font_family=”font_family:Roboto|font_call:Roboto” btn_font_size=”desktop:15px;” btn_line_height=”desktop:15px;”][vc_empty_space height=”60″][vc_column_text css_animation=”fadeInUp”]

MINDANAO

[/vc_column_text][vc_empty_space height=”30″][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/4″][vc_column_text css_animation=”fadeInUp”]

BACKGROUND

Philippines is a sovereign island country in Southeast Asia situated in the western Pacific Ocean. Because Philippines is near the Pacific Ring of Fire, it is prone to earthquakes and typhoons, but also endows it with abundant natural resources and some of the world’s greatest biodiversity.

[/vc_column_text][vc_empty_space height=”30″][/vc_column_inner][vc_column_inner width=”3/4″][vc_single_image image=”15094″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1499816041817{padding-top: 10px !important;padding-right: 10px !important;padding-bottom: 10px !important;padding-left: 10px !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/4″][vc_single_image image=”15097″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1499817304603{padding-top: 10px !important;padding-right: 10px !important;padding-bottom: 10px !important;padding-left: 10px !important;}”][/vc_column_inner][vc_column_inner width=”3/4″][vc_column_text css_animation=”fadeInUp”]

Mindanao is the second largest and southernmost major island in the Philippines. Considered as the food basket of the Philippines most of the tropical fruits are found.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

The flora and fauna proliferates which gives lush habitats for animals. There are a lot of beaches as well, and island hopping is the best way to see a few of the 7,641 islands during low tide.

[/vc_column_text][vc_empty_space height=”30″][/vc_column_inner][/vc_row_inner][ultimate_carousel slides_on_desk=”3″ slides_on_mob=”3″ arrow_color=”#ffffff” dots_color=”#ffffff” item_animation=”fadeInUp”][vc_single_image image=”15115″ img_size=”large” alignment=”center” onclick=”link_image” css=”.vc_custom_1499829917792{padding: 10px !important;}”][vc_single_image image=”15111″ img_size=”large” alignment=”center” onclick=”link_image” css=”.vc_custom_1499830278136{padding-top: 10px !important;padding-right: 10px !important;padding-bottom: 10px !important;padding-left: 10px !important;}”][vc_single_image image=”15100″ img_size=”large” alignment=”center” onclick=”link_image” css=”.vc_custom_1499830057259{padding-top: 10px !important;padding-right: 10px !important;padding-bottom: 10px !important;padding-left: 10px !important;}”][vc_single_image image=”15098″ img_size=”large” alignment=”center” onclick=”link_image” css=”.vc_custom_1499829981214{padding-top: 10px !important;padding-right: 10px !important;padding-bottom: 10px !important;padding-left: 10px !important;}”][vc_single_image image=”15099″ img_size=”large” alignment=”center” onclick=”link_image” css=”.vc_custom_1499830039715{padding-top: 10px !important;padding-right: 10px !important;padding-bottom: 10px !important;padding-left: 10px !important;}”][vc_single_image image=”15109″ img_size=”large” alignment=”center” onclick=”link_image” css=”.vc_custom_1499830235999{padding-top: 10px !important;padding-right: 10px !important;padding-bottom: 10px !important;padding-left: 10px !important;}”][vc_single_image image=”15104″ img_size=”large” alignment=”center” onclick=”link_image” css=”.vc_custom_1499830131623{padding-top: 10px !important;padding-right: 10px !important;padding-bottom: 10px !important;padding-left: 10px !important;}”][vc_single_image image=”15101″ img_size=”large” alignment=”center” onclick=”link_image” css=”.vc_custom_1499830082373{padding-top: 10px !important;padding-right: 10px !important;padding-bottom: 10px !important;padding-left: 10px !important;}”][vc_single_image image=”15113″ img_size=”large” alignment=”center” onclick=”link_image” css=”.vc_custom_1499830311576{padding-top: 10px !important;padding-right: 10px !important;padding-bottom: 10px !important;padding-left: 10px !important;}”][vc_single_image image=”15102″ img_size=”large” alignment=”center” onclick=”link_image” css=”.vc_custom_1499830097117{padding-top: 10px !important;padding-right: 10px !important;padding-bottom: 10px !important;padding-left: 10px !important;}”][vc_single_image image=”15105″ img_size=”large” alignment=”center” onclick=”link_image” css=”.vc_custom_1499830150664{padding-top: 10px !important;padding-right: 10px !important;padding-bottom: 10px !important;padding-left: 10px !important;}”][vc_single_image image=”15103″ img_size=”large” alignment=”center” onclick=”link_image” css=”.vc_custom_1499830111612{padding-top: 10px !important;padding-right: 10px !important;padding-bottom: 10px !important;padding-left: 10px !important;}”][vc_single_image image=”15112″ img_size=”large” alignment=”center” onclick=”link_image” css=”.vc_custom_1499830293709{padding-top: 10px !important;padding-right: 10px !important;padding-bottom: 10px !important;padding-left: 10px !important;}”][vc_single_image image=”15106″ img_size=”large” alignment=”center” onclick=”link_image” css=”.vc_custom_1499830179170{padding-top: 10px !important;padding-right: 10px !important;padding-bottom: 10px !important;padding-left: 10px !important;}”][vc_single_image image=”15107″ img_size=”large” alignment=”center” onclick=”link_image” css=”.vc_custom_1499830195238{padding-top: 10px !important;padding-right: 10px !important;padding-bottom: 10px !important;padding-left: 10px !important;}”][vc_single_image image=”15110″ img_size=”large” alignment=”center” onclick=”link_image” css=”.vc_custom_1499830254043{padding-top: 10px !important;padding-right: 10px !important;padding-bottom: 10px !important;padding-left: 10px !important;}”][vc_single_image image=”15108″ img_size=”large” alignment=”center” onclick=”link_image” css=”.vc_custom_1499830214195{padding-top: 10px !important;padding-right: 10px !important;padding-bottom: 10px !important;padding-left: 10px !important;}”][vc_single_image image=”15114″ img_size=”large” alignment=”center” onclick=”link_image” css=”.vc_custom_1499830325620{padding-top: 10px !important;padding-right: 10px !important;padding-bottom: 10px !important;padding-left: 10px !important;}”][/ultimate_carousel][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/2″][vc_column_text css_animation=”fadeInUp”]There are also famous people who grew up in Mindana, namely Manny Pacquiao (International Boxer and Senator), Rodrigo “Digong” Duterte (President with an Iron Fist), and Pia Alonzo Wurtzbach (Controversial Miss Universe 2015), to name a few.[/vc_column_text][vc_empty_space height=”30″][vc_single_image image=”15091″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1499810281753{padding: 10px !important;}”][vc_single_image image=”15093″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1499810290601{padding: 10px !important;}”][/vc_column_inner][vc_column_inner width=”1/2″][vc_empty_space height=”30″][vc_single_image image=”15092″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1499810300474{padding: 10px !important;}”][/vc_column_inner][/vc_row_inner][vc_empty_space height=”50″][vc_column_text css_animation=”fadeInUp”]

PROBLEM

Despite the tourist attractions, there is a lack of strong campaign feel to what Mindanao can offer. Basically because Mindanao has similar attractions and offerings to every tropical place, not a lot of tourism traffic comes by.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

Also, as you can see on their web page, it most likely looks like a newspaper. The balance is off, lots of pictures on the top and as you scroll down it’s heavy on text which makes people click out.

[/vc_column_text][vc_empty_space height=”30″][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/4″][vc_column_text css_animation=”fadeInUp”]

Only by word of mouth from foreigners who have traveled to the Philippines can say what a beautiful experience they have. And even that does not get the Philippines to be on the top 10 travel list.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

SOLUTION

Knowing that there was already lots of campaigns for the wonderful beaches, sunny weather, seasonal fruits, I wanted to go in a totally different way. I took the idea of what to do. So I chose something close to my heart adventure.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

Since there are lots of adventure parks in and around Mindanao, I was thinking to give it a different feel to the old and tired look of “come, explore, and have fun”. I wanted to go dark and get the audience hooked on the dark side of Mindanao. Haven’t you ever seen Star Wars?

[/vc_column_text][/vc_column_inner][vc_column_inner width=”3/4″][vc_single_image image=”15119″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1499882030254{padding-top: 10px !important;padding-right: 10px !important;padding-bottom: 10px !important;padding-left: 10px !important;}”][/vc_column_inner][/vc_row_inner][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

SCOPE AND LIMITATIONS

It was confirmed that this would be a 3 week project and that there would be no clients to be talked to. Aside from the usual deliverables web responsive design, there were other must haves that were to be given as well.

MUST HAVES:

1. Brand Standards Manual via InDesign

2. Mission-Vision of the campaign

3. Brand/Unique Selling Position

4. Brand Promise

5. Brand Personality and Attributes

6. Elevator Pitch

7. Target Audience

8. Style Guide with Logo and Imagery/Photography Guidelines

9. Media Applications[/vc_column_text][vc_empty_space height=”30″][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/2″][vc_single_image image=”183″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495757249567{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][vc_column_inner width=”1/2″][vc_column_text css_animation=”fadeInUp”]

With this in mind, we went on to the next stage which was to create questions for the possible users of the Catalyst website.

[/vc_column_text][vc_empty_space height=”25″][vc_column_text css_animation=”fadeInUp”]

The target audience of the Catalyst website were for investors who want to give back and to those organizations who want to partner with Catalyst to develop their projects. Then there’s last audience, are people who want to know more about Catalyst as a group.

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_empty_space height=”50″][/vc_column][/vc_row][vc_row][vc_column][vc_column_text css_animation=”fadeInUp”]

RESEARCH

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

INSPIRATION

I toiled on the combination of the art direction and Mindanao’s resources for a long time. I finally found an inspiration for the look and embodiment of what Adventure Mindanao should be.

[/vc_column_text][vc_row_inner content_placement=”middle”][vc_column_inner][vc_empty_space height=”30″][/vc_column_inner][/vc_row_inner][ultimate_carousel][vc_single_image image=”15201″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1501565275467{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][vc_single_image image=”15203″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1501565664209{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][vc_single_image image=”15204″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1501565696380{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][vc_single_image image=”15205″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1501565730015{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][vc_single_image image=”15206″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1501565767398{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][vc_single_image image=”15207″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1501565806761{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][vc_single_image image=”15208″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1501565840122{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][vc_single_image image=”15209″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1501565874175{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/ultimate_carousel][vc_column_text css_animation=”fadeInUp”]Nike: My body is my weapon
Launch ad for Just Do It in South Africa with the controversial double gold 2012 Paralympics medallist, the double amputee runner, Oscar Pistorius.

[/vc_column_text][vc_empty_space height=”50″][/vc_column][/vc_row][vc_row][vc_column][vc_column_text css_animation=”fadeInUp”]

DESIGN INCEPTION SHEET

Since I was the client of my project, I had to do ask myself what the purpose was for this campaign.

[/vc_column_text][vc_empty_space height=”30″][vc_row_inner][vc_column_inner][vc_column_text css_animation=”fadeInUp”]

WHY

The middle “WHY” is basically the driving force that propels the reason of Adventure Mindanao. Eventually, I figured out that “CHALLENGE” should be the reason that drives the feeling and emotion–that everyone has an adrenaline rush in them. Hence, I called the Art Direction as “YOU ARE ADVENTURE”, to remind me that that should be the feeling whenever I work on something for Adventure Mindanao.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]This is where I also started to formulate the Mission-Vission of Adventure Mindanao, the Unique Selling Position, and the Target Market (Traveler, Adrenaline Junkie, Challenge Seeker, Jack-Of-All-Trades Athlete and Obstacle Racer).[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

“To promote the province of Mindanao, as a place of adventure by challenging the adrenaline junkie in all of us.”

[/vc_column_text][vc_empty_space height=”30″][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text css_animation=”fadeInUp”]MOOD

1. Fat But Not Lost

Because traveling will be far, I wanted to point out that adventure does not mean one has to be lost somewhere. It gives the feeling of balance which gives assurance when you are already asking someone to do something “dangerous”.[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]2. Challenging But Not Grueling

The point of the challenge is to give in to the process of how the activity should go. So most of the things are already doable but very mentally challenging.[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”15200″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1501549099080{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][/vc_row_inner][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]3. Ling Crossing But Not Disrespectful

This statement is how to treat challengers during their journey of overcoming a fear. Patience with the Adventure Mindanao would be key, making sure that the person who represents Adventure Mindanao does not disrespect the person being challenged. For example, not saying derogatory statements “you are a wuss if you do not do it!”.[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]4. Tempting But Not Beguiling

Adventure Mindanao should charming and entice the audience but never in a deceptive way. Honesty is a priority, especially when a person is entrusting their lives to someone who will take them through the fear and overcome it.[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

Visual Language

1. Color

These colors should be black but not obscure. Adventure Mindanao’s mood should translate to block out all the distractions in life. The colors should also be energetic but not erratic. We want a mentally calm color that energizes the brain and not lose the focus.[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]2. Space

The feeling of the space should be dark like the caves but not eerie like the feeling that there are going to be bats or something bad out to get you from the darkness.[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]3. Shape

The mood should be cracked but not broken, where you know that something has been there for a long time. Also, the shape should be harsh, like a brick wall but not damaging like it’s going to fall on you or cut you when you touch it.[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]4. Movement

Spontaneity is a must since we want the people to be challenged and be reminded that they are adventure. So adrenaline rush should be there pumping but not unpredictable like fireworks. We want the audience to feel a bit safe.[/vc_column_text][vc_empty_space height=”30″][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space height=”50″][vc_column_text css_animation=”fadeInUp”]

MOOD BOARD

There were 3 mood boards that all had one thing in common, which was it was very dark. These were: Adrenaline Challenge, After Light, and Strength Within.

[/vc_column_text][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/3″][vc_single_image image=”15456″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1513217175402{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][vc_column_inner width=”1/3″][vc_single_image image=”15457″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1513217215342{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][vc_column_inner width=”1/3″][vc_single_image image=”15458″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1513217238900{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][/vc_row_inner][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

STYLE TILE

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

ADVENTURE MINDANAO

Since darkness and bright colours, icons, and fonts were the ones that best represented the mood boards, it was only logical to mix all of these mood boards to have 1 style tile.

[/vc_column_text][vc_single_image image=”15459″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1513217314026{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][vc_empty_space height=”30″][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/2″][vc_column_text css_animation=”fadeInUp”]

COLOUR 

The colours were narrowed down to 3: Black, White, and Yellow[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][/vc_column_inner][/vc_row_inner][vc_column_text css_animation=”fadeInUp”]

Black

Because the colour black is very harsh and is hard to work with, it challenges the user and the designer to “see the light”. This is where readability is challenging for fonts but this is why the colour is chosen. Unapologetic and straight forward.

[/vc_column_text][vc_column_text css_animation=”fadeInUp”]

White

This colour complements the harshness of the black, as well as challenges the black colour. And on its own, the colour white is also harsh.[/vc_column_text][vc_column_text css_animation=”fadeInUp”]

Yellow

This colour is bright and stands out when placed on black. With the white, it is also straight forward and reminiscent of how we would colour the sun representing hope and light.[/vc_column_text][vc_column_text css_animation=”fadeInUp”]

TYPOGRAPHY

The fonts chosen were Iowan Black, Quattrocento Sans, Futura Medium, and Josefin Sans.

[/vc_column_text][vc_empty_space height=”30″][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/2″][vc_column_text css_animation=”fadeInUp”]

Impact

Used for the logo design, this font is chosen because of its bulkiness that shows how sturdy the font is. Because of its wide size and san serif, the words are clearly readable when seen from afar. Bulky like a brick, sturdy, readability is crisp.[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”15461″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1513225864677{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/2″][vc_column_text css_animation=”fadeInUp”]

Raleway

Used for the sentences and paragraphs, this font is chosen because of how sharp it looks. It is reminiscent of how dangerous sharp edges are. The lower case letters are round and very engaging because it has lots of weight and you can define the readability. It also looks good when tracked. Versatile, sharp, readability, and ideal for tracking.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”15463″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1513227598092{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][/vc_row_inner][vc_single_image image=”15462″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1513225882865{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

Because Quattrocento Sans is legible it’s warm, not intrusive, classic, and elegant. The creator also called it “a sober type face”. Basically, it’s study but not bulky and at the same time it has an elegant feel to it.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

Futura Medium

Chosen because it has some similarities with Quattrocento Sans, it’s clean and geometric appearance.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

Notice the uniqueness of how the “M” is, it reaches to the bottom of the base. Distinct to Futura font. The upper case “N, V, and W” also follows the sharpness of the “M”, this can also be found on the lower cases of “v and w”.

[/vc_column_text][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/2″][vc_single_image image=”197″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496102705574{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”198″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496102692418{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][/vc_row_inner][vc_column_text css_animation=”fadeInUp”]

Another slight difference is that Futura Medium has a lower x-height than Quattrocento Sans, for better body text. Note that the lower case “a” is also rounded and the upper case “Q” is sharper unlike Quattrocento Sans.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

Josefin Sans

This font also has some similarities in geometric appearance shared with Quattrocento Sans and Futura Medium.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

Shares the sharpness of Futura Medium on the upper case “N, V, and W” and the lower case “v and w”. Also has similar rounded lower case “a”. Note the uniqueness of the lower case “e” and the upper case “Q and Z” are different from Futura Medium and Quattrocento Sans.

[/vc_column_text][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/2″][vc_single_image image=”199″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496102803293{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”200″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496102813563{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][/vc_row_inner][vc_column_text css_animation=”fadeInUp”]

Basically, Josefin Sans are like a merge of both fonts, but still has its own unique take on some letters.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

ICONOGRAPHY

There were 3 types of icons presented to the clients: light, heavy, and colourful.

[/vc_column_text][vc_empty_space height=”30″][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/2″][vc_column_text css_animation=”fadeInUp”]

Based on the line stroke of the icons, these were categorized as Light Icons. They could be added with different colours depending on the information.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”201″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496102979495{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/2″][vc_column_text css_animation=”fadeInUp”]

Heavy Icons are all black, and the feeling of heaviness because the black is all filled in.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”202″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496103431445{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][/vc_row_inner][vc_column_text css_animation=”fadeInUp”]

Most likely the ideal usage of these are to be small and can’t be used larger than the ideal button size. Colours would only be black with the negative space of white.

[/vc_column_text][vc_empty_space height=”10″][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/2″][vc_column_text css_animation=”fadeInUp”]

Colourful Icons are the ones with multiple colours, mostly toned down to light colours.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”203″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496103463917{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][/vc_row_inner][vc_column_text css_animation=”fadeInUp”]

These icons can me enlarged without having to worry about the heaviness of colours. The colours can also be changed depending on the information that comes with the icon.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

The clients both agreed that they would prefer the possibility of Light Icons because they do not want too much colour nor the heavy icon versions.

[/vc_column_text][vc_single_image image=”204″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496103534645{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

CLIENT FEEDBACK

The clients were very open to the Final Style Tile and in revamping their Catalyst website. We all knew that the team was aligned with what Maura, Leslie and user wanted out of the website.

[/vc_column_text][vc_empty_space height=”50″][vc_column_text css_animation=”fadeInUp”]

PROTOTYPE

Based on the user interviews, 20 Second Gut Test, and client interviews, I went ahead and started to create a prototype.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

PAPER TO HIGH FIDELITY

While waiting for my team to do their user testings I converted the low fidelity paper prototypes of my UX team mates to high fidelity.

[/vc_column_text][vc_single_image image=”206″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496103826326{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/4″][vc_column_text css_animation=”fadeInUp”]

Using the Sketch program, I started to work all the implementation of the creative research on to the Catalyst website and mobile.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”3/4″][vc_single_image image=”205″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496103847638{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][/vc_row_inner][vc_column_text css_animation=”fadeInUp”]Website Prototype using InVision click here.[/vc_column_text][vc_empty_space height=”50″][vc_column_text css_animation=”fadeInUp”]

OVER ALL PROCESS

[/vc_column_text][vc_empty_space height=”30″][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/3″][vc_column_text css_animation=”fadeInUp”]

The picture on the right is an over view of the whole process of how I came to revamp the Catalyst website.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

I have learned that each client has their own work flow and in respect to that I have proudly worked cohesively with both my team and my clients. Both sides willing to implement the website we all came to agree upon.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

Conclusion

This project has taught me that there are hundred of ways to create a website that will stun and capture the eyes of the audience. But there is only one specific way at a specific time of a business that they would want to only target certain people. This was the obstacle that I had to face as a designer. With the help of my team and client, I honed and designed a design for the Catalyst client suited for their immediate need.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”213″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496170239554{padding-top: 20px !important;padding-right: 10px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][/vc_row_inner][vc_empty_space height=”30″][ult_buttons btn_title=”Let’s Talk” btn_link=”url:http%3A%2F%2Fembernavarro.com%2Fcontact_me%2F|||” btn_title_color=”#ff3a3a” btn_bg_color=”” btn_bg_color_hover=”#ff3a3a” btn_title_color_hover=”#ffffff” icon_size=”32″ btn_icon_pos=”ubtn-sep-icon-at-left” btn_border_style=”solid” btn_color_border=”#ff4e3a” btn_color_border_hover=”#ff3a3a” btn_border_size=”1″ btn_radius=”0″ btn_font_family=”font_family:Roboto|font_call:Roboto” btn_font_size=”desktop:15px;” btn_line_height=”desktop:15px;”][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

Note

Thank you to my clients, peers and mentors for helping me in this journey of self-discovery and how to challenge myself to create responsive web and mobile design with a concrete research and strong rational on my designs to back it up. If you have any comments and questions, please feel free to contact me.

Thank you for reading!

Sincerely,
Ember N. | UI Designer
ember.navarro@gmail.com

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][ultimate_spacer height=”30″][/vc_column][/vc_row]