MetaFun · Maha Mostafa

Role: Product Designer & PM
Type: Event platform · Idea to live product
Scope: Product definition · Decision log · User flows · Design system · Mobile and web UI · Arabic RTL
Design: 151 screens · 3 systems · Mobile and web
Built with: Next.js · Neon · Auth.js

The idea

MetaFun is an event platform. People find nights worth leaving the house for, and the people who make those nights get a proper toolkit to run them.

A night out is more than a ticket. Someone asks to come, someone decides who gets in, and someone works the door. The product had to serve all three.

The right room.

That is the brand line. The room was chosen, not sold to you. MetaFun sells belonging, and ticketing is only the mechanic.

Three roles, one loop

Each role got its own system, with its own screens and its own rules. The same person can book a concert on Friday and work the door of another on Saturday.

FunSeeker

Finds a night, asks to join or books, pays inside the window and shows the ticket at the door.

FunMaker

Sets up an organization, builds events with ticket waves, approves guests and staffs the door.

FunKeeper

Works one event from a link. The Ticket FunKeeper reviews applications. The On-Door FunKeeper scans tickets.

The core loop runs across all three systems:

FunSeeker asks to join
Ticket FunKeeper approves
FunSeeker pays
Ticket issued
On-Door FunKeeper scans
FunMaker sees the check-in

MetaFun Explore screen on a phone, headed “Worth leaving the house for.”, with an event card for Late Set: Jazz Until Two and an Ask to join button — FunSeeker · Explore

FunMaker event-night screen: 812 of 1,142 checked in, door sales on with a pause button, and a duplicate-scan report from Gate B — FunMaker · the night, live

FunKeeper scan result reading “Let them in”, with the guest’s name, ticket and ID match — FunKeeper · one glance per guest

Key product decisions

I kept a product book as the single source of truth: roles, journeys, business rules and a decision log. Eighteen decisions, each one written down as a rule the app enforces.

Friction appears exactly when the risk appears, never earlier.

Look around before signing in: Event pages and search are public. A shared link lands on an event, not a sign-up wall. Sign-in comes at booking.
One review, where money moves: Becoming a FunMaker is instant. Human review is kept for the organization, which paid events need.
An ID check you do once: ID checks stay optional until an event asks for one. The first approval then works everywhere.
FunKeepers get a link, not an account: Door teams are often hired hours before doors open. The FunMaker shares a link for one role on one event, and turning it off locks them out at once.
Invitations skip the review, not the payment: Invited guests are pre-approved but still pay inside the normal window, so an invitation never becomes a free ticket.

Desktop event page for Late Set: Jazz Until Two, with three ticket waves and an Ask to join action, open without signing in — Event page · public and shareable, sign-in only at booking

FunMaker Team page listing FunKeeper invite links by role, label, status and when access ends — Team · one link per FunKeeper, with the role and when access ends

Ember, the design system

Ember is a dark room with a fire in it. Five colours, Figtree for reading, and DM Mono for anything that ticks, like clocks and ticket codes.

One amber thing per screen.

Amber is the action. If two things glow, neither reads as the action. Statuses carry no colour at all: approved, paid and full are words with an icon, so a decline never turns red.

The logo is the Eclipse. The outlined circle is the FunMaker’s room. The solid one is you, rising across it, and where they overlap, it lights. The mark is also the loading state, so nothing in the app spins.

The Eclipse · construction, clear space and optical sizing

Ember foundations board: five colour swatches, ink levels, the Figtree and DM Mono type scale, and spacing and radius steps — Foundations · five colours, two fonts, one spacing scale

The flows

151 screens across mobile and web, grouped by system, one Figma section per flow.

FunSeeker · 34 phone screens and 18 on the web. Explore, ask to join, wait, pay, carry the ticket.

Phone event page for Late Set: Jazz Until Two, with the wave 2 of 3 price, EGP 650, and an Ask to join button — Event page · the wave price and one action

Approval screen, “They said yes. Your spot is waiting.”, with a pay-window countdown, the price with a 5% service fee, and a Pay with Paymob button — Approved · a live pay window, the full cost shown first

Paid ticket for Late Set: Jazz Until Two on a cream stub with a QR code, and buttons for Add to Wallet and Directions — Ticket · the one light object in a dark room

Desktop Explore page headed “Worth leaving the house for.”, with category filters and a grid of event cards — Explore on the web · open to anyone

FunMaker · 16 phone screens and 27 on the web. Desk-first, because this is where the work happens: an organization, a six-step event wizard with ticket waves, and a live view of the night.

Event wizard step on desktop: three ticket waves with price and quantity, pay-window options and door-sale price bounds — Tickets, in waves · up to five, plus the door price range

Phone screen “Free or paid?” where paid events stay locked until a payout account is added, and Continue with free is the action — Paid is locked · the screen says why and keeps the free path open

Organization step 2 of 4, “Proof the company is real.”, uploading a commercial register, tax card and owner’s ID — Documents · reviewed by MetaFun only

Desktop event overview for Late Set: sales by wave, applications waiting, running pay windows and a door-sales switch — The event, live · sales by wave, applications and door sales

FunKeeper · 19 phone screens and 10 on a desk. One event, one role, opened from a link. Screens you can read in one glance at a dark door.

Phone screen “Work the door at Late Set: Jazz Until Two.” showing the role, shift and when access ends, with a name field and Start my shift — Opening the link · no account, only a name

Scan result “Already scanned” with the first scan’s time and gate, and a button to re-admit — Already scanned · what to do next, at a glance

Shift close screen “Count your cash.” comparing counted cash with the expected total and asking for a note on a shortfall — Shift close · counted against expected totals

Desktop review queue: waiting applicants on the left, one applicant’s answer on the right, with Decline and Approve — Review queue on a desk · Ticket FunKeeper

States and Arabic · 18 state screens for empty, loading, errors, offline, account and notifications. And 9 Arabic right-to-left screens across the three systems. The first release ships in English, with every layout built RTL-ready.