De Treffers – Website & Branding

Scope: Branding, UX Design, Visual Design, Web Development

Techniques: Semantic HTML5, BEM (S)CSS, Flexbox, JavaScript, Bootstrap, jQuery

Tools: InVision, Sketch, WebStorm

1. Project Understanding and Goals

The project revolved around creating a strong online presence for De Rosmalense Zwem- en Polovereniging De Treffers, a lively swimming and water polo club with over 500 members.

The goals were:

• Reflect the vibrant, welcoming community spirit of De Treffers.
• Make the website accessible and user-friendly for a wide range of visitors (from competitive athletes to casual swimmers).
• Promote specific programs like the ABC Pakketzwemmen — “Zwemveilig voor een vaste prijs” — with clear, attractive branding.
• Ensure the site was modern, responsive, and easy to maintain.

2. Branding Decisions

Strategy:

Since De Treffers embodies both sportivity and sociability, the branding needed to strike a balance between dynamic energy and approachability.

Execution:

• Color Palette: Bright aquatic blues and energizing accents, evoking water, vitality, and friendliness.
• Typography: A clean, rounded sans-serif font was chosen to suggest both professionalism and friendliness — easy to read across devices.
• Imagery: Emphasis on real club photos showcasing community moments: competitions, casual swims, social gatherings.

ABC Pakketzwemmen Branding:

• Created a sub-brand within De Treffers, focusing on trust and safety (important to parents of young swimmers).
• Used reassuring, playful visuals and a fixed-price value proposition to build trust immediately.

3. UX Design Decisions

Process:

• Started with user journey mapping based on common site visitors:
  • New parents looking for swim classes (ABC Pakketzwemmen).
  • Competitive swimmers checking schedules and results.
  • Social swimmers looking for membership information.
  • Current members needing quick updates or contacts.
• Created wireframes in Sketch to define:
  • Clear navigation structure.
  • Highlight programs like ABC Pakketzwemmen early on the homepage.
  • Easy-to-find calls to action (sign up, contact, schedule).

Prototypes:

• Built interactive prototypes using InVision to validate the flow and feel of the site before development.

4. Visual Design Decisions

Look and Feel:

• Hero sections featuring vibrant water action photography.
• Consistent card components to highlight programs and news, ensuring readability and scannability.
• Visual hierarchy emphasized through:
  • Large headings for sections.
  • Ample white space to avoid a crowded, overwhelming feel.
  • Visual consistency with Bootstrap components adapted to De Treffers’ brand.