747 Social Casino
A social network and a casino, designed as one premium product that works on both desktop and mobile.
- Role
- Type
- Tools
- Screens
- 90+ high-fidelity
- Themes
- Light & dark
- Views
- Desktop & mobile
01The Brief
747 Social Casino is built around people, not just games. It combines a full social network, with profiles, stories, posts and comments, with games and prizes, and it has a detailed onboarding journey to get new users started.
My job was to take something with this many layers and make it feel easy, premium and consistent on both desktop and mobile.
Problem
Combining a social network and a casino, along with a long onboarding flow, could easily produce something that feels cluttered and tiring before anyone even gets to the fun part.
Goal
Create one premium design system where the social side and the games sit comfortably together, onboarding feels light and rewarding, and every screen works on desktop and mobile.
Audience
Players who are there for the community and want to express themselves, and casual gamers who are after some fun and a chance to win prizes.
The games and the feed aren’t hard on their own. The hard part is making them feel like one premium product on every screen.
02Research & Insights
People who come for the social side and people who come for the casino overlap, but they want different things at first. One group wants to express themselves, and the other just wants to play. The product had to welcome both and guide them through onboarding without hitting them with a wall of form fields.
- Onboarding that dumps every field at once
- Social and gaming that feel like two apps stitched together
- Desktop and mobile that drift apart over time
- Progressive onboarding with clear complete / incomplete states
- One green-and-gold system uniting social and gaming
- A documented token system for light/dark and device parity
The Social Player
“I’m here for the community as much as the games - show me stories, posts and profiles.”
The Casual Gamer
“I want quick games and a real shot at a prize - make claiming rewards feel great.”
The New User
“Don’t make me fill in everything at once - let me complete my profile bit by bit.”
Real self-expression
A detailed "About Me" section with photos, text, video and voice, instead of a basic profile.
A satisfying claim
A prize timer that counts down to a "ready to claim" moment, which fixes prize mechanics that used to feel unrewarding.
Progress, not forms
Onboarding is split into steps you can skip, with clear progress shown along the way.
03Structure & Flows
Onboarding is broken into steps you can skip: profile, cover photo, "About Me" media, invites and games. Each step clearly shows whether it’s complete or not.
Social Feed
Home · stories · posts · comments
Profile
About Me · media · edit
Play & Prizes
Games · prize timer · claim
Account
Onboarding · login · notifications
04Visual Design System
Casino green, lifted with gold for anything to do with value and winning, and grounded with deep navy text and clean neutrals. It’s all defined as a complete token system (primary colours, surfaces, text, borders, and success, error and warning states) with light and dark modes.
Colour palette
Tap a colour to try itDesigned around one palette
Every screen is built from these colour and type tokens.
Typography
Type your own textHeadings to metadata - Light to Bold, 12-48pt, tuned for light and dark
05Key Screens
16 high-fidelity screens from the final design. Tap any of them to see it full size.
06Interaction Details
Progressive onboarding
You build your profile, cover and "About Me" media one step at a time, and each step clearly shows whether it’s done or still waiting.
Stories, posts & comments
A full social layer with stories, single and multi-image posts and comments gives the casino a real sense of community.
Prizes & floating actions
A prize timer counts down to "ready to claim", and on mobile a floating action button keeps the most important actions just a tap away.
07Outcome & Reflection
Outcome
A complete social casino design with multi-step onboarding, a full social feed, detailed profiles, games, prizes and notifications, all designed for desktop and mobile in both light and dark themes.
Hardest Part
Bringing a social network and a casino together into one product, and keeping dozens of onboarding states consistent across two layouts.
What I Learned
A documented token system is what keeps a product this big consistent, and designing all the in-between states is half the work.
Next Steps
Handing the designs over to engineering, prototyping the story and prize-claim interactions, and designing a tablet layout.