top of page

Web Design: Html & AI-Assisted Web Design & Prototyping

01 Tomorrow, Maybe   Used Claude to translate UX concepts into a responsive website prototype and iterated interactions through AI-assisted coding.

Web design: Tomorrow, Maybe​

Project Overview

Tomorrow, Maybe is a web-based communication platform that encourages users to slow down and reflect before communicating. Instead of sending instant messages, users write a letter, personal goal, or reminder to themselves. Each letter remains locked for 24 hours before it becomes available to read. Once unlocked, the letter appears in both the sender's Private archive and the community Public feed. Other users can react using emojis, while the author can leave personal reflections or comments on their own letter, creating an ongoing record of thoughts and progress. To inspire daily writing, the platform features a Today's Prompt section. Every day, all users receive the same writing prompt, and an optional dice button provides additional prompts for those who need inspiration. By limiting users to one letter per day, FutureMail encourages thoughtful writing instead of constant posting, making each message feel more intentional.

截屏2026-07-19 上午2.40.28.png
Features
  • Write one personal letter, goal, or reminder each day.

  • Letters remain locked for 24 hours before they can be opened.

  • A Private section stores all of your own letters.

  • A Public section displays unlocked letters from the community.

  • Users can react to public letters with emoji reactions.

  • Authors can add personal reflections to their own letters after they are unlocked.

  • Today's Prompt provides a shared daily writing topic.

  • A dice button generates additional prompts for inspiration.

Design Purpose

Tomorrow, Maybe explores how time changes communication.

Today's social media encourages instant responses and endless scrolling. In contrast, Tomorrow, Maybe introduces waiting as part of the experience. By delaying access to each letter, users have time to reflect on what they wrote, while the moment of opening becomes more meaningful.

The project also encourages people to set small goals or write reminders to themselves. Writing only one letter per day helps users focus on a single intention rather than producing constant content. Over time, these letters become a personal archive of thoughts, goals, and growth.

02 Can Chaos   Designed and developed an interactive website using Lovable, leveraging AI-assisted workflows for rapid prototyping and refinement.

Web design: Can Chaos​

Concept

Can Chaos is an experimental interactive website inspired by MSCHF and Health-Ade Kombucha. Instead of creating a traditional product website, I wanted to build something playful, unexpected, and a little absurd. The project explores how an everyday consumer product can become an interactive experience through humor, storytelling, and random interactions.

The website encourages users to explore rather than simply browse. Every section introduces a different interaction, making the experience feel less like shopping and more like playing with the product.

截屏2026-07-19 上午3.40.48.png
User Experience

Section 01 — Build Your Own Can

The experience begins with the kombucha can broken into individual packaging elements, including the logo, flavor label, illustrations, and other graphics. Users are free to drag these pieces around the screen and interact with them in any way they like. As they scroll down, all of the scattered elements slowly move together and assemble into a complete Health-Ade Kombucha can. This interaction reveals how the packaging is constructed while creating a playful transition from chaos to order.

Section 02 — Real Stories Behind the Drink

Once the can is fully assembled, users can hover over it to discover three floating story cards. These stories are based on real Reddit discussions from Health-Ade Kombucha customers. The stories describe unexpected experiences, including bottles exploding because of carbonation, surprisingly strong vinegar flavors, and digestive reactions caused by probiotics. Instead of using traditional marketing copy, this section presents authentic user experiences to create a more honest and entertaining interaction.

Section 03 — The Website Becomes a Random Store

As users continue scrolling, the experience suddenly changes.

The website transforms into a strange online shop selling all kinds of cans—not just kombucha cans, but empty cans, damaged cans, and completely random containers. Users can click on the products, view larger images, and even add them to the shopping cart. This unexpected transition reflects the playful and unpredictable design language inspired by MSCHF. Rather than encouraging users to buy something, the store exists simply as a humorous space for exploration.

03 Little Relief   Used Claude to translate UX concepts into a responsive website prototype and iterated interactions through AI-assisted coding.

Web design: Little Relief​

Project Overview

Little Relief is an interactive web experience that transforms everyday stress-relief habits into playful digital interactions. Rather than focusing on productivity or goals, the website invites users to pause, explore, and enjoy ten tactile micro-experiences inspired by the small actions people often use to unwind—popping bubble wrap, listening to ambient sounds, shredding paper, drawing in sand, or simply pressing buttons.

