Trang web không phải là thiết kế: Một khuôn khổ chiến lược để phát triển doanh nghiệp vừa và nhỏ.

Website Is Not Design: A Strategic Framework for SME Growth

Năm 2023-2024, Glinteco đã xây dựng ba trang web với những kết quả rất khác nhau. Bảo tàng Phụ nữ Việt Nam đã chi 10.000 đô la Mỹ và chứng kiến sự tăng trưởng lưu lượng truy cập lên 130%. DKG Hospitality đã chi 15.000 đô la Mỹ cho thiết kế đẹp mắt nhưng số lượng đặt phòng đã giảm 40%. Paradisehome.vn quản lý hơn 1.000 phòng nhưng tải trong 8,7 giây, mất 71% khách truy cập trên thiết bị di động. Nghiên cứu tình huống này cho thấy lý do tại sao các trang web thất bại không phải do thiết kế kém mà là do thiếu tư duy hệ thống trong các lớp UX, hiệu suất, chuyển đổi và dữ liệu cũng như khuôn khổ mà chúng tôi đã xây dựng để khắc phục nó.

Về Tác giả

Vũ Quang Hoa là Giám đốc điều hành và Nhà sáng lập của Glinteco, với 8 năm kinh nghiệm xây dựng hệ thống web cho các doanh nghiệp vừa và nhỏ trên khắp Úc, Nhật Bản, Việt Nam và Hoa Kỳ. Bài viết này rút ra từ ba dự án từ năm 2020-2024: thiết kế lại Bảo tàng Phụ nữ Việt Nam, nền tảng khách sạn DKG Hospitality và hệ thống bất động sản Paradisehome.vn. Khung 4 lớp được thảo luận ở đây phát triển trực tiếp từ những thất bại trong các dự án này.

Xem thêm các bài viết của Hoa | Kết nối trên LinkedIn

Phần 1: Khi Thành công Gây ra Thất bại

Năm 2020, chúng tôi đã thiết kế lại trang web của Bảo tàng Phụ nữ Việt Nam, một kho lưu trữ kỹ thuật số các hiện vật văn hóa và những câu chuyện về di sản. Chúng tôi đã xây dựng lại nó trên WordPress với các tour ảo tương tác, phần mô tả bằng âm thanh và các bộ sưu tập được tối ưu hóa cho thiết bị di động với giá 10.000 đô la Mỹ trong sáu tháng. Ba tháng sau khi ra mắt, lưu lượng truy cập đã tăng 130%, tỷ lệ thoát giảm 45% và thời gian truy cập trang web tăng 60%. Giám đốc bảo tàng nói với chúng tôi rằng đó là "một cuộc cách mạng hoàn toàn".

Chúng tôi nghĩ rằng chúng tôi đã làm chủ các trang web văn hóa. Sau đó, DKG Hospitality đã thuê chúng tôi vào năm 2023.

Tập đoàn DKG sở hữu nhiều khách sạn cao cấp trên khắp Việt Nam. Họ muốn thứ gì đó phù hợp với thương hiệu sang trọng của họ. Chúng tôi đã cung cấp chính xác điều đó: ảnh bất động sản tuyệt đẹp, hình ảnh động mượt mà, kiểu chữ thanh lịch và thiết kế đáp ứng di động. Đầu tư: 15.000 đô la Mỹ trong năm tháng bằng cách sử dụng Django, Django CMS và VueJS với bộ nhớ đệm Redis.

Tuần đầu tiên sau khi ra mắt, khách hàng rất thích nó. Chúng tôi đã xuất hóa đơn và chuyển sang dự án tiếp theo. Tuần thứ tư, giám đốc điều hành của DKG đã gửi email: "Trang web rất đẹp, nhưng số lượng đặt phòng đã không tăng. Trên thực tế, tỷ lệ đặt phòng trên số lượng yêu cầu của chúng tôi đã giảm từ 18% xuống 11%. Chuyện gì đã xảy ra?"

