ABOUT THIS PROJECT

Winker is a dating and social platform focused on turning matches into meaningful conversations. The project involved redesigning the user experience using behavioral psychology, improving onboarding flow, and building a scalable design system. The goal was to reduce drop-offs, guide user actions, and increase match-to-chat conversion effectively.

Industry

Industry

Dating and Social industry

Dating and Social industry

Scope

Scope

UX strategy, behavioral design, UI system, testing, prototyping

UX strategy, behavioral design, UI system, testing, prototyping

Timeline

Timeline

4 Weeks

4 Weeks

Winker app user interface design on smartphone mockups
displaying a shield with an exclamation mark
frustrated woman looking at her smartphone

The Challenge

Users were signing up, profiles were getting liked, and matches were happening every day. But between the match screen and the first message, the energy was dropping.

Plenty of matches. Almost no chats.
Red, purple, and black gradient
Dead Iocn

The intent gap

Users were matching casually but had no nudge to start a conversation. The match screen felt like a dead end.

Overhead view of a man sitting at a wooden table looking up while working on his laptop
Lost Interest Icon

Cognitive overload

Profiles asked too much too fast. Users faced decision fatigue and lost interest.

Close-up of a person's hands clasped together on a wooden desk next to a digital tablet displaying a diagram
No design system Icon

No design system

Inconsistent components and duplicated UI work slowed development and created bugs.

A woman holding a smartphone and making a dismissive hand gesture against a purple background
Red, purple, and black gradient
Dead Iocn

The intent gap

Users were matching casually but had no nudge to start a conversation. The match screen felt like a dead end.

Overhead view of a man sitting at a wooden table looking up while working on his laptop
Lost Interest Icon

Cognitive overload

Profiles asked too much too fast. Users faced decision fatigue and lost interest.

Close-up of a person's hands clasped together on a wooden desk next to a digital tablet displaying a diagram
No design system Icon

No design system

Inconsistent components and duplicated UI work slowed development and created bugs.

A woman holding a smartphone and making a dismissive hand gesture against a purple background
Winker app games and chat interface mobile mockups

Design System

A complete design system with reusable components, ensuring consistency, faster development, and seamless design to development handoff.

Hex | 8929FF

Hex | 2C2C2C

Hex | 30FC45

SVG icon image
SVG font image

Regular

Medium

Bold

The Solutions

A product that reads the room, every screen was redesigned to guide users and remove hesitation after a match.
Screen Icon

Momentum-First Match Screen

Match screen opens with contextual icebreakers and a one-tap message option.

A smooth, dark blue gradient background
Component Icon

45-Component Design System

A complete system with documented components, states, and variants for faster development.

Profile Icon

Progressive Profile Creation

Reduced onboarding from nine steps to four by sequencing questions better.

Chat Icon

Behavioral Chat Triggers

Smart prompts help users start conversations at the right moment.

Screen Icon

Momentum-First Match Screen

Match screen opens with contextual icebreakers and a one-tap message option.

A smooth, dark blue gradient background
Component Icon

45-Component Design System

A complete system with documented components, states, and variants for faster development.

Profile Icon

Progressive Profile Creation

Reduced onboarding from nine steps to four by sequencing questions better.

Chat Icon

Behavioral Chat Triggers

Smart prompts help users start conversations at the right moment.

Screen Icon

Momentum-First Match Screen

Match screen opens with contextual icebreakers and a one-tap message option.

A smooth, dark blue gradient background
Component Icon

45-Component Design System

A complete system with documented components, states, and variants for faster development.

Profile Icon

Progressive Profile Creation

Reduced onboarding from nine steps to four by sequencing questions better.

Chat Icon

Behavioral Chat Triggers

Smart prompts help users start conversations at the right moment.

Screen Icon

Momentum-First Match Screen

Match screen opens with contextual icebreakers and a one-tap message option.

A smooth, dark blue gradient background
Component Icon

45-Component Design System

A complete system with documented components, states, and variants for faster development.

Profile Icon

Progressive Profile Creation

Reduced onboarding from nine steps to four by sequencing questions better.

Chat Icon

Behavioral Chat Triggers

Smart prompts help users start conversations at the right moment.

A smartphone mockup displaying a mobile app user profile screen on a wooden surface

The Results

The improvements increased conversions, reduced drop-offs, and improved product velocity.
A circular progress chart showing a 25% increase in match-to-chat conversions
A professional man in a white shirt smiling while looking at a laptop

2X

Faster design to development handoff improving efficiency and delivery speed

A visual preview of a comprehensive design system featuring various UI components and buttons

45+

Component-based design system delivered for consistency, scalability, and faster development

A green circular progress chart illustrating a 55% reduction in onboarding drop-offs
A circular progress chart showing a 25% increase in match-to-chat conversions
A visual preview of a comprehensive design system featuring various UI components and buttons

45+

Component-based design system delivered for consistency, scalability, and faster development

A professional man in a white shirt smiling while looking at a laptop

2X

Faster design to development handoff improving efficiency and delivery speed

A green circular progress chart illustrating a 55% reduction in onboarding drop-offs

Client’s

Client’s

Client’s

Client’s

Review

Review

Review

Review

Emoji icon
Smartphone mockup showing winker app profile in desert dunes
"We were most impressed by their expertise and commitment to our success." We hired Mad Brains Technologies to enhance the search engine visibility of our business website. Our main goals were to increase organic traffic and achieve higher rankings for relevant keywords.
-By Product Lead, Winker

What We Learned

Three things this project proved.
Behavioral problems need behavioral fixes

The issue was psychological, not visual, so solving it required understanding user behavior and designing experiences that reduce hesitation.

Dark grey gradient background
Design systems drive speed and efficiency

The design system improved speed across teams and made future releases faster by reducing repeated work and ensuring consistency.

A smiling professional woman sitting at a desk with a laptop while engaging in a conversation with a colleague
Research is essential for design decisions

All design decisions were based on real user insights and observations, eliminating guesswork and ensuring every change solved actual problems.

Behavioral problems need behavioral fixes

The issue was psychological, not visual, so solving it required understanding user behavior and designing experiences that reduce hesitation.

A smiling professional woman sitting at a desk with a laptop while engaging in a conversation with a colleague
Dark grey gradient background
Design systems drive speed and efficiency

The design system improved speed across teams and made future releases faster by reducing repeated work and ensuring consistency.

Research is essential for design decisions

All design decisions were based on real user insights and observations, eliminating guesswork and ensuring every change solved actual problems.

Winker app onboarding and interface mobile mockups
  • Text SVG image
Card Mockup
Design Mockup
Start your enterprise transformation—submit inquiry, receive tailored proposal within 48 hours under full NDA from first contact.
Themadbrains logo illustraation
  • Text SVG image
Card Mockup
Design Mockup
Start your enterprise transformation—submit inquiry, receive tailored proposal within 48 hours under full NDA from first contact.
Themadbrains logo illustraation
  • Text SVG image
Card Mockup
Design Mockup
Start your enterprise transformation—submit inquiry, receive tailored proposal within 48 hours under full NDA from first contact.
  • Text SVG image
Card Mockup
Design Mockup
Start your enterprise transformation—submit inquiry, receive tailored proposal within 48 hours under full NDA from first contact.
Themadbrains logo illustraation