The project explores how a website can become a calming, playful space instead of another source of information or distraction. Through sound, motion, and satisfying interactions, Little Relief encourages users to slow down and experience moments of relief through curiosity and touch.

Design Concept

The visual language is inspired by editorial web design and interactive digital art. Each room features one oversized interactive object, bold color blocking, expressive typography, and minimal interface elements. Although every room has its own personality and color palette, they all follow a consistent design system centered around one principle:

One Room. One Object. One Feeling.

Rather than explaining how to interact, each room presents a short contextual message inspired by everyday life, encouraging users to interpret and explore the experience in their own way.

Features

01. Bubble Pop

Pop a giant sheet of bubble wrap with satisfying sound effects. Special bubbles occasionally play musical notes, turning repetitive interaction into a playful rhythm.

02. Crumple

Stretch, twist, and crumple a translucent plastic sheet. Continued interaction gradually transforms it into a randomly generated origami figure.

03. Sound Room

Explore the sounds of different materials by tapping glass, ceramic, metal, wood, and other everyday objects arranged on a workbench.

04. Windows

Open windows to different environments—including rainy streets, forests, cafés, campfires, and beaches—and create personalized ambient soundscapes.

05. Smash

Pick up everyday objects and throw them against a wall, breaking them into satisfying fragments with material-specific sound effects.

06. Clean

Wipe away dirt from a foggy mirror or window, revealing a clean reflective surface through slow, satisfying gestures.

07. Switch

Interact with oversized switches, buttons, knobs, and levers, each providing unique mechanical sounds and tactile feedback.

08. Shredder

Feed different types of paper into an oversized paper shredder and enjoy realistic shredding animations and audio.

09. Sand

Rake patterns through a digital Zen sand garden accompanied by subtle sand textures and calming ambient sound.

10. Stretch

Pull, stretch, and release a soft translucent object that squashes and bounces naturally with responsive physics-inspired animation.

截屏2026-08-11 上午11.23.13.png
截屏2026-08-11 上午11.23.49.png
截屏2026-08-11 上午11.23.29.png
截屏2026-08-11 上午11.24.03.png
截屏2026-08-11 上午11.23.35.png
截屏2026-08-11 上午11.23.07.png
截屏2026-08-11 上午11.24.11.png
截屏2026-08-11 上午11.24.17.png
截屏2026-08-11 上午11.24.26.png
截屏2026-08-11 上午11.24.50.png

Figma project: Digital Space: The Infinite Lobby

The Infinity Lobby, Figma

The Infinite Lobby

​

Project Statement: The internet is not simply a space we observe. It is also a space that observes us.

​

The Infinite Lobby is an interactive prototype that explores waiting as a digital place rather than a temporary state.

Inspired by livestream waiting rooms, online queues, and loading screens, the project reimagines these familiar interfaces as a shared environment where nothing truly begins. Visitors enter expecting an event, yet remain suspended in an endless pre-start condition. As time stretches and the interface behaves unpredictably, the lobby gradually transforms from a passive tool into an active presence.

The project explores the reciprocal relationship between users and digital systems. Every action—clicking, waiting, refreshing, or typing is observed by the interface, which selectively responds, delays, or remains silent. Rather than functioning as a neutral platform, the lobby suggests that digital spaces actively shape our emotions, expectations, and behavior through both feedback and silence. Instead of asking users to accomplish a task, The Infinite Lobby invites them to experience anticipation itself. Live chat, timers, system messages, and interface glitches become the architecture of the place, revealing how collective waiting can evolve into a shared emotional and social experience.

Ultimately, the project asks: What happens when waiting becomes the destination rather than the transition?
And how do digital spaces shape our sense of agency by deciding when or if to respond?

Zine Design: Hidden Layers of The Desert

Zine design: Hidden Layers of The Desert

Internship: Product packaging design

High-end product packaging and brochures for Liaoning Sea cucumber products, Product Design Intern

未标题-3_画板 1.png

Matte Icon Design

  • LinkedIn
  • Facebook
  • Instagram

© 2026 Yuxuan Du. All rights reserved.

bottom of page