Skip to content
Williens Creative SpaceNguyễn Kim
CASE STUDY
UX RESEARCHMOBILE-FIRST COMMERCEDESIGN SYSTEM

Williens triển khai các nghiên cứu và khảo sát nhằm tái cấu trúc trải nghiệm e-commerce, kết nối nghiên cứu người dùng, kiến trúc thông tin, mobile-first design, design system và quy trình bàn giao sẵn sàng triển khai.

Giao diện thương mại điện tử Nguyễn Kim trên laptop
Giao diện thương mại điện tử Nguyễn Kim trên điện thoại

RESEARCH / HIỂU ĐIỂM NGHẼN

Niềm tin bắt đầu từ việc tìm đúng.

Research chỉ ra nơi trải nghiệm cần rõ hơn: tìm kiếm, giá và ưu đãi, giao nhận, chăm sóc sau mua.

CÁCH WILLIENS VẬN HÀNH

Mỗi bước để lại một
đầu ra có thể kiểm tra.

Chúng tôi áp dụng Agile UX để liên tục kiểm tra và hoàn thiện giải pháp qua research, user flow, UI, review và handoff. Phạm vi dự án không cung cấp căn cứ để mô tả quy trình này là Scrum thuần với backlog và sprint cố định.

Discover

Đọc hành vi và nhu cầu thực tế qua analytics, khảo sát và ý kiến stakeholder.
Đầu ra: Insight & chân dung khách hàng.

Define

Biến tín hiệu nghiên cứu thành thứ tự ưu tiên rõ ràng: journey, sitemap, task flow.
Đầu ra: Ưu tiên UX & kiến trúc thông tin.

Design

Phát triển UI mobile-first có thể mở rộng: wireframe, responsive UI, component.
Đầu ra: Mobile-first UI & responsive system.

Deliver

Ghi lại rationale và chuẩn bị triển khai: guideline, prototype, checklist.
Đầu ra: Tài liệu sẵn sàng cho triển khai.

RESEARCH OPERATIONS

Kết hợp phân tích định lượng
và AI có kiểm soát.

Công nghệ giúp đội ngũ xử lý khối lượng thông tin nhanh hơn, còn kết luận UX vẫn được đối chiếu với dữ liệu, bối cảnh vận hành và review của chuyên gia.

Phân tích dữ liệu

VSPSS và Python hỗ trợ làm sạch dữ liệu, kiểm tra phân khúc và đọc các mẫu phản hồi có hệ thống.

IBM SPSSPython

Tiếp tục cuộn đến xem thêm

Một commerce core, bốn cách trình bày đúng với cách khách ra quyết định.

Master template layout

Thay vì nhân bản PDP theo từng ngành hàng, Williens thiết kế một core commerce thống nhất với search, trust, price, stock, CTA và service, có thể bật/tắt block theo bản chất sản phẩm.

Visual-heavy

Với điện thoại, TV và laptop cao cấp, hình ảnh và trải nghiệm sản phẩm cần dẫn dắt quyết định.

  • Media lớn
  • Feature story
  • So sánh phiên bản

Tech-heavy

Với điện thoại, TV và laptop cao cấp, hình ảnh và trải nghiệm sản phẩm cần dẫn dắt quyết định.

  • Spec hierarchy
  • Bộ lọc
  • Technical compare

Appliance-focus

Thiết bị điện máy lớn cần bối cảnh triển khai thực tế: kích thước, lắp đặt và giao nhận.

  • Kích thước
  • Lắp đặt
  • Fulfillment địa phương

Standard

Thiết bị điện máy lớn cần bối cảnh triển khai thực tế: kích thước, lắp đặt và giao nhận.

  • Thông tin cốt lõi
  • Giá rõ
  • CTA nhanh

Commerce lifecycle

Một hành trình.
Ba khoảnh khắc cần niềm tin.

Research chỉ ra nơi trải nghiệm cần rõ hơn: tìm kiếm, giá và ưu đãi, giao nhận, chăm sóc sau mua.

  1. Tìm và cân nhắc
  2. Mua và nhận
  3. Trở lại và được hỗ trợ

Tìm đúng
trước khi chọn.

Search, category, PLP và PDP được tiếp nối thành một trải nghiệm thông tin nhất quán.

NK _ Design ◫Color
NameValue

fill / neutral

light…r/greyscale/neutral/200
default…r/greyscale/neutral/500
heavy…r/greyscale/neutral/950
inverted…or/greyscale/neutral/50
white…r/greyscale/elevation/0
black…eyscale/elevation/1000
blend…cale/neutral/500-blend▦　40%
disabled…e/neutral/500-disabled▦　40%

fill / success

light…lor/semantic/green/100
default…lor/semantic/green/500
heavy…lor/semantic/green/950
invertedcolor/semantic/green/50
blend…entic/green/500-blend▦　40%

fill / warning

light…or/semantic/yellow/100
default…or/semantic/yellow/500
heavy…or/semantic/yellow/950
invertedcolor/semantic/yellow/50
blend…entic/yellow/500-blend▦　40%

fill / error

lightcolor/semantic/red/100
defaultcolor/semantic/red/500
heavycolor/semantic/red/950
invertedcolor/semantic/red/50
blend…ementic/red/500-blend▦　40%

fill / info

lightcolor/semantic/blue/100
defaultcolor/semantic/blue/500
heavycolor/semantic/blue/950
invertedcolor/semantic/blue/50
blend…mentic/blue/500-blend▦　40%

fill / brand / primary

lightcolor/brand/primary/200
defaultcolor/brand/primary/600
heavycolor/brand/primary/900
inverted…r/greyscale/elevation/0
blend…and/primary/600-blend▦　40%
gradient-leadingcolor/brand/primary/600
gradient-trailingcolor/brand/primary/950

fill / brand / secondary

light…r/brand/secondary/100
default…r/brand/secondary/800
heavy…r/brand/secondary/950
inverted…r/greyscale/elevation/0
blend…/secondary/800-blend▦　40%

stroke / neutral

light…r/greyscale/neutral/200
default…r/greyscale/neutral/500
heavy…r/greyscale/neutral/950
inverted…or/greyscale/neutral/50
white…r/greyscale/elevation/0
black…eyscale/elevation/1000
blend…cale/neutral/500-blend▦　40%
disabled…e/neutral/500-disabled▦　40%

stroke / success

light…lor/semantic/green/100
default…lor/semantic/green/500
heavy…lor/semantic/green/950
inverted…lor/semantic/green/50
blend…green/500-blend▦　40%

stroke / warning

light…/semantic/yellow/100
default…/semantic/yellow/500
heavy…/semantic/yellow/900
inverted…/semantic/yellow/50
blend…yellow/500-blend▦　40%

stroke / error

light…/semantic/red/100
default…/semantic/red/500
heavy…/semantic/red/900
inverted…/semantic/red/50
blend…red/500-blend▦　40%

stroke / info

light…/semantic/blue/100
default…/semantic/blue/500
heavy…/semantic/blue/950
inverted…/semantic/blue/50
blend…blue/500-blend▦　40%

stroke / brand

light…/brand/primary/200
default…/brand/primary/600
heavy…/brand/primary/900
inverted…/greyscale/elevation/0
blend…primary/600-blend▦　40%

text / neutral

light…/greyscale/neutral/400
default…/greyscale/neutral/700
heavy…/greyscale/neutral/900
inverted…/greyscale/neutral/50
white…/greyscale/elevation/0
black…/greyscale/elevation/1000

text / success

light…/semantic/green/300
default…/semantic/green/700
heavy…/semantic/green/900
inverted…/semantic/green/50
blend…green/700-blend▦　40%

text / warning

light…/semantic/yellow/300
default…/semantic/yellow/800
heavy…/semantic/yellow/900
inverted…/semantic/yellow/50
blend…yellow/800-blend▦　40%

text / error

light…/semantic/red/300
default…/semantic/red/700
heavy…/semantic/red/900
inverted…/semantic/red/50
blend…red/700-blend▦　40%

text / info

light…/semantic/blue/300
default…/semantic/blue/700
heavy…/semantic/blue/900
inverted…/semantic/blue/50
blend…blue/700-blend▦　40%

text / brand

light…/brand/primary/300
default…/brand/primary/700
heavy…/brand/primary/900
inverted…/greyscale/elevation/0
blend…primary/700-blend▦　40%

icon / neutral

light…/greyscale/neutral/400
default…/greyscale/neutral/700
heavy…/greyscale/neutral/900
inverted…/greyscale/neutral/50
white…/greyscale/elevation/0
black…/greyscale/elevation/1000
blend…neutral/700-blend▦　40%
disabled…neutral/400-disabled▦　40%

icon / success

light…/semantic/green/100
default…/semantic/green/500
heavy…/semantic/green/950
inverted…/semantic/green/50
blend…green/500-blend▦　40%

Typeface

Maven Pro

Kiểu font sans-serif hiện đại, độ đọc cao và vẫn chắc chắn ở kích thước lớn. Heading đậm, cỡ lớn để thu hút; nội dung phụ dùng cỡ nhỏ hơn để đảm bảo rõ ràng và có cấu trúc. Cân bằng độ đậm và khoảng cách chữ tạo cảm giác chuyên nghiệp, hiện đại, đúng tinh thần thương hiệu.

RegularMediumSemiBoldBold

Design system

Chuẩn hoá Design System
để mở rộng trải nghiệm
một cách nhất quán.

Hệ thống design system được thiết kế tối ưu với 134 color token và 30 typography token làm nền cho toàn bộ giao diện, nhất quán từ trang chủ đến checkout.