Homepage layout showcasing Verdi website design
Live website At Studio Ubique, we teamed up with KUBE Studio to create a responsive Verdi website design for Verdi (ver.di), one of Germany's biggest worker unions.

Our goal was to create a clear, user-friendly Verdi website design that makes it easy for members to interact, apply for bonuses, and stay connected with the ver.di brand. We made sure the site works seamlessly on both desktop and mobile, so all members can enjoy a smooth and accessible experience.

Objectives

KUBE Studio came to us with a clear mission: to create a sleek, functional website for their client, Verdi. The website needed to:

  • Showcase Verdi’s brand identity with a fresh, cohesive design.
  • Attract new members and make it easy for current members to apply for yearly bonuses.
  • Feature a user-friendly interface for managing member bonuses, personal info, and company details.
  • Work seamlessly on any device, ensuring it’s accessible for everyone.

 
We split the project into two main tasks: designing an eye-catching landing page and creating simple, intuitive designs for the member area and all its features.

Homepage section showcasing Verdi website design
Intro section Verdi website design

Our approach

We started by getting a solid understanding of the client’s needs through detailed chats with KUBE Studio. With their input, we focused on two key areas of the Verdi website design: the landing page and the member area designs. Here’s how we tackled each:

Landing page design

  • Goal: attract new members and explain the yearly bonus benefits.
  • We crafted a clean, eye-catching layout to highlight the membership perks.
  • Used bold, clear headings and step-by-step guidance so users could easily figure out if they’re eligible for the bonus.
  • Added placeholders for images and dynamic text sections that KUBE Studio’s developers could customize later.

Member area design

  • Goal: give existing members a simple, user-friendly way to manage bonuses and personal information.
  • Created the “My Bonus” overview page, complete with tabs for:
    • Bonus management
    • Personal information
    • Company information
  • Designed an easy-to-use form for bonus applications, including visual feedback to check eligibility.
  • Added confirmation pages with celebratory messages to make the process feel rewarding.

Responsive design for all devices

  • Focused on both desktop and mobile layouts to make sure the site works seamlessly everywhere.
  • Delivered designs in Adobe XD, giving KUBE Studio’s developers the flexibility they need to bring it to life.

 
By keeping usability and clarity at the center of our work, we ensured the Verdi website design would achieve Verdi’s goals and effectively connect with their audience.

Bonus application process in Verdi website design
Eligibility check feature in Verdi website design

Key features of the Verdi website design

Our Verdi website design focuses on creating a simple, user-friendly experience for both new and long-time members. Here’s what stands out:

1. Landing page for membership and bonuses

  • A visually appealing intro to Verdi’s yearly bonus program.
  • Clear, easy-to-spot buttons like “Apply for Bonus” to guide users quickly.
  • Step-by-step eligibility checks to help members figure out their status without any hassle.
  • Space for eye-catching images and text to highlight Verdi’s mission and perks.

2. My bonus overview page

  • Tabbed navigation: quick access to sections like “Bonus Management,” “Personal Info,” and “Company Info.”
  • Bonus history: a clear visual tracker showing the status of bonuses—from “Eligible” to “Paid.”
  • Bonus application form: a simple, guided process to claim bonuses, complete with helpful confirmation messages.

3. Responsive Verdi website design

  • Optimized for desktop and mobile, making it easy to access anywhere, anytime.
  • Flexible design elements that adjust seamlessly to different screen sizes.

4. Eligibility check process

  • A straightforward system to check member status using their ID.
  • Clear feedback on eligibility, with clear next steps for both eligible and non-eligible users.

 
These features not only met Verdi’s needs but also set the stage for future improvements by KUBE Studio.

Mobile-friendly Verdi website design preview
News section in Verdi website design

Working with KUBE Studio

Our partnership with KUBE Studio in Nuremberg was built on clear communication and shared goals. While KUBE handled development, we focused on Verdi website design, creating responsive and user-friendly layouts for Verdi. Here’s how we made it happen:

Kick-off call: we kicked things off with a detailed video call to align on goals, project scope, and expectations. This made sure everyone was on the same page before diving into the design work.

Design approval: we started with the landing page design to nail down the right style and tone. Once that got the green light, we rolled out the design system across other pages to keep everything consistent.

Brand-driven workflow: using ver.di’s fonts, logos, and brand guidelines, we made sure our designs stayed true to their identity while adding a fresh, modern touch.

Collaborative feedback: regular check-ins and feedback with KUBE Studio kept the process smooth, minimized revisions, and kept us on schedule.

This collaboration showed how blending expertise in design and development can create a powerful website that delivers exactly what the client needs.

Footer section in Verdi website design
Tabbed bonus overview in Verdi website design

Final results

Our collaboration with KUBE Studio for Verdi delivered a sleek, functional website designed to meet the organization’s needs. By focusing on usability, member engagement, and administrative efficiency, here’s what we achieved:

  • Modern design: a responsive, visually appealing layout that stays true to Verdi’s brand.
  • User-friendly features: simple, intuitive workflows for bonus applications and managing personal accounts.
  • Better member experience: the platform makes it easy for members to access resources and enjoy their benefits.
  • Developer-ready system: a flexible design system that lets KUBE Studio’s developers build and expand without limits.

 
The end result? A Verdi website design that connects Verdi’s mission with its members, proving how great design can make a meaningful difference.

Registering proces overview in Verdi website design

Ready to have us design (and build)
your website?

 
Let’s create a website that gets results and delivers real value. Book a free 30-minute video call with Studio Ubique today, and let’s chat about how we can bring your vision to life. Book your call now!

Achievements

Studio Ubique is proud to be a global partner in design and development, celebrated for our innovative solutions and unwavering commitment to excellence.