Building a Privacy-First Social Event Platform

Transforming how people discover and organize meaningful social connections

traube.club

Traube mobile app interface showing event management screens

My Role & Responsibilities

Me (Wolfgang) as Product Owner & Lead UX Designer
Sprint management and feature prioritization
GitHub Project Boards for issue tracking and developer coordination
Front-end QA and quality assurance
Leveraged AI development tools for rapid prototyping

Project Timeline

Q1 2025 - Present
0 to MVP in 6 months
Continuous user validation and iteration

The Problems We Experienced

Fragmented coordination: Users juggle 3+ platforms to organize simple events, leading to poor attendance and planning friction
Privacy concerns: 53% of young adults want tools that respect their attention and data, but current platforms prioritize engagement over user control
Organizational burden: 73% want to attend events, but few organize them due to complexity and time investment
Limited discoverability: Existing platforms aren't optimized for small, private group coordination within social networks
Communication overflow: Critical event information gets lost in group chats with 50+ messages

What I actually did

🎯

User Research & Strategy

Conducted lean user research with 15+ potential users to validate core assumptions and define target personas, informing product-market fit decisions.

📱

Mobile-First Design System

Developed comprehensive design system with touch-friendly interactions, slide-in dialogs (drawer), and keyboard detection for seamless mobile experience.

⚡

AI-Assisted Development

Leveraged AI coding tools to rapidly prototype and iterate on features while maintaining code quality and implementing complex user flows.

🎨

User Flow Design

Created core user journeys. Designed detailed operational flowcharts and mobile-first navigation architecture.

🔄

Rapid Prototyping & Testing

Built working prototypes quickly, conducted informal user testing with 10-15 people, and iterated based on immediate feedback within days.

🚀

Front-End QA & Deployment

Handled front-end quality assurance, implemented changes directly in code, and managed deployment through Vercel with continuous integration.

Ideas and Screens

Discovering the Problem Behind Traube

Mapping the user journey that led to the idea for a better way to plan social events

Event management interface showing mobile-first design

User Journeys

From planning to participation. A look at the user journeys

Event Creation

graph LR A[START] --> B[User clicks 'Create Event'] B --> C{User authenticated?} C -->|No| D[Show auth modal] C -->|Yes| E[Open event creation form] D --> F[User signs in/up] F --> G{Auth successful?} G -->|No| H[Show error message] G -->|Yes| E H --> I[Re-enter credentials] I --> G E --> J[Fill event title] J --> K[Set date and time] K --> L[Add location] L --> M[Write description] M --> N{Want to add image?} N -->|Yes| O[Upload event image] N -->|No| P[Select event visibility] O --> Q{Image valid?} Q -->|No| R[Show error: Try different image] Q -->|Yes| P R --> O P --> S[Choose friends to invite] S --> T{Any friends selected?} T -->|No| U[Event will be private to you] T -->|Yes| V[Review invitee list] U --> W[Click 'Create Event'] V --> W W --> X{All required fields filled?} X -->|No| Y[Show validation errors] X -->|Yes| Z[Create event in database] Y --> AA[Fix missing fields] AA --> X Z --> BB{Event created successfully?} BB -->|No| CC[Show error: Try again] BB -->|Yes| DD[Send invitations] CC --> W DD --> EE[Generate shareable link] EE --> FF[Navigate to event page] FF --> GG[Show success message] GG --> HH[END] style A fill:#3700B3,color:#fff style B fill:#F8F5FF,color:#27232A style C fill:#333,color:#fff style D fill:#F8F5FF,color:#27232A style E fill:#F8F5FF,color:#27232A style F fill:#F8F5FF,color:#27232A style G fill:#333,color:#fff style H fill:#F8F5FF,color:#27232A style I fill:#F8F5FF,color:#27232A style J fill:#F8F5FF,color:#27232A style K fill:#F8F5FF,color:#27232A style L fill:#F8F5FF,color:#27232A style M fill:#F8F5FF,color:#27232A style N fill:#333,color:#fff style O fill:#F8F5FF,color:#27232A style P fill:#F8F5FF,color:#27232A style Q fill:#333,color:#fff style R fill:#F8F5FF,color:#27232A style S fill:#F8F5FF,color:#27232A style T fill:#333,color:#fff style U fill:#F8F5FF,color:#27232A style V fill:#F8F5FF,color:#27232A style W fill:#F8F5FF,color:#27232A style X fill:#333,color:#fff style Y fill:#F8F5FF,color:#27232A style Z fill:#F8F5FF,color:#27232A style AA fill:#F8F5FF,color:#27232A style BB fill:#333,color:#fff style CC fill:#F8F5FF,color:#27232A style DD fill:#F8F5FF,color:#27232A style EE fill:#F8F5FF,color:#27232A style FF fill:#F8F5FF,color:#27232A style GG fill:#F8F5FF,color:#27232A style HH fill:#3700B3,color:#fff

