The problem

How to let people find each other?

Our solution

We built a way to take the cost out of asking. Asking one person means choosing who to ask and then hearing their answer. A post is open to anyone who is interested, so nobody has to be picked and nobody has to say no. People who don’t feel like going simply scroll past. Anyone can post an activity, tag it, and say what it needs. You can also join one that somebody else has posted. After that the hangout has its own room, where you meet the people in it, talk, work out the details, and then go and do the thing in person.

Jiu is the Mandarin reading of 揪, which means to get people together. Up expresses a feeling of speed and success. So we named it Jiuup, pronounced jiu-up.

Jiuup is a campus platform where students post activities, meet people who like the same things, and keep talking until they meet in person.

Why it is shaped like this. You can browse the feed without an account, and we only ask you to sign in when you want to join or post. This way a post can be shared as a normal link and anyone can read it. Posting and joining both lead to the same chat room, so we only had to build one room and make it good.

UI design

We wanted Jiuup to feel bold and lively. The goal I cared about most was legibility, with strong contrast that still feels soft on the eyes.

We used Figma to brainstorm and to try out layouts and colours with our designer. We started from a plain skeleton of the feed.

In the middle of the project the design kept getting heavier. We had not tested it with users yet, but we could tell we were drifting away from the problem we wanted to solve. So we decided to simplify. We put more of our effort into how smooth the software feels and into the UX itself, such as the flow and the transitions between screens. For the UI we kept only what was needed and spent our time on colour and on making it easy on the eyes. The categories are a good example. We considered parent and child categories and chose one flat row of fourteen, so one tap filters the feed.

A

Mark, colour, a post

• Ground#202830
• Blue#4D6F9A
• Orange#CC7456
• Glass#CED0D1
• Online#7BDC74

Why these numbers. The card is frosted glass on a dark background, so we calculated the contrast on the real colour of the glass. Every button is at least 44 high, the smallest size a thumb can hit reliably. The blur is 12 because 24 made Chrome drop frames when scrolling.

B

The feed and the room

The feed

The room

Why the layout. A post with a picture is exactly as tall as two normal posts plus the gap, so the columns always line up. In the chat room only the conversation stretches, and on narrow screens the side panels turn into sheets.

Architecture design

For the backend we first considered services from Cloudflare and Google. At that time we wanted to validate the product quickly and iterate fast, so we chose Supabase. It was quick to build with, its database is standard SQL that we can migrate later, and its realtime feature is well optimised for chat.

ClientsOne codebase, in the browser or installed

• BrowserAny phone or desktop
• Installed PWAService worker with a cached shell and Web Push

HTTPS

FrontendNext.js 15, React 19, TypeScript, Tailwind

• PagesThe first screen of the feed is rendered on the server and the rest hydrates
• State and cacheUser context, SWR and localStorage, with optimistic updates
• Feed rankingEvery post is scored on the device, per person
• Shield layerEvery request goes through cache, breaker, dedupe, queue and retry
• Realtime providerOne interface for live data, so the transport can be swapped

Queries, RPC and WebSocket

ServerVercel

• MiddlewareChecks the session on protected routes and the role on admin routes
• API routesInvite codes, reminders, push sign-up, HEIC conversion, share images
• Scheduled jobsDaily clean-up of old posts, metric snapshots, reminders and re-engagement
• Rate limiterUpstash Redis, with a memory fallback
• Admin and adsRetention and click-through for the team, and a results link for each advertiser

SQL with the caller’s identity

BackendSupabase

• AuthGoogle, Apple and LINE, over PKCE
• Postgres29 tables, functions for polls and invite codes, triggers for seat counts
• RealtimeMessages, members, read state, presence and typing
• StorageAvatars, post pictures, chat images and files
• Push functionA database webhook on each notification, sent out as a push

Why it is wired this way. The app reads and writes to the database directly, so most requests do not pass through our server. This makes every query faster and gives us live updates without running our own socket server. We only use the server for things that need a secret key, such as scheduled jobs and push notifications. Realtime is wrapped in one interface so we can replace the provider later without changing any screen.

Shield layer and security

Shield layerSecurity

