ANODA Discuss your product

Personality-based dating app, beyond the photo

Fusion is a French dating app that matches on MBTI type, zodiac sign or both.We designed it for phones, from first screen to handoff.

Fusion discovery card in light mode: Julie, 21 with a 78% compatibility ring, common interests, distance, and the pass, like, boost, super like and rewind buttons above the tab bar; The same Fusion discovery card in dark mode
4
experts from discovery to developer handoff
16
types a member can pick, filter by and be matched on

Fusion is a consumer dating app built around personality rather than photos: members are matched on MBTI type, on zodiac sign, or on a blend of both. We designed the whole product for phones , from discovery and user flows to the developer handoff, and gave it a logo and app icon and a design system , in light and dark. Development and the matching algorithm were outside our scope.

What a member goes through

One chain, from a first screen to a conversation:

  1. Account

    • Welcome
    • Phone number
    • Code

  2. Identity

    • Birth details
    • Personality
    • Who to see

  3. Profile

    • Photos
    • Questions
    • Description

  4. Discovery

    • Mode
    • Filters
    • Like or pass

  5. Matches

    • Match
    • Likes
    • Chat

  6. Safety and plans

    • Report and block
    • Boosts
    • Settings
Value Data
Say what the app is for, then ask what it needs and why.
Score Doubt
A compatibility number that helps a choice without pretending to prove anything.
Open Safe
Filters that respect every identity, and ways to leave, report or block.

One card, read in one glance

Found
A card in discovery has one job: help someone decide. It carries a photo, a name, a score, a mode and the shared ground, and any of them can crowd out the rest.
Decided
The photo leads. The name and the score sit on it, the shared ground sits under them, and five actions run in one row: pass, like, boost, super like and rewind. The mode and the filters are one tap away in the header.
For the user
A member sees who this is, how well they match and what to do next, without opening the profile.
Fusion discovery card in Fusion mode: a Liked you tag, Julie, 21 with an online dot and a 78% compatibility ring, Common interests and 5 km away chips, pass, like, boost, super like and rewind buttons, and the Swipes, Likes, Chat and Profile tab bar
After: the discovery card in Fusion mode, with a 78% score

  1. Mode and filters

    Switch the matching mode and open the filters from the header.

  2. Who, and what you share

    The name and the compatibility ring on the photo, then common interests and distance in one line under it.

  3. Five actions

    Pass, like, boost, super like and rewind, always in the same row.

How the work progressed

151 hours of design across seven stages: what the product had to explain, how it flows, how it looks and what developers needed.

  1. Discovery

    What the product has to explain and to whom: three matching modes, the identity and birth data behind them, and what members pay for

    Artifact Requirements and a product map

  2. User Flow

    Every path from a first launch to a chat and a purchase, before any layout

    Artifact Information architecture and user flows for each area

  3. Wireframes

    Where each step, hint and button sits, before any colour

    Artifact Mobile wireframes for every flow

    Three wireframes of the discovery tutorial: the Fusion mode, Zodiac mode and MBTI mode steps, each a grey screen with a tip card and Got It

  4. Moodboards

    How a product about personality should feel, and which look fits it

    Artifact Moodboards and several visual directions

    A style exploration: the discovery card in a dark, glassy treatment beside the full profile page

  5. UI & Design System

    Every screen and state in light and dark, from one set of components

    Artifact Complete mobile UI, design system, UI kit and component library

  6. Delivery

    What developers needed to build without asking us

    Artifact Screen map, clickable prototype and the handoff file

Every path drawn before any screen

Found
Fusion has three matching modes, a filter for every trait and a paid layer on top. Without a map each screen invites another exception.
Decided
Each area got its own flow first: sign-up, profile creation, the tutorial, swipes, history, chat and profile, with every action’s states, its errors and its empty cases.

  1. Sign-up and log-in

    The splash, the welcome screen and the phone-number step with its error states, and the developer notes beside them.

    Open the full map
    Wireframes of sign-up: a splash screen, the welcome screen with phone, Google and Apple options, and the phone-number step in its empty, typing and error states, with developer notes

  2. The tutorial

    Six steps that teach the three modes and the swipe controls on top of a real profile.

    Open the full map
    Six wireframes of the discovery tutorial: Fusion mode, Zodiac mode, MBTI mode, the buttons, the swipes and the photo gallery, each with its tip and a Got It or Finish button
