Redesign of Hanse Club Website

**Business Overview: **

Hanse Club Hamburg is a private, invite-only club that connects entrepreneurs, executives and decision-makers in the heart of Hamburg. Founded in 2002, the club is deeply rooted in the Hanseatic tradition of business, culture, science and social responsibility. Members meet regularly for exclusive events, lectures and informal networking evenings called Klönsnack all hosted at the iconic Reichshof Hotel.

**Objective: ** The old Hanse Club website was outdated, visually inconsistent and did not reflect the premium nature of the club at all. It had no proper members area, no online event booking, no donation system and was not even mobile friendly. The brand guidelines from their own 2020 Designhandbuch were being completely ignored on the site. They needed a full redesign from scratch, a website that actually looks and functions like it belongs to an exclusive Hamburg business club and gives both visitors and members a proper digital experience.

**Goal: ** The goal was simple, take everything that already existed and make it actually work properly. Rebuild the site with the official brand colors, fonts and design elements from the 2020 Designhandbuch, create a structured members portal where logged-in users get a completely different experience from public visitors, fix the events and donation systems so they look and feel on-brand, translate everything into proper German and make sure the site is fully DSGVO compliant before going live.

Branding: Hanse Club Hamburg's brand identity is rooted in the Hanseatic maritime heritage of northern Germany. The official brand colours are cobalt blue (#1B3F90) as the primary colour, white for backgrounds and text on dark surfaces, pink (#EA4C71) for interactive elements and call-to-action buttons, and light grey for subtle backgrounds.

The typography uses PT Sans Bold Italic for all headings and the logo wordmark, and M PLUS 1p for body text, buttons and captions — both available free on Google Fonts. The logo consists of three sailing ship sails as the signet, used alongside the "Hanse Club" wordmark, and is only ever placed on white or blue backgrounds.

The beginning: WordPress was chosen to build the website because it was already familiar to me, and the required plugins were known in advance to complete the project efficiently. WordPress was first installed on the Hostinger account provided by the client. After different theme options were researched, Astra was selected because it is lightweight, works perfectly with Elementor, and provided the flexibility needed for a website of this complexity.

Once the theme had been activated, the backend structure was prioritised before any design work was started. The navigation, logo, and footer were first set up through the WordPress customiser.

The navigation was structured so that different items would be displayed depending on whether the visitor was logged in or not. Public visitors were shown Home, About Us, Events, News, and a Join button, while logged-in members were given access to the Members Area and their Profile. The footer was built with four sections: a website description, quick links, contact information, and legal policy links.

The following plugins were then researched and installed for specific requirements:

• Brevo — for newsletter management
• Ultimate Member — for member registration and login
• WP Twingle — for receiving donations
• Events Manager — for adding and displaying events
• Elementor — for page building and design

The setup process was started with Ultimate Member, and three forms were created:

• Registration form
• Login form
• User profile form

Careful configuration was required to ensure the settings were correct, but once everything had been properly configured, the membership flow functioned smoothly. The Brevo API key was provided by the client and connected to the plugin, which automatically imported the existing list of newsletter subscribers. For donations, the WP Twingle plugin was sent directly by the client and then uploaded and configured.

The Events Manager plugin was configured, and all existing events from the old Hanse Club website were manually copied so the new site could launch with a complete events calendar already in place.

Towards the end of the project, a list of existing users was provided by the client and manually added through Settings → Users, ensuring that all current members were given immediate access to the new website. All images from the old website were also collected, uploaded to the media library, and added to the relevant posts so the Media Library section would contain real content from launch day. Once all backend work had been completed and everything had been properly configured, attention was shifted to the front-end design, beginning with the homepage.

User Authentication: The Ultimate Member plugin was used for user profiles and authentication. The setup process was completed quite easily.

User Registration (Admin Approval) A registration form is displayed to users, where basic information is required to be filled out. Membership information is also displayed on the right side, showing all relevant details about the membership.

Once the registration form has been completed by the user, it is submitted for admin approval. After approval has been granted, an approval email is sent to the user, allowing the account to be accessed through login.

User Profiles Once the account has been approved, the profile page can be visited by users, where profile pictures, bios, and other basic information can be added.

Events

All events are displayed on the Events page. Each event includes details such as the address, date, and time. Events can also be added to the user’s calendar. If an event is paid, a ticket may be required to gain access. Both virtual and physical events are supported.

Front-End Design Once the homepage had been created through the Pages menu, the design phase was started. Content from the old website was copied over, and the layout was adjusted and refined. The primary focus was placed on improving the layout and maintaining a balanced website structure. Since the content and images had already been uploaded, they only needed to be placed correctly within the appropriate sections.

The remaining pages were then created using the same layout structure:

• About Us — information about the business
• Media Library — displaying images
• Events Page — displaying events
• News — updates about Hanse Club
• Member Profiles — displaying club members
• Contact — contact information and inquiry section
• Registration — displayed when the user is logged out
• Profile — displayed when the user is logged in