Đồng thời, chúng tôi đang xây dựng Paradisehome.vn, một nền tảng đặt phòng quản lý hơn 1.000 phòng trên 15 tòa nhà ở Hà Nội. Trong quá trình thử nghiệm với 200 phòng, mọi thứ đều hoạt động trơn tru trong 2,1 giây thời gian tải trang. Khi chúng tôi tải tất cả hơn 1.000 phòng vào sản xuất, thời gian tải trên thiết bị di động đạt 8,7 giây. Hệ thống đôi khi hết thời gian chờ trong giờ cao điểm buổi tối khi mọi người tìm kiếm căn hộ sau giờ làm việc. Phân tích cho thấy 63% lưu lượng truy cập trên thiết bị di động, 71% tỷ lệ thoát trước khi trang tải xong và tỷ lệ yêu cầu là 1,2% so với tiêu chuẩn ngành là 3-5%.

Chúng tôi đã xây dựng các trang web đẹp và có chức năng. Cả hai đều thất bại với tư cách là các hệ thống kinh doanh.

Phần 2: Chúng ta đã sai ở đâu

Thành công của bảo tàng của chúng tôi đến từ giao diện người dùng đẹp mắt, các tính năng tương tác, thiết kế di động và quản lý nội dung dễ dàng. Điều này hiệu quả vì khách truy cập bảo tàng không chuyển đổi thành giao dịch, họ đang tiêu thụ nội dung. Sự tương tác và khả năng truy cập là đủ.

Khi chúng tôi áp dụng cùng một tư duy cho DKG, chúng tôi tập trung vào thiết kế đẹp mắt, các tương tác mượt mà và tính thẩm mỹ hiện đại. Chúng tôi đã bỏ lỡ rằng các số liệu của DKG lẽ ra phải là tỷ lệ yêu cầu đặt phòng, chuyển đổi yêu cầu thành đặt phòng, doanh thu trên mỗi khách truy cập và tỷ lệ lấp đầy do lưu lượng truy cập web. Những gì chúng tôi xây dựng là một cuốn sách quảng cáo kỹ thuật số với các CTA "Liên hệ với chúng tôi" chung chung, các biểu mẫu được chôn sâu ba cú nhấp chuột, không có đề xuất giá trị, không có thử nghiệm A/B và không có phân tích nào về việc bỏ qua kênh.

Đối với Paradisehome, chúng tôi tập trung vào tính đầy đủ của tính năng: tìm kiếm phòng với bộ lọc, lịch khả dụng, quy trình đặt phòng, cập nhật CMS và đồng bộ hóa theo thời gian thực. Điều mà chúng tôi không ưu tiên là hiệu suất dưới tải thực tế với 1.000 phòng, tối ưu hóa cho thiết bị di động ngoài thiết kế đáp ứng, tối ưu hóa truy vấn cơ sở dữ liệu, tối ưu hóa hình ảnh cho hơn 15 phòng trưng bày ảnh cho mỗi bất động sản hoặc kiểm tra tải với người dùng đồng thời.

Sau khi giám đốc của DKG cho chúng tôi xem dữ liệu bỏ qua đặt phòng và chủ sở hữu Paradisehome phàn nàn về việc tìm kiếm chậm, chúng tôi nhận ra rằng chúng tôi đã xây dựng các trang web, không phải các hệ thống chuyển đổi. Chúng tôi rất giỏi về UI/UX, kỹ thuật frontend, quản lý nội dung và triển khai tính năng. Chúng tôi yếu về tối ưu hóa chuyển đổi, kỹ thuật hiệu suất dưới tải, ra quyết định dựa trên dữ liệu và tư duy hệ thống.

Phần 3: Khung 4 lớp

Chúng tôi đã xây dựng lại cách tiếp cận của mình từ "Nó sẽ trông như thế nào?" để hỏi kết quả kinh doanh nào mà trang web phải thúc đẩy, hành trình người dùng nào dẫn đến đó, hệ thống kỹ thuật nào cho phép hành trình đó ở quy mô lớn và dữ liệu nào cho chúng ta biết liệu nó có hiệu quả hay không. Điều này đã trở thành Khung 4 lớp của chúng tôi.

