UI Deep Dive: One Day of Making LaKinh Feel Human
Today was one of those sessions where you start with one small fix and end up rebuilding three different things. No new features. No engine changes. Just a full day of making the UI feel like something a real person would actually want to use.
Here's what happened.
## The Problem With "More Information"
LaKinh already had a lot of data. A 12-house chart. A simple interpretation section. A section showing which stars are influencing your current life period — major cycle, minor cycle, annual overlay.
The problem: it was all just... there. Dumped on screen. No hierarchy. No guidance.
A user opening the app for the first time would scroll through a wall of star names, numbers, and Vietnamese astrology terms they've never seen before. Overwhelming. Not helpful.
So today was about fixing that.
## What Actually Changed
### 1. "Influential Stars" — From Wall to Collapsible Panel
Before: three expanded sections sitting below the chart. Always visible. Always loud.
After: one unified box with a gold border, collapsed by default. Tap to expand each period — Major Cycle, Minor Cycle, Annual Overlay — separately.
The visual language now matches the "Simple Interpretation" section above it. Same border radius, same collapse behavior, same implied hierarchy. Things that are secondary look secondary.
### 2. A Docs System Built Into the Chart
This one started as a separate tab. I built a full documentation screen — three articles explaining how star placement works, the difference between Nam Phái and Trung Châu Phái traditions, and a guide on choosing between Lunar Calendar and Solar Terms methods.
Then I realized: a separate tab means users have to go looking for it. Most won't.
So I moved it inline. Right at the bottom of the chart screen. An expandable section, gold border, two lines of subtitle text explaining what's inside. Contextual. Present when needed. Hidden when not.
### 3. The Animated Arrows
This is the part I'm most proud of — and also the simplest technically.
Three gold chevrons sit above the docs button. They animate in sequence: first arrow fades in and drifts down, then the second, then the third. Then they all fade out. Then repeat.
The effect is a gentle visual pulse pointing downward. "There's something below. Keep scrolling."
React Native's Animated API handles it — a looping Animated.sequence that staggers three values with timing and delay. Each arrow also has a textShadowRadius glow effect for that warm candlelight look against the dark background.
When the user opens the docs section, the arrows stop. No longer needed.
### 4. The Solar Terms Toggle — Wording Fix
Small but important. The toggle that switches between Lunar Calendar and Solar Terms calculation methods now reads:
- >Off: "An sao theo âm lịch chuẩn — truyền thống" (Traditional lunar calendar)
- >On: "An sao theo chu kỳ mặt trời — ít phổ biến hơn" (Solar cycle — less common)
"Less common" is honest. About 70-80% of users won't need this. But for people born right at the boundary of a lunar month, it can change their entire chart. The tooltip is now accurate about that tradeoff.
## Then I Looked at the Competition
At the end of the session, I spent some time seriously analyzing AlTuVi — the biggest Vietnamese astrology app right now.
What I found was humbling and clarifying at the same time.
Where they're winning: AI-generated interpretations that are long, emotional, and deeply personal. A coin-based monetization system that converts well. Real-time social proof (showing masked email addresses of recent purchases in a toast notification — simple but effective). A daily horoscope blog driving SEO traffic. A radar chart visualizing the 12 houses.
Where LaKinh has ground: Multi-school support (Trung Châu Phái vs. Nam Phái with different calculation methods). The Solar Terms toggle. A verified calculation engine. A terminal aesthetic that feels more serious than the orange-and-white consumer look.
The honest gap: LaKinh has zero monetization. Zero AI interpretation. No radar chart. AlTuVi is earning money every day while LaKinh is still technically pre-revenue.
The next three priorities are clear: monetization first, AI interpretation second, radar chart third.
## What This Session Taught Me
There's a version of building where you chase features. More stars, more calculations, more complexity. LaKinh was drifting toward that.
Today was the opposite. Everything removed or collapsed. Every interaction made quieter. The UI now has a point of view: the chart is primary, everything else is secondary, and we'll guide you to what you need.
That's what a product feels like when it respects the user's attention.
Next session: monetization architecture + AI interpretation prototype.
## Một Ngày Làm UI: Khi Sản Phẩm Bắt Đầu Biết Mình Là Gì
Hôm nay là một trong những session mà tôi bắt đầu với một thay đổi nhỏ và kết thúc bằng việc làm lại ba thứ khác nhau. Không có tính năng mới. Không có thay đổi engine. Chỉ là một ngày làm cho UI cảm thấy như thứ người thật muốn dùng.
## Vấn Đề Của "Nhiều Thông Tin"
LaKinh đã có nhiều dữ liệu. Lá số 12 cung. Phần luận giải đơn giản. Phần hiển thị các sao ảnh hưởng trong giai đoạn hiện tại — đại hạn, tiểu hạn, lưu niên.
Vấn đề: tất cả chỉ đang... ở đó. Đổ lên màn hình. Không có thứ bậc. Không có hướng dẫn.
Một người dùng mở app lần đầu sẽ cuộn qua một bức tường tên sao, con số, và thuật ngữ tử vi chưa từng gặp. Quá tải. Không hữu ích.
## Những Gì Đã Thay Đổi
### 1. "Sao Ảnh Hưởng" — Từ Tường Thành Panel Gập
Trước: ba section mở rộng nằm dưới lá số. Luôn hiển thị. Luôn ầm ĩ.
Sau: một box duy nhất viền vàng, mặc định ẩn. Tap để mở từng giai đoạn — Đại Hạn, Tiểu Hạn, Lưu Niên — riêng lẻ.
Ngôn ngữ hình ảnh giờ khớp với phần "Luận Giải Đơn Giản" bên trên. Cùng border radius, cùng hành vi thu gọn, cùng thứ bậc rõ ràng. Thứ gì thứ yếu trông có vẻ thứ yếu.
### 2. Hệ Thống Tài Liệu Tích Hợp Trong Lá Số
Bắt đầu như một tab riêng. Tôi đã build một màn hình tài liệu đầy đủ — ba bài giải thích cách an sao, sự khác biệt giữa Nam Phái và Trung Châu Phái, hướng dẫn chọn giữa Âm Lịch và Tiết Khí.
Rồi nhận ra: tab riêng đồng nghĩa người dùng phải đi tìm. Hầu hết sẽ không làm vậy.
Nên tôi chuyển vào inline. Ngay cuối trang lá số. Một section có thể mở rộng, viền vàng, hai dòng subtitle giải thích nội dung bên trong. Đúng ngữ cảnh. Có mặt khi cần. Ẩn khi không cần.
### 3. Những Mũi Tên Nhấp Nháy
Đây là phần tôi tự hào nhất — và cũng đơn giản nhất về mặt kỹ thuật.
Ba mũi tên vàng nằm phía trên nút tài liệu. Chúng animate theo trình tự: mũi tên đầu sáng dần và trôi xuống, rồi mũi tên hai, rồi mũi tên ba. Sau đó tất cả mờ dần. Rồi lặp lại.
Hiệu ứng là một nhịp đập hình ảnh nhẹ nhàng chỉ xuống dưới. Có gì đó bên dưới. Tiếp tục cuộn.
React Native's Animated API xử lý nó — một Animated.sequence lặp vô hạn với timing và delay so le ba giá trị. Mỗi mũi tên còn có textShadowRadius tạo hiệu ứng phát sáng vàng ấm trên nền tối.
Khi người dùng mở phần tài liệu, mũi tên dừng lại. Không còn cần thiết nữa.
## Rồi Tôi Nhìn Vào Đối Thủ
Cuối session, tôi dành thời gian phân tích nghiêm túc AlTuVi — app tử vi lớn nhất Việt Nam hiện tại.
Những gì tôi thấy vừa làm tôi khiêm tốn hơn, vừa làm rõ hướng đi.
Họ đang thắng ở: Luận giải bằng AI dài, cảm xúc, và mang tính cá nhân sâu sắc. Hệ thống xu (coin) monetize hiệu quả. Social proof realtime (hiển thị email ẩn danh của người vừa mua — đơn giản nhưng hiệu quả). Blog tử vi hàng ngày kéo traffic SEO. Biểu đồ radar trực quan hóa 12 cung.
LaKinh có lợi thế thực sự: Hỗ trợ đa trường phái (Trung Châu Phái vs. Nam Phái với các phương pháp tính toán khác nhau). Toggle Tiết Khí. Engine đã được kiểm chứng. Giao diện terminal tối nghiêm túc hơn giao diện cam-trắng consumer của đối thủ.
Gap thật sự: LaKinh chưa có monetization. Chưa có luận giải AI. Chưa có biểu đồ radar. AlTuVi kiếm tiền mỗi ngày trong khi LaKinh vẫn ở giai đoạn pre-revenue.
Ba ưu tiên tiếp theo đã rõ: monetization trước, luận giải AI sau, biểu đồ radar thứ ba.
## Bài Học Từ Session Này
Có một kiểu build là chạy theo tính năng. Thêm sao, thêm tính toán, thêm độ phức tạp. LaKinh đang trôi về hướng đó.
Hôm nay là ngược lại. Mọi thứ được thu gọn hoặc ẩn đi. Mỗi tương tác trở nên im lặng hơn. UI giờ có quan điểm rõ ràng: lá số là trung tâm, mọi thứ khác là thứ yếu, và chúng tôi sẽ dẫn bạn đến thứ bạn cần.
Đó là cảm giác của một sản phẩm biết tôn trọng sự chú ý của người dùng.
Session tiếp theo: kiến trúc monetization + prototype luận giải AI.