Onomatopoeia Project

“How do we verbalize sounds across languages?”

—Duration: 3 months
—Scope: Creative Coding, Web Design, Illustration
—Tools: JavaScript, HTML & CSS, Figma, Procreate.
—Collaborators: Andrea Manrique, Thư Ngô Vũ, Hannah He, Hiếu Trần, Quỳnh Anh Nguyễn, Mai Phương Nguyễn

Onomatopoeia Project is an interactive educational website that explores sound vocabularies across languages through lively illustrations, sounds, and interactivity.

Growing up, I thought of onomatopoeias as magical—while they take the form of a word, they're at the same time the songs of all things. However, later on,  I found them overlooked in my own English education. Inspired by this, I collaborated with translators to make learning onomatopoeias a joyful, multilingual experience—one that's bring words to life! 

—Try out Onomatopoeia Project here!

A cicada and translations of its sound
A duck and translations of its sound

Process

Initial Sketches & Experiments

In my the beginning stage, I sketched to visualize how my website would look like and function. This led me to the realization that I could not have created all the contents alone—and so Onomatopoeia Project became a collaborative one. I started reaching out to 6 translators of multiple languages, chat about my ideas, and created a database together.

Data Organization

We gathered data with a spreadsheet. The file was then converted into a JSON format that's linked to the website. Every change in this online spreadsheet will go live on the main website.

Experiment 1
Speech to Text Tool
I needed a tool that can detect what the user is saying, since I want the website to be totally about sounds. It had be precise enough to detect the list of words I wanted like to include.
↓
After experimenting with a few different tools, I ended up choosing P5.js' speech recognition tool.
Experiment 2
Hosting a Website
The project is an educational one, hence I wanted people other than myself to be able to access and use it. This is a new thing to someone who had only hosted locally like myself.
↓
I tried Codesandbox at first, then switched to Github for easier usage.
Experiment 3
Styling elements
In order to make the project more engaging, I’d need  to add styling elements to the website. Before this project, I had been practicing both JS and CSS, but never tried to combine them.
↓
This turned out to be much more straightforward than I thought!

Technical Prototype

The first draft was programmed with a very vague idea of what the visuals would look like. Its main purpose was to wrap my head around the technical challenges that I needed solve in order to create a fully functional website with my not-so-great coding skills.

Visual Prototype

A Figma Prototype was made to further explore visual elements of the website without having to worry about coding limitations.

Illustrations

I approached the illustrations in this project with a more kid-friendly style, making it more engaging as an educational tool.

↑
*

Onomatopoeia Project

“How do we verbalize sounds across languages?”

—Duration: 3 months
‍—Scope: Creative Coding, Web Design, Illustration
‍—Tools: JavaScript, HTML & CSS, Figma, Procreate.
‍—Collaborators: Andrea Manrique, Thư Ngô Vũ, Hannah He, Hiếu Trần, Quỳnh Anh Nguyễn, Mai Phương Nguyễn

Onomatopoeia Project is an interactive educational website that explores sound vocabularies across languages through lively illustrations, sounds, and interactivity.

Growing up, I thought of onomatopoeias as magical—while they take the form of a word, they're at the same time the songs of all things. However, later on,  I found them overlooked in my own English education. Inspired by this, I collaborated with translators to make learning onomatopoeias a joyful, multilingual experience—one that's bring words to life!

—Try out Onomatopoeia Project here!

A storm and translations of its soundA cicada and translations of its soundA duck and translations of its sound

Process

Initial Sketches & Experiments

In my the beginning stage, I sketched to visualize how my website would look like and function. This led me to the realization that I could not have created all the contents alone—and so Onomatopoeia Project became a collaborative one. I started reaching out to 6 translators of multiple languages, chat about my ideas, and created a database together.

Data Organization

We gathered data with a spreadsheet. The file was then converted into a JSON format that's linked to the website. Every change in this online spreadsheet will go live on the main website.

Technical Prototype

The first draft was programmed with a very vague idea of what the visuals would look like. Its main purpose was to wrap my head around the technical challenges that I needed solve in order to create a fully functional website with my not-so-great coding skills.

Visual Prototype

A Figma Prototype was made to further explore visual elements of the website without having to worry about coding limitations.

Illustrations

I approached the illustrations in this project with a more kid-friendly style, making it more engaging as an educational tool.

@2025 Lucie Tran
•
Onomatopoeia Project
“How do we verbalize sounds across languages?”

—Duration: 3 months
‍—Scope: Creative Coding, Web Design, Illustration
‍—Tools: JavaScript, HTML & CSS, Figma, Procreate.
‍—Collaborators: Andrea Manrique, Thư Ngô Vũ, Hannah He, Hiếu Trần, Quỳnh Anh Nguyễn, Mai Phương Nguyễn

Onomatopoeia Project is an interactive educational website that explores sound vocabularies across languages through lively illustrations, sounds, and interactivity.

Growing up, I thought of onomatopoeias as magical—while they take the form of a word, they're at the same time the songs of all things. However, later on,  I found them overlooked in my own English education. Inspired by this, I collaborated with translators to make learning onomatopoeias a joyful, multilingual experience—one that's bring words to life!

—Try out Onomatopoeia Project here!

A cicada and translations of its soundA duck and translations of its sound
Process
Initial Sketches & Experiments

In my the beginning stage, I sketched to visualize how my website would look like and function. This led me to the realization that I could not have created all the contents alone—and so Onomatopoeia Project became a collaborative one.

I started reaching out to 6 translators of multiple languages, chat about my ideas, and created a database together.

Data Organization

We gathered data with a spreadsheet. The file was then converted into a JSON format that's linked to the website. Every change in this online spreadsheet will go live on the main website.

Technical Prototype

The first draft was programmed with a very vague idea of what the visuals would look like. Its main purpose was to wrap my head around the technical challenges that I needed solve in order to create a fully functional website with my not-so-great coding skills.

Visual Prototype

A Figma Prototype was made to further explore visual elements of the website without having to worry about coding limitations.

Illustrations

I approached the illustrations in this project with a more kid-friendly style, making it more engaging as an educational tool.

@2025 Lucie Tran
•
Onomatopoeia Project
“How do we verbalize sounds across languages?”

—Duration: 3 months
‍—Scope: Creative Coding, Web Design, Illustration
‍—Tools: JavaScript, HTML & CSS, Figma, Procreate.
‍—Collaborators: Andrea Manrique, Thư Ngô Vũ, Hannah He, Hiếu Trần, Quỳnh Anh Nguyễn, Mai Phương Nguyễn

Onomatopoeia Project is an interactive educational website that explores sound vocabularies across languages through lively illustrations, sounds, and interactivity.

Growing up, I thought of onomatopoeias as magical—while they take the form of a word, they're at the same time the songs of all things. However, later on,  I found them overlooked in my own English education. Inspired by this, I collaborated with translators to make learning onomatopoeias a joyful, multilingual experience—one that's bring words to life!

—Try out Onomatopoeia Project here!

A cicada and translations of its soundA duck and translations of its sound
Process
Initial Sketches & Experiments

In my the beginning stage, I sketched to visualize how my website would look like and function. This led me to the realization that I could not have created all the contents alone—and so Onomatopoeia Project became a collaborative one. I started reaching out to 6 translators of multiple languages, chat about my ideas, and created a database together.

Data Organization

We gathered data with a spreadsheet. The file was then converted into a JSON format that's linked to the website. Every change in this online spreadsheet will go live on the main website.

Technical Prototype

The first draft was programmed loosely so I could understand how the code works.The first draft was programmed with a very vague idea of what the visuals would look like. Its main purpose was to wrap my head around the technical challenges that I needed solve in order to create a fully functional website with my not-so-great coding skills.

Visual Prototype

A Figma Prototype was made to further explore visual elements of the website without having to worry about coding limitations.

Illustrations

I approached the illustrations in this project with a more kid-friendly style, making it more engaging as an educational tool.

@2025 Lucie Tran