Lớp UX tập trung vào tối ưu hóa hành trình người dùng, không chỉ vẻ đẹp của giao diện. Bảo tàng đã thành công vì người dùng muốn khám phá nội dung: trang chủ đến triển lãm đến các hiện vật đến các tour du lịch ảo hoạt động hoàn hảo. DKG thất bại vì người dùng muốn đặt phòng cho những ngày cụ thể, nhưng chúng tôi không cung cấp con đường rõ ràng. Việc sửa chữa là Trang chủ đến "Kiểm tra tình trạng còn phòng" đến Chọn Bất động sản đến Xem Phòng đến Đặt phòng. Thiết kế UX phải cụ thể theo mục tiêu, không phải ưu tiên thẩm mỹ.

Lớp Hiệu suất coi tốc độ là nền tảng cho chuyển đổi, không phải là đánh bóng tùy chọn. Dữ liệu Paradisehome cho thấy ở thời gian tải 8,7 giây, 71% đã thoát. Ở 2,1 giây, chỉ có 38% đã thoát. Với 1.000 khách truy cập hàng ngày, việc giữ chân 33% đó có nghĩa là thêm 330 khách truy cập, tạo ra thêm 16 yêu cầu mỗi ngày hoặc 480 yêu cầu hàng tháng. Theo nghiên cứu của Google về tốc độ trang di động, 53% người dùng di động từ bỏ các trang mất hơn ba giây. Tối ưu hóa hiệu suất không phải là một điều tốt đẹp, đó là cơ sở hạ tầng chuyển đổi.

Lớp Chuyển đổi làm cho mọi yếu tố phục vụ chuyển đổi với các CTA cụ thể theo ngữ cảnh phù hợp với ý định của người dùng. Trang web ban đầu của DKG có "Tìm hiểu thêm" trên trang chủ và "Liên hệ với chúng tôi" trên các trang bất động sản, đạt tỷ lệ yêu cầu là 11%. Sau khi xây dựng lại, chúng tôi đã sử dụng "Kiểm tra tình trạng còn phòng cho [Ngày của bạn]" trên trang chủ, "Xem phòng & Giá từ 120 đô la Mỹ/đêm" trên các trang bất động sản và "Đặt phòng này" cộng với "Câu hỏi? Trò chuyện trên WhatsApp" trên các trang phòng. Tỷ lệ yêu cầu đã tăng lên 23%. CTA phải cho người dùng biết chính xác điều gì sẽ xảy ra tiếp theo và lý do tại sao họ nên nhấp vào.

Lớp Dữ liệu & Theo dõi đo lường mọi thứ quan trọng bằng các số liệu liên quan đến kết quả kinh doanh. Trước khi xây dựng lại, chúng tôi đã theo dõi lượt xem trang, tỷ lệ thoát và các nguồn lưu lượng truy cập nhưng không sử dụng gì một cách hành động. Sau đó, bảo tàng đã theo dõi số lượt xem trang triển lãm trên mỗi phiên, tỷ lệ hoàn thành tour ảo và mức độ tương tác trên thiết bị di động so với máy tính để bàn. DKG đã theo dõi kênh bỏ qua từ trang chủ đến bất động sản đến phòng đến đặt phòng, tỷ lệ bỏ qua biểu mẫu yêu cầu theo trường, tỷ lệ nhấp của CTA và doanh thu trên mỗi khách truy cập. Paradisehome đã theo dõi hiệu suất tìm kiếm theo thời gian trong ngày, mẫu sử dụng bộ lọc, chuyển đổi trên thiết bị di động so với máy tính để bàn và tương quan thời gian tải với tỷ lệ thoát. Dữ liệu không có chiến lược là tiếng ồn, trước tiên hãy xác định KPI, sau đó theo dõi không ngừng.

Phần 4: Xây dựng lại

Đối với Khách sạn DKG trong sáu tuần, chúng tôi tự mình gánh chi phí xây dựng lại 8.000 đô la Mỹ. Chúng tôi đã loại bỏ "Liên hệ với chúng tôi" chung chung và thêm "Kiểm tra tình trạng còn phòng cho [Khoảng ngày]", đặt "Đặt phòng của bạn" trên nếp gấp trên trang chủ, thêm các tín hiệu tin cậy như "Đánh giá 4.8/5 từ 240 khách" và xây dựng quy trình đặt phòng nhiều bước với chỉ báo tiến trình. Nghiên cứu từ Nhóm Nielsen Norman về khả năng sử dụng biểu mẫu cho thấy rằng việc chia nhỏ các biểu mẫu dài thành các bước sẽ cải thiện đáng kể tỷ lệ hoàn thành. Chúng tôi đã triển khai các cửa sổ bật lên ý định thoát cung cấp ưu đãi giảm giá 10% cho lần đặt phòng đầu tiên và thêm các nút WhatsApp để yêu cầu tức thì vì người dùng Việt Nam thích trò chuyện. Chúng tôi đã thiết lập Google Analytics 4 với tính năng theo dõi thương mại điện tử nâng cao, kênh chuyển đổi hiển thị trang chủ đến bất động sản đến phòng đến đặt phòng đến xác nhận và thử nghiệm A/B ngôn ngữ CTA.

