Back to portfolio

Case Study

FragIndex

A public fragrance clone discovery platform with scalable SEO pages, comparison tools, community voting systems, and fragrance discovery UX.

Tech Stack

Next.js React TypeScript Tailwind CSS Supabase PostgreSQL Vercel

The Problem

People searching for fragrance clones are usually trying to answer very specific questions: Is there a cheaper alternative? What does this fragrance smell like? How close is this clone to the original? Which clone is actually worth buying?

A lot of fragrance clone information online is scattered across Reddit threads, YouTube comments, forums, short-form videos, and outdated database pages. Users often have to piece together notes, accords, performance, similarity, pricing, and community opinions from multiple sources before making a decision. FragIndex was built to make that discovery process clearer by organizing fragrance and clone information into structured, searchable, SEO-friendly pages.

The Goal

The goal of FragIndex was to create a scalable fragrance discovery platform focused on clones, alternatives, and fragrance research. Instead of building a simple blog or static database, I wanted FragIndex to work as both a search-focused content platform that could rank for fragrance-related queries, and a product-style discovery tool that helps users compare fragrances, understand scent profiles, find clones, and vote for fragrances.

The long-term goal is to turn FragIndex into a traffic-generating asset with multiple monetization paths, including affiliate links, comparison pages, clone rankings, and fragrance discovery tools.

My Role

  • Planned and built the platform
  • Designed the frontend and user experience
  • Structured the fragrance database and page templates
  • Built dynamic fragrance, brand, search, and comparison pages
  • Implemented community voting and rating features
  • Worked on SEO architecture, metadata, indexing, and internal linking
  • Made product, UX, performance, and monetization decisions

Target User

The primary user is someone researching fragrances, clones, or cheaper alternatives before buying. This includes:

  • People looking for affordable fragrance clones
  • Users comparing designer, niche, and clone fragrances
  • Fragrance beginners trying to understand notes and accords
  • Search users landing from Google with specific questions
  • Returning users who want to rate, vote, or discover similar scents

Main Workflow

  1. 1

    A user searches for a fragrance, clone, brand, or note.

  2. 2

    They land on a fragrance page, brand page, search page, or comparison page.

  3. 3

    They review the fragrance name, brand, description, notes, and accords.

  4. 4

    They see the best available clone or alternative when applicable.

  5. 5

    They review community ratings for scent, projection, longevity, season, time of day, occasion, and similarity.

  6. 6

    They can vote in individual rating categories.

  7. 7

    They can use internal links, related fragrances, clone pages, and discovery paths to keep browsing.

  8. 8

    If they are ready to buy, they can use outbound retailer links.

Key Features

FragIndex includes structured fragrance pages with notes, accords, descriptions, clone recommendations, brand information, ratings, and community voting.

Dynamic fragrance pages
Brand pages
Search and discovery pages
Clone and alternative information
Notes and accords sections
Community voting by category
Star ratings and similarity voting
Season, occasion, time of day, longevity, and projection ratings
SEO metadata and sitemap
Retailer and buy links
Internal linking between related pages
Responsive mobile-first design
Performance and caching for scale

Product Decisions

Fragrance Detail Page

The fragrance detail page is the core experience of FragIndex. I designed it around a clear information hierarchy: brand, fragrance name, overall rating, description, best clone, scent profile, and community ratings. Someone arriving from Google should immediately understand what the fragrance is, what it smells like, and whether there is a good clone available. A returning user should be able to vote, compare, and continue browsing without friction. The page separates information into focused sections — notes and accords explain the scent profile, while community voting covers scent quality, projection, longevity, season, occasion, time of day, and similarity.

FragIndex fragrance detail page screenshot

Search and Discovery Page

The search and discovery page gives users a way to actively explore FragIndex instead of only landing on individual pages from Google. I wanted this page to make FragIndex feel like a usable product, not just a collection of SEO pages. Users can search for fragrances, browse results, and move into detailed fragrance pages from one central place. This page also creates a bridge between SEO traffic and product engagement — a user may arrive on one fragrance page, but the search and discovery experience gives them a reason to keep exploring the platform.

FragIndex search and discovery page screenshot

Brand Page

Brand pages help organize FragIndex around one of the most common ways users think about fragrances: by brand. Many users do not search for only one fragrance — they may want to browse Dior fragrances, compare Yves Saint Laurent releases, or find clones of popular niche brands. I built brand pages to create a more structured browsing experience and support internal linking across the site. From a product perspective, brand pages make the platform feel deeper and more organized. From an SEO perspective, they create scalable, indexable pages that target brand-level search intent and pass users into individual fragrance pages.

FragIndex brand page screenshot

Clone Ranking and Comparison Pages

