Lettisia Toha Process Book by lettisiascarlett

LE T T IS I A TOH A VISUAL DESIGNER

PROCESS BOOK

PROJECTS: 1. CLEAN+GREEN 2. WOMENâ&#x20AC;&#x2122;S FUNDING ALLIANCE

CLEAN+GREEN

CREATIVE BRIEF CLIENT: SeaYu Enterprises, Inc. BACKGROUND: Founded in 2010 and located in San Francisco, SeaYu Enterprises created environmentally friendly cleaning products that caused by pet messes. The products emphasize on its green-certified, animal-tested cleaning products that help eliminate odor and stain. PRICE: 16 ounce for $9.99 MARKETED AT: Petco and also available through Amazon. TARGET MARKET: Pet owners. Adults from 25 years to older. PROBLEM: Logo is very dated, does not communicate the company’s message clearly. Logo is hard to see on their current packaging. Lack of online marketing collateral and brand identity. SOLUTION: Create a more cohisive and effective logo that could well communicate the company’s message. Creating a consistent brand with clean and elegant design elements to enhance company’s values and new marketing collateral design to better promote the company.

BOARD MoodMOOD Board/Inspirations

Lettisia Toha • CLEAN+GREEN • Corporate Identity • SU2015

COMPETITIVE ANALYSIS Competitive Analysis CLEAN+GREEN

Nature's Miracle

Vet's Best

Price

$9.99

$7.25

$14.99

Size

16 fl oz

32 fl oz

Amazon Rating

4.4/5

4.5/5

4.0/5

Natural

✓

PetCo Warranty

✓

Website Design

2.5/5

4.0/5

3.5/5

Website Usability

2.0/5

4.0/5

3.0/5

✓

Facebook

USER PERSONA

User Persona

Monica Tan, 30

Christopher Smith, 44

Betty Francis, 59

Married with two children under 5

Chris works as a manager at an IT

Betty is going to retire very soon from

years old, Monica is a busy housewife.

company. Recently divorced, Chris feels

her nursing job and she is planning

She works from home as a landscape

lonely in the house by himself. He decided

to become foster parent for rescued

architect. She has a 8 years old, female

to purchase an Australian German

dogs. On her free time, she volunteers

Goldendoodle and recently the family

Shepherd from a local breeder named

at community garden. Currently living

adopted a five months old, male Maltese

Finn. Potty training has been going

by herself and three adult dogs, Betty

named Shiro. Shiro is not house-

good but since Chris works quite a lot,

expects being a foster parent means

broken yet so sometimes he misses

sometimes he forgets to let Finn out and

messes in the house. She does not mind

the training pads. With young children

accidents happen. His kids love Finn and

cleaning as she loves dogs. Betty has

in the house, Monica needs a cleaning

visits alternate weekends, Chris needs a

been researching for the best possible

product that’s harmless, works fast

cleaning product that works fast, smells

cleaning product that will not harm the

and effective as she’s always busy.

nice and harmless for children and pets.

dogs, economical and good for the planet.

Lettisia Toha • CLEAN+GREEN • Corporate Identity • SU2015

Sketches

SKETCH

Finalised Logo FINALIZED LOGO

GRETA SANS RD HEAVY

Pantone 360U

Pantone 349C

Pantone 8425C

Pantone 7507U

ABCDEFGHIJKLM NOPQRSTUVWXYZ

LOGO COMPARISON

ORIGINAL

DESIGN

BUSINESS Business CabinetCABINET 0.5”

9.5”x4.125” Crane’s Lettra Pearl White Cover 39.54M 0.5” 0.9” 2138 16th Ave Oakland, CA 94116

1.8”

1.125”

ALICE HAN

2138 16th Ave Oakland, CA 94116 (415) 566-9677 buycleangreen.com

2138 16th Ave • Oakland, CA 94116 • (415) 566 9677 • odorandstainremover.com

8.5”x11”

Grota Sans Alt Rd Regular 9pt

Crane’s Lettra Pearl White

Color: Pantone 360 U

Cover 39.54M

1.65”

2138 16th Ave Oakland, CA 94116 (415) 566-9677 buycleangreen.com

1.2” X 1.2”

2”x3.5” Crane’s Lettra Pearl White Cover 39.54M Lettisia Toha • CLEAN+GREEN • Corporate Identity • SU2015

BUSINESS CABINET

Printed AdsPRINT

ADS #1

Bus Stop Poster

I’M SORRY MOM!

There is no love without forgiveness

I promise I won’t do it again...

To future apologies in life, use

buycleangreen.com