Fusion tab bar: Swipes, Likes, Chat and Profile in each selected state, with and without the scroll blur, and the Chat badge

Four places, one bar

Swipes, Likes, Chat and Profile on every main screen, with a dot on Chat for what’s new.

  • Information architecture
  • User flows for every area
  • Mobile wireframes
  • Tab bar and navigation states

Seven jobs a personality-led dating app has to do

Explain first and ask second. Then make every score, filter, report and purchase say what it does.

Asking for data, and saying why

Found
An app that opens with a birth date, a personality type and a location looks like a form. A member who can’t see the reason leaves before the first profile.
Decided
The welcome screen states the idea before anything is asked. Each request then carries its reason: the birth date builds the zodiac sign and the compatibility, the time of birth is optional, the location suggests people nearby, and what stays private is said in plain words.
Fusion welcome screen: Your Personalities, Our Connections, with Continue with Phone Number, Google and Apple, and the terms line
Create Profile, When were you born: only the age appears on the profile and the birth data helps calculate the zodiac sign and compatibility; date, optional time and city of birth, and a note that the information can’t be changed later
Allow geolocation: to suggest matches near you, with a map illustration and the Allow Geolocation button
Personalize your experience: filtering tools for authentic matches and a statement that they do not track browsing on other applications or websites, with Accept and Not Now

Personality and zodiac, chosen or looked up

Found
Not everyone knows their MBTI type, and sixteen four-letter codes read like an exam.
Decided

Two ways in on one screen: pick a type you know, or take the test. Each type is a card with its name, a line about it and its four traits, and the same list becomes the personality filter later.

Zodiac works the same way, as a plain list.

Create Profile, Define your MBTI profile: an explanation of the model, with I Know My Personality Type and Take the Test
What is your personality: a search field and type cards, Architect selected, Logician, each with its four traits
Personality Type filter sheet: the type cards with Architect selected and Save and Close
Zodiac filter: a list of signs from Aquarius on, with a note that more than one can be picked, and Apply

Identity and preferences, without an interrogation

Found
A profile has to be complete enough to match on and short enough to finish, and it asks about gender and who a member wants to see.
Decided
One question per screen with a progress ring that counts eight steps. Gender is a long, respectful list with an exit for anyone not listed, and who to see takes women, men, other genders or everyone, editable later.
Choose your gender: a list from Agender to Genderqueer with one selected, Continue, and My Gender is Not Listed
Who do you want to see, step 4 of 8: Women selected, Men, Other genders and Everyone, with Continue
Add your photos, step 5 of 8: five uploaded photos, each with a remove button, Continue and Upload More Photos
Your profile is ready, step 8 of 8: a welcome text, the privacy policy notice, Accept and Decline

Three ways to read a match

Found
Zodiac, MBTI or both: three scores for one person can read as three verdicts, and none of them proves anything.
Decided

One profile, three modes. The card keeps its shape and swaps the reason under the name: a zodiac sign, a personality type, or the blend shown on the card above.

The percentage is a ring beside the name, an aid to choosing and never a promise.

Discovery card in Zodiac mode: Julie, 21 with a 78% ring and the sign Sagittarius
Discovery card in MBTI mode: Julie, 21 with a 78% ring and the type Architect

From a like to a first message

Found
A match can end in silence: two people and no reason to speak first.
Decided
A like and a match get their own moments, the match screen goes straight into a chat, and the chat offers themes to open with, so the first message isn’t a blank field.
A like on the discovery card: a heart over Julie’s blurred photo
You Matched: two profile photos with a heart, Start chatting now and break the ice, and Start Chat
Ask a Question sheet over a chat: Small talk, Curiosity and Deep and Emotional
A chat with John: the match card, messages, a reaction and a reply to a quoted message

Safety a member reaches in two taps

Found
A dating app is judged by its worst conversation. Leaving, reporting and blocking have to be easy to find and clear about what they do.
Decided
Every chat row opens a menu with Unmatch, Report and Block. Each ends in a confirmation that says what will happen and can’t be undone, a list of reasons for a report, and a toast when it’s done.
A chat row with a menu: Unmatch, Report, Block and Delete
Report sheet: We are sorry that you have encountered unacceptable behavior, with reasons from Fake Profile or Scam to Other
Block user dialog: John, and a warning that the action is permanent, with Block User and No, Go Back
Unmatch dialog: John, and a warning that the action cannot be undone, with Unmatch and No, Go Back

