Dự án website CIT Group là website WordPress do Thiết Kế Web DC thiết kế cho CIT Software, công ty viết phần mềm theo yêu cầu, thiết kế ứng dụng di động và xây dựng giải pháp AI Agent cho doanh nghiệp.
Thông tin dự án
CIT Software là công ty phần mềm Việt Nam, theo website khách có 8 năm làm nghề và đội kỹ sư tự phát triển. Dự án website CIT Group thuộc nhóm thiết kế website công nghệ, nơi website vừa giải thích dịch vụ khó hiểu vừa cho thấy sản phẩm đã làm. Bảng dưới tổng hợp thông tin chính.
Hạng mục | Nội dung |
Khách hàng | CÔNG TY TNHH GIẢI PHÁP CÔNG NGHỆ CIT, thương hiệu CIT Software |
Ngành | Viết phần mềm theo yêu cầu, thiết kế ứng dụng di động, giải pháp AI Agent, phần mềm quản trị doanh nghiệp |
Website | citgroup.vn |
Nền tảng | WordPress, theme riêng đặt tên citsoftware, Contact Form 7, GTranslate |
Ngôn ngữ giao diện | Tiếng Việt, tiếng Anh, tiếng Nhật, tiếng Hàn |
Đơn vị thực hiện | Thiết Kế Web DC |
Thời gian thực hiện | 2024 đến 2025 |
Bối cảnh của dự án
Phần mềm không có hình dáng để chụp ảnh như một căn phòng hay một món hàng, nên người đến website CIT chỉ có chữ, hình minh họa và danh sách khách hàng để tin. Vì thế website phải chia thật rõ ba lớp: công ty làm loại việc nào, đã làm ra những gì, và đã làm cho ai.
Doanh nghiệp tìm đối tác phần mềm cần gì
Trước khi vẽ giao diện, DC chia người xem thành các nhóm, vì giám đốc cần số hóa quy trình và chủ dự án khởi nghiệp hỏi hai câu rất khác nhau. Bảng sau đặt mỗi nhu cầu cạnh nơi website đáp lại.
| Nhu cầu của người xem | Họ tìm thấy ở đâu |
| Cần phần mềm quản lý riêng cho doanh nghiệp | Thẻ "Thiết kế phần mềm" và mục Phần mềm ERP trên menu |
| Muốn làm ứng dụng di động | Thẻ "Thiết kế APP Mobile" |
| Muốn đưa AI vào từng phòng ban | Thẻ "Giải pháp AI Agent" |
| Muốn xem sản phẩm giống ngành của mình | Trang Sản phẩm và menu Giải pháp |
| Muốn biết công ty đã làm cho ai | Trang Khách hàng |
| Muốn biết công ty có đủ người và đủ năm kinh nghiệm không | Bốn con số ở khối "Về CIT Software" và trang Giới thiệu |
| Là đối tác nước ngoài | Bộ chuyển ngôn ngữ cố định ở mép màn hình |
| Cần hỏi nhanh về yêu cầu | Form liên hệ có ô "Dịch vụ quan tâm" và nút Zalo cố định |
Dịch vụ, sản phẩm mẫu và khách hàng
Nội dung của CIT lớn hơn một website công ty thông thường vì mỗi sản phẩm mẫu có một trang riêng. DC phải gom chúng vào những lớp đủ gọn để người xem không lạc giữa hàng chục trang.
- Ba dịch vụ chính: thiết kế phần mềm theo yêu cầu, thiết kế ứng dụng di động và giải pháp AI Agent, nằm ngay khối đầu trang chủ.
- Hơn hai mươi sản phẩm mẫu trong menu Giải pháp: Mini ERP, thương mại điện tử, app giao đồ ăn, ứng dụng gọi xe, AI Chatbot, quản lý trường học, bệnh viện, nhà hàng, khách sạn, vận tải và nhiều ngành khác.
- Trang Sản phẩm: liệt kê phần mềm quản lý xe đưa đón, ứng dụng thú cưng, app giao hoa, sàn vận tải logistics trung gian, ứng dụng livestream, app đặt lịch cắt tóc và các sản phẩm khác, mỗi mục có nút "Xem chi tiết".
- Trang Khách hàng: hơn hai mươi đơn vị thuộc nhiều lĩnh vực như giáo dục, y tế, sản xuất, bất động sản, ô tô và viễn thông.
- Bốn con số năng lực: theo website khách, công ty có 8 năm kinh nghiệm, 50 kỹ sư in-house, 180 dự án đã bàn giao và 65% khách tiếp tục hợp tác.
Bài toán trình bày dịch vụ trừu tượng
Thiết Kế Web DC xác định bài toán là biến một danh mục dài và trừu tượng thành lối đi mà người không rành công nghệ cũng đi được. Người xem phải nhìn ra "việc của tôi" trong vài giây, nếu không họ thoát trước khi đọc đến phần giải pháp.
- Dịch vụ phải nói bằng việc doanh nghiệp làm hằng ngày: thẻ dịch vụ và tên sản phẩm dùng cách gọi thân thuộc như quản lý bệnh viện, quản lý nhà hàng, app giao đồ ăn, thay vì thuật ngữ kỹ thuật.
- Sản phẩm mẫu là bằng chứng chính: công ty phần mềm không có công trình để chụp, nên danh sách sản phẩm và danh sách khách hàng đóng vai trò thay cho ảnh công trình.
- Một website cho cả khách trong nước và khách nước ngoài: công ty nhận khách trong và ngoài nước nên giao diện cho đổi ngôn ngữ ngay trên mọi trang.
Bốn mục tiêu: hiểu ba dịch vụ, tìm sản phẩm theo ngành, tin năng lực và để lại yêu cầu
DC rút bài toán thành bốn mục tiêu cụ thể rồi dùng chúng làm câu hỏi kiểm tra mỗi khi chọn màu, chọn chữ hay xếp khối.
1. Người xem hiểu công ty làm ba loại việc nào ngay màn hình đầu: tiêu đề "Quỹ đạo số cho doanh nghiệp" và ba thẻ dịch vụ đặt cạnh nhau.
2. Người xem tìm được sản phẩm gần với ngành mình: menu Giải pháp liệt kê sản phẩm theo ngành, trang Sản phẩm có mô tả ngắn cho từng mục.
3. Người xem tin vào năng lực thật: bốn con số, danh sách khách hàng có tên và trang giới thiệu có đội ngũ.
4. Người xem để lại nhu cầu trong ít bước nhất: form chỉ có tên, số điện thoại, ghi chú và một ô chọn dịch vụ.
Thiết kế giao diện
Giao diện do Thiết Kế Web DC thiết kế theo hướng công nghệ gọn gàng: nền xanh dương chuyển sắc, một màu nhấn cam và một phông chữ chính cho toàn trang. Phần dưới đi qua bảng màu, phông chữ, bố cục trang chủ, menu và các thành phần cố định.
Xanh công nghệ, cam nhấn và vai trò từng màu
Phần mềm là chủ đề dễ khiến giao diện lạnh và khô. DC giữ nền xanh làm điểm tựa đáng tin, rồi dành màu cam riêng cho những chỗ người xem cần bấm.
| Màu | Mã | Dùng cho |
| Xanh dương đậm | `#0f5b89` | Đầu dải chuyển sắc nền trang, nút điều hướng slider, chữ nhấn trên nền sáng |
| Xanh lơ | `#009dca` | Cuối dải chuyển sắc, tạo chiều sâu cho nền đầu trang |
| Cam | `#faa61a` | Nút kêu gọi hành động và các điểm cần bấm |
| Xanh đen | `#12222c` | Chữ trên nút cam, đủ đậm để đọc rõ trên nền sáng |
| Xanh rất nhạt | `#f1f7fa` | Nền các khối nội dung phía dưới |
| Trắng | `#ffffff` | Chữ trên nền xanh và nền khối thẻ |
K2D, Be Vietnam Pro và cỡ chữ
Toàn trang dùng một phông chính là K2D, kết hợp nhiều độ đậm để tạo thứ bậc, thay vì ghép nhiều phông. Các cỡ chữ đo trực tiếp trên trang chủ.
- K2D cho tiêu đề chính: tiêu đề "Quỹ đạo số cho doanh nghiệp" đo được cỡ 38 px, độ đậm 500, màu trắng trên nền xanh, nét hiện đại và đủ rộng cho cụm từ in hoa.
- K2D đậm cho tiêu đề khối: tiêu đề các khối nội dung cỡ 21 px, độ đậm 800, nên mỗi khối nổi bật khi người xem lướt.
- K2D nhẹ cho đoạn nội dung: cỡ 16 px, dòng cao 24 px, độ đậm 300, giữ nét chữ mảnh cho đoạn giới thiệu trên nền xanh.
- Be Vietnam Pro cho thành phần điều khiển: dùng ở nút mũi tên slider và một số nút, vì phông này thiết kế sẵn cho tiếng Việt nên dấu thanh không bị lệch ở cỡ nhỏ.
- Nút bo tròn hẳn: nút kêu gọi hành động nền cam, chữ 14,5 px, độ đậm 700, bo tròn hẳn để nổi lên khỏi các khối thẻ góc vuông.
Bố cục trang chủ từ dịch vụ đến năng lực
DC xếp trang chủ từ thông điệp, qua dịch vụ, rồi đến sản phẩm và năng lực. Người xem đi từ "công ty này làm gì" tới "có làm được cho tôi không" chỉ bằng thao tác cuộn.
1. Banner "Quỹ đạo số cho doanh nghiệp": tiêu đề lớn, đoạn giới thiệu ba mảng viết phần mềm theo yêu cầu, thiết kế ứng dụng di động và giải pháp AI Agent.
2. Khối "Dịch vụ và sản phẩm": ba thẻ trượt ngang gồm thiết kế APP Mobile, thiết kế phần mềm và giải pháp AI Agent, kèm nút mũi tên chuyển thẻ.
3. Băng sản phẩm mẫu: hàng thẻ chạy ngang như Mini ERP, thương mại điện tử, app giao đồ ăn, ứng dụng gọi xe, AI Chatbot, quản lý trường học và quản lý bệnh viện.
4. Khối "Về CIT Software": đoạn giới thiệu công ty cùng bốn con số 8 năm, 50 kỹ sư, 180 dự án và 65% khách tiếp tục hợp tác.
5. Khối nội dung chia bốn trang nhỏ: có số trang "1 / 4" và nút chuyển, trả lời các câu như công ty cung cấp những giải pháp gì, phân loại công ty phần mềm và cách chọn đơn vị uy tín.
6. Lời mời "Sẵn sàng đồng hành trên hành trình số hóa": nút dẫn tới form liên hệ.
Menu lối tắt, bộ chuyển ngôn ngữ và nút Zalo
DC làm menu với hai tầng: một hàng lối tắt đến ba dịch vụ chính, và một hàng menu thường dẫn tới các trang lớn. Nhờ vậy người xem đến từ tìm kiếm có thể nhảy thẳng vào dịch vụ mình cần.
- Hàng lối tắt phía trên: Viết phần mềm, Thiết kế App, AI Agent và Phần mềm ERP, mỗi mục dẫn đến trang dịch vụ riêng.
- Hàng menu chính: Giới thiệu, Liên hệ, Giải pháp, Sản phẩm và Khách hàng. Năm mục là đủ để người xem không bị rối giữa quá nhiều lựa chọn.
- Menu Giải pháp thả xuống nhiều mục: liệt kê các sản phẩm theo ngành để người xem vào thẳng trang của ngành mình.
- Bộ chuyển ngôn ngữ cố định: cho đổi giữa tiếng Việt, tiếng Anh, tiếng Nhật và tiếng Hàn từ mọi trang, nằm ở mép màn hình nên luôn thấy.
- Nút Zalo cố định: hiện số 0858858969 và mở thẳng cuộc trò chuyện Zalo, để người xem nhắn hỏi mà không phải tìm số liên hệ.
Thẻ trượt, nút mũi tên và hiệu ứng cuộn
Các thành phần dưới đây lặp ở nhiều khối, nên người xem học một lần là dùng được cho cả trang.
- Thẻ trượt ngang: dịch vụ và sản phẩm mẫu đều trình bày bằng thẻ trượt, vì số lượng nhiều mà chiều cao màn hình có hạn.
- Nút mũi tên tròn: nền xanh dương trong suốt nhẹ, bo tròn, đặt hai bên thẻ để báo còn nội dung phía sau.
- Hiệu ứng xuất hiện khi cuộn: các khối hiện dần khi người xem cuộn tới, làm trang bớt phẳng mà không đổi nội dung.
Trải nghiệm người dùng
Thiết Kế Web DC tổ chức nội dung theo hành trình của một doanh nghiệp đi tìm đối tác phần mềm: hiểu công ty, xem dịch vụ, tìm sản phẩm giống ngành mình, xem khách hàng đã làm rồi để lại yêu cầu. Mỗi bước có trang riêng và luôn có lối bấm sang bước kế tiếp.
Trang Giới thiệu
Trang này trả lời câu hỏi "công ty phần mềm này có thật không" bằng thông tin về hướng đi và con người.
- Định hướng phát triển: ba mục tầm nhìn tư vấn chuyển đổi số cho 1000 doanh nghiệp Việt, sứ mệnh trở thành quỹ đạo số cho doanh nghiệp, và lịch sử 8 năm hình thành.
- Đồng sáng lập và đội ngũ: danh sách các thành viên kèm chức danh như Chief Executive Officer, Technical Manager, Senior Developer, Senior Tester và Senior Designer. Hiển thị tên và chức danh thật giúp khách thấy công ty có đủ vai trò làm một dự án phần mềm từ đầu đến cuối.
- Văn hóa doanh nghiệp: sáu giá trị gồm thái độ, gắn kết, đam mê, thay đổi, cải tiến và tư duy ngược.
- Profile công ty: hồ sơ năng lực dạng sách lật, người xem lật từng trang ngay trong website thay vì tải tệp về.
Trang Sản phẩm và các trang giải pháp
Mỗi sản phẩm mẫu là một trang riêng, vì người tìm "phần mềm quản lý bệnh viện" và người tìm "app giao đồ ăn" cần đọc hai nội dung khác hẳn nhau.
- Mô tả ngắn cho từng sản phẩm: ví dụ phần mềm quản lý xe đưa đón nêu việc thiết lập lộ trình, xếp chuyến, gán xe và tài xế, theo dõi hành trình GPS trực tiếp.
- Sản phẩm nêu rõ mô hình: sàn vận tải logistics trung gian nối nhiều nhà xe với khách doanh nghiệp, từ báo giá, đặt đơn đến theo dõi hành trình và đối soát công nợ.
- Nút "Xem chi tiết": dẫn tới trang riêng của sản phẩm, nên trang Sản phẩm giữ gọn như một mục lục.
- Địa chỉ trang theo tên sản phẩm: như thiết kế app taxi, thiết kế app giao đồ ăn, phần mềm quản lý nhà hàng, giúp tìm kiếm khớp đúng cụm từ người dùng gõ.
Trang Khách hàng
Với công ty phần mềm, danh sách khách hàng thay cho bộ ảnh công trình, nên DC dành riêng một trang cho nó.
- Mỗi khách một thẻ có mô tả ngắn: tên đơn vị kèm một câu về lĩnh vực, như trung tâm tiệc cưới, thương hiệu nước mắm, trường đại học, bệnh viện chuyên khoa và khu công nghiệp.
- Nhiều lĩnh vực trong cùng một trang: từ viễn thông, ô tô, dệt nhuộm đến bất động sản, để người xem thấy công ty đã làm cho ngành giống mình.
- Câu dẫn đầu trang: nói về việc tạo giá trị mới cho khách hàng, đặt trước danh sách để người xem hiểu mục đích của trang.
Form chọn dịch vụ và hai văn phòng
Trang liên hệ gom các kênh để người xem chọn cách hỏi hợp với mình, từ gửi form, gọi hotline, nhắn Zalo đến xem địa chỉ hai văn phòng.
- Form có ô "Dịch vụ quan tâm": gồm bốn lựa chọn phát triển mới, nâng cấp hệ thống, tích hợp AI và tích hợp phần cứng. Công ty biết ngay khách cần loại việc nào trước khi gọi lại.
- Các trường bắt buộc ngắn: chỉ cần tên và số điện thoại, ghi chú để không bắt buộc, nên khách điền nhanh.
- Hai văn phòng: trụ sở tại phường Trấn Biên, Đồng Nai và văn phòng TP.HCM tại TP Thủ Đức, kèm bản đồ cho từng nơi.
- Thông tin pháp lý: tên công ty, mã số thuế và hotline nằm cùng khối địa chỉ để khách doanh nghiệp tra cứu.
- Danh sách sản phẩm nhắc lại cuối trang: thương mại điện tử, mạng xã hội, giao đồ ăn, giao hàng, gọi xe, lái hộ và giúp việc, để khách đang ở trang liên hệ vẫn thấy công ty làm được gì.
Công nghệ và hiệu năng
Thiết Kế Web DC dựng website trên WordPress với theme riêng cho CIT, Contact Form 7 cho form liên hệ và GTranslate cho bốn ngôn ngữ. Điểm PageSpeed Insights đo ngày 08/11/2026: SEO đạt 100 trên mobile và 92 trên desktop, Accessibility 89 và 92, nhưng Performance chỉ đạt 40 trên mobile và 59 trên desktop, Best Practices 77.
WordPress, theme riêng và plugin
DC xây website trên WordPress, dùng một theme riêng thay vì theme dựng sẵn vì nhu cầu hiển thị của CIT khác thông thường: nhiều thẻ trượt, nhiều trang sản phẩm cùng bố cục.
- Theme riêng citsoftware: giữ toàn bộ kiểu hiển thị của thẻ trượt, khối dịch vụ và các trang sản phẩm trong một nơi, nên các trang sản phẩm mới theo cùng khuôn mà không phải dựng lại.
- Contact Form 7: form liên hệ có ô chọn dịch vụ quan tâm, gửi thông tin về email của công ty.
- GTranslate: cho đổi giao diện giữa tiếng Việt, tiếng Anh, tiếng Nhật và tiếng Hàn bằng nút cố định.
- 3D FlipBook: hiển thị hồ sơ năng lực dạng sách lật ngay trong trang Giới thiệu.
- Thẻ theo dõi Google: trang chủ nạp thẻ Google Analytics và Google Ads để công ty đo khách truy cập và chạy quảng cáo.
Số đo PageSpeed của website công ty phần mềm
Trang chủ được chạy PageSpeed Insights hai lượt ở mỗi thiết bị ngày 08/11/2026, mỗi cặp lượt cho cùng kết quả. Dưới đây là số đo nguyên văn.
| Chỉ số | Mobile | Desktop |
| Performance | 40 | 59 |
| Accessibility | 89 | 92 |
| Best Practices | 77 | 77 |
| SEO | 100 | 92 |
| LCP | 6,9 giây | 1,7 giây |
| CLS | 0 | 0,003 |
| TBT | 1.520 ms | 860 ms |
Google chưa công bố dữ liệu CrUX cho tên miền này, bảng trên vì vậy chỉ là số đo thử. Dung lượng tải của trang chủ khoảng 4,1 MB trên mobile và 5,3 MB trên desktop.
Đọc số đo: LCP, script và cookie YouTube
Bảng cho thấy website rất ổn định về bố cục và tốt ở SEO, còn Performance và Best Practices cần xử lý tiếp. DC ghi rõ cả điểm mạnh lẫn việc còn lại để khách biết nên làm gì trước.
- Điểm mạnh: CLS bằng 0 trên mobile và 0,003 trên desktop nên các thẻ trượt không làm trang nhảy, SEO đạt 100 trên mobile, máy chủ trả HTML đầu tiên chỉ sau khoảng 57 ms.
- Một phần ảnh đã nạp lười: 21 trên 65 ảnh của trang chủ nạp lười, phần còn lại tải sớm để thẻ trượt hiện đủ ngay khi mở.
- Nguyên nhân LCP mobile 6,9 giây: tài nguyên tính LCP không có sẵn trong HTML ban đầu và chưa gắn ưu tiên tải, nên trình duyệt phải chờ khoảng 1,8 giây từ lúc có HTML đến lúc bắt đầu tải nó. jQuery và một số tệp CSS hiệu ứng chặn hiển thị, Lighthouse ước tính hoãn được chúng tiết kiệm khoảng 1,2 giây.
- Script nặng: thực thi JavaScript tốn khoảng 3,5 giây trên mobile, trong đó video YouTube nhúng và thẻ Google Ads mỗi mục chiếm khoảng nửa giây. Đây là lý do TBT lên 1.520 ms trên mobile và 860 ms trên desktop. Có khoảng 1,1 MB JavaScript chưa dùng tới trên mobile.
- Ảnh còn nặng: Lighthouse ước tính bớt được khoảng 515 KiB trên mobile nếu đổi ảnh PNG sang WebP và đưa ảnh về đúng kích thước hiển thị.
- Best Practices 77: video YouTube nhúng ở trang chủ đặt năm cookie bên thứ ba, đây là nguyên nhân chính khiến điểm này dưới 90.
- Accessibility 89 và 92: một số liên kết chưa có tên cho trình đọc màn hình, thứ tự thẻ tiêu đề chưa giảm dần, vùng bấm nhỏ ở một số nút, trang chưa khai báo vùng nội dung chính và có phần tử ẩn vẫn nhận phím Tab ở bản desktop.
Kết quả bàn giao
Khi bàn giao dự án website CIT Group, Thiết Kế Web DC đi kèm hướng dẫn quản trị nội dung. Đội ngũ công ty tự thêm sản phẩm mẫu mới theo khuôn có sẵn, cập nhật danh sách khách hàng và chỉnh thông tin văn phòng trong WordPress mà không cần nhờ lại đơn vị làm web.
Hướng mở rộng: ảnh màn hình sản phẩm mẫu, video và tốc độ trang
Website đã đủ để một công ty phần mềm trình bày dịch vụ, sản phẩm và khách hàng bằng bốn ngôn ngữ. Các hạng mục dưới đây đều làm được trên nền WordPress hiện có mà không phải dựng lại.
- Gắn ưu tiên tải cho tài nguyên đầu trang và hoãn jQuery, CSS hiệu ứng: đây là việc rút ngắn LCP mobile rõ nhất.
- Chỉ nạp video YouTube khi người xem bấm phát: thay khung nhúng bằng ảnh bìa, giảm script và bỏ cookie bên thứ ba ở lần tải đầu.
- Đổi ảnh PNG sang WebP và đặt kích thước ảnh: giảm dung lượng trang và tránh lệch bố cục khi ảnh tải.
- Đặt tên cho liên kết và sửa thứ tự thẻ tiêu đề: đưa Accessibility lên trên 90.
- Trang minh họa cho từng sản phẩm mẫu: thêm ảnh màn hình giao diện thật của ứng dụng, để người xem thấy sản phẩm trước khi liên hệ.
Dự án website CIT Group gom ba dịch vụ, hơn hai mươi sản phẩm mẫu, danh sách khách hàng và form liên hệ vào cùng một mạch đọc, trên nền WordPress xanh dương có bốn ngôn ngữ, và công khai cả phần điểm hiệu năng còn thấp. Từ giao diện, theme riêng đến bàn giao quản trị, toàn bộ website do Thiết Kế Web DC thực hiện.
Công ty phần mềm, ứng dụng hay giải pháp AI cần một website giải thích dịch vụ khó hiểu như dự án website CIT Group nên xem trước bảng báo giá thiết kế website trọn gói, tham khảo các dự án đã thực hiện rồi liên hệ Thiết Kế Web DC qua hotline 0886 799 977 – 0563 035 555 hoặc Zalo.
Thiết Kế Web DC – Tư vấn thiết kế website công ty công nghệ phần mềm
- Địa chỉ: 370 Đường 3/2, Phường 12, Quận 10, TP.HCM
- Chi nhánh: 87 Phan Huy Ích, Phường Tân Sơn, TP.HCM
- Hotline: 0886 799 977 – 0563 035 555
- Email: [email protected]
- Website: thietkewebdc.com