1. Cache
2. Circuit breaker
3. Dedupe
4. Queue
5. Retry
6. Supabase

• The cache uses memory first, then localStorage. Expiry is jittered by 20% so entries do not all lapse at once.
• The circuit breaker stops asking after repeated failures and serves the stale copy. It tries again after a cooldown that doubles each time.
• Retry uses exponential backoff with full jitter and never retries a 4xx.
• The realtime guard reconnects with backoff, pings every 30 seconds, disconnects after five hidden minutes and batches bursts.

• BrowserCSP, HSTS, frame and referrer policies on every response
• SessionPKCE sign-in, and middleware blocks requests without a session
• DataRow-level security in Postgres, over a hundred policies
• AbuseLimits at two levels, Redis at the API and SQL inside the insert policies
• InputZod schemas, plus an allow-list for file types and sizes
• InvitesCodes are checked on the server, ten tries in fifteen minutes
• AdminRole is read from the database, and every action is logged

Why they exist. There is no backend of our own between the app and the database, so two jobs that a backend normally does had to go somewhere else. The first is protecting the user from a slow or failed query. When many identical requests arrive together the shield layer only sends one. When a service keeps failing it stops calling it for a while and shows the last good data. It also retries at random intervals so that all clients do not reconnect at the same moment. The second is protecting the data. The app talks to Postgres with a public key, so checks in the interface alone are not enough. Each table has its own rules for who can read and write a row, and the limits on posting and messaging are written in the same rules because these inserts never go through our API.

Feed ranking

40%30%30%

Popularity

Joins × 3 plus clicks, divided by (hours + 2) to the power 1.5

Freshness

Falls in a straight line over five days

Fit

Activity type 35, distance 25, age 15, familiar place 12.5, time of day 12.5

• One slot in five is held for posts under six hours old.
• A join counts 3, a save 2, a click 1, and each fades over thirty days.
• With fewer than five interactions, fit falls back to distance, age, how full a post is, and chance.

Why it runs on the device. We do not need to run or pay for a ranking server, and changing the sort order is instant. We keep one slot in five for new posts so a hangout posted a minute ago can be seen before anyone has joined it. This matters a lot on a small campus. The small random value is seeded by the post, so the order stays the same when the page renders again.

Business

Jiuup also has an admin console. The teammate in charge of analysis uses it to track retention and click-through rates and shares the findings with the team, so we can decide together what to change next.

We also designed a way to earn revenue. After signing a contract with a local business, we can publish its ad on the platform. During the promotion period the business gets its own link where it can see the performance, the conversion rate and the analysis of its ad.

Challenges

We met many challenges along the way. Two of them shaped the project the most.

1Cold start

2Choosing the platform

Cold start

A hangout platform is empty until many people join at the same time. At first we discussed common ways to promote it, such as paid ads and social media posts. Then we realised that if we could not reach many students at once, the cycle of posting, joining and chatting would never start.

So we chose the most direct ways to reach a large group of students. We worked with student clubs, and they used Jiuup for lucky draws and announcements at their events. This also helped the clubs, because they no longer needed to create another group chat just to make announcements. We also handed out flyers ourselves at the busiest places on campus.

Choosing the platform

My first idea was simple. I wanted the fastest way for everyone to access the platform, with no download and no extra steps. That is why we chose a web app, which also made development faster. Web push notifications seemed mature enough at the time, so I thought message notifications would not be a problem. People who wanted an app experience could install the PWA. We wrote an install guide and optimised the installed version for phones.

Later we found that installing a PWA is simple, but it is not the way people are used to getting an app. Many users kept using the browser. Because of the limits of web notifications in the browser, they often did not receive new messages after a chat started. This was the most direct reason the experience got worse. It was also the main reason many users left after the first wave of excitement.

We wanted to build iOS and Android versions, but we had to put that plan on hold because of the development cost and our limited team. We did not overcome this challenge. It taught me to think about how users will come back before I decide how they get in.

Summary

