Client:

Del Mar Vacations

A visual strategy for user engagement

Creative vision and animated illustrations that represent the core principals of the vacation rental brand

Product:

Website portal

Industry:

Vacation Rentals

Timeline:

8 weeks

Company Size:

50-100

Key Services:

Visual Strategy, Concept Design, Illustration, Motion Design
Outcome:

Animated Illustrations that represent Del Mar’s brand and core principals. The visual strategy extends beyond the home owner portal. At Del Mar’s discretion, each asset is available for use in other mediums, such as Del Mar website,  advertisements and social media.

Client:

Del Mar Vacations

A visual strategy for user engagement

Creative vision and animated illustrations that represent the core principals of the vacation rental brand

Product:

Website Portal

Industry:

Vacation Rentals

Timeline:

8 weeks

Company Size:

50-100

Key Services:

Visual Strategy, Concept Design, Illustration, Motion Design
Outcome:
Custom animated illustrations created for the Del Mar Vacations brand to be used in key moments of the home owner experience. The strategy extends beyond the home owner portal with the potential to be used in digital advertisements, company website, and online communications.

Client:

Del Mar Vacations

A visual strategy for user engagement

Creative vision and animated illustrations that represent the core principals of the vacation rental brand

Product:

Website Portal

Industry:

Vacation Rentals

Timeline:

8 weeks

Company Size:

50-100

Key Services:

Visual Strategy, Concept Design, Illustration, Motion Design
Outcome:
Custom animated illustrations created for the Del Mar Vacations brand to be used in key moments of the home owner experience. The strategy extends beyond the home owner portal with the potential to be used in digital advertisements, company website, and online communications.

Del Mar Vacations has been taking care of guest and home owner needs for over 10 years. As part of our collaboration on the homeowner portal overhaul, we wanted the visuals to reflect Del Mar’s unique brand and dedication to their clients’ needs.

Visual strategy goals

Create visuals that encourage key user actions

Capture the feel of Cape Code and add delight to the vacation planning experience

Further build brand awareness and stand out from competition through memorable bespoke visuals

Del Mar Vacations has been taking care of guest and home owner needs for over 10 years. As part of our collaboration on the homeowner portal overhaul, we wanted the visuals to reflect Del Mar’s unique brand and dedication to their clients’ needs.

Visual strategy goals

Create visuals that encourage key user actions

Capture the feel of Cape Code and add delight to the vacation planning experience

Further build brand awareness and stand out from competition through memorable bespoke visuals

Inspiration

The foundation of Del Mar’s visual language came from Del Mar’s brand, and the following core principals:

  • Premium hospitality
  • The Cape Cod nostalgic feel
  • Home away from home

The company’s logo and color scheme

Del Mar logo and color scheme

The company’s logo and color scheme

Del Mar logo and color scheme
Moodboard Del Mar

Priceless memories

Wanting to highlight Del Mar’s mission of giving families an unforgettable vacation in Cape Cod, we found inspiration in the imagery of beach vacations, naval themes, houses on the cape and family bonds.

Priceless memories

Wanting to highlight Del Mar’s mission of giving families an unforgettable vacation in Cape Cod, we found inspiration in the imagery of beach vacations, naval themes, houses on the cape and family bonds.
Moodboard Del Mar

Priceless memories

Wanting to highlight Del Mar’s mission of giving families an unforgettable vacation in Cape Cod, we found inspiration in the imagery of beach vacations, naval themes, houses on the cape and family bonds.
Moodboard Del Mar

Visual strategy rules for every animated illustration

1

The motion must start with the Del Mar logo slash

2

The illustration must transform from a nautical element into a contextual visual communicating the message/scenario

3

The illustrations must have a simple, elegant, thin stroke that is slightly stylized. Every line has a role, there are no extraneous lines or elements

4

The motion must be smooth, calm, and organic with gentle rhythmic touches

5

The motion must play through only once, in some cases barely perceptible motion may remain on a loop (for a lottie visual) to communicate a natural and organic feel