Kết quả ba tháng sau đó cho thấy tỷ lệ yêu cầu đặt phòng tăng từ 11% lên 23% (tăng 109%), tỷ lệ hoàn thành biểu mẫu từ 34% lên 67% (tăng 97%), thời gian yêu cầu giảm từ 4 phút 30 giây xuống 2 phút 10 giây (giảm 52%) và đặt phòng trên thiết bị di động tăng từ 18% lên 41% tổng số (tăng 128%). Yêu cầu WhatsApp đã thêm một kênh mới với 12 yêu cầu mỗi ngày. Đặt phòng do web thúc đẩy hàng tháng đã tăng từ 23 lên 61 (tăng 165%). Với giá trị đặt phòng trung bình là 180 đô la Mỹ/đêm và trung bình 2,3 đêm, doanh thu hàng tháng bổ sung đạt 15.732 đô la Mỹ so với 0 đô la Mỹ đầu tư của khách hàng vì chúng tôi đã gánh chi phí xây dựng lại.

Đối với Paradisehome trong 12 tuần với 8.500 đô la Mỹ chia sẻ với khách hàng, chúng tôi ưu tiên đại tu hiệu suất. Tương tự như cách tiếp cận của chúng tôi để xây dựng lại các hệ thống kế thừa một cách gia tăng, chúng tôi đã thêm chỉ mục cơ sở dữ liệu trên các trường vị trí, phạm vi giá và khả năng sẵn có, triển khai bộ nhớ đệm Redis với thời gian tồn tại là 15 phút và giảm số lượng truy vấn trên mỗi trang từ 847 xuống 12. Chúng tôi đã nén hình ảnh từ trung bình 3,2MB xuống 180KB bằng TinyPNG, triển khai tải chậm và sử dụng JPEG lũy tiến. Chúng tôi đã giảm kích thước gói JavaScript từ 2,1MB xuống 420KB, triển khai phân chia mã và sử dụng phân trang hiển thị 20 phòng cùng một lúc thay vì 1.000. Chúng tôi đã đơn giản hóa các bộ lọc từ tám tùy chọn thành bốn tùy chọn thiết yếu, thêm CTA "Đặt phòng xem" trên mọi thẻ phòng và thiết lập giám sát hiệu suất theo thời gian thực với các cảnh báo được kích hoạt nếu thời gian tải trang vượt quá ba giây.

Kết quả bốn tháng sau đó cho thấy thời gian tải trang trên thiết bị di động giảm từ 8,7 giây xuống 2,1 giây (giảm 76%), tỷ lệ thoát từ 71% xuống 38% (giảm 46%) và tỷ lệ tìm kiếm thành yêu cầu tăng từ 1,2% lên 4,8% (tăng 300%). Đặt phòng xem mỗi tháng tăng từ 47 lên 183 (tăng 289%) trong khi thời gian chờ của hệ thống giảm từ 15-20 hàng ngày xuống 0-1 hàng ngày (giảm 95%). Yêu cầu hàng tháng tăng từ 89 lên 356 (tăng 300%). Với 18% chuyển đổi từ yêu cầu sang cho thuê trong lịch sử, điều này có nghĩa là khoảng 48 hợp đồng thuê bổ sung hàng tháng. Với giá trị cho thuê trung bình là 450 đô la Mỹ hàng tháng nhân với thời gian lưu trú trung bình sáu tháng tương đương 2.700 đô la Mỹ, giá trị hàng tháng bổ sung đạt 129.600 đô la Mỹ. Khoản đầu tư 8.500 đô la Mỹ đã được hoàn trả hơn 15 lần trong tháng đầu tiên.