Event Participation

graph LR A[START] --> B[User clicks shared event link] B --> C[Load event page] C --> D{Event exists?} D -->|No| E[Show 404 error page] D -->|Yes| F[Display event details] E --> G[Suggest browsing other events] G --> H[END] F --> I{User authenticated?} I -->|Yes| J[Show RSVP options] I -->|No| K[Show event info + 'Sign up to RSVP'] K --> L{User wants to RSVP?} L -->|No| M[User just views event] L -->|Yes| N[Click 'Sign up to RSVP'] M --> O[Share event with friends] O --> H N --> P[Open sign-up modal] P --> Q[Enter email & password] Q --> R{Valid credentials?} R -->|No| S[Show validation errors] R -->|Yes| T[Create account] S --> U[Fix input errors] U --> R T --> V{Account created?} V -->|No| W[Show error: Email exists or server error] V -->|Yes| X[Send verification email] W --> Y[Try different email] Y --> T X --> Z[User checks email] Z --> AA[Click verification link] AA --> BB{Email verified?} BB -->|No| CC[Show error: Invalid link] BB -->|Yes| DD[Auto-login user] CC --> EE[Resend verification] EE --> X DD --> J J --> FF{Event requires approval?} FF -->|Yes| GG[Request to join] FF -->|No| HH[Instant RSVP] GG --> II[Send request to organizer] II --> JJ[Show 'Request sent' message] JJ --> KK[Wait for approval] KK --> H HH --> LL{RSVP successful?} LL -->|No| MM[Show error: Event full] LL -->|Yes| NN[Add to user's events] MM --> OO[Join waitlist option] OO --> H NN --> PP[Send calendar invite] PP --> QQ[Show success: 'You're going!'] QQ --> RR[Suggest inviting friends] RR --> SS[User shares event link] SS --> TT[Viral growth multiplier] TT --> H style A fill:#3700B3,color:#fff style B fill:#F8F5FF,color:#27232A style C fill:#F8F5FF,color:#27232A style D fill:#333,color:#fff style E fill:#F8F5FF,color:#27232A style F fill:#F8F5FF,color:#27232A style G fill:#F8F5FF,color:#27232A style I fill:#333,color:#fff style J fill:#F8F5FF,color:#27232A style K fill:#F8F5FF,color:#27232A style L fill:#333,color:#fff style M fill:#F8F5FF,color:#27232A style N fill:#F8F5FF,color:#27232A style O fill:#F8F5FF,color:#27232A style P fill:#F8F5FF,color:#27232A style Q fill:#F8F5FF,color:#27232A style R fill:#333,color:#fff style S fill:#F8F5FF,color:#27232A style T fill:#F8F5FF,color:#27232A style U fill:#F8F5FF,color:#27232A style V fill:#333,color:#fff style W fill:#F8F5FF,color:#27232A style X fill:#F8F5FF,color:#27232A style Y fill:#F8F5FF,color:#27232A style Z fill:#F8F5FF,color:#27232A style AA fill:#F8F5FF,color:#27232A style BB fill:#333,color:#fff style CC fill:#F8F5FF,color:#27232A style DD fill:#F8F5FF,color:#27232A style EE fill:#F8F5FF,color:#27232A style FF fill:#333,color:#fff style GG fill:#F8F5FF,color:#27232A style HH fill:#F8F5FF,color:#27232A style II fill:#F8F5FF,color:#27232A style JJ fill:#F8F5FF,color:#27232A style KK fill:#F8F5FF,color:#27232A style LL fill:#333,color:#fff style MM fill:#F8F5FF,color:#27232A style NN fill:#F8F5FF,color:#27232A style OO fill:#F8F5FF,color:#27232A style PP fill:#F8F5FF,color:#27232A style QQ fill:#F8F5FF,color:#27232A style RR fill:#F8F5FF,color:#27232A style SS fill:#F8F5FF,color:#27232A style TT fill:#F8F5FF,color:#27232A style H fill:#3700B3,color:#fff

