Role

UX/UI Designer

Duration

01.2024-03.2024

Tools

Figma

Volunteer Card App

Usability Improvements to a Volunteer Card App for a Universal, Accessible User Experience

In 2008, a regional government in Germany introduced the Volunteer Card to recognize and reward civic engagement. It is aimed at individuals who contribute significantly through volunteer work and offers tangible benefits such as discounts in culture, leisure, and education. To provide digital access to these benefits, a smartphone app was developed. The app included onboarding info screens, a searchable offers section with filters, a map view for nearby offers, a news section, and a profile area for account management.

Challenge

The project involved adapting the app for use across multiple regions while improving overall usability—particularly in terms of accessibility. The key challenge was to create a design system that balances regional identity with a universal, scalable solution, allowing the client to independently extend the app in the future.

The project involved adapting the app for use across multiple regions while improving overall usability—particularly in terms of accessibility. The key challenge was to create a design system that balances regional identity with a universal, scalable solution, allowing the client to independently extend the app in the future.

The project involved adapting the app for use across multiple regions while improving overall usability—particularly in terms of accessibility. The key challenge was to create a design system that balances regional identity with a universal, scalable solution, allowing the client to independently extend the app in the future.

Solution

The project began with a comprehensive audit of the existing application, with a strong focus on accessibility. Recommendations from an external accessibility expert were translated into concrete improvements, including consistent heading structures, improved link visibility and increased color contrast. These changes ensured a more inclusive and user-friendly experience. Next, wireframes were created to visualize usability improvements and aligned with stakeholders.

After the content and structural revision, the design phase followed. During this phase, various color concepts were developed, taking into account both a neutral overall design and state-specific variations. The final decision was made in favor of a neutral primary color for the app interface. The redesign was rounded off with a new app icon, which creates a modern and distinctive recognition value both at app launch and on the home screen.

Here you can see a selection of screenshots showcasing the app’s final design.

Key takeaways

By developing a universal design solution, a flexible and transferable design for the volunteer card app was successfully achieved. The preliminary assessment and accessibility analysis also made it possible not only to redesign the app visually, but to significantly improve its usability as well. Please note: all screens shown on this page have been altered from their original form to preserve privacy and protect sensitive data.