Paid places that say what they open

Found
Subscriptions and one-time purchases pull against each other, and a wall on every screen ends the conversation before it starts.
Decided
Boosts and Super Likes are one-time purchases a member tops up when they want them; a subscription sits beside them. A locked place says what it opens instead of hiding it.
Filters with a Zodiac sheet: the Zodiac filter is for the Premium plan, with Unlock
Likes, Liked You tab: 123 people liked you, an upgrade card and profile cards with match percentages
Boost animation: a rocket over the blurred discovery card

A mark and an app icon, with the rules for using them

Found
The app needed a mark that works as an app icon, on light and dark, and a team that could apply it without asking us each time.
Decided
A two-shape F in the app’s pink-to-orange gradient, chosen from four directions. It comes on a dark square for light backgrounds, in gradient, dark and white for the rest, with guidance on size and margin and icon grids for the App Store and Google Play.
Four logo directions, each with its reasoning: a layered flowing F, a soft glossy F, an inflated 3D F and a glass F on a gradient square
Logo guidance: the app icon, the mark in gradient on dark, in dark on light and in white on dark, with rules for background, minimum width and margin
The App Store icon at 1024 pixels: the mark on the icon grid, and on a dark square

One kit for every state

Found
A dating app is mostly repeated things: buttons, cards, chips, inputs and chat bubbles. Drawn one by one they drift, and each new matching mode would restart the work.
Decided
A kit built on one violet-to-orange gradient and one type scale, with every component in every state, so a new mode is one more chip and one more card, not a new design.

The same buttons, in the kit and on the card

The kit’s five reaction buttons, and the same row in place on the discovery card.

  • The kit’s reaction buttons: pass, like, super like, boost and rewind, in two sizes
    In the kit: Pass, like, super like, boost, rewind, and the smaller pair.
  • The reaction row on the discovery card: pass, like, boost, super like and rewind
    On the card: The same row, in place.

One button, in each of its states

Default, focused, pressed and disabled: the same gradient, darkened, outlined or greyed.

  • Primary button, default: violet to orange gradient
    Default
  • Primary button, focused: a violet outline
    Focused
  • Primary button, pressed: a darker gradient
    Pressed
  • Primary button, disabled: grey
    Disabled

Light and dark, from the same tokens

Dark mode is a switch in Settings and covers every screen of the product.

Settings in light mode: account, dark mode switch, notifications, FAQ and legal links, Log Out and Delete Account
The same Settings in dark mode, with the dark mode switch on

What the developers received

One Figma file to build from: the flows, every screen in light and dark, and the kit the screens are made of.

Information architecture and flows
Every area of the product as a flow, with its states and errors.
Wireframes
Mobile wireframes for every flow.
Screens in light and dark
The complete mobile UI, both themes.
Design system
UI kit and component library, with every state.
Screen map and prototype
The map of screens and a clickable prototype.
Brand
Logo, app icons and guidance.

Flows in the handoff

  1. Logo: word mapping, moodboards and concepts
  2. Logo: the final mark, revisions and delivery
  3. App moodboards and two style directions
  4. Wireframes for every flow
  5. App UI: onboarding, profiles, matching, chat and purchases
  6. Components: the UI kit with every state
Sign-up wireframes in a row: the splash, the welcome screen, the phone-number step and its error states, the country picker
The map: sign-up and log-in, screen by screen, with developer notes.
The buttons page of the UI kit: primary, secondary, text and destructive buttons in sm, md, lg and xl, each in default, focused, pressed and disabled, and the reaction buttons
The buttons page: every size and state a button can take.

Where the product ended up

A complete mobile dating product designed end to end: onboarding that explains itself, personality and zodiac profiles, three matching modes, discovery, matches, chat with its safety states, one-time purchases and a subscription, in light and dark, with a logo, a design system and a developer handoff.

experts on the team
4
personality types in the product
16

In the client's words

We now have a full design system and user journey ready for development, perfectly aligned with our vision.

Ylli Selivrada Co-Founder, Fusion

5.0

Asking people for a lot before they see why?

At Fusion we designed a dating app that explains its questions before it asks them, and keeps scores, filters and purchases honest. Show us your flow, and we’ll tell you where people leave.

Discuss your product Explore more case studies

What we brought to Fusion

The product

The system