02 / EDUCATION PRODUCT CASE STUDY← TẤT CẢ DỰ ÁN

EDUCATION APP · UX/UI & ILLUSTRATION

ABeeCi.

Một trải nghiệm học tập biến thời gian sử dụng thiết bị thành động lực hoàn thành bài học, đồng thời trao cho phụ huynh công cụ kiểm soát rõ ràng.

VAI TRÒUX/UI Designer
Illustrator

PHẠM VIProduct UI
Visual Assets

NỀN TẢNGMobile App

Các màn hình học tập và nhân vật ABEECI — ABEECI · LEARN · PLAY · GROW

ONE PRODUCT / TWO CRAFTS

Một sản phẩm.
Hai vai trò sáng tạo.

CHƯƠNG 01UX/UI
DESIGN

Luồng sử dụng, cấu trúc nội dung và hệ thống giao diện.

↓CHƯƠNG 02ILLUSTRATION
ART

Nhân vật, key visual và ngôn ngữ hình ảnh giáo dục.

↓

01 / UX/UI DESIGN

STRUCTURE BEFORE DECORATION

Learning should feel
easy to enter.

Phần UX/UI được xây dựng quanh hai nhóm người dùng: trẻ em cần một hành trình đơn giản, nhiều phản hồi trực quan; phụ huynh cần quyền kiểm soát, tiến độ và điều kiện mở khóa minh bạch.

01CHILD FIRST

Điều hướng bằng môn học, màu sắc và hình khối dễ nhận biết.

02VISIBLE PROGRESS

Module, điểm số và trạng thái học tập luôn được thể hiện rõ.

03PARENT CONTROL

Ứng dụng chỉ được mở khi mục tiêu học tập đã hoàn thành.

Màn hình onboarding của ABEECI — 01 / ONBOARDINGBắt đầu nhẹ nhàng

Màn hình chính chọn môn học của ABEECI — 02 / HOMEChọn môn học

Màn hình danh sách khóa học và bài học của ABEECI — 03 / COURSESCác khóa học

Màn hình đăng ký tài khoản ABEECI — 04 / REGISTERTạo tài khoản

05 / CHILD PROFILEHồ sơ trẻ em

Màn hình quản lý dành cho phụ huynh của ABEECI — 06 / PARENTDành cho phụ huynh

Màn hình khóa ứng dụng của ABEECI — 07 / APP LOCKĐiều kiện mở khóa

Màn hình homepage dài của ABEECI — 08 / HOMEPAGEThế giới học tập

Màn hình làm bài trong buổi học của ABEECI — 09 / LEARNINGTrong buổi học

Màn hình chúc mừng khi hoàn thành bài học của ABEECI — 10 / COMPLETEHoàn thành bài học

COMPONENT SYSTEM

Navigation, states
& reusable parts.

Các màn hình được hỗ trợ bởi hệ component dùng lại: navigation có trạng thái active, hệ icon, màu trạng thái và những thành phần giúp mở rộng nhiều môn học.

LEARNING GAME UI / 06 SCREENS

Lessons become
small adventures.

Sáu màn hình mở rộng hệ thống ABEECI từ giao diện sản phẩm sang trải nghiệm học tương tác, kết hợp bản đồ, nhiệm vụ, phản hồi và phần thưởng trong cùng một hành trình trực quan.

Màn hình trải nghiệm học tập ABEECI 1 — 01 / LEARNING EXPERIENCE

Màn hình trải nghiệm học tập ABEECI 2 — 02 / LEARNING EXPERIENCE

Màn hình trải nghiệm học tập ABEECI 3 — 03 / LEARNING EXPERIENCE

Màn hình trải nghiệm học tập ABEECI 4 — 04 / LEARNING EXPERIENCE

Màn hình trải nghiệm học tập ABEECI 5 — 05 / LEARNING EXPERIENCE

Màn hình trải nghiệm học tập ABEECI 6 — 06 / LEARNING EXPERIENCE

UX OUTCOME

Trẻ em nhìn thấy việc cần làm.
Phụ huynh nhìn thấy quyền kiểm soát.

02 / ILLUSTRATION ART

CHARACTER · ICON · KEY VISUAL

A world built
from honey.

Bộ tài sản hình ảnh được xây dựng riêng cho ABEECI, gồm background, nhân vật và các thành phần minh họa. Các asset được thiết kế với khả năng tái sử dụng trong giao diện và các nội dung khác của sản phẩm.

Background tạo bối cảnh cho từng chủ đề học.
Nhân vật mang biểu cảm và cá tính riêng.
Element được tách rời để tái sử dụng trong UI.

01 / BACKGROUNDS04 WORLDS

Background chủ đề Barry của ABEECI — 01 / BARRY

Background chủ đề Dixie của ABEECI — 02 / DIXIE

Background chủ đề Colin của ABEECI — 03 / COLIN

Background chủ đề Andie của ABEECI — 04 / ANDIE

02 / CHARACTERS04 CHARACTERS / 02 AGES

Nhân vật Barry phiên bản nhỏ của ABEECI — **BARRY**BẢN NHỎ

Nhân vật Barry phiên bản lớn của ABEECI — **BARRY**BẢN LỚN

Nhân vật Dixie phiên bản nhỏ của ABEECI — **DIXIE**BẢN NHỎ

Nhân vật Dixie phiên bản lớn của ABEECI — **DIXIE**BẢN LỚN

Nhân vật Colin phiên bản nhỏ của ABEECI — **COLIN**BẢN NHỎ

Nhân vật Colin phiên bản lớn của ABEECI — **COLIN**BẢN LỚN

Nhân vật Andie phiên bản nhỏ của ABEECI — **ANDIE**BẢN NHỎ

Nhân vật Andie phiên bản lớn của ABEECI — **ANDIE**BẢN LỚN

03 / LEARNING ASSET LIBRARY50 REUSABLE ASSETS

04 / ELEMENTS

Small assets,
clear meanings.

Icon và vật phẩm được vẽ như những asset độc lập, giữ silhouette rõ ở kích thước nhỏ và có thể kết hợp linh hoạt trong nhiều trạng thái giao diện.

THE BRIDGE

UI provides the path.
Art gives it a personality.

Hai vai trò không tách rời nhau: hệ thống giao diện tạo ra cấu trúc sử dụng, còn illustration giúp mỗi trạng thái trở nên dễ hiểu và đáng nhớ hơn với trẻ em.

OUTCOME / 03

Education
with character.

ABEECI được xây dựng như một nền tảng học tập với trải nghiệm hình ảnh nhất quán, từ giao diện sản phẩm đến các nội dung truyền thông. Trong dự án này, tôi tham gia phát triển cả phần UX/UI và hệ thống hình ảnh cho sản phẩm.

Các luồng có cấu trúc rõ ràng.
Visual system dùng được xuyên suốt nhiều môn học và module.
UX/UI và illustration cùng phục vụ một mục tiêu giáo dục.

ABeeCi.

Một sản phẩm.Hai vai trò sáng tạo.

Learning should feeleasy to enter.

Navigation, states& reusable parts.

Lessons becomesmall adventures.

A world builtfrom honey.

Small assets,clear meanings.

UI provides the path.Art gives it a personality.

Educationwith character.