6

The illustration must incorporate a combination of modern and traditional, nostalgic elements

Illustrations guidelines

Accent color shapes should be

  • Middle Gray (#D3D3D3) or Blue (#53B4FF)
  • Geometric in nature, not organic
  • Unobtrusive, slightly offset from the line drawing
  • Be placed strategically to create visual rhythm
  • Help with creating a sense of motion and/or shadow and light

Stroke should not overlap to create a transparent effect

Illustration background Del Mar

Illustration background should blend into the background of the page

Illustration stroke width Del Mar

Stroke should be thin, 1-2 px depending on the size and detail

Visual strategy rules for every animated illustration

1

The motion must start with the DelMar logo slash

2

The illustration must transform from a nautical element into a contextual visual communicating the message/scenario

3

The illustrations must have a simple, elegant, thin stroke that is slightly stylized. Every line has a role, there are no extraneous lines or elements

4

The motion must be smooth, calm, and organic with gentle rhythmic touches

5

The motion must play through only once, in some cases barely perceptible motion may remain on a loop (for a lottie visual) to communicate a natural and organic feel

6

The illustration must incorporate a combination of modern and traditional, nostalgic elements

Illustrations guidelines

Illustration accent Del Mar

Accent color shapes should be

  • Middle Gray (#D3D3D3) or Blue (#53B4FF)
  • Geometric in nature, not organic
  • Unobtrusive, slightly offset from the line drawing
  • Be placed strategically to create rhythm
  • Help with creating a sense of motion and/or shadow and light

Stroke should not overlap to create a transparent effect

Illustration background Del Mar

Illustration background should blend into the background of the page

Stroke width Del Mar

Stroke should be thin, 1-2 px depending on the size and detail

Visual strategy rules for every animated illustration

1

The motion must start with the DelMar logo slash

2

The illustration must transform from a nautical element into a contextual visual communicating the message/scenario

3

The illustrations must have a simple, elegant, thin stroke that is slightly stylized. Every line has a role, there are no extraneous lines or elements

4

The motion must be smooth, calm, and organic with gentle rhythmic touches

5

The motion must play through only once, in some cases barely perceptible motion may remain on a loop (for a lottie visual) to communicate a natural and organic feel

6

The illustration must incorporate a combination of modern and traditional, nostalgic elements

Illustrations guidelines

Illustration accent Del Mar

Accent color shapes should be

  • Middle Gray (#D3D3D3) or Blue (#53B4FF)
  • Geometric in nature, not organic
  • Unobtrusive, slightly offset from the line drawing
  • Be placed strategically to create rhythm
  • Help with creating a sense of motion and/or shadow and light
Stroke overlap Del Mar

Stroke should not overlap to create a translucent effect

Illustration background Del Mar

Illustration background should blend into the background of the page

Stroke width Del Mar

Stroke should be thin, 1-2 px depending on the size and detail

Motion guidelines

Motion should be calm and gentle, avoid sharp movement

Visuals should gently transform (shape morph) from the nautical element to the contextual element

Final results

Combining guidelines, branding color schemes and imagery that reflected Del Mar’s core business principles, we designed four illustrations for the new homeowner portal.

This strategy also extends beyond the home owner portal, with certain elements available for other mediums; advertisements, company website and social platforms.

Empty State

Final results

Combining guidelines, branding color schemes and imagery that reflected Del Mar’s core business principles, we designed four illustrations for the new homeowner portal.

This strategy also extends beyond the home owner portal, with certain elements available for other mediums; advertisements, company website and social platforms.

Empty State

Message Confirmation

Job Progress

Reservation Confirmation

Other Case Studies

A bookkeeping solution designed for independent restaurants and restaurant franchises.

A UX Onboarding Strategy to confidently onboard and retain users

A bookkeeping solution designed for independent restaurants and restaurant franchises.

A UX Onboarding Strategy to confidently onboard and retain users

We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
OK