Lettisia Toha • CLEAN+GREEN • Corporate Identity • SU2015

WEB Mock UpBANNERS MOCKUP

Lettisia Toha • CLEAN+GREEN • Corporate Identity • SU2015

WEB BANNER #1 Mock Up

I’M SORRY MOM!

I promise I won’t do it again... buycleangreen.com

I’M SORRY MOM!

I promise I won’t do it again...

I’M SORRY MOM!

I promise I won’t do it again...

buycleangreen.com

Web Banner comes in 3 sizes: standard (468 x 60)

buycleangreen.com

square pop-up (250 x 250) wide skycraper (160 x 600)

Lettisia Toha • CLEAN+GREEN • Corporate Identity • SU2015

WEB BANNERS #2 Grota Sans Rd Regular 10 pt Pantone 8425 C

Medium Rectangle 300 x 250 pixels

There is no love

without forgiveness

Steady 14 pt Pantone 8425 C Wide Skyscraper 160 x 600 pixels

There is no love

without forgiveness

BUY NOW»

Grota Sans Rd Regular 15 pt Pantone 8425 C

Grota Sans Rd Medium 10 pt Text: #FFFFFF Box: Pantone 360 U

Steady 19 pt Pantone 8425 C Leaderboard 728 x 90 pixels

Grota Sans Rd Medium 19 pt Text: #FFFFFF Box: Pantone 360 U

There is no love

without forgiveness

BUY NOW»

WEB BANNERS MOCKUP

There is no love

without forgiveness

BUY NOW»

There is no love

without forgiveness

BUY NOW»

MAGAZINE AD

Standard Size 8.375” x 10.875”

There is no love

Grota Sans Rd Regular 23 pt Pantone 8425 C

without forgiveness Steady 32 pt Pantone 8425 C

BUY NOW at your nearest PetCo store or visit odorandstainremover.com

Grota Sans Rd Book 17 pt Pantone 360 U

Brand Identity GUIDELINES Guiding you through our brand

CLEAN+GREEN â&#x20AC;¢ Brand Identity Guidelines

The following few pages will recite CLEAN+GREENâ&#x20AC;&#x2122;s primary visual branding DNA

The logo CLEAN+GREEN’s corporate identity is comprised of both icon and typography. The icon is an illustration of a dog’s face with different color eye patch, resembling Border Collie dog breed. The use of color green and brown represents nature as it echoes CLEAN+GREEN’s organic and biodegradable characteristics.

CLEAN+GREEN • Brand Identity Guidelines

Using the logo The recommended application of the logo is the core full color identity used on a white backgrorund. The logo must always be produced from the digital master artwork. Do not scan or try to recreate using alternative typefaces and colors.

Semi-reversal When using the light corporate green for a background color, the logo can be used in a semi-reversed state.

Single color When a single color version of the logo is required, for example, for a specific printing process, only the light corporate green should be used.

Mono The logo can only be produced in black as required.

CLEAN+GREEN â&#x20AC;˘ Brand Identity Guidelines

Icon Color treatment for icon should follow the ‘using the logo’ guide. The icon can be used for graphic treatment by enlarging just the icon, if positioning off page it should be cut off at the middle, opactity should only be at 100% or 50%.

CLEAN+GREEN • Brand Identity Guidelines

Minimum Sizes & Clear Space

0.25” 0.25”

Clear Space The clear space for CLEAN+GREEN logo is 0.25 inch surrounding the entire logo. Minimum Sizes Onscreen The length of the logo 0.8”

is at 192 pixels and the height at 92 pixels. 1.6”

Minimum Sizes for Print The length of the logo is at 1.6 inches and the height at 0.8 inches.

CLEAN+GREEN • Brand Identity Guidelines

Do Not

Don’t distort or scale

Don’t rotate the logo

Don’t lower opacity of the logo

Don’t skew the logo

Don’t use unspecified color

the logo unappropriately

20% Off

Don’t add any element to the logo

CLEAN GREEN Don’t change any elements

Don’t change the font or size

Don’t scale any of

of the logo

the logo’s elements

CLEAN+GREEN • Brand Identity Guidelines

Primary Color The color palette for CLEAN+GREEN has been chosen to create a feeling of cleanliness, environmentally-friendly and safety.

Pantone 360U

Pantone 349C

Pantone 8425C

Pantone 7507U

CMYK: 56/0/73/0

CMYK: 90/12/95/40

CMYK: 0/17/23/63

CMYK: 0/13/33/0

RGB: 93/184/96

RGB: 4/106/56

