NewJeans Album Website

Creative Front-End Project

case study • 4 min read

New Jeans Album Website is a personal + creative front-end project built entirely from scratch.

link to website ⭢

Overview

A Digital Album

As a fan of the KPop girl group NewJeans, I created a fan experience that visually captured their fresh Y2K aesthetic while feeling interactive.

The concept is centered around transforming each song into a web space, and blends lyrics, visuals, and motion to reflect the group’s unique digital persona.

My goal was to design an immersive site that felt personal and collectible, almost like flipping through a modern-day digital album booklet.

Process

Ideation, Prototyping + Interaction, Usability Testing, Developing

UX/ UI Designer/Researcher + Web Developer

My Role

Figma, Adobe CC, HTML/CSS/JS, Git

Tools

6 weeks

Duration

Mar - May 2023

Table of Contents

01 Research

Brainstorming

Studying Visual Language

Before starting the design, I explored how to translate NewJeans’ Y2K-inspired identity into an interactive web experience that felt both nostalgic and fresh. I studied their visual language across album art, social media, and videos + drew inspiration from their playful iconography and minimalist yet expressive layouts.

Visual Foundation

I also selected photos of the group and custom icons to better the visual consistency and applied a soft blue overlay across all elements.

This stage established the emotional and visual foundation that guided the lo-fi prototype phase.

Design System

To reflect that tone, I curated a typographic system combining Future Bugler Soft Bold, JetBrains Mono, and Inter to balance NewJeans’ bubbly personality with clarity.

The color palette captured their “retro meets digital” aesthetic.

02 Lo-Fi Prototype

Defining Clarity

Strategy

My lo-fi prototype focused on defining the visual direction and overall ‘vibe.’

Key Elements

  • Integrating the lyrics as the central storytelling component

  • Experimenting with iconography (megaphone, cookie, bunny, sad face) that corresponded to each song

  • Establishing a clean monochromatic blue palette to emphasize consistency

Goal

This phase emphasized mood-setting rather than precision.

03 User Testing

Think-Aloud Interviews

Process

I shared the lo-fi prototype with two peers who represented typical NewJeans fans and asked about the general flow and visual concept.

Key Insights

04 Hi-Fi Prototype

Refining

Strategy

The hi-fi prototype built on what worked and refined what didn’t.

Key Elements

I kept the strongest visual elements while introducing:

  • Photo integrations of the group

  • Carousel interactions

  • An About Page that contextualized the group and their identity

Result

This iteration merged NewJeans’ visual branding and interactivity/usability.

05 Technicals

Building From Scratch

Process

  • Implemented Materialize CSS and W3Schools libraries for structure and interactivity

  • Developed responsive layouts and hover animations to make the experience dynamic across devices

  • Used custom JavaScript for smooth transitions to ensure the interface stayed fluid

Result

This process gave me firsthand experience of merging visual design and front-end implementation.

link to website ⭢

06 Reflection

From Designer to Developer

This was my second coding project ever, and it was the first time I truly saw my designs come to life through my own code. Merging visual design and front-end development gave me a deeper appreciation for how small implementation details (spacing, responsiveness, motion) shape the overall user experience.

Working hands-on with HTML, CSS, and JavaScript allowed me to step into the mindset of a developer and understand the technical realities behind design decisions. It helped me hone one of the most valuable skills in UX: communicating effectively with developers. I learned how to think of design systems and code syntax as parts of the same creative process.