• Custom Website Design: A visually engaging website that balances playfulness with professionalism to better communicate the Foundation’s mission.
• Brand Identity Refresh: Expanded colour palette, updated typography, and refined visual direction to create a more dynamic and flexible brand.
• Logo Suite Development: A complete set of logo variations including horizontal, stacked, circular, and standalone brand marks for flexible use.
• SWAP Program Branding: A custom logo and identity for the Sunsafe Workplace Awareness Program, aligned to the master brand while maintaining its own identity.
• UX/UI Design Strategy: Structured navigation and layout designed to improve usability across a large sitemap.
• Mega Menu Navigation: A simplified navigation system grouping content into clear user pathways.
• Interactive Design Elements: Hand-drawn graphics, animations, and visual accents to enhance engagement and guide user attention.

Hunter Melanoma Foundation’s existing brand and website presented several limitations that impacted both engagement and usability.

The original identity relied heavily on a narrow pink and green palette tied to the watermelon logo. While recognisable, it lacked flexibility and depth, making it difficult to create visual variety across digital applications.

From a website perspective, the large sitemap created complexity in navigation. Users needed clearer pathways to understand how the Foundation helps, why their work matters, and how they could get involved.

Additional challenges included:

• Brand Evolution: Expanding the identity without losing the recognisable watermelon motif
• Engagement: Creating a design that felt approachable and engaging while still communicating a serious message
• Navigation Complexity: Simplifying access to key information across a large volume of content
• Conversion Focus: Prioritising donations and memberships without overwhelming users

1. Brand Exploration and Expansion

The project began by reworking the existing identity. The design team retained the recognisable watermelon concept while expanding the colour palette to introduce greater depth and flexibility. New tones, including yellows and blues, were introduced alongside softer pastels to create contrast and balance. Subtle references to the coastal lifestyle of the Hunter region were incorporated, reinforcing the connection to sun exposure and skin health.

2. Visual Identity and Design System

A cohesive design system was developed to ensure consistency across the website and broader brand applications. This included updated typography, colour usage guidelines, and a suite of logo variations. The system allowed the Foundation to maintain brand consistency while adapting to different use cases.

3. Creative Direction and Engagement Design

Playfulness was intentionally introduced to make the brand more approachable. Hand-drawn elements, inspired by watermelon seeds, were used throughout the site to highlight key information. Additional graphic treatments such as rounded imagery, outlines, and layered backgrounds created visual interest without overwhelming the user.

Subtle animations and movement were implemented to bring the website to life, improving user engagement and guiding attention to important content.

4. UX Strategy and Navigation Structure

Given the size of the sitemap, a mega menu was introduced to simplify navigation. Content was grouped into three clear pathways: “How we help,” “Why we help,” and “How you can help.” This structure made it easier for users to quickly understand the Foundation’s purpose and find relevant information.

5. Conversion-Focused Design

Key calls to action were prioritised throughout the design. Donations and membership sign-ups were positioned prominently, with the donation button highlighted using a vibrant pink to draw attention and encourage action.

6. SWAP Program Identity Development

Alongside the main brand, a dedicated identity for the SWAP program was created. The design incorporated a watermelon-inspired motif combined with sun rays, symbolising sun safety and UV awareness. A modern typographic treatment ensured the program felt aligned with the parent brand while maintaining its own distinct presence.

The refreshed website and brand identity delivered a more engaging and versatile digital presence for Hunter Melanoma Foundation.

Key outcomes achieved included:

• A dynamic and flexible brand identity that retains recognisability while allowing for greater creative expression
• A more engaging website experience through the use of colour, movement, and interactive elements
• Simplified navigation that makes it easier for users to explore content and understand the Foundation’s impact
• Clear prioritisation of key actions, improving visibility of donation and membership opportunities
• A cohesive brand ecosystem with the introduction of the SWAP program identity

The result is a website that not only communicates an important message but does so in a way that feels approachable, memorable, and impactful. By balancing playfulness with purpose, the Foundation is better positioned to connect with its audience and drive meaningful engagement.