RGB: 95/79/73

RGB: 255/221/170

HEX: #5db860

HEX: #046a38

HEX: #5f4f49

HEX: #ffddaa

CLEAN+GREEN â&#x20AC;¢ Brand Identity Guidelines

Typography Greta Sans Rd is chosen typeface for both

It was chosen for its strong appearance, clarity

headline and copy and can be used in four weights;

and its slightly fun and quirky shape. Those

regular, medium, bold and black. It is also used

characteristics represent friendliness, youthful and

to produce outlined icons where applicable.

updated look that reflects the brand’s core values.

A secondary typeface, Steady, is chosen typface for call outs in advertising. It was chosen for its personality, and its flowing characters are ideal for emphasizing.

Steady Aa Bb Cc Dd Ee Ff Gg Hh Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789

GRETA SANS RD REGULAR

GRETA SANS RD MEDIUM

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

0123456789

GRETA SANS RD BOLD

GRETA SANS RD HEAVY

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

0123456789

CLEAN+GREEN • Brand Identity Guidelines

Business Cabinet 0.5”

9.5”x4.125” Crane’s Lettra Pearl White 0.5” 0.9” 2138 16th Ave Oakland, CA 94116

1.8”

2”x3.5” Crane’s Lettra Pearl White

1.125”

ALICE HAN 2138 16th Ave Oakland, CA 94116 (415) 566-9677 buycleangreen.com

2138 16th Ave • Oakland, CA 94116 • (415) 566 9677 • odorandstainremover.com

8.5”x11”

Grota Sans Alt Rd Regular 9pt

Crane’s Lettra Pearl White

Color: Pantone 360 U

1.65”

1.2” X 1.2”

CLEAN+GREEN • Brand Identity Guidelines

Web Banners Grota Sans Rd Regular 15 pt Pantone 8425 C Steady 19 pt Pantone 8425 C Leaderboard 728 x 90 pixels

Grota Sans Rd Medium 19 pt Text: #FFFFFF Box: Pantone 360 U

There is no love

without forgiveness

BUY NOW»

CLEAN+GREEN • Brand Identity Guidelines

Web Banners

Grota Sans Rd Regular 10 pt Pantone 8425 C

Medium Rectangle 300 x 250 pixels

There is no love

without forgiveness

Steady 14 pt Pantone 8425 C

BUY NOW»

Grota Sans Rd Medium 10 pt Text: #FFFFFF Box: Pantone 360 U

CLEAN+GREEN • Brand Identity Guidelines

Web Banners

Wide Skyscraper 160 x 600 pixels

There is no love

without forgiveness

Grota Sans Rd Regular 15 pt Pantone 8425 C Steady 19 pt Pantone 8425 C Grota Sans Rd Medium 19 pt Text: #FFFFFF

BUY NOW»

Box: Pantone 360 U CLEAN+GREEN • Brand Identity Guidelines

CLEAN+GREEN â&#x20AC;¢ Brand Identity Guidelines

WOMENâ&#x20AC;&#x2122;S FUNDING ALLIANCE

CREATIVE BRIEF Client:

SWOT Analysis based on organization:

Women’s Funding Alliance

•

Strengths: strong brand identity, plentiful amount

http://www.wfalliance.org/

of resources and information, solid research, strong social media presence, fast on providing responses

Organization Background: Women Funding Alliance (WFA) was founded

•

Weaknesses: website outdated, most

thirty years ago by a group of passionate

donors came from fast aging demographic

community leaders who strongly believe in

(baby boomers and post retirement), weak

improving the lives of women and girls in

and unappealing marketing collateral

Washington State. WFA envisions a world where all women and girls have the opportunity

•

Opportunities: building resources to

to live, lead and thrive. Their mission is to

gear towards appealing to younger donors

advance leadership and economic opportunity

demographic and increase in online donations

for women and girls in Washington State. And WFA accomplishes their mission by strategically

•

Threats: economic crises, loss in donors

supporting local organizations for women. Target Demographic Studies: Project Goals:

About 60% of current donors are individuals of baby-

To redesign, update and provide solutions

boomers age that were born approximately between

based on WFA’s current website, in order to

the years 1946 and 1964, giving an age range between

increase traffic, donations, public awareness

51 and 70 as of 2016. Rising group of Millennials whose

and appeal to younger demographic.

birth years ranging from the early 1980s to the early 2000s. WFA received most of donations online and fundraising events with some percentage through mail.

CREATIVE BRIEF SWOT Analysis based on current website’s UX: •

Strengths: fast, consistent photography

