Creolio Translator

把一款翻譯學習工具,從童趣遊戲風的介面,轉型成適合成人專業使用者的沉穩介面,同時保有高辨識度。

關於 Creolio

Creolio 是一款「以翻譯為核心」的輔助學習工具。跟一般靠每日連續打卡、童趣獎勵機制的 App 不同,Creolio 想成為成人學習者的實用型工具——讓行程忙碌的專業人士,也能隨手拿起來就用,體驗沉穩不費力。

遇到的問題

市面上的語言學習 App 大多走可愛童趣風,對成熟的使用者來說反而是種負擔。客戶要的是一個好上手、隨時能拿出來用的工具,而不是像在玩遊戲。挑戰在於:品牌本身有「叢林探索」的主題,要怎麼保留這種探索感,同時做出乾淨、有質感、不幼稚也不會太嚴肅的專業介面。

視覺層級與插畫系統

從最初單純的功能邏輯草稿,逐步發展成一套視覺成熟、專業的介面設計。這個過程也累積了一套 Figma 元件庫設計系統,以及一系列在設計過程中畫的插畫素材。

Figma Component Library: A systematic design infrastructure built with auto-layout precision for seamless scaling and maintenance.

解決方案:功能性 UX 架構

我們對整體 UX 做了一次深層的重整。捨棄圓潤、「泡泡感」的按鈕,改用收斂的圓角維持專業質感。我們也設計了一套「先思考再顯示」的機制——翻譯結果一開始會先模糊處理,讓使用者先自己回想答案,再點開查看,幫助記憶留存。每一個介面元素都對應到明確的功能目的:高對比橘色用於主要操作,中性灰色用於次要資訊,確保畫面上沒有多餘、干擾閱讀的元素。

技術規格

— UX 架構:功能邏輯圖解與使用者流程精簡

— 認知型介面設計:高對比視覺層級與成熟配色系統

— 設計系統建置:建立一套 Figma 元件庫,方便後續擴充與維護

— 互動策略:「先思考再顯示」機制,幫助使用者留住記憶

Cognitive Reveal Protocol: A psychology-driven interaction designed to trigger active memory recall and deepen user engagement.

成效

— 專業調性到位:拿掉了多餘的裝飾與雜亂的視覺元素,讓整個介面看起來就像專為認真學習的成年人設計的工具,而不是給孩子玩的遊戲

— 開發就緒:交付結構化的 Figma 元件系統,確保交接與 RWD 響應式實作能無縫進行

— 市場反饋正面:新創展現場的訪客反饋正向,稱讚介面「溫暖又吸睛」,精準抓住了品牌想傳達的冒險嚮往感,同時保留了探索主題該有的溫度與專業質感

Visual Hierarchy Mapping: A strategic transition from low-fidelity logic to a high-cognition, professional-grade interface.
Strategic Color Theory: Mapping cognitive focus through a high-contrast, mature visual hierarchy.
Cognitive Reveal Protocol: A psychology-driven interaction designed to trigger active memory recall and deepen user engagement.

「當 Tatiana 提出初版的介面架構時,完全就是我們心目中的樣子。她精準掌握了我們品牌探索主題的調性,卻不會讓它顯得幼稚。在我們的新創展會現場, 訪客的回饋非常好,稱讚整個設計溫暖又吸睛,完全抓住了我們想傳達的那種冒險嚮往感。與 Tatiana 合作就像真正的夥伴關係,她深度傾聽我們的需求,並精準交付了我們需要的成果。」

Jon Knebel
Creolio 創辦人

新創展現場

Creolio 在新創展上展出時的現場紀錄。

看看其他作品

三種服務類型及代表案例。

把零散的社群溝通,整理成高信任感的長照官方入口。

把「活動氛圍」轉譯成高對比、有張力的視覺系統。

把雜亂的商品目錄,重新梳理成邏輯清楚、質感低調的精品電商。

讓你的數位門面,配得上你的作品。

如果你也有一個雜亂、還沒被好好整理過的品牌或網站,讓我們一起把它整理清楚。