Phần 5: Tại sao hầu hết các trang web của doanh nghiệp vừa và nhỏ thất bại

"Tư duy tài liệu quảng cáo" cho rằng trông chuyên nghiệp đồng nghĩa với việc thúc đẩy kết quả kinh doanh. Trang web ban đầu của DKG trông chuyên nghiệp nhưng không thể thúc đẩy việc đặt phòng vì họ đã thuê các nhà thiết kế, không phải các nhà chiến lược chuyển đổi. Các cơ quan tập trung vào các sản phẩm danh mục đầu tư trong khi không ai hỏi kết quả kinh doanh cụ thể nào phải thay đổi trong sáu tháng.

Công nghệ phân mảnh ngăn cản tư duy hệ thống. Trước khi Paradisehome xây dựng lại, trang web là Django tùy chỉnh, việc đặt phòng diễn ra qua điện thoại và email, CRM nằm trong bảng tính Excel và phân tích không có theo dõi mục tiêu. Như chúng tôi đã khám phá trong phân tích của chúng tôi về quy trình phát triển tích hợp, không có khả năng hiển thị vào kênh có nghĩa là không có tối ưu hóa. Sau khi tích hợp, chúng tôi có thể thấy chính xác nơi người dùng bỏ cuộc và tối ưu hóa một cách có hệ thống.

Xem các trang web là chi phí thay vì tài sản dẫn đến tư duy "xây dựng một lần, bảo trì tối thiểu, mong nó hoạt động mãi mãi". Bảo tàng đã đào tạo nhân viên cập nhật nội dung hàng tuần với các cuộc triển lãm, sự kiện và câu chuyện mới. Lưu lượng truy cập tăng 130% trong 12 tháng vì nội dung luôn mới mẻ. Sau khi DKG xây dựng lại, chúng tôi đã tiến hành các đánh giá hàng quý, phân tích các mẫu đặt phòng trong kỳ nghỉ, thử nghiệm A/B việc hiển thị giá và thêm thông báo chương trình khách hàng thân thiết khi khách hàng triển khai chương trình đó. Cải tiến liên tục đánh bại các trang tĩnh.

Bỏ qua hiệu suất có nghĩa là bỏ qua doanh thu. Kiểm tra tại văn phòng cho thấy DKG hoạt động hoàn hảo trên WiFi nhanh và máy tính để bàn. Người dùng thực tế đã sử dụng 3G/4G trên thiết bị di động tải trong 8,7 giây với 71% thoát. Theo phân tích của Cloudflare về tác động của thời gian tải trang, các trang tải trong 2,4 giây đạt tỷ lệ chuyển đổi 1,9% trong khi các trang ở 3,3 giây giảm xuống 1,5% — một sự khác biệt có vẻ nhỏ nhưng tăng lên một cách đáng kể ở quy mô lớn. Các doanh nghiệp vừa và nhỏ bỏ lỡ điều này vì họ không kiểm tra tải với các điều kiện thực tế, giám sát hiệu suất sau khi ra mắt hoặc nhận ra thiết kế đáp ứng không đồng nghĩa với tối ưu hóa cho thiết bị di động. Kiểm tra trên các thiết bị thực tế với các mạng thực tế và theo dõi liên tục.

Phần 6: Cách chúng tôi áp dụng nó bây giờ

Mọi dự án trang web đều bắt đầu bằng việc khám phá, xác định kết quả kinh doanh số một, tỷ lệ chuyển đổi thành công, bối cảnh người dùng và phân tích kênh hiện tại nếu một trang web tồn tại. Việc khám phá này xác định mọi thứ: luồng UX, mục tiêu hiệu suất, các yếu tố chuyển đổi và thiết lập theo dõi.

Giai đoạn thiết kế bắt đầu với việc lập bản đồ hành trình người dùng trước các pixel. Đối với DKG, chúng tôi đã lập bản đồ từ tìm kiếm hữu cơ đến CTA chính "Kiểm tra tình trạng còn phòng" đến trình chọn ngày nội tuyến đến các thuộc tính được lọc đến chi tiết thuộc tính đến "Xem phòng & Giá" đến lựa chọn phòng đến "Đặt phòng này" đến biểu mẫu chi tiết khách tối thiểu đến xác nhận đặt phòng qua email và WhatsApp. Chỉ sau khi lập bản đồ hành trình này, chúng tôi mới thiết kế giao diện người dùng phục vụ hành trình, không phải là sở thích thẩm mỹ.

Giai đoạn phát triển xây dựng hiệu suất vào kiến trúc ngay từ ngày đầu tiên. Đối với Paradisehome, chúng tôi đã lập chỉ mục tất cả các trường có thể tìm kiếm, hủy chuẩn hóa dữ liệu đọc nhiều để tránh các kết nối, lưu vào bộ nhớ đệm các truy vấn thường xuyên với Redis TTL 15 phút, triển khai phân chia mã với các gói riêng cho trang chủ và tìm kiếm, tối ưu hóa hình ảnh bằng định dạng WebP và tải chậm, sử dụng Celery cho thông báo email không đồng bộ, phân trang để tải 20 kết quả cùng một lúc và tối ưu hóa các truy vấn thành 12 trên mỗi trang. Cảnh báo theo thời gian thực kích hoạt nếu thời gian tải trang vượt quá ba giây với báo cáo hiệu suất hàng tuần và bản ghi phiên hiển thị trải nghiệm người dùng thực tế.

Giai đoạn sau khi ra mắt nhấn mạnh đến việc lặp lại dựa trên dữ liệu, không phải "khởi chạy và bỏ đi". Như đã thảo luận trong cách chúng tôi đo lường hiệu suất của nhóm phát triển, đối với DKG trong 90 ngày đầu tiên, tuần một đến hai đã thiết lập dữ liệu cơ sở về các nguồn lưu lượng truy cập, hành vi và bỏ qua kênh. Tuần ba đến bốn đã phát hiện ra 40% đã bỏ qua ở "Chi tiết khách" với quá nhiều trường. Việc giảm từ tám xuống bốn trường đã nâng tỷ lệ hoàn thành biểu mẫu từ 34% lên 52%. Tuần năm đến tám thử nghiệm A/B "Đặt ngay" so với "Kiểm tra tình trạng còn phòng" trên các trang thuộc tính, với "Kiểm tra tình trạng còn phòng" thắng với tỷ lệ nhấp cao hơn 18% vì người dùng muốn xem phòng và giá trước khi cam kết. Tuần chín đến 12 đã giải quyết tỷ lệ thoát trên thiết bị di động là 60% so với 30% trên máy tính để bàn bằng cách tăng kích thước mục tiêu cảm ứng và tối ưu hóa biểu mẫu cho thiết bị di động, giảm tỷ lệ thoát trên thiết bị di động xuống 35%.

Sự lặp lại liên tục này giải thích tại sao kết quả được cải thiện trong hơn ba tháng chứ không phải ngay lập tức.

Kết luận: Từ Tài liệu quảng cáo đến Hệ thống

Thành công của bảo tàng, thất bại ban đầu của DKG và cuộc khủng hoảng hiệu suất của Paradisehome đã dạy chúng ta rằng các trang web là các dự án kỹ thuật hệ thống, không phải là các dự án thiết kế. Coi chúng là các bài tập trực quan đã thành công với các trang nội dung nhưng lại thất bại với các trang giao dịch. Chuyển sang tư duy hệ thống — các lớp tích hợp UX, hiệu suất, chuyển đổi và dữ liệu — đã biến DKG từ tỷ lệ yêu cầu 11% lên 23% và Paradisehome từ thời gian tải 8,7 giây xuống 2,1 giây với mức tăng chuyển đổi 300%.

Khung 4 lớp hiện là cách tiếp cận của chúng tôi: lập bản đồ hành trình trước các bản phác thảo, kỹ thuật để đạt tốc độ ngay từ ngày đầu tiên, làm cho mọi yếu tố phục vụ chuyển đổi và đo lường những gì quan trọng. Đây không phải là lý thuyết — đó là những gì chúng tôi đã học được từ 25.000 đô la Mỹ trong chi phí xây dựng lại đã được gánh chịu trên hơn 1.000 phòng, hơn 15 thuộc tính và ba ngành.