BRAND AND SI TE RE F RE SH

BRAND AND SITE REFRESH

 PURPOSE
It’s no secret that customers want a quick and easy online shopping experience
(we’ve tested!) – and templates create just that. By following reusuable templates and
creating lasting content, you are saving time and creating brand consitency for a more
enjoyable shopping experience for mom.

BRAND AND SITE REFRESH

 TEMPLATES

EFFICIENT
EFFICIENT DEFINE
DEFINE DIGITAL IMPROVE
IMPROVE CUSTOMER
& REUSABLE STRATEGY EXPERIENCE
EXPERIENCE
Save in development, Help cross functional Create consistency across all
design and build time teams work towards a channels, in reaction to consumer
across multiple teams visual planning road map testing and outside consulting

BRAND AND SITE REFRESH

 COMPETITORS
COMPETITORS

CAT & JACK

• Strong brand/item messaging

balanced with promotions

• Consistent use of templates

• Relevant and lasting content

• On-figure photography &

multiple alt images

• Easy to Shop (filters, search,

swatching, clickability)

BRAND AND SITE REFRESH

 COMPETITORS
COMPETITORS

OLD NAVY

• Strong brand/item messaging

balanced with promotions

• Consistent use of templates

• Relevant and lasting content

• On-figure photography &

multiple alt images

• Easy to Shop (filters, search,

swatching, clickability)

BRAND AND SITE REFRESH

 COMPETITORS
COMPETITORS

GYMBOREE

• Strong brand/item messaging

balanced with promotions

• Consistent use of templates

• Relevant and lasting content

• Easy to Shop (filters, search,

swatching, clickability)

BRAND AND SITE REFRESH

 COMPETITORS
COMPETITORS

JANIE & JACK

• Strong brand/item messaging

balanced with promotions

• Consistent use of templates

• Relevant and lasting content

• Easy to Shop (filters, search,

swatching, clickability)

BRAND AND SITE REFRESH

 COMPETITORS
COMPETITORS

CRAZY 8

• Strong brand/item messaging

balanced with promotions

• Consistent use of templates

• Relevant and lasting content

• Easy to Shop (filters, search,

swatching, clickability)

BRAND AND SITE REFRESH

 TEMPLATE STYLE GUIDE

BRAND AND SITE REFRESH

 IM AGE

primary (hero)
K E Y M E S S AGE IM AGE
1 widget
3 design options IM AGE

option 2

IM AGE IM AGE

K EY MES SAGE F UL L BL E E D I M AG E K E Y M E S S AGE

IM AGE IM AGE

option 1 option 3

BRAND AND SITE REFRESH

 0 1 . S I Z I NG

PRIMARY HERO (overall) 1300px x 570px primary (hero)

option 1 (1 widget)
Z1 MESSAGE (zone 1) 389px x 492px

Z2 IMAGE (zone 2) 1300px x 570px

Z1
0 2 . ME S S AG E (zone 1)

a Promo Lockup: max of 205px x 70px

a
b Promo Number: Freight Sans Bold - 135pt
c Promo Percent: Little Dreamer Outline - 80pt
d Promo Off: Freight Sans Bold (lower) - 36pt c
b
e Sub 1: Freight Sans Bold (upper) - 60pt Z2
f Sub 2: Freight Sans Bold (upper) - 32.5pt d
g Sub 3: Little Dreamer Outline (lower) - 22pt
h Sub 4: Little Dreamer Filled (lower)- 22pt
e

f
SPACING BETWEEN (from the baseline)

• Promo Lockup(a) and Promo Number(b): 18px

g
• Promo Number(b) and Sub 1(e): 22px h
• Sub 1(e) and Sub 2(f): 5px
• Sub 2(f) and Sub 3(g): 34px
• Sub 3(g) and Sub 4(h): 11px

SPACING BETWEEN
• Zone 1 and Overall
NOTE: It is important to follow these guidelines exactly to ensure consistency across all channels.
Top/Bottom: 43px, Left: 64px, Right: 865px

BRAND AND SITE REFRESH

 0 1 . S I Z I NG

PRIMARY HERO (overall) 1300px x 570px primary (hero)

option 2 (1 widget)
Z1 MESSAGE (zone 1) 430px x 570px

Z2 IMAGE (zone 2) 438px x 282px Z1 Z2

Z3 IMAGE (zone 3) 438px x 282px

Z4 IMAGE (zone 4) 440px x 570px

a
BETWEEN ZONES 5px

c
0 2 . ME S S AG E (zone 1) b

a Promo Lockup: max of 230px x 78px d

