Blog banner

Dermageddon - A not so case study

2025-06-04

A satirical skincare brand disguised as an e-commerce prototype. Built to expose, educate, and entertain with fake products, real danger, and glowing red flags.


What is Dermageddon?

Dermageddon is a satirical skincare parody brand that dives headfirst into the dangerous, unregulated mess of fake aesthetic clinics and sketchy beauty products. It uses dark humor, fake-but-real-feeling product mockups, and meme-coded storytelling to make people laugh and then immediately rethink everything they’ve ever bought from Instagram ads. This is not a real store, but it feels real, almost too real. With a homepage, product listings, fake checkout, and a vibe that screams “Skincare, but morally questionable,” this site plays like a fully functional e-comm prototype… until you start reading the labels. Think of it as the unhinged sibling of Mildly Medicated—but this time, it’s topical. Literally.


Project Duration

~3 weeks total Started on May 9, 2025, deployed on May 31. Built in between client work, skincare rants, and real-life horror stories. Fully designed, written, and developed solo from Figma mockups to frontend deployment.


Tech & Tools

Passed contrast and readability checks (WCAG). Fonts, colours, and layout were all tested intentionally—this may be a satire site, but it was built with real user experience in mind.


My Role

Basically: I was the unlicensed creative director of a fake clinic warning you not to trust fake clinics.


Brand Guideline (Yes, Really)

Dermageddon includes a full internal brand guideline, covering:

Even though the brand is fake, the design system is fully real—built to behave like a functioning skincare startup. Because if I’m going to parody the industry, I might as well out-design half of it.


Project Planning (no joke, fr)

Dermageddon wasn’t just a creative experiment, it was a fully planned brand build disguised as satire. Every part of it was structured like a real startup launch:





The Entry Lore

After I finished building my first web project, Mildly Medicated, I felt something I hadn’t in a long time: reward. control. creation. It was like discovering a new sedative, except instead of a prescription, it was frontend. And it hit better than anything I was actually chugging.


I got addicted.


So the next question was:

What’s next?

While playing Stardew Valley (bless ConcernedApe forever), I had a sudden thought:

What if I made skincare products… but the ingredients were stuff like void salmon roe, radioactive node, and magma geode? Funny, yes, but also a perfect metaphor.


Because real skincare? Sometimes it’s worse than fiction. Companies hide dangerous ingredients behind pretty packaging and overpromised miracles. People who don’t know better get hurt. And the brands say, “Oops. It’s safe!” Then vanish.


So I leaned into that rage.


I started outlining the Dermageddon concept:


It pulled from everything:


This wasn’t just a project. This was revenge. This was worldbuilding through chemical warfare.



Inspiration Dump

Dermageddon didn’t come from just one place—it was a cocktail of rage, parody, space-core aesthetic, and personal experience. Here’s everything that went into the stew:


Layout & Visual Inspiration

The site’s structure and aesthetic weren’t copied, they were mused and merged from a curated visual archive. I pulled references from:


I took the best bits, studied the rhythm, spacing, and visual pacing—then rebuilt it through the lens of satire.

Not a copy. Not a template. Just a designer doing design sh*t and turning chaos into something that slaps.?


The Process

Once the concept locked in, I didn’t hold back. This wasn’t a “see what happens” project. I knew exactly what I wanted to make: A fake brand that looked real enough to sue. I started with idea dumping. Names, product types, fake side effects, red flag ingredients, tone of voice, and tagline direction.


I designed every product like it was a legit SKU:


Then I moved to Figma built out a full brand system from moodboard → lo-fi → hi-fi. Yes, even all the buttons and components had proper stages. At some point my mentor said,

“You’re planning too much.” But honestly? That planning saved my sanity when I started coding.


I remembered my past sins with responsiveness (see: Mildly Medicated), so this time I designed with breakpoints in mind from the start. I thought about every screen size. How it’d shrink. How it’d squish.