Jiuup started from one conversation with a classmate. We turned it into a product, ran it with real students for about six months, and kept changing it based on what we saw. The design became simpler once we returned to the problem we set out to solve. The architecture stayed small so that we could move fast. Working with clubs helped us get through the cold start. The platform choice is the part we could not fix in time, and it showed me how important it is for users to be able to come back. I will take these lessons into what I build next.

Why photo booths

Since 2020 photo booths have become one of the main ways young people make and share memories, and by 2024 they were everywhere. Wherever I went there were young people lining up to use one. I tried it a few times myself, and I think I understood what people liked. We take photos on our phones all day, and taking one no longer feels like anything. A booth gives that feeling back.

I asked Jeannie, who studies design at National Taiwan Normal University, what she thought, because I wanted to hear it from a woman’s side. That conversation showed me what I had missed. Phones already have a camera app for every purpose. A booth is different because each photo can only be taken once, and the print comes out right after. That is the part people cannot get anywhere else, and it is why booths are so hard to replace.

What a visit is like

Jeannie then mapped a visit to a booth for two users, in twelve steps from meeting up to the days after. The mood drops in the same places for both of them.

The map ends in three limits.

1. A booth depends on a place. You have to go to where it is and wait in line, so it stays an occasional thing.
2. There is little room to make it yours. There are templates and filters, but you choose in a hurry while the time runs out, and many strips end up looking alike.
3. It happens once. When the print comes out the experience is over, and people still go back to their phones to edit, keep and share the photos.

That left us with two questions. Could taking a photo on a phone feel like an occasion again? And could a booth be something you keep using, on the phone where the photos end up anyway?

The idea

I invited Jeannie to build it with me. We wanted to put the convenience of a phone together with the occasion of a booth, and to let the experience go on after the photo is taken. We called it Your Pocket Photobooth.

Snapy is a photo booth for iPhone. You choose a layout, the camera counts down and takes the shots by itself, you decorate the strip, and it goes onto your wall.

Each part of the app answers one of the three limits. The camera is with you anywhere. The editor gives you room to make a strip your own. The wall keeps every strip, so the experience goes on after the first one.

CameraA booth that is with you anywhere, with no line to wait in.

EditorThemes, stickers, brushes and beauty for a strip of your own.

Wall and DumpEvery strip is kept by week and can be shared at any time.

A visit to a booth ends at the printer. With Snapy it becomes a loop. You meet up, take the photos, make the strip your own, keep it on the wall and come back to it later.

Who it is for

We designed Snapy for people from 15 to 25, and Jeannie wrote two personas so we could keep them in mind.

Who did what

We worked out the concept together, and we both did user research and UI/UX design. I designed the user flow and the interactions, and I did the full-stack development of the iOS app. Jeannie created the brand identity, which covers the logo, the colours, the characters and the visual content inside the app, and she drew the service blueprint.

We built the design around three things, which are the flow, the feeling of occasion and the look.

The flow

We wanted anyone to know how to use Snapy the moment they opened it, and to get through it every time without having to think.

The app opens on the camera tab. The layouts are a row of cards you swipe through, and there is one large button under them. Pressing it takes you to the filters, and one more press starts the camera. From there the phone does the work. It counts down and takes each shot by itself, the way a booth does. The countdown can be 10, 15 or 20 seconds. If you do not want the pressure of a clock, you can turn it off in the settings and press the shutter yourself whenever you are ready. Snapy takes two more shots than the layout needs and you pick the ones you keep. There is no retake button.

The camera button

The feeling of occasion

The second thing was the occasion itself. We wanted it to be there before the photo, while it is taken, and after.

Before the photo you choose from ten layouts and ten filters, and the filter is already on the picture in the viewfinder. You can also build your own template with your own colours, textures, pictures and text.

After the last shot the strip does not simply appear. It comes down from the top of the screen a little at a time, and the phone ticks in your hand with each step, the way a print comes out of a booth.

Then it goes onto your wall, where the strips are kept by week. At the end of a week you can turn that week into one picture, which we call a Dump, and share it. There are stickers, brushes and frames to collect and use, and you can make stickers out of your own photos. On a phone you can also take as many strips as you like, share them, and keep all of them in the app.