Z4
b Promo Number: Freight Sans Bold - 150pt
c Promo Percent: Little Dreamer Outline - 90pt
e
d Promo Off: Freight Sans Bold (lower) - 40pt
f
e Sub 1: Freight Sans Bold (upper) - 67pt
f Sub 2: Freight Sans Bold (upper) - 36pt
g Sub 3: Little Dreamer Outline (lower)- 24pt g

h Sub 4: Little Dreamer Filled (lower)- 24pt h

SPACING BETWEEN (from the baseline)

• Promo Lockup(a) and Promo Number(b): 24px

Z3
• Promo Number(b) and Sub 1(e): 32px
• Sub 1(e) and Sub 2(f): 5px NOTE: It is important to follow these guidelines exactly to ensure consistency across all channels.
• Sub 2(f) and Sub 3(g): 40px
• Sub 3(g) and Sub 4(h): 11px

BRAND AND SITE REFRESH

 0 1 . S I Z I NG

PRIMARY HERO (overall) 1300px x 570px primary (hero)

option 3 (1 widget)
Z1 IMAGE (zone 1) 438px x 282px

Z2 IMAGE (zone 2) 438px x 282px

Z1 Z3 Z4
Z1 MESSAGE (zone 3) 430px x 570px

Z3 IMAGE (zone 4) 438px x 282px

a
Z4 IMAGE (zone 5) 438px x 282px

BETWEEN ZONES 5px

b c

0 2 . ME S S AG E (zone 1)
d
a Promo Lockup: max of 230px x 78px
b Promo Number: Freight Sans Bold - 150pt
e
c Promo Percent: Little Dreamer Outline - 90pt
f
d Promo Off: Freight Sans Bold (lower) - 40pt
e Sub 1: Freight Sans Bold (upper) - 67pt
f Sub 2: Freight Sans Bold (upper) - 36pt g
g Sub 3: Little Dreamer Outline (lower) - 24pt h
h Sub 4: Little Dreamer Filled (lower) - 24pt

SPACING BETWEEN (from the baseline)

• Promo Lockup(a) and Promo Number(b): 24px Z2 Z5

• Promo Number(b) and Sub 1(e): 32px
NOTE: It is important to follow these guidelines exactly to ensure consistency across all channels.
• Sub 1(e) and Sub 2(f): 5px
• Sub 2(f) and Sub 3(g): 40px
• Sub 3(g) and Sub 4(h): 11px

BRAND AND SITE REFRESH

 KEY M ES SAGE

secondary
3-7 widgets IMAGE IMAGE

3 design options

SELLIN G SELLIN G
COPY COPY

option 2

KE Y M E S SAGE KEY M ES SAGE

IM AG E I M AG E IM AG E

P ROD U CT P ROD U CT P RODUCT

IMAGE I M AGE I M AGE IMAGE COPY COPY CO PY

I M AG E IM AG E IM AG E

SEL L ING SE L L I NG SE L L I NG SELLIN G

COPY CO PY CO PY COPY P ROD U CT P ROD U CT P RODUCT
COPY COPY CO PY

option 1 option 3

BRAND AND SITE REFRESH

 0 1 . S I Z I NG

SECONDARY (overall) 1300px x 670px

secondary
option 1 (4 widgets)
Z1 MESSAGE (zone 1) 1300px x 85px
Z1
Z2 IMAGE (zone 2) 360px x 480px a

Z3 COPY BOX (zone 3) 280px x 140px

Z4 IMAGE (zone 4) 360px x 480px Z2 Z4 Z6

Z5 COPY BOX (zone 5) 280px x 140px

Z6 IMAGE (zone 6) 360px x 480px

Z7 COPY BOX (zone 7) 280px x 140px

0 2 . ME S S AG E (zone 1)

a Little Dreamer Filled (lower) - 58pt

0 3 . S ELLI NG CO PY (zones 3, 5, 7)

b Category: Freight Sans Bold (upper) - 42pt; 24pt leading

c Line: 3pt; 126px x 5px
d Copy: Freight Sans Medium - 16pt; 21pt leading Z3 b Z5 b Z7 b

SPACING BETWEEN (from the baseline)

• Zone 1 and Zone 2, 4, 6: 20px c c c

d d d
• Zone 2, 4, and 6: 20px
• Zone 2 and 6 from overall (left and right): 89px
• Category(b) and Line(c): 15px
• Line(c) and Copy(d): 15px

NOTE: It is important to follow these guidelines exactly to ensure consistency across all channels.

BRAND AND SITE REFRESH

 0 1 . S I Z I NG

SECONDARY (overall) 1300px x 670px