treatment and style, interesting interactive home page, detailed and updated information •

Weaknesses: outdated design, unresponsive,

Strategies and Solution:

not mobile friendly, hard to navigate, weak emotional

Creating a new responsive layout design for

impact, donations not emphasized, inconsistent layout,

the site. Rephrasing and simplify tabs, create

navigation bar has too many different colors, tab

new content management system. Making “get

labels are not straight forward enough and too long,

involved/donate” an emphasis for the whole

get involved tab is in yellow which makes it hard to

site so it will be easier for users to look for

read, no home tab, search bar is on the left which is

the options to donate. Applying their current

unusual, typography choice is not suitable for reading

brand style in more appropriate ways to create

a lot of content, needs better content management

stronger branding. Creating an advertising campaign and short motion graphics video

•

Opportunities: new technologies to improve user

that would be featured in their website. As

experience, new design trends to better convey messages,

well as short infographic style graphics for

more effective marketing tactics, positive increase in

their latest research on gender wage gap in

donations and more media coverage for events, new ways

Washington state. Stronger UX, aesthetic and

to encourage repeat visits, moving to responsive design

brand identity is key to improve the website.

•

Threats: local competitors with better websites

and more resources, donors’ generational gap is too wide for the new proposed design to work for both

COMPETITIVE ANALYSIS

YWCA Strengths: simple yet strong brand identity, good use of color palette, very easy to read and find resources, clear and straightforward navigation labels, thereâ&#x20AC;&#x2122;s an emphasis on donation callout, nice display of current events and social media on the homepage, organized content. Weaknesses: website not responsive, content hard to read on mobile and tablet view, thereâ&#x20AC;&#x2122;s a glitch close to the search bar, search bar position often changes when at different page of the site, site layout and design outdated.

COMPETITIVE ANALYSIS

VENTURES Strengths: responsive layout, easy to find contact information, emphasis on donate, interactive data display, donation prompts is everywhere. Weaknesses: breadcrumb color and donate color on navigation tab is too similar, some type seems too large, color treatment too distracting on some headlines, logo missing from header, can only donate through PayPal.

COMPETITIVE ANALYSIS

COURAGE 350 Strengths: interactive photo slide draws userâ&#x20AC;&#x2122;s attention, nice short description of what the organization is doing on homepage, responsive layout, emphasis on donate today, organized content Weaknesses: confusing double navigation, donate button is way too far on the bottom, too much white space on some pages

INSPIRATIONS GIRL EFFECT The Girl Effect website shows strong brand identity for the organization. Their website features a great modern, bold design. Their mobile view is amazing. Truly a lesson in responsiveness. Their website also features great motion graphics. As you scroll, the animation progresses. Limited color palette lend themselves to impactful designs. They also have strong marketing campaign.

EVERYTOWN Everytown for gun safety is a great website with effective content management system and modern sophistication. There’s ample white space. Also, they’ve made a great use of flat design and a responsive layout to make sure the website is up to the minute and accessible by all. They’ve used card UI pattern for some of their content. Great content management here. Also, it’s easy to find where to donate. You’re also prompted to donate on a small pop-up when you first accessed the site.

INSPIRATIONS CHARITY WATER Great website design with a responsive layout. They also have a lot of content like WFA but organized it in such a way of one to two words tabs only, making it easy to understand. They also have â&#x20AC;&#x153;donateâ&#x20AC;? tab as the first featured tab. They make it really easy to donate too because it features right on their homepage and also for the PayPal option.

SHINING HOPE FOR COMMUNITIES Simplicity is always a good thing, and this site shows you exactly why. Clean division between sections, beautiful images, and some well presented copy make visiting a pleasurable experience. Their donation function is fantastic too - a rarity for a smaller nonprofit. In this day and age, excuses for poor donation experiences are wearing thin.

USER PERSONAS

Dr. Constance Sandberg, 68, retired

William Peterson, 54, bank manager

Stephanie Lee, 32, Project Manager

Growing up in a period of so called

William was born and bred in Seattle.

Born in China, Stephanie’s parents moved

second-wave feminism; Connie

He never thought such a liberal state

to Seattle when she was six years old.

has always believed in gender

like Washington would have issues

Although brought up in the US, Stephanie

equality and throughout her adult

like gender wage gap. William has

is well aware of the gender discrimination

life has been a strong supporter

never been much of a reader; he also

problem in China. She’s lucky that her

of women empowerment. Connie

did not keep up with news. He only

parents fought really hard to move to

devoted her life for education.

learned about it from his teenage

the US so she and her younger sister

