Maleo AI Translator

Reason & Introduction

As a UI/UX designer, I often communicate with clients in English, but I'm not completely fluent. When discussing projects or receiving briefs, I found that tools like Google Translate often provided awkward, unnatural translations that didn't fully capture the context. This made it harder to communicate effectively & understand important details.

I then tried AI chat tools like GPT & Gemini, which understood context better but gave long explanations instead of direct translations, making things complicated.

I realized I needed a tool that understood context & gave natural translations without extra explanations, so I decided to create my own. This was not only to solve my problem but also to learn web development.

Building the Design

When I imagined how my translator should look, I didn't want the typical layout with just a text box & a button. Since I was already using AI chat tools like GPT & Gemini for translations, I thought—why not make it look like a chat interface?

So, instead of a regular translator design, I created it in a chat-style format. Users type text like they would in a messaging app, & the translation shows up in a separate chat bubble. This way, it feels more natural & easy to use. It also gets rid of unnecessary UI elements, leaving a simple, clean chat interface with message bubbles for both input & output.

Why I Chose a Chat UI

The main reasons I chose a chat-style UI instead of a typical translator layout were:

It looks modern & stylish. (This is just my personal opinion, but I like modern designs, & chat UIs feel more natural.)
It acts like a history feature. While it doesn't permanently save translations, I can scroll up to find & copy a previously translated sentence, which is very convenient.
It eliminates unnecessary steps. There's no need to press multiple buttons or manually clear text—just keep typing & translating.

Designing the Interface

For the design process, I went straight to Figma & created a simple mockup. I kept the interface clean, inspired by modern chat UIs like those of Gemini & GPT. with soft, rounded chat bubbles & a simple, distraction-free layout. The translated text stands out to make it easy to read, & I added a one-tap copy button because I often need to paste translations into emails or messages.

Once the design was done, the real challenge was turning it into a working app.

Turning the Design into Code

With my design ready, it was time to tackle the real challenge—building it into a working web app. As a UI/UX designer, I was familiar with creating interfaces, but I wasn't a developer. However, I had some basic knowledge of HTML, CSS, & JavaScript from my vocational school days, where I made simple projects like a basic web calculator. Even so, I had never worked on a fully functional web app before, so this was my first deep dive into web development.

Since I wanted this to be a web-based translator, I needed to pick the right technologies. After some research, I chose:

Astro.js - a modern frontend framework that helps build fast & optimized websites.
Gemini API - for AI-powered translations with better context understanding.
JavaScript - for managing interactions & API requests.

At first, I thought, "It's just a simple translator. How hard could it be?" But when I started coding, I faced several challenges.

I struggled to turn a static design into an interactive chat interface, learn Astro.js for handling components & routing, connect to the Gemini API for AI responses, & ensure translations were fast with minimal delay.

To overcome these issues, I studied documentation & tutorials, tested small features, sought help from a frontend developer friend, & used AI tools like v0.dev & Claude for debugging & code suggestions.

After a lot of trial & error, I managed to create a chat-based interface where user input & translations show up as chat bubbles. I linked it to the Gemini API for smart translations, got used to Astro.js for managing the frontend, added quick responses with smooth transitions, & included a one-tap copy button for easy access to the translated text.

This was my first real web development project, & even though it wasn't perfect, I finally had something that worked! The next step was to test it & make improvements based on real use.

Testing & Refinement

After getting the translator to work, I started using it in real conversations to see how well it performed. Since I built it mainly for myself, I didn't do formal usability tests, but using it every day helped me find areas to improve.

To deal with occasional slow loading speeds, I added a loading animation so the app wouldn't feel stuck & included a retry option in case the API request failed.

I made small UI improvements, like better text contrast for easier reading, more space between chat bubbles to prevent long translations from feeling cramped, & a clearer copy button for easier copying of translations.

Even though I made this mainly for myself, I shared it with a few friends, including my frontend developer friend who helped me before. He gave feedback on how to make it run faster & handle the API better.

One idea I got was to add a translation history feature instead of just scrolling back. I haven't done this yet, but I plan to think about it for future updates.

After using it many times, fixing small bugs, & making improvements, the translator became good enough for daily use. It wasn't perfect, but it was much better than before—a quick, chat-style translator that gave natural translations without extra explanations.

What I Learned from This Project

Building this translator wasn't just about fixing my problem—it was a big learning experience for me as a UI/UX designer getting into web development.

I learned that design & development are very connected. As a designer, I used to only think about making interfaces that look good & are easy to use. But when I started coding, I realized that technical limits can affect design choices. Some things that seemed easy in a design tool were actually quite hard to do in code.

I also learned that debugging is just part of the process. At first, I got frustrated when things didn't work, but over time, I got better at solving problems, reading error messages, & finding solutions. Asking my friend & using AI tools really helped. I realized that even experienced developers don't know everything—they just know how to find the answers.

Working with Astro.js & the Gemini API helped me understand modern web development tools better. I learned how APIs work, how to manage state in a chat-based UI, & how to improve performance for a better user experience.

Most importantly, this project showed me that learning by doing is the best way to grow. Instead of just watching tutorials, I built something real that I use every day. It boosted my confidence in my ability to not only design but also turn ideas into code.

This project may have started as a simple tool for me, but it became an important milestone in my journey as a designer learning web development. Honestly, I can't wait to build more.

If you want to try it, visit the translator link below. Please don't overuse it, as I'm using a free API.

An AI-based translator platform, built using AstroJS and Google Gemini AI.

Visit Website

How I Built a Successful AI Translator Web: A Personal Journey