secondary
option 2 (3 widgets)
Z1 MESSAGE (zone 1) 1300px x 85px
Z1
Z2 IMAGE (zone 2) 550px x 480px a

Z3 COPY BOX (zone 3) 350px x 130px

Z2 Z4
Z4 IMAGE (zone 4) 550px x 480px

Z5 COPY BOX (zone 5) 350px x 130px

0 2 . ME S S AG E (zone 1)

a Little Dreamer Filled (lower) - 58pt

0 3 . S ELLI NG CO PY (zone 3 and 5)

b Category: Freight Sans Bold (upper) - 42pt; 24pt leading

c Line: 3pt; 126px x 5px
d Copy: Freight Sans Medium - 16pt; 21pt leading

SPACING BETWEEN (from the baseline)

Z3 Z5
• Zone 1 and Zone 2, 4: 20px b b

• Zone 2 and 4: 20px c c

• Zone 2 and 4 from overall (left and right): 89px d d
• Category(b) and Line(c): 15px
• Line(c) and Copy(d): 15px

NOTE: It is important to follow these guidelines exactly to ensure consistency across all channels.

BRAND AND SITE REFRESH

 0 1 . S I Z I NG

SECONDARY (overall) 1300px x 670px secondary

Z1 MESSAGE (zone 1) 1300px x 85px option 3 (7 widgets)

Z2 IMAGE (zone 2) 550px x 480px Z1 a

Z3 COPY BOX (zone 3) 350px x 130px

Z4 IMAGE (zone 4) 170px x 210px Z2 Z4 Z5 Z6

Z5 IMAGE (zone 5) 170px x 210px

Z6 IMAGE (zone 6) 170px x 210px

Z7 IMAGE (zone 7) 170px x 210px

Z8 IMAGE (zone 8) 170px x 210px

Z9 IMAGE (zone 9) 170px x 210px d d d

0 2 . M ES S AG E (zone 1) Z7 Z8 Z9

a Little Dreamer Filled (lower) - 58pt

0 3 . S E L L I N G CO PY (zone 3-9)

b Category: Freight Sans Bold (upper) - 42pt; 24pt leading Z3 b

c Line: 3pt; 126px x 5px
d Copy: Freight Sans Medium - 16pt; 21pt leading c
d d d d
SPACING BETWEEN (from the baseline)

• Zone 1 and Zone 2, 4: 20px

• Zone 2 and Zone 4-9: 20px
• Zone 2, 6, and 9 from overall (left and right): 89px
• Category(b) and Line(c): 15px
NOTE: It is important to follow these guidelines exactly to ensure consistency across all channels.
• Line(c) and Copy(d): 15px

BRAND AND SITE REFRESH

 IM AGE / K E Y M E S S AGE
tertiary
tertiary
1-8 widgets option 2

3 design options

IM AGE IM AGE IM AGE IMAGE

IMAGE / K EY M E S SAG E I M AG E / KE Y M E S S AGE IM AGE IM AGE IM AGE IMAGE

option 1 option 3

BRAND AND SITE REFRESH

 0 1 . S I Z I NG

TERTIARY (overall) 1300px x 375px

tertiary
tertiary
option 3 (5 widgets)
Z1 MESSAGE (zone 1) 1300px x 80px

Z2 IMAGE (zone 2) 197px x 189px

Z3 IMAGE (zone 3) 197px x 189px

Z1 a
Z4 IMAGE (zone 3) 197px x 189px

Z5 IMAGE (zone 3) 197px x 189px b

Z2 Z3 Z4 Z5
0 2 . ME S S AG E (zone 1)

a Little Dreamer Filled (lower) - 58pt

c
b Line: 3pt; 126px x 5px c c c

0 3 . S EG MENT CO PY
d d d d
c Little Dreamer Filled (upper) - 43pt (layered)
d Freight Sans Medium - 16pt

SPACING BETWEEN (from the baseline)

• Zone 1 and Zone 2-5: 15px

• Zone 2 and 4, Zone 3 and 4, Zone 4 and 5: 60px
• Zone 2 and 5 from overall (left and right): 137px
• Zone 2-5 an Segment Copy: 21px

NOTE: It is important to follow these guidelines exactly to ensure consistency across all channels.

BRAND AND SITE REFRESH

 S U CC E E D TOGETH ER

SUPPORT & PARTNERSHIP

Commitment to let customer testing
run a longer course of time to allow
for true reads on results

ACCOUNTABILITY
ACCOUNTABILITY
All channel partners are accountable for
following the guidelines that the templates
provide and commit to the standards
that have been put in place

BRAND AND SITE REFRESH

BRAND AND SITE REFRESH