I used dev plugins to simulate different viewports and let me just say: shoutout to whoever made those. you saved me. Every layout section was built with intentional flow, even in its compressed state. It’s responsive not by accident, but by actual design. And since my previous project had the load time of a dying star, this time I paid attention to performance too:


I built the entire frontend using Vue 3 components, with custom CSS modules and scoped styling. No UI libraries. No Tailwind. Just structured Vue + raw CSS logic. No templates. No libraries. Just me, VS Code, and deeply targeted skincare rage.


Everything came together smoothly…

but there’s a big “awwwwweee” hidden at the end.

(You’ll see it when you reach the fake checkout.)


When CSS Gaslights You and Vue Just Watches

Everything was smooth… until it wasn’t. Turns out, designing bento grid layouts in Figma is fun—until you have to code it. Suddenly I was knee-deep in a nesting nest wrapped inside a wrapper that’s wrapped in a container that’s wrapped in a div with zero mercy. I kept screaming “WHO IS THE DESIGNER???”


and my evil inner voice just whispered back:

“You. You are the designer.”


Then came the fonts. On desktop, everything looked ✨ perfect ✨. Then I opened my laptop and got slapped in the face by Times New Roman and rogue Helvetica. Turns out I installed the fonts locally, and my CSS was broken. Classic vanilla-to-framework transition pain—everything just slightly different enough to make you cry.


And the pièce de résistance? My dynamic product grid—just… didn’t show up.


No errors. Just… blank.


I blamed Vue’s documentation (and also maybe my own neurospicy brain). But plot twist: after rereading the docs before bed, I magically understood it while dreaming.


Woke up. Fixed the logic. It worked. I gasped. Dev brain go brrrr.


Pretty, Parodic, but People-Friendly

I don’t know if I set my bar too high or just casually force myself beyond my limit. When I first told my mentor, “I wanna make a fake e-commerce,” he said,

“Then study Amazon. Study Adidas.”


But like… does that feel like me? Of course not.


Sure, that route would’ve been faster and cleaner. But I’m not here to make something sterile or soulless. I’m a visual storyteller, I want people to feel something when they scroll. A laugh. A “wtf, this is not real.” Or that surreal moment of “why does this feel more real than real brands??”


So I kept asking: can I? should I? is this too much?


Answer: yeah. it was. and I did it anyway.


I built the full site journey: product page → add to cart → checkout → payment method → confirmation. None of it gets saved (no backend, no storage), but it feels real. like a one-way mirror into a fictional shopping universe. And that illusion was fully intentional.


Even the smallest details were done with care. I remembered my mentor saying my previous site was “too heavy,” so I optimized every image, compressed them all to stay under 200kb, but still made it look like you’re opening Dior Beauty or flipping Vogue.


Why?


Because satire doesn’t mean sloppy. Because “danger belongs in a lab, not on your skin.” And if this silly fake store makes someone stop, laugh, and think even for a second — that’s exactly what I wanted.


From Localhost to Emotional Hostage

Everything passed final tests. My ClickUp board—To Do, WIP, Debug, all moved into the Polished column. (And no, I’m not using Jira. I’m not a masochist or a corpo dev. I just want pretty things.) I checked every box, every line, spacing, padding, responsiveness… and thought: Is this it? Hell yeah. It is. Let’s release it to the wild. As usual, it was 3AM when I deployed, DNS setup, connected to Vercel, hit deploy. Sent it to my mentor. Sent it to my friends. Posted it on Instagram. Showed my mum. Then I did what any emotionally-attached dev would do: opened the site on every device I owned and just stared at how beautifully it squished and shrank on each screen. My mum said it looked too good to be fake. She laughed at Dr. Ahn’s name because she instantly got the reference. Friends said it was sick. Some asked when I’m dropping the next one. Others were just stunned at how I keep making these weird little worlds. My mentor gave me a well-deserved pat. And me? I patted my own back and whispered: Next one’s gonna be shining, shimmering, splendid.





If you’re here at the bottom, I see you.
You’re not alone. Also, maybe go drink water..
Either way, thank you for reading!!

→ click here if you trust no skincare ad
home