Clone ranking and comparison pages are one of the highest-value page types for FragIndex because they match strong user intent. When someone searches for the best clone of a specific fragrance or compares two alternatives, they are usually much closer to making a buying decision. Instead of forcing users to jump between multiple fragrance pages, these pages bring the most important decision-making information into one place: similarity, performance, use case, and community feedback. This page type also creates a natural monetization path — users looking for clone recommendations often have purchase intent, so buy links and affiliate opportunities can be placed in a way that supports the research process rather than interrupting it.

FragIndex clone comparison page screenshot

UI and Visual Design

FragIndex needed to display a lot of information without making the page feel overwhelming. Each fragrance page includes brand information, notes, accords, ratings, clone recommendations, community votes, and buy links, so the UI had to organize that information into clear sections that users could scan quickly.

I designed the interface around a clean, card-based layout with strong spacing, readable typography, and separate content blocks for each major decision point. For the fragrance pages, I focused on making the most important information visible early: the fragrance name, brand, overall rating, short description, and best clone. Supporting details like notes, accords, performance ratings, season, occasion, and similarity were grouped into their own sections so users could dig deeper without losing the main context.

I also wanted the voting UI to feel approachable. Instead of hiding ratings behind a complicated form, each category was designed as its own interaction. The overall UI direction was inspired by modern discovery platforms like Letterboxd and Backloggd, where the product feels clean, community-driven, and easy to browse while still supporting a large amount of structured data.

Community Voting

I chose to separate voting into individual categories instead of using one generic rating system. A fragrance can smell great but have weak longevity. A clone can be affordable but not very similar to the original. Because of that, FragIndex lets users vote on categories like scent, longevity, projection, occasion, season, time of day, and similarity separately.

This makes the data more useful than a single average rating.

SEO-Driven Page Architecture

FragIndex was built around searchable, indexable pages rather than only app-style navigation. The platform uses dynamic routes for fragrance and brand pages, structured metadata, sitemap support, and crawlable content so that users can discover pages through Google.

This matters because many fragrance searches are long-tail queries, such as notes, clones, comparisons, and "smells like" searches. The platform is designed to grow through programmatic SEO and internal linking rather than relying only on social media or paid traffic.

Discovery and Internal Linking

I wanted FragIndex to feel more like a discovery platform than a static database. Internal linking is important because users rarely stop after researching one fragrance. They may want to compare similar scents, browse a brand, find a clone, or discover fragrances with similar notes.

The long-term product direction is to make FragIndex easier to browse through related fragrances, best clone rankings, note-based discovery, trending pages, and comparison pages.

Buy Links and Monetization

FragIndex includes outbound retailer links so users can move from research to purchase. This creates a natural monetization path through affiliate links or retailer partnerships. The key product decision is that monetization should support the research experience instead of interrupting it.

The goal is not to overload pages with ads immediately, but to place helpful purchase options where users already have buying intent.

Technical Implementation

Frontend

Next.js, React, TypeScript, Tailwind CSS

Framework

Next.js App Router

Database

Supabase / PostgreSQL

Auth

Supabase anonymous auth for voting

Hosting

Vercel

Styling

Tailwind CSS and shadcn-style components

SEO

Dynamic metadata, sitemap, robots rules, crawlable public pages

Performance

ISR, caching, server-rendered data, optimized image handling

Voting

Supabase-backed voting with optimistic updates and aggregate caching

Challenges

One of the biggest challenges was balancing SEO with product UX. FragIndex needed pages that were crawlable, structured, and useful for Google, but the site also needed to feel like a real discovery product rather than a thin SEO page generator.

Another challenge was designing the voting system. A simple star rating would have been easier, but fragrance decisions depend on multiple traits. I had to think through how users should rate categories independently while keeping the interface simple enough that contributing felt lightweight.

Performance and scale were also important challenges. Since the site has dynamic pages, voting data, images, and aggregate ratings, I had to think through caching, ISR, API usage, and how to avoid unnecessary database calls as traffic grew.

Lessons Learned

Building FragIndex taught me that SEO products need more than pages. They need useful page templates, strong internal linking, fast performance, and a reason for users to stay after they land from search.

I also learned that community data is only valuable when it is structured around real user decisions. For fragrance research, one generic rating is less useful than separate signals for scent, performance, season, occasion, and similarity.

Another major lesson was that traffic growth and monetization require different layers. Ranking pages can bring users in, but the product still needs discovery paths, trust signals, buy links, and comparison features to turn traffic into long-term value.

Current Status

FragIndex is currently live and receiving organic traffic. It has started to show early signs of search demand, with users landing on fragrance-related pages and browsing the platform. The platform is still being actively improved, especially around internal linking, clone rankings, page quality, mobile UX, performance, and monetization. Adding new fragrances to the database is also an ongoing task.

Next Steps

  • Improve internal linking between fragrance, brand, clone, and discovery pages
  • Add more comparison-focused content
  • Improve mobile layouts
  • Expand fragrance and clone data quality
  • Explore affiliate monetization
  • Add stronger discovery tools for notes, accords, brands, and similar scents
  • Continue improving performance and crawlability