The editor is where a strip becomes yours. There are 206 ready-made themes and 266 stickers, which already gives more than 5,000 ways to dress a strip before you choose a filter or pick up a brush.

Beauty for each person

We also wanted to use what a phone is good at, and we started from the booth’s biggest weakness. We asked about fifteen friends, and what bothered them most was the group photo. When several people are in a shot, it is hard to look after everyone. Most of the group looks good in one photo, one person is unhappy with how they came out, and they go along with it for everyone else.

A phone can tell the faces apart. Snapy finds every face in the strip and works out which faces across the frames belong to the same person. Each person then has their own settings. One friend can smooth their skin while another leaves theirs alone, in the same picture. If the app puts a face with the wrong person, you tap that face to move it.

There are six effects and every one starts at zero, so nothing changes until you move a slider yourself. None of them changes the shape of a face.

Edit

Smart BeautySmoothLipstickAcneBrightenRosy

0%

Detected 3 persons

On the phone, in this order

1. SwiftUIDraws the screen, the sheet and its drag gestures.
2. VisionFinds every face in the strip and the landmarks on it.
3. Our own face matchingDescribes each face with 128 numbers and compares them across frames, so the same person is one group.
4. Core ImageBuilds a soft mask from the landmarks and applies that person’s effects inside it.
5. Metal Performance ShadersSmooths skin on the GPU. Core Image takes over if the GPU cannot.

Everything stays on the phone

All of the photo processing runs on the device, and we chose that for two reasons.

The first is that a current iPhone is fast enough for everything we wanted to do. Snapy is only on iOS for now. To keep it quick, the editor works on a copy of the strip that is at most 1500 pixels on its long side, and it moves the work from the GPU to the CPU when memory runs low.

The second is trust. After a happy moment we want people to edit their photos and keep them in the app without worrying. The pictures never pass through anyone else. Our server only handles signing in, feedback and announcements.

Visual design

We wanted Snapy to feel young, bold and lively, and to look different from the first second it opens. Jeannie set the brand, and she gave it five words to hold on to, which are playful, naughty, youthful, goofy and alien.

The brand starts from the idea of a personal universe. Every photo is a small star, and one person’s photos together make a constellation of their own. The mascot is an alien who visits that universe out of curiosity and records the moments people have in it. It stays beside you as a companion while you take your photos.

• Playful
• Naughty
• Youthful
• Goofy
• Alien

Concept

++=

An alien hand, a camera and the letter S make the mark. The mascot is a curious visitor who records human moments.

Logo

Seven sketches and the mark we kept. The S slowly becomes a face.

Logotype

Half circles and rounded corners keep the wordmark soft and playful.

Colour

• Main colour#A17BEC
• Colour 1#FFFFFF
• Colour 2#000000

A lavender main colour keeps the brand youthful and dreamy.

That is why the whole app is set at night. Every screen sits on the same dark sky with small fixed stars and a shooting star now and then. On top of it the main colour is used in a few lighter and darker steps, and each step has one job, so anything purple is something you can press or something you have chosen. Cards and buttons are panes of glass that glow, with no hard borders.

The characters carry the personality. Jeannie drew the purple mascot that waves at you on the home screen, a goblin and a cat, and a set of inflated objects such as an avocado and a fried egg that became the stickers.

Motion and touch are part of the look too. Things move on springs, so they overshoot a little and settle. The layout cards tick under your thumb like a dial as you swipe, and the countdown is a single large rounded number.

Listening to users

We built a feedback page into the app, so people can report a problem or make a wish at any time. We received requests to improve the iPad layout, wishes for new filters, and reports of trouble signing up. We wrote back to each person when their message came in, and we worked on what they had pointed to. A lot of small problems were fixed this way. I think it is one of the things we did well.

Results

Downloads as of March 2026

2,400+

Themes

206

Stickers

266

Languages

5

We promoted it on Instagram and Threads at the start. Jeannie and I were often logged in to the same accounts from two places at once, and I think that is why Meta flagged them. The accounts were suspended without an explanation and we lost that channel.

Looking back

Snapy started as a redesign of the photo booth. While we worked on it, it became a way for us to look at how people our age use photos to show who they are and to stay close to their friends.