The Red Flag

The Red Flag is a reflective relationship web app that I designed and built end-to-end. The experience helps users recognize unhealthy behavioral patterns through calm, narrative-driven feedback rather than judgment or labels.

The app guides users through a focused flow, starting with a calm entry point, moving through thoughtful behavior selection, and ending with a personalized result that encourages reflection rather than judgment.

View Live Web App
The Red Flag welcome screen Red flag selection screen Results breakdown screen

What is the problem?

Conversations around relationship red flags are often loud, judgmental, and overly simplified. People are encouraged to label experiences instead of reflecting on them. There is little space for nuance, privacy, or emotional processing.

What is the goal?

The goal of The Red Flag is to create a calm, private space where users can reflect on relationship behaviors without pressure or shame. The app translates selected behaviors into weighted results and narrative reflections that encourage awareness rather than conclusions.

Research Insights

I analyzed relationship-focused content across social media, forums, and dating advice platforms. While red flag discussions are popular, they are often framed as entertainment or absolutes, leaving little room for context or self-reflection.

Through informal interviews and independent research, a recurring need emerged. People want clarity without judgment, and tools that support reflection rather than instruction.

Alex — The Reflective Thinker

Alex, 29, values emotional awareness and personal growth. After past relationship experiences, they want tools that help them reflect privately before making decisions. Alex avoids content that feels aggressive or diagnostic.

  • Motivations: Emotional clarity
  • Barriers: Judgmental advice culture

Maya — The Pattern Seeker

Maya, 32, notices repeating patterns in her relationships but struggles to name them. She prefers calm, guided reflection over public discussions or unsolicited advice. Privacy and emotional safety are essential to her experience.

  • Motivations: Self-awareness
  • Barriers: Oversimplified relationship advice
1

Design Process

The design process began by defining emotional boundaries. I intentionally avoided gamification, diagnostic language, and urgency-driven interactions. The focus was on pacing, tone, and psychological safety.

Early sketches, content mapping, and flow diagrams helped establish a reflective structure. Each interaction was designed to slow the user down and encourage thought rather than reaction.

2

Visual Evolution

The visual system evolved from low-fidelity wireframes into a restrained, romantic interface that supports emotional reflection. Typography, spacing, and motion were carefully tuned to avoid distraction.

Final screens include a welcome flow, behavior selection, results breakdown, and a narrative reflection view, all designed to feel cohesive and emotionally grounded.

Early wireframe of the welcome page Early wireframe of the selection page Early wireframe of the result page Finalized UI of the welcome page Finalized UI of the selection page Finalized UI of the result page
3

Live Web Application

The Red Flag was fully designed and developed using React, TypeScript, and Vite. I implemented custom UI components, weighted scoring logic, and dynamic narrative generation to support an end-to-end user experience.

The application is deployed live and includes responsive layouts, edge case handling, and sharing functionality. This project represents full ownership from concept through production.

The Red Flag application flow