Lead with belonging
The message starts with people and participation, not a feature inventory.
PlayTribe web
The public introduction to PlayTribe: a warm, energetic website that explains the product before asking people to download it.
My role
Web concept, UX/UI, copy direction and Next.js development.
Make the invitation feel social.
The app solves coordination; the website has to create desire and trust in a few scrolls.
The narrative moves from the promise of finding your people into concrete product mechanics, belonging and download. The visual language matches the app without pretending that a marketing page and a mobile product have the same job.
Show how it works
Product screens and a short step sequence turn an emotional promise into a credible flow.
Repeat one action
Download remains the dominant next step throughout the page without becoming aggressive.
02 / UX
A landing page with one clear argument.
Each section answers the next natural question: what is it, how does it work, is it for me and where do I get it?
Promise
The hero communicates community and movement before introducing product details.
Proof through product
Screens and benefits demonstrate discovery, joining and event coordination.
Belonging and action
Inclusive messaging resolves hesitation before the final download prompt.
03 / Screens
The website across its main story beats.
01 / 03
playtribeapp.com
playtribeapp.com/how-it-works
playtribeapp.com/download
04 / UI system
The same brand, tuned for the web.
Warm cream and sage carry trust; coral supplies energy. Literata gives the story an editorial voice while Plus Jakarta Sans keeps actions practical.
Palette
Cream#FCF9F0
Soft sage#E9EFD5
Olive#5F6D4C
Coral#C94E38
Typography
PlayLiterataStory-led display type
JoinPlus Jakarta SansBody, labels and actions
Components
Editorial heroProduct screen cardsStep sequenceBelonging panelDownload CTAResponsive navigation
05 / Build
A fast, motion-led Next.js site.
The site uses local variable fonts, reusable editorial sections and controlled GSAP animation. Motion clarifies hierarchy and product relationships instead of competing with the copy.
- Next.js 16
- React 19
- GSAP
- Local variable fonts
- Responsive CSS
- Vercel
One brand, two products
The website earns attention. The app has to keep it.
Separating the case studies makes the different UX goals, components and technical work visible.
Next: Squadar →