From Instagram to Interface
The Collective And The Challenge
Ver-SammelStelle is a grassroots, artist-led collective in Hamburg that organizes creative workshops, cultural events, and open community gatherings. Though their Instagram and Telegram presence was strong, the lack of a dedicated website hindered their ability to grow, coordinate events, and collect donations to sustain their volunteer-driven work.
As part of a UX/UI design sprint at WBS Coding School, our team of four collaborated to design Ver-SammelStelle’s first-ever website, a platform that would be multilingual, accessible, and aligned with their creative and inclusive identity.
My Role in the Collective Effort
While this was a collaborative project with three classmates, I took the lead on UX research, early ideation, and content structuring. My key contributions included:
Designing and analyzing user interviews and Google Form surveys
Mapping user flows and creating the sitemap in FigJam
Sketching early layouts by hand
Designing mid-fidelity wireframes and contributing to high-fidelity UI in Figma
Collaborating on content structure and UX writing
Understanding People and Context
We began not with pixels, but with people. Through interviews, surveys, and a close conversation with the founder, we uncovered deep community needs: simpler registration, multilingual access, and ways to support the project financially.
User Insights
Through surveys and interviews, we discovered that 60% of participants were Ukrainian migrants (ages 26–35), who valued:
Human connection and cultural exchange
Creative expression and language practice
Simpler registration for events
A central place to browse past and upcoming workshops
Business Challenges
From our conversation with the founder, we identified core issues:
No centralized website or event management system
Legal barriers around online donations
Disorganized registration and participant tracking
Market & Brand Inspiration
To better position the new website, we conducted benchmarking of similar grassroots art collectives, cultural spaces, and creative workshop platforms across Germany and Europe. We analyzed how they:
Structure event listings
Present their brand visually
Handle registrations and donations
Communicate values and community mission
We also carried out a brand analysis of Ver-SammelStelle’s existing identity (Instagram & Telegram), identifying core attributes such as:
DIY and community-driven
Artistic, welcoming, and inclusive
Casual and human-centered communication style
These insights helped shape the tone, layout, and feature prioritization of the website to ensure it aligned with both user expectations and the authentic voice of the collective.
What the Website Needed to Achieve
We aimed to create a multilingual, minimal, and community-rooted website that reflects Ver-SammelStelle’s spirit while improving organization, visibility, and support.
Design Question
"How can we Create a user-friendly website for Versammelstelle that helps people to find events, make donations and stay connected, while also giving the collective a more organised online presence?"
Simple Tools, Human Design
Our solution prioritized low-barrier, scalable design features:
A multilingual interface (German, Ukrainian, English)
An event calendar with filtering and open-call functionality
Simple workshop registration forms
Donation options using PayPal or third-party platforms with clear disclaimers
Internal links to Notion and Google Sheets for the team
Optional space for uploading tutorials or digital event content
We identified two key risks:
Legal vulnerability in donation systems without nonprofit status
Losing community engagement if digital features replaced human touchpoints
Designing With Agility and Empathy
We approached the design process with intention and adaptability. Based on our UX research, we were able to identify the most important features that would bridge the collective’s mission with the needs of its users. This included event registration, multilingual support, and a clear, community-driven visual identity.
We began ideation with Crazy 8s sketching, brainstorming layouts that could feel both culturally resonant and intuitively navigable. The goal was to design a layout that would represent Ver-SammelStelle's artistic identity while remaining functional as a hub for events, workshops, and creative programming.
Our research phase helped us deeply understand the brand and informed the creation of core components before moving to high-fidelity. We developed moodboards, a style tile, and a consistent color and typography system aligned with accessibility standards.
However, as we transitioned into high-fidelity design, we encountered key challenges that taught us the value of a cohesive design system:
Button styles, font sizes, margins, and navigation layouts differed across team members' screens.
Inconsistent component use created extra work and diluted the user experience.
Gaps and misalignments in Figma revealed the need for shared standards from the beginning.
Key Learning
Establishing a shared design system and visual guidelines early on can significantly boost consistency, reduce confusion, and elevate the quality of the final product, especially when tasks are distributed across a team.
What We learned (and Would Do Differently)
The final prototype was well received by both users and the founder. But more importantly, it helped us practice design with empathy and structure under creative constraints.
If we could go back, we’d invest earlier in UI alignment and collaborative documentation, small things that make a big difference in complex handovers.
Key Takeaways
Design is never just visual, it’s cultural and emotional.
Constraints (legal, technical) make us better designers.
Consistency in UI starts with team communication.
