LovedIn: A Case Study

Source: Dev.to

Introduction

Hi, I’m Awoyemi Abiola, and this is my case study for the Week 5 task of the Rise Academy Front‑end track project – LovedIn.

In this case study we’ll cover:

• The love‑related challenges this project solves
• Who it solves them for
• Solution and UI design
• Technical structure and architecture (HTML + CSS)
• An overall reflection on collaboration and areas for improvement

Let’s dive in.

The Problem

In today’s fast‑paced digital world, expressing romantic interest has become increasingly complex and anxiety‑inducing. Many people struggle with:

1. Finding the right words – The pressure to craft the perfect proposal often leads to missed opportunities or awkward encounters. Hours are spent over‑thinking what to say, how to say it, and when to say it, which can result in never saying anything at all.
2. Personalisation challenges – Generic gestures feel impersonal or insincere. A simple “Will you be my girlfriend/boyfriend?” text doesn’t convey the depth of thought and care behind the decision.
3. Lack of a memorable format – Traditional texts or social‑media DMs lack the special, lasting quality that relationship milestones deserve. These moments should be cherished, not lost in a sea of chat history.

LovedIn addresses these challenges by providing a structured, thoughtful, and personalised platform that removes the stress from romantic proposals while preserving authenticity and sincerity. It gives users the tools to express their feelings in a beautiful, memorable way.

Target Audience

The primary audience for LovedIn is tech‑comfortable young adults (18‑35 years) who are familiar with online‑dating culture and value creative, thoughtful expressions of affection.

Solution Overview

We designed a multi‑page proposal website with the following flow:

1. Interactive Landing Page – Engages users from the start.
2. Personalised Information Collection – A form gathers details about the proposer and the intended partner.
3. Auto‑generated, Customised Proposal Page – The final, shareable proposal is rendered with the collected data.

This flow maintains an emotional connection throughout the creation process; users aren’t just filling a form and receiving a link—they’re crafting a thoughtful, romantic experience for their prospective partners.

Visual Design

Colour Palette

The palette leans into romantic, affectionate tones, creating a warm, gentle, and emotionally inviting mood without feeling loud or overwhelming.

Typography

We needed a typeface that balances romance with clarity. After deliberation we chose:

• Headings: Playfair Display – expressive yet elegant.
• Body text: Inter – simple, highly readable.

Technical Architecture

The website was built using semantic HTML to improve accessibility and SEO:

• <nav> – navigation and hero section
• <main> – primary content
• <section> – logical grouping of related content
• <footer> – closing content
• <aside> – supplementary content

CSS – Global Custom Properties

All colour, font, spacing, and transition values are stored as CSS custom properties in a base stylesheet shared across every page.

:root {
  /* ==================== COLORS ==================== */

  /* Primary Colors */
  --color-primary: #e22b3b;
  --color-primary-bg: #f0d1d7;

  /* Secondary Colors */
  --color-secondary: #ed4779;
  --color-secondary-bg: #fff6f8;

  /* Accent Colors */
  --color-accent: #fa88bb;

  /* Support Colors */
  --color-support: #d86a77;

  /* Neutral Colors */
  --color-white: #ffffff;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-black: #000000;

  /* ==================== TYPOGRAPHY ==================== */

  /* Font Families */
  --font-display: "Playfair Display", serif;
  --font-body: "Inter", sans-serif;

  /* Base Font Size */
  --font-size-base: 16px;

  /* Font Sizes – Type Scale */
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-md: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem;  /* 36px */
  --font-size-5xl: 3rem;     /* 48px */
  --font-size-6xl: 3.75rem;  /* 60px */
  --font-size-7xl: 4.5rem;   /* 72px */

  /* Heading Scales */
  --heading-h1: var(--font-size-5xl);
  --heading-h2: var(--font-size-4xl);
  --heading-h3: var(--font-size-3xl);
  --heading-h4: var(--font-size-2xl);
  --heading-h5: var(--font-size-xl);
  --heading-h6: var(--font-size-lg);

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ==================== SPACING & SHAPES ==================== */

  /* Spacing Scale – Padding / Margin */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-2xl: 2.5rem;   /* 40px */
  --spacing-3xl: 3rem;     /* 48px */
  --spacing-4xl: 4rem;     /* 64px */
  --spacing-5xl: 5rem;     /* 80px */
  --spacing-6xl: 6rem;     /* 96px */

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* Border Widths */
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 4px;
}

