UX/Digital Product Design

Hopps: Accounting for clubs

A simple open-source solution with a big impact

What is Hopps?

Hopps is a modern, cloud-based solution for digital club accounting, specifically tailored to the needs of small and medium-sized clubs. It aims to help clubs manage their finances, receipts, and expenses transparently and easily, without unnecessary complexity.

My role in the project:

How do you coordinate an existing project with many volunteers/students?
How do you structure complex financial processes (receipts, expenses, income) so that they remain understandable for non-accountants?
How do you ensure a streamlined UI without sacrificing important functionalities?

The strategy

Since I only joined the project after a year, the beginning was particularly challenging. Due to the previous work being done on a volunteer or student basis, there was no clear direction, which meant the project lacked structure, a clear strategy, and shared goals and milestones. The following measures helped to bring together the existing infrastructure and vision, while simultaneously improving communication within the team:

Development of an information architecture and a clear focus on the MVP
Development of a UI concept with simple user journeys (e.g., "upload receipt", "create new issue")
Creation of wireframes and high-fidelity screens for the web frontend, based on a consistent design system and a modular UI library, to make subsequent implementation efficient and scalable.

Information architecture structure

The hopps team at work

Different screen designs for hopps

Key facts

Getting started with the project:

April 2025 - Now

Responsible persons:

Manuel Hummler, Jannick Fuchs, Emilia Jaser, Paolo, Paul, Marie Stiller

Further links:

https://hopps.app/

https://github.com/hopps-app/hopps

Local medication organization for a volunteer-run facility

How can simple and fast operation be ensured with limited resources?

How do I find what I need?

A personal project: In many volunteer organizations, managing medications presents a significant challenge – especially because frequently changing volunteers rely on an intuitive and straightforward solution . To better understand this problem and develop a suitable solution, I developed a concept for a digital organizational application and created a low-fidelity prototype in Figma.

Pain points identified through user surveys

Course

My goal was to design an application that is easily accessible even for less tech-savvy users and facilitates the quick recording, management, and dispensing of medications. I deliberately focused on clear structures, simple navigation, and a minimalist design.

To better understand user needs , I began with a comprehensive user and pain point analysis . I then developed personas to make the diverse requirements of the target group tangible. Using user journey maps and defining the information architecture, I was able to identify the most important interaction points and build a logical structure for the application. During the ideation phase, I outlined and prioritized various approaches. Based on this, digital wireframes and a low-fidelity prototype were created.

Simple wireframes to get started with the project

Simplified User Journey Map

Learnings

This project showed me how important it is to align even simple digital solutions with the actual needs of the users. What I found particularly exciting was carrying out the entire UX process independently, from the initial research to the prototype.

First prototype of the Medi-Navigator

Structure of the Medi-Navigator pages

Key facts

Project duration:

January 2025 - March 2025

Responsible persons:

Marie Stiller

Project background:

Practice project for the Google UX Professional Certificate
Volunteer position at the Open.Med outpatient clinic in Zehlendorf

Page updated

Google Sites

Report abuse