Day 18: The Missing Button

The Problem I Didn’t See

Here’s a confession: I’ve been testing my own site for weeks, clicking through stories, checking layouts, tweaking styles. And I completely missed something obvious.

The “Start Your Journey” button was at the bottom of the page.

Not “below the fold.” Not “after some content.” At the very bottom. After the entire story introduction, all the feature descriptions, the MBTI explanation… hidden at the end like a footnote.

If you didn’t scroll all the way down, you’d think there was no way to actually play the story.

Face-palm moment.

Three Fixes That Should Have Been Obvious

1. Code Blocks Were Unreadable

My blog posts have code examples. Those code blocks had light-colored syntax highlighting… on a white background.

Literally unreadable unless you highlighted the text.

The fix: Dark theme for code blocks. Simple. Should have been there from day one.

.content-wrapper :global(pre) {
  background: #2d2d2d;  /* Dark background */
  color: #f8f8f2;       /* Light text */
}

Now you can actually read the code. Revolutionary concept.

2. English and Korean Pages Looked Different

The English story introduction pages had this beautiful header:

  • Cover image
  • Gradient background
  • Genre tags
  • Author info

The Korean pages? Plain text. No header. No cover image. Nothing.

Same content, completely different experience depending on your language.

The fix: Copy the entire header design to Korean pages. Localize the text (“저” for author suffix, “원작 출판: X년” for publication year). Make them identical.

3. The Missing Button

Back to that “Start Your Journey” button buried at the bottom.

Here’s what I did:

  1. Added firstPage field to each novel’s metadata
  2. Created a prominent CTA button section right after the header
  3. Styled it to be impossible to miss:
    • Large (1.4rem font)
    • Gradient background
    • Uppercase text
    • Smooth hover animation
    • Positioned at the top where people actually look

Before: Scroll to the bottom, find a text link, maybe click it After: Giant glowing button right at the top saying “START YOUR JOURNEY →”

The difference in user experience is night and day.

Why This Matters

These aren’t feature additions. They’re removing friction.

Every second someone spends confused (“how do I start?”) or frustrated (“I can’t read this code”) is a second closer to them leaving.

Good UX isn’t about adding more. It’s about removing obstacles you didn’t know were there.

The Meta Problem

The scariest part? I didn’t notice these issues.

I’ve been using my own site for weeks. I know where everything is. I know the “Start” link is at the bottom because I put it there.

But new visitors don’t have that context. They land on the page and need to figure everything out in seconds.

This is why you need fresh eyes. This is why you test with real users. This is why building in public helps—someone will point out what you’re blind to.

Technical Details

For those implementing similar fixes:

Schema Update:

// src/content/config.ts
const novelSchema = z.object({
  // ... other fields
  firstPage: z.string().optional(), // Add this
});

Button Component:

<div class="cta-section">
  <div class="container">
    <a href={`/stories/${novel.data.titleId}/${novel.data.firstPage}`}
       class="cta-button">
      Start Your Journey →
    </a>
  </div>
</div>

Critical: If you’re using Astro content collections, adding new frontmatter fields requires updating the schema AND rebuilding. The field won’t be recognized until you do both.

Current Status

  • Live Stories: 3 (Jekyll & Hyde, Frankenstein, Pride & Prejudice)
  • UX Issues Fixed: 3 major ones today
  • Languages: English + Korean, now actually consistent
  • Visibility: Start buttons now impossible to miss

Tomorrow

Moving from polish to promotion. The site works, the UX is solid, the content is there.

Time to tell people about it.

Next up: Setting up social media presence and creating shareable content for Korean Gen Z on TikTok and Instagram.

Until tomorrow…

Progress: Day 18/100 Status: Platform polished, ready for marketing push Next: Social media strategy