These variables are then referenced throughout the stylesheet, ensuring a consistent visual language and making future updates straightforward.

Reflection

• Collaboration: Working with the Rise Academy cohort fostered rapid feedback loops and helped surface accessibility concerns early.
• What went well:
  • Semantic markup improved SEO and screen‑reader navigation.
  • The colour palette and typography created a cohesive, romantic mood.
  • Using CSS custom properties kept the design system maintainable.
• Areas to improve:
  • Add a dark‑mode variant for users who prefer low‑light environments.
  • Implement unit tests for the form validation logic.
  • Enhance the landing‑page animation performance on low‑end devices.

Overall, LovedIn demonstrates how thoughtful UI/UX combined with clean, semantic code can turn a stressful moment—like a romantic proposal—into a memorable, joyful experience.

CSS Variables & Design Tokens

/* ========== SHADOWS ========== */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--shadow-colored: 0 6px 20px rgba(226, 43, 59, 0.25);
--shadow-subtle: 0 0 0 3px rgba(226, 43, 59, 0.15);

/* ========== TRANSITIONS ========== */
--transition-fast: 150ms ease-in-out;
--transition-base: 250ms ease-in-out;
--transition-slow: 350ms ease-in-out;

/* ========== LINEAR GRADIENTS ========== */
--gradient-primary: linear-gradient(
  135deg,
  var(--color-primary-bg),
  var(--color-secondary-bg)
);
--gradient-secondary: linear-gradient(
  135deg,
  var(--color-secondary-bg),
  var(--color-primary-bg)
);
--gradient-transparent: linear-gradient(
  rgba(255, 192, 203, 0.6),
  rgba(255, 182, 193, 0.6)
);

This approach ensured consistency and cohesiveness for shared elements on the website, reducing repetition as much as possible.

Layout Strategy

Flexbox was used across the application for a consistent layout and seamless responsiveness:

display: flex;
align-items: center;
justify-content: space-between;

Navigation Bar Refactor

The original navbar did not follow semantic standards or a non‑repetitive HTML structure. It was revised so that all navigation links are direct descendants of the <nav> element.

HTML

<nav class="navigation">
  <div class="logo">
    [Image: LovedIn logo]
  </div>

  <div id="nav-links-container">
    <a href="#features">Features</a>
    <a href="stories.html">Stories</a>
    <a href="login.html">Sign In</a>
    <a href="index.html#get-started">Get Started</a>
  </div>
</nav>

CSS

.navigation {
  max-width: 1144px;
  margin: 0 auto var(--spacing-3xl);
  background: var(--color-secondary-bg);
  border-radius: var(--radius-full);
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-md);
}

#nav-links-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-3xl);
}

Project Reflection

Overall, this was a very interesting project for me. I learned a lot about collaboration with Git and GitHub, as well as standards for writing semantic HTML and building structured design systems with CSS.

Collaboration did not come without challenges—particularly around maintaining a standardized approach to implementing features and pages due to differing perspectives among team members. We overcame these hurdles through clear, concise discussions and regular meetings, ensuring that each week’s requirements were well‑communicated and understood.

Future Improvements (v2.0)

• Enhanced semantics – further refine HTML for better meaning.
• SEO optimization – improve metadata, headings, and content hierarchy.
• Accessibility – audit and address ARIA roles, focus management, and color contrast.

Acknowledgements

• Oluchi Okwuosa – GitHub collaborator
• Sophia Ahuoyiza – GitHub contributor (issue submissions and feedback)

You can view their version of this case study here:
Link to case study.