RSVP

graph LR A[START] --> B[User views event page] B --> C{User authenticated?} C -->|No| D[Show 'Sign in to RSVP' button] C -->|Yes| E[Display RSVP options] D --> F[User clicks sign in] F --> G[Open auth modal] G --> H[Enter credentials] H --> I{Login successful?} I -->|No| J[Show error message] I -->|Yes| E J --> K[Retry login] K --> I E --> L[User selects RSVP option] L --> M{Which RSVP type?} M -->|Going| N[Click 'Going' button] M -->|Maybe| O[Click 'Maybe' button] M -->|Not Going| P[Click 'Not Going' button] N --> Q{Event has capacity limit?} Q -->|Yes| R{Spots available?} Q -->|No| S[Process RSVP] R -->|No| T[Show 'Event is full' message] R -->|Yes| U{Event requires approval?} T --> V[Offer waitlist option] V --> W{User joins waitlist?} W -->|Yes| X[Add to waitlist] W -->|No| Y[Return to event page] X --> Z[Show 'Added to waitlist' message] Z --> AA[END] U -->|Yes| BB[Submit RSVP for approval] U -->|No| S BB --> CC[Show 'Pending approval' message] CC --> DD[Send notification to organizer] DD --> EE[Wait for organizer response] EE --> AA S --> FF{RSVP saved successfully?} FF -->|No| GG[Show error: Try again] FF -->|Yes| HH[Update participant count] GG --> II[Retry RSVP] II --> FF HH --> JJ[Send calendar invite] JJ --> KK[Show confirmation message] KK --> LL[Update user's events list] LL --> MM[Send notification to organizer] MM --> NN[Suggest inviting friends] NN --> OO{User wants to invite friends?} OO -->|Yes| PP[Share event link] OO -->|No| QQ[Return to event page] PP --> RR[Copy link or send via social] RR --> SS[Viral growth opportunity] SS --> AA O --> TT[Process 'Maybe' RSVP] TT --> UU[Show 'Marked as Maybe' message] UU --> VV[Add to user's tentative events] VV --> WW[Send reminder before event] WW --> AA P --> XX[Process 'Not Going' RSVP] XX --> YY[Remove from participant list] YY --> ZZ[Show 'RSVP updated' message] ZZ --> AAA[Free up spot if capacity limited] AAA --> BBB[Notify waitlist if applicable] BBB --> AA Y --> AA QQ --> AA style A fill:#3700B3,color:#fff style B fill:#F8F5FF,color:#27232A style C fill:#333,color:#fff style D fill:#F8F5FF,color:#27232A style E fill:#F8F5FF,color:#27232A style F fill:#F8F5FF,color:#27232A style G fill:#F8F5FF,color:#27232A style H fill:#F8F5FF,color:#27232A style I fill:#333,color:#fff style J fill:#F8F5FF,color:#27232A style K fill:#F8F5FF,color:#27232A style L fill:#F8F5FF,color:#27232A style M fill:#333,color:#fff style N fill:#F8F5FF,color:#27232A style O fill:#F8F5FF,color:#27232A style P fill:#F8F5FF,color:#27232A style Q fill:#333,color:#fff style R fill:#333,color:#fff style S fill:#F8F5FF,color:#27232A style T fill:#F8F5FF,color:#27232A style U fill:#333,color:#fff style V fill:#F8F5FF,color:#27232A style W fill:#333,color:#fff style X fill:#F8F5FF,color:#27232A style Y fill:#F8F5FF,color:#27232A style Z fill:#F8F5FF,color:#27232A style AA fill:#3700B3,color:#fff style BB fill:#F8F5FF,color:#27232A style CC fill:#F8F5FF,color:#27232A style DD fill:#F8F5FF,color:#27232A style EE fill:#F8F5FF,color:#27232A style FF fill:#333,color:#fff style GG fill:#F8F5FF,color:#27232A style HH fill:#F8F5FF,color:#27232A style II fill:#F8F5FF,color:#27232A style JJ fill:#F8F5FF,color:#27232A style KK fill:#F8F5FF,color:#27232A style LL fill:#F8F5FF,color:#27232A style MM fill:#F8F5FF,color:#27232A style NN fill:#F8F5FF,color:#27232A style OO fill:#333,color:#fff style PP fill:#F8F5FF,color:#27232A style QQ fill:#F8F5FF,color:#27232A style RR fill:#F8F5FF,color:#27232A style SS fill:#F8F5FF,color:#27232A style TT fill:#F8F5FF,color:#27232A style UU fill:#F8F5FF,color:#27232A style VV fill:#F8F5FF,color:#27232A style WW fill:#F8F5FF,color:#27232A style XX fill:#F8F5FF,color:#27232A style YY fill:#F8F5FF,color:#27232A style ZZ fill:#F8F5FF,color:#27232A style AAA fill:#F8F5FF,color:#27232A style BBB fill:#F8F5FF,color:#27232A