Before retirement, she was a dean in

daughter’s school research paper.

could get better education and livelihood.

University of Washington. She and

With three daughters of his own,

Despite already adopting Seattle as her

her neurobiologist husband Robert

William felt obligated to help the local

home, Stephanie still could not believe

have been a steady contributor

community he grew up in. As a father,

some of the hardships local young girls

to WFA. They are very involved

he does not want his daughters to

have to go through. She vows to help

in their community and believe

be treated and appreciated less than

the girls in her community and she

that women are the backbone of

the opposite gender. He wants his

needs a women-centric organization

the community and with the right

daughters to have equal treatment

that could help her achieve her dream.

tools; the community will flourish if

and opportunities with other men.

women and girls are given quality education and opportunities.

VIDEO MARKETING #1 CONCEPT Inspired by a poem by Teddy Saunders, the concept of the motion graphic video is of young girls and women saying what their dreams are for the future. It emphasizes on innocence, hope and a reminiscene of how as children, our dreams are without limitations.

VIDEO MARKETING #1 CONCEPT

VIDEO MARKETING #2 CONCEPT Taking into account highlights of WFA’s 2013 research on the status of women in Washington state. The research is available as pdf on their website. From conversation with WFA’s own communications manager, it is learned that WFA takes the research very seriously and would like to emphasize on the study.

VIDEO MARKETING #2 CONCEPT Just 20% of corporations in Washington State have more than three women on their boards

2014 for Females

For girls, leadership aspirations peak at age eight and just one in five believes she has the qualities required to become a good leader.

Just 32% of the Washington State Legislature is female

PERCENT

LEADERSHIP

2014

32%

Effects:

AGE

2014: animate counting numbers and camera zoom in <transition> US Map: show up and then WA state animate from stroke

Effects:

to fully filled and then break away, zoom in

WA: will then emerge from the state

briefcases show up all identical in same color

Effects:

2 then will change their fill color and then scale up

circle charts come up, animate the line.

while the rest scale away out of camera

Line on graph animate up,

three female icons will then came out from the briefcases

upon reaching, bar with number 8 will go up zoom in on the bar, the rest out of camera

upon impact there will be particle, line fades out number 8 fades, 4 other bars slide up 1 bar change fill color, the other 4 falls down

Among 60 the largest racial and ethnic groups, Native American women have the highest poverty rates at 27.1% followed by Hispanic women at 26.4%.

Among full-time workers in Washington State, for every dollar men earn, women still earn an average of just 78 cents.

DOLLAR

78 CENTS

Effects: <transition>

100

Effects: <transition>

Coin fill color fills up clockwise like clock

27.1%

26.4%

line graph pop out (scale) bar grows up one by one percentage shows up (opacity)

1 dollar slide up

one bar disappear

Line surrounding coin begin clockwise

78 cents slide down, 1 dollar slide down bounce the coin

Native American

What can you do to help?

Hispanic

60 39% of single moms and those with young children have incomes below the poverty level. national poverty level

40 39%

Effects: zoom in on the first bar, percentage disappear bar grows up, 39% slides up proverty line show (trim path) Effects: <transition>

typeletter effect fades out

In 2015, we have:

IN We are dedicated solely to

Start by getting involved with Womenâ&#x20AC;&#x2122;s Funding Alliances

2015

WE HAVE:

advancing leadership and economic opportunity for women and girls

Effects: <transition> Effects:

Effects:

IN slides down

typeletter effect

2015 slides from to the right from IN (mask)

fades out

WE HAVE: slides down from 2015 everything slides up

VIDEO MARKETING #2 CONCEPT â&#x20AC;˘

Invested more than $500,000 in 49 innovative organizations that build leadership and increase economic opportunity, safety and health.

LEADERSHIP

â&#x20AC;˘

170,000

500,000++

SAFETY

More than 170,000 women and girls in Washington State have received our help

OPPORTUNITY

Effects: <transition> Dollar bill pop out (scale & bounce)

Be a part of our community

HEALTH Effects:

dollar bill keeps rotating, like a planet

typeletter effect

line begins and ends on a dot, word pop out

fades out

repeat for 3 more times

Join and donate at wfalliance.org logo

Effects: typeletter effect

VIDEO MARKETING #2 CONCEPT

VIDEO MARKETING #3 CONCEPT Going back to the study. This third concept would display the same script from the second concept from middle to end. Script changed to include more statistics and comparisons. Color pallette and style otherwise remain the same.

VIDEO MARKETING #3 CONCEPT

lettisia.com hello@lettisia.com 206 427 4459