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:
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:
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
The company’s logo and color scheme
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
Priceless memories
Visual strategy rules for every animated illustration
1
The motion must start with the Del Mar logo slash
2
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
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 should blend into the background of the page
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
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
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 rhythm
- Help with creating a sense of motion and/or shadow and light
Stroke should not overlap to create a transparent effect
Illustration background should blend into the background of the page
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
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
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 rhythm
- Help with creating a sense of motion and/or shadow and light
Stroke should not overlap to create a translucent effect
Illustration background should blend into the background of the page
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