User Personas

Created proto personas based on users we talked to and where part of our target group.

User persona cards showing Chioma the ambitious graduate and Marcus the mentor with their goals, pain points, and motivations

First wireframes

Created first wireframes to follow up on the idea and bringing it into reality.

Guest list management interface with privacy controls

Create Event Screen

Event creation needed to be intuitive and fast. We designed a streamlined multi-step process with smart defaults and AI-assisted image generation.

Event discovery and notification interface

Discovering Events

Users needed to discover events through their social network.

Event Pages

Complex event details needed to be digestible on mobile. We designed progressive disclosure with clear event information hierarchy and one-tap RSVP actions.

Event creation flow with AI-assisted features

Notifications

We created intelligent notification systems that inform without noise.

Manage Events

Traditional platforms make guest management complex and privacy-unfriendly. We designed granular RSVP controls with batch operations and privacy-first invite systems.

The Process

Problem Recognition & Research

Identified event coordination problems through personal experience. Created proto-personas and validated assumptions through informal user conversations.

Experience Design & Information Architecture

Created user journey maps and wireframes that prioritized core user needs. Designed mobile-first architecture that scales across devices and use cases.

Technical Setup & Development

Set up NextJS project with Shadcn/UI components and Supabase backend. Implemented responsive design system and PWA features using modern web technologies.

Rapid Prototyping & Testing

Built working prototypes quickly using AI-assisted coding. Conducted informal user testing sessions with 10-15 people and iterated based on immediate feedback.

Privacy Framework Implementation

Developed granular privacy controls and approval workflows. Implemented friend network integration that respects user boundaries while enabling organic growth.

Launch & Continuous Iteration

Deployed through Vercel with continuous integration. Gathering user feedback and implementing changes directly in code while maintaining design quality.

Current Progress:

🛠️

MVP Development

Concept → 75%

Core features built and tested internally

🎯

User Feedback

Prototype → 15+

Users tested and provided feedback on flows

Key Takeaways

Technical UX skills are powerful: Being able to implement designs directly in code allowed for rapid iteration and better communication with developers.
AI-assisted development accelerates UX: Using modern AI tools allowed us to prototype and test ideas quickly while maintaining high code quality.
Privacy-first isn't just compliance: Designing with privacy as a core feature creates better user experiences and builds trust.
Mobile-first is essential: Event coordination happens on mobile, so designing for mobile first led to better overall user experience.
Lean UX is great: Rapid validation through working prototypes and informal testing was more valuable than extensive research.
Cross-functional collaboration matters: Speaking "dev language" and understanding technical constraints led to better design decisions.
User feedback drives iteration: Having direct user access and ability to implement changes quickly created a strong feedback loop.
Modern web technologies enable rapid development: NextJS, Shadcn/UI, and Supabase allowed us to build a full-featured platform quickly.