Skip to content

Mobile · Social · AI

SparkR

SparkR is a dating app and a friend app in one, for people who want either or both. Its AI explains every match in plain words and flags the rare person who fits your friend list and your love list: a SuperSpark. I designed it solo, from pen sketches to a clickable prototype.

Role
Product Designer
Timeline
2026
Tools
Figma, Figma Prototyping, AI
Team
Solo · Concept project

SparkR · The final app

Concept project. People and photos are stand-ins.

The Problem

Two Apps, One Question, No Reasons

Plenty of people run a dating app and a friend app side by side and type the same interests into both. Neither app tells you why it put someone in front of you. You get a photo and maybe a percentage, so you swipe on the photo.

SparkR tests two bets. The first is that one profile can serve both goals. The second is that an AI which shows its reasons earns more trust than one that hands you a score.

The Idea

Two Lists, and the Overlap

Onboarding is two short lists: what you want in friends, then what you want in a date, each with an Into side and a Not into side. Both steps are required, so they get a progress bar rather than a toggle, because a toggle reads as optional.

Discover then splits three ways: Friends, Love, and SuperSparks, the people who fit both lists. SuperSparks are rare on purpose, which is what makes them worth opening the app for.

Explainable Matching

The Why Comes Before the Swipe

Every photo carries a small glass card, “Why the AI matched you”, with the three shared traits already showing. A heart marks a love-list trait and a smile marks a friend-list trait, so you can tell what kind of match it is at a glance.

Tap it and a sheet opens with two numbers instead of one: a Friends fit and a Love fit. Below them the AI explains itself in a sentence and lists what you paired on, like “Walks her corgi daily” and “Trail pics in 4 of 6 photos”. A footnote says what it read: her bio, prompts and photos, plus your lists. A single score would hide all of that.

The entry point took four tries. A bare chevron was too easy to miss. A “Why?” button inside the trait pill sat in the wrong place, and a white capsule under it looked bolted on. The glass card won because the reasons are the button.

Prototype · The why, on the photo

Left: every card carries its three reasons. Right: tap them for the full story, with a friends fit, a love fit and the evidence behind both.

Process · Pen, then grey, then colour

  1. Stage 01 · Sketches

    Pen first

    Drawn by hand on purpose, so the only thing left to judge is structure. Every red note became a decision in the final app.

  2. Stage 02 · Mid-fidelity

    Real type, no colour

    Spacing and hierarchy had to work in greyscale before colour was allowed to help. Two problems showed up here: the why was a bare chevron, and on Dates two blacks fought for attention.

  3. Stage 03 · Final

    Colour earns its place

    Each colour gets one job. The chevron became the glass Why card, and the nav stepped back behind the call to action.

Five screens at three stages: Discover, the Why sheet, the match, chat and dates.

Critique Rounds

Scored on Looks, and on Need

Every screen went through repeated critique rounds scored on two axes: how it looks, and whether each element earns its place. A screen didn’t move on until both scores cleared the bar. Most of what the rounds changed was subtraction.

Three buttons became two. The first card had pass, star and like. The star became its own SuperSparks tab, so the card is a plain yes or no.

The heart in the header went. It did the same job as the like button.

The nav got quieter. The first bar was a fat strip of four labelled tabs. Profile left it entirely and now sits behind your own photo, top right, which leaves three tabs.

Colour

Every Colour Gets One Job

In chat, grey is them, red is you, and tan is the AI. In the first draft, the AI’s suggestion looked like one of Cindy’s messages, and a dating app can’t put words in someone’s mouth. Giving the AI its own colour fixed that.

On Dates, “Play icebreaker” and the active nav tab shared the same dark fill, so the eye had nowhere to land. Now the call to action is the one heavy thing on the screen, and the nav steps back.

Prototype · One colour, one job

Chat: the AI speaks in tan, so it never reads as Cindy. Dates: the call to action wins, and the nav steps back.

Prototype · Try SparkR

SparkR prototype

Clickable from start to finish. Build your two lists, like your way to Cindy, open her Why sheet, match, chat, and warm up for the date. Concept project; people and photos are stand-ins.

Reflection

What I’d Test Next

The percentages. Two fits beat one score, but a number can still feel like a grade. I’d test whether people trust the reasons more with the numbers or without them.

The SuperSpark label. It’s meant to feel like luck, not pressure. “Friend and more” could just as easily feel like a lot to live up to on a first date.

Real people. The critiques so far were design reviews. The next round belongs to the people who’d use it, starting with one question: do they swipe differently once they can see the why?

Photos from Unsplash by Megan Bucknall, Polina Khaiko, Kolapo Oladapo, Amir Esrafili, Ahmed Nasiru, AL Kaium and Meg Wagener.

Back to portfolio

Pinch to zoom