Kings'n'Queens: Full Site & App System Design for a Smart-Matching Dating Startup
UI Designer · UX Designer · Web Designer · Figma · Mobile App Design · Dating App Design · Design Systems
About the client
Kings'n'Queens is a dating platform built around one idea: compatibility over swiping. Instead of the endless-scroll, surface-level matching that defines most dating apps, it uses an intelligent matching model that weighs deeper compatibility signals, the pitch being fewer, better matches instead of infinite mediocre ones.
The client came to me with a brief and early wireframes for their marketing site and needed a designer to take that direction and turn it into a complete, polished UI system across six pages: landing page, pricing, about, contact/support, privacy policy, and a 404 state, designed as one connected system rather than six separate pages.
The challenge
Dating apps have a trust problem before they have a design problem. The category is crowded with near-identical pink gradients and stock-photo couples, and users are numb to it. Working from the client's brief, the job was to design something that felt premium, safe, and intentional, not another swipe factory, while still hitting the conversion mechanics a real dating product needs: clear plan tiers, a frictionless path from "curious" to "downloaded," and enough proof (how it works, safety, FAQs) to get a skeptical user over the line.
The harder constraint was consistency at scale. Six pages, two platforms (marketing site + native app), one voice. Nothing about safety messaging on the landing page could contradict the tone of the actual in-app screens shown in the mockups, and every page needed to feel like it belonged to the same product without becoming repetitive, all while staying faithful to the wireframes and direction the client had already set.
What I designed
Information architecture across six pages, Home, About Us, Pricing, Support, Privacy Policy, and a 404, each with a clear single job. Pricing isolates the monetization decision (Free / Professional $9.99 / Enterprise $19.99) so it's never competing with brand storytelling. About Us carries the mission and team framing. Support is a dedicated contact path instead of burying it in a footer link. Even the 404 stays on-brand instead of defaulting to a generic error screen a small detail, but it's the difference between a system and a one-off page.
A reusable component system, built once and repeated deliberately: the same navigation and CTA button, an FAQ module that pairs an in-app phone mockup with an accordion (used on the landing page, pricing, and about pages), and a closing conversion banner ("Ready To Find Your Perfect Match?") that appears at the bottom of every page as a consistent last chance to convert. Reusing these components across six pages meant polishing them once and getting six pages of consistency for free.
A four-step "How It Works" narrative on the landing page, create your profile, smart matching, verified interactions, meaningful conversations, designed specifically to answer the two objections dating-app users have before they'll download anything: "is this just another swipe app" and "is this safe." Verification and safety get their own step rather than being a footnote, because for this category, trust is the actual product.
Real product screens used as proof, not stock mockups. The match grid, profile detail view, and in-app FAQ shown in the phone mockups throughout the site are pulled from the actual Kings'n'Queens mobile app UI, a separate design project I also worked on (case study on that coming separately). Using the real app screens instead of generic phone-mockup stock meant the marketing site was selling the actual product, not an approximation of one.
Editorial typography over "dating app" cliché. Bold, oversized black headlines against a warm pink/red gradient, leaning closer to a confident lifestyle brand than a typical playful dating app, so the product reads as premium and intentional rather than gimmicky.
Delivered
Full UI/UX design for all six pages, taken from the client's initial brief and wireframes to a complete, developer-ready Figma system: six responsive pages, a working component library, and a consistent design language that carries the real Kings'n'Queens app experience through to the marketing site.
1
1
17
Worked on a dating app that replaces swiping with intelligent mapping instead of judging a stack of photos, you see why you match with someone before you say hi.
Down to two hero videos for the portfolio piece and genuinely can't pick 👇
🟠 warm/orange-yellow
⚫️ bold/black-red gradient
Which one would make YOU stop scrolling on a project page? Dropping both below, vote in the comments 🙏
1
65
Piscec: Oil & Gas Services Website Redesign | Figma
2
7
Alfredo: Grant Proposal & Project Management Platform | Figma
1
6