Case Study - Velox TechCase Study - Velox Tech

Internal Website

A robust internal management ecosystem featuring Dashboard, KPI Tracking, Project Management, and HR modules, optimized 100% for desktop data-density. Hệ sinh thái quản trị nội bộ mạnh mẽ bao gồm Dashboard, Theo dõi KPI, Quản lý Dự án và Phân hệ Nhân sự, được tối ưu hóa 100% cho màn hình Desktop với mật độ dữ liệu cao.

The ChallengeBài toán đặt ra

Unifying Fragmented Internal OperationsHợp nhất vận hành nội bộ phân mảnh

Velox Tech faced severe operational bottlenecks as HR data, Project assignments, and KPI tracking were managed in siloed spreadsheets. The goal was to architect a unified Desktop-first Internal Web that could handle extreme data density without overwhelming the users (managers & executives). We applied core Cognitive Load Reduction principles to ensure fast decision-making across all modules. Velox Tech phải đối mặt với các nút thắt vận hành nghiêm trọng khi dữ liệu Nhân sự, Phân công Dự án và Theo dõi KPI bị quản lý rời rạc trên nhiều trang tính khác nhau. Mục tiêu là thiết kế một Hệ thống Nội bộ ưu tiên Desktop có khả năng xử lý mật độ dữ liệu khổng lồ mà không gây ngợp cho người dùng (Quản lý & Ban Giám đốc). Việc áp dụng các nguyên tắc Giảm tải Nhận thức (Cognitive Load Reduction) là yếu tố cốt lõi để đảm bảo tốc độ ra quyết định nhanh chóng.

System Logic & Data FlowLogic & Luồng dữ liệu hệ thống

Cross-Module I/O DependenciesI/O Dependencies Liên phân hệ

Following the BA Framework, mapping these dependencies guarantees that a new hire in HR seamlessly flows into Project Resource Allocation, and automatically reflects in the KPI Dashboards. From a UX perspective, this alignment eliminates redundant manual entries through Smart Auto-fill and dynamic Loading States. Theo BA Framework, việc map luồng dữ liệu đảm bảo rằng một nhân sự mới Onboard từ bộ phận HR sẽ lập tức có sẵn trong danh sách Phân bổ Nguồn lực Dự án, và cuối cùng tự động hiển thị trên Dashboard KPI. Dưới góc độ UX, sự đồng bộ này giúp loại bỏ hoàn toàn các thao tác nhập tay thừa thãi thông qua tính năng Smart Auto-fill và các Trạng thái Tải dữ liệu (Loading States) mượt mà.

1. HR Management1. HR Management (Tài nguyên Nhân sự)

System Input/Output (I/O): Recruitment & Onboarding data -> Verified Employee Profiles & Skillsets.Dữ liệu tuyển dụng & Onboarding -> Hồ sơ nhân viên & Bảng kỹ năng (Skillsets).
User Experience (UX) Action: Optimized for high-volume data entry. Implemented keyboard-first navigation and bulk-upload UI patterns to streamline the onboarding of hundreds of employees.Tối ưu cho thao tác nhập liệu số lượng lớn. Triển khai điều hướng ưu tiên bàn phím (Keyboard-first) và giao diện Bulk-upload để tăng tốc quá trình Onboard hàng trăm nhân sự.

2. Project Management2. Project Management (Quản lý Dự án)

System I/O: Task Assignment (using HR Profiles) -> Project Progress & Timesheets.Giao việc (dựa trên Hồ sơ HR) -> Tiến độ Dự án & Bảng chấm công (Timesheets).
UX/UI Action: Designed dense but scannable Kanban and Gantt views specifically for large Desktop screens. Utilized Empty States effectively when a project has no tasks, and Smart Auto-fill when assigning resources based on availability.Thiết kế bảng Kanban và Gantt mật độ dữ liệu cao nhưng dễ scan, tối ưu riêng cho màn hình Desktop lớn. Tận dụng Empty States khi dự án trống, và Smart Auto-fill khi gợi ý nhân sự dựa trên lịch trống.

3. KPI & Dashboard3. KPI & Dashboard (Báo cáo Tổng quan)

System I/O: Timesheets & Project Status -> Real-time KPI Charts & Profitability Reports.Tiến độ & Timesheets -> Biểu đồ KPI Real-time & Báo cáo Lợi nhuận.
UX/UI Action: Focused on Data Visualization clarity. When rendering heavy datasets, a Skeleton Loader replaces blank screens to manage system wait times. Actionable Insights are highlighted using purposeful color coding.Tập trung vào độ trực quan của Dữ liệu. Khi hệ thống xử lý data nặng, Skeleton Loader xuất hiện thay vì màn hình trắng đơ, giúp quản lý kỳ vọng thời gian chờ. Dữ liệu quan trọng được làm nổi bật bằng Color Coding có chủ đích.

%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ffffff', 'primaryBorderColor': '#1565d8', 'fontFamily': 'Manrope', 'fontSize': '14px' }, 'flowchart': { 'curve': 'step' }}}%% graph LR classDef inputNode fill:#e6f7ff,stroke:#0066cc,stroke-width:1.5px,color:#003366,rx:6px,ry:6px; classDef outputNode fill:#f9f0ff,stroke:#9d5bbf,stroke-width:1.5px,color:#4a1c5e,rx:6px,ry:6px; subgraph Box1 ["1. HR Management1. HR Management (Tuyển dụng & Nhân sự)"] direction TB HR_In("Input: Recruitment & OnboardingInput: Tuyển dụng & Onboarding mới"):::inputNode HR_Out("Output: Employee ProfilesOutput: Hồ sơ Nhân viên & Skillsets"):::outputNode HR_In -.->|"Business: Competency EvalNghiệp vụ: Xác thực Năng lực"| HR_Out end subgraph Box2 ["2. Project Management2. Project Management (Quản lý Vận hành)"] direction TB Proj_In("Input: Resource AssignmentInput: Lệnh phân công Nguồn lực (Assign Tasks)"):::inputNode Proj_Out("Output: Progress & TimesheetsOutput: Tiến độ Dự án & Timesheets"):::outputNode Proj_In -.->|"Business: Execution TrackingNghiệp vụ: Theo dõi Thực thi"| Proj_Out end subgraph Box3 ["3. KPI & Dashboard3. KPI & Dashboard (Báo cáo Lãnh đạo)"] direction TB Dash_In("Input: Workload DataInput: Dữ liệu Khối lượng công việc (Workload)"):::inputNode Dash_Out("Output: KPI ChartsOutput: Biểu đồ KPI & Phân tích Lợi nhuận"):::outputNode Dash_In -.->|"Business: Real-time SynthesisNghiệp vụ: Tổng hợp Dữ liệu Real-time"| Dash_Out end %% Main End-to-End Business Flow HR_Out ===>|"API Sync
(UX: Auto-fill Resource UI)API Sync
(UX: Auto-fill Resource UI)"| Proj_In Proj_Out ===>|"Data Stream
(UX: Skeleton Loader -> Data Viz)Data Stream
(UX: Skeleton Loader -> Data Viz)"| Dash_In style Box1 fill:#f8fbff,stroke:#0066cc,stroke-width:2px,stroke-dasharray: 5 5,rx:12px,ry:12px style Box2 fill:#f8fbff,stroke:#0066cc,stroke-width:2px,stroke-dasharray: 5 5,rx:12px,ry:12px style Box3 fill:#fff8fc,stroke:#9d5bbf,stroke-width:2px,stroke-dasharray: 5 5,rx:12px,ry:12px

Impact & TakeawaysKết quả & Bài học

Impact & Takeaways

The values delivered by the project and lessons learned after designing the Velox Tech Internal Web.Những giá trị dự án mang lại và bài học đúc kết được sau quá trình thiết kế Hệ thống Nội bộ Velox Tech.

Project ImpactDự án mang lại (Impact)

Operational UnityHợp nhất vận hành

Eliminated data silos by tightly coupling HR, Project, and KPI data, drastically reducing manual entry errors.Xóa bỏ tình trạng dữ liệu phân mảnh bằng cách liên kết chặt chẽ HR, Project và KPI, giảm triệt để sai sót khi nhập liệu thủ công.

Faster Decision MakingRa quyết định nhanh chóng

Real-time Dashboard provides executives with a holistic view of the company's performance at a glance.Dashboard thời gian thực giúp ban giám đốc có cái nhìn toàn cảnh về tình trạng công ty chỉ trong nháy mắt.

Enhanced ProductivityTăng năng suất

Smart Auto-fill and Skeleton Loaders minimize waiting times and streamline repetitive tasks for employees.Tính năng Smart Auto-fill và Skeleton Loaders giúp giảm thiểu thời gian chờ và tối ưu các thao tác lặp đi lặp lại của nhân viên.

Data IntegrityToàn vẹn dữ liệu

Seamless data flow across departments ensures that resource allocation is always based on up-to-date HR profiles.Luồng dữ liệu xuyên suốt qua các phòng ban đảm bảo việc phân bổ nguồn lực luôn dựa trên hồ sơ nhân sự mới nhất.

Key TakeawaysBài học rút ra (Takeaways)

1. Cognitive Load is Crucial for Internal Tools1. Giảm tải nhận thức là cốt lõi cho Internal Tools

Users of internal systems interact with dense data for 8 hours a day. The design must prioritize fast scannability and avoid visual clutter to prevent user fatigue. Practical value outweighs complex aesthetics.Người dùng hệ thống nội bộ phải làm việc với dữ liệu dày đặc 8 tiếng mỗi ngày. Thiết kế phải ưu tiên khả năng đọc lướt (scannability) và tránh các chi tiết rườm rà gây mỏi mắt. Giá trị thực tiễn quan trọng hơn tính thẩm mỹ phức tạp.

2. Cross-Module Data Flow Design2. Thiết kế luồng dữ liệu liên phân hệ

Drawing the UI without mapping the data dependencies is a recipe for disaster. Designing the architecture and ensuring data integrity between HR and Projects is the foundational step before any wireframing.Vẽ UI mà không map các phụ thuộc dữ liệu là một thảm họa. Thiết kế kiến trúc và đảm bảo tính toàn vẹn dữ liệu giữa HR và Dự án là bước nền tảng trước khi bắt tay vào wireframe.

3. Managing System Wait Times3. Quản lý thời gian chờ của hệ thống

When dealing with heavy KPI rendering, a blank loading screen increases user anxiety. Implementing Skeleton Loaders effectively communicates that the system is working, significantly improving perceived performance.Khi xử lý dữ liệu KPI nặng, màn hình trắng đơ sẽ làm tăng sự sốt ruột. Việc dùng Skeleton Loaders thông báo rõ hệ thống đang xử lý giúp cải thiện đáng kể cảm giác mượt mà (perceived performance).

Ready to explore more?Sẵn sàng khám phá thêm?

Return to the homepage to view my design process and other projects.Trở lại trang chủ để xem quy trình thiết kế và các dự án khác.

Back to PortfolioQuay lại Portfolio