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 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. During this stage I had realized I could not have created all the contents alone—and so Onomatopoeia Project became a collaborative one. I started reading 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!

First Draft & Challenges

The first draft was programmed loosely so I could understand how the code works—a map to technical challenges that I needed to solve to complete the project.

Challenge 1
Designing the Interface
I had a hard time trying to program the website without having a detailed version of what I wanted for the look of the interface.
↓
Took a step back and make a prototype before actually coding anything.
Challenge 2
Speech Recognition Tool
The tool was fairly accurate in a quiet environment, but doesn't work really well in a public setting where there's a lot of background noise.
↓
Reprogram the website so it recognizes designated nouns in a sequence instead of separated words.
Challenge 3
Gathering Output Material
It was tough for me to translate all the onomatopoeias into different languages, since such words have very little documentation on the net.
↓
Opened up the opportunity to make this a collaborative project! I ended up working with 7 translators to gather the onomatopoeias.

Figma Prototype

I then made a Figma Prototype to further explore visual elements of the website without having to worry about coding limitations.

Illustrations

I also took this project as a chance to practice my illustration skills. For this project I approached the illustrations with a more kid-friendly style, making it more engaging as an educational tool.

#onomatopoeia_pj

*

Onomatopoeia Project

“How do we verbalize sounds across languages?”

When I was learning to write and read in Vietnamese, I found an interesting view in onomatopoeias: the trees say “rì rào”, the heart beats “thình thịch”, and hundreds of words that describe the sounds of things. During my journey with my second language, I was taught very few onomatopoeias. They were neglected, as the teachers said, “not worth memorizing compared to the academic vocabulary”.

And so, it wasn’t until much later that I started to teach myself onomatopoeias, to verbalize the sounds around me.

That experience inspired The Onomatopoeia Project, a collaborative project that aims to help users explore the sound vocabularies in different languages, while keeping it a joyful experience with interactivity, lively illustrations, and of course, sounds!

—Try out Onomatopoeia Project here!

A typographic websiteA 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 made a few sketches to visualize how my website would look like and function. It was important I knew what I wanted, since I was not totally proficient at coding, these sketches helped me figure out what experiments I would need to take in order to program the whole website on my own.

First Draft & Challenges

The first draft was programmed loosely so I could understand how the code works. The first draft was programmed loosely so I could understand how the code works.

Figma Prototype

The Figma Prototype helped understanding how I should construct HTML divs efficiently. Though the final version turned out to be a bit different, the prototype was also the main visual guide of the project.

Illustrations

The very first drafts of illustrations were done roughly to test how the type would fit in relation to the illustrations.

Data Organization

Since it was a collaborative project with the participation of many translators, I gathered my 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.

This method of data organization helped the website run smoother (and freed me from somewhat 300 lines of code.)

#onomatopoeia_pj
@2024 Lucie Tran
A logo
*
Onomatopoeia Project
“How do we verbalize sounds across languages?”

When I was learning to write and read in Vietnamese, I found an interesting view in onomatopoeias: the trees say “rì rào”, the heart beats “thình thịch”, and hundreds of words that describe the sounds of things. During my journey with my second language, I was taught very few onomatopoeias. They were neglected, as the teachers said, “not worth memorizing compared to the academic vocabulary”.

And so, it wasn’t until much later that I started to teach myself onomatopoeias, to verbalize the sounds around me.

That experience inspired The Onomatopoeia Project, a website that aims to help users explore the sound vocabularies in different languages, while keeping it a joyful experience with interactivity, lively illustrations, and of course, sounds!

—Try out Onomatopoeia Project here!

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

In my the beginning stage, I made a few sketches to visualize how my website would look like and function.

It was important I knew what I wanted, since I was not totally proficient at coding, these sketches helped me figure out what experiments I would need to take in order to program the whole website on my own.

First Draft & Challenges

The first draft was programmed loosely so I could understand how the code works.

It also became a tool to map out the challenges that I needed to solve to complete the project.

Figma Prototype

The Figma Prototype helped understanding how I should construct HTML divs efficiently.

Though the final version turned out to be a bit different, the prototype was also the main visual guide of the project.

Illustrations

The very first drafts of illustrations were done roughly to test how the type would fit in relation to the illustrations.

Data Organization

Since it was a collaborative project with the participation of many translators, I gathered my 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.

This method of data organization helped the website run smoother (and freed me from somewhat 300 lines of code.)

#onomatopoeia_pj
@2024 Lucie Tran
Onomatopoeia Project
“How do we verbalize sounds across languages?”

When I was learning to write and read in Vietnamese, I found an interesting view in onomatopoeias: the trees say “rì rào”, the heart beats “thình thịch”, and hundreds of words that describe the sounds of things. During my journey with my second language, I was taught very few onomatopoeias. They were neglected, as the teachers said, “not worth memorizing compared to the academic vocabulary”.

And so, it wasn’t until much later that I started to teach myself onomatopoeias, to verbalize the sounds around me.

That experience inspired The Onomatopoeia Project, a collaborative project that aims to help users explore the sound vocabularies in different languages, while keeping it a joyful experience with interactivity, lively illustrations, and of course, sounds!

—Try out Onomatopoeia Project here!

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

In my the beginning stage, I made a few sketches to visualize how my website would look like and function. It was important I knew what I wanted, since I was not totally proficient at coding, these sketches helped me figure out what experiments I would need to take in order to program the whole website on my own.

First Draft & Challenges

The first draft was programmed loosely so I could understand how the code works.

It also became a tool to map out the challenges that I needed to solve to complete the project.

Figma Prototype

The Figma Prototype helped understanding how I should construct HTML divs efficiently.

Though the final version turned out to be a bit different, the prototype was also the main visual guide of the project.

Illustrations

The very first drafts of illustrations were done roughly to test how the type would fit in relation to the illustrations.

Data Organization

Since it was a collaborative project, I gathered my 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.

This method of data organization helped the website run smoother (and freed me from somewhat 300 lines of code.)

#onomatopoeia_pj
@2024 Lucie Tran
*