Một trang web đóng vai trò là cửa ngõ quan trọng cho các cơ hội kinh doanh mới. Xây dựng một trang web mới hoặc thiết kế lại một trang web có thể là một hành trình đầy thử thách. Sau khi chủ trì thiết kế lại trang web của công ty, tôi quyết định chia sẻ một chút về hành trình của chúng tôi. Nếu bạn đang cân nhắc việc xây dựng một trang web mới hoặc thiết kế lại trang web hiện tại của mình, chúng tôi hy vọng điều này sẽ giúp ích cho bạn bằng cách giúp hành trình của bạn suôn sẻ hơn.

Đánh giá

Trang web của chúng tôi là một cánh cửa quan trọng cho hoạt động kinh doanh mới của chúng tôi. Là một công ty phát triển web, cách chúng tôi thể hiện bản thân trực tuyến nói lên rất nhiều điều về công việc của chúng tôi và những gì khách hàng có thể mong đợi khi làm việc với chúng tôi.

Khi chúng tôi quyết định muốn tạo một trang web mới để phù hợp với thương hiệu mới của mình, chúng tôi thấy rõ rằng chúng tôi phải tiến hành cuộc nói chuyện và cho khách hàng cũng như khán giả thấy một trang web chất lượng tốt. Nhóm chúng tôi đã suy nghĩ và nỗ lực rất nhiều vào giai đoạn chuẩn bị trước khi bắt đầu làm việc.

• Chúng tôi bắt đầu với một câu hỏi đơn giản: Tại sao chúng ta cần một trang web hoặc thiết kế lại? Đây là một cách tuyệt vời để tập trung vào mục tiêu của bạn và tránh bị xao nhãng.
• Khi đã hiểu lý do, chúng tôi sẽ thực hiện quy trình Xác định đối tượng mục tiêu của mình. Chúng tôi đã xây dựng trang web này cho ai. Điều cần thiết là phải hiểu rõ ràng bạn đang cố gắng tiếp cận ai và bạn muốn họ biết gì về thương hiệu và công việc của bạn.
• Sau đó, chúng tôi bắt đầu suy nghĩ về Thông điệp mà Chúng tôi muốn truyền tải tới khán giả đó, cách chúng tôi muốn được mọi người nhìn nhận và quan trọng nhất là cách chúng tôi có thể chứng minh rằng mình giỏi trong những gì mình làm. Phần lớn thông điệp này đã được cân nhắc trong quá trình tạo thương hiệu (Hãy kiểm tra cách chúng tôi tạo thương hiệu mới ) và chúng tôi phải truyền tải thông điệp đó vào trang web mới.
• Vì chúng tôi đã hiện diện trực tuyến nên chúng tôi đã dành chút thời gian để Đánh giá Trang web Cũ của mình và liệt kê các tính năng cũng như khía cạnh mà chúng tôi cảm thấy đang hoạt động tốt cũng như những gì chúng tôi cảm thấy còn thiếu.
• Trong toàn bộ quá trình này, điều rất quan trọng là phải theo dõi Điểm chuẩn của đối thủ cạnh tranh để cố gắng hiểu những gì các công ty trong ngành của chúng tôi đang làm. Chúng tôi cũng xem xét các loại trang web khác để lấy tài liệu tham khảo và cảm hứng. Điều này đã cung cấp cho chúng tôi một số thông tin chi tiết có giá trị và giúp chúng tôi tránh lặp lại sai lầm hoặc bỏ lỡ các tính năng thiết yếu.
• Bước cuối cùng của giai đoạn chuẩn bị này là Danh sách các tính năng và chức năng mà chúng tôi muốn có trên trang web của mình. Điều này giống như việc tạo ra một danh sách mong muốn giống như chúng ta có thể làm mọi thứ mình muốn. Danh sách này sau đó đã được ưu tiên và chúng tôi đã chọn ra những tính năng PHẢI và những tính năng ĐÚNG ĐÃ CÓ để có thể triển khai sau này. Điều quan trọng là phải tập trung vào những yếu tố quan trọng nhất trước tiên.

Một số bước đó đã được thực hiện cùng với toàn bộ nhóm. Là một nhóm nhỏ, chúng tôi muốn mọi người tham gia vào quá trình này ở một mức độ nào đó. Sau lần đánh giá đầu tiên này, chúng tôi bắt đầu phân chia và chinh phục và có các thành viên trong nhóm tận tâm chịu trách nhiệm biến trang web mới của chúng tôi thành hiện thực.

Thiết kế

Chúng tôi rất vui mừng được đi sâu vào Quy trình thiết kế cho dự án web của mình. Thiết kế UI/UX là một khía cạnh quan trọng của bất kỳ dự án web nào. Chúng tôi có một nhóm đa ngành tham gia, nhưng nhà thiết kế là ngôi sao của chương trình, chịu trách nhiệm tạo ra hình ảnh trực quan cho thông điệp mà chúng tôi muốn truyền tải tới khán giả.

Điều cần thiết là nhà thiết kế phải hiểu rõ nhu cầu và mong đợi của dự án để truyền tải thông điệp của chúng tôi một cách trực quan và cấu trúc nội dung phù hợp. Chúng tôi hướng đến một thiết kế ngắn gọn, hấp dẫn với tông màu phù hợp.

Trong giai đoạn này của dự án, chúng tôi đã làm theo các bước sau:

• Chúng tôi đã áp dụng cách tiếp cận lấy người dùng làm trung tâm ngay từ đầu. Chúng tôi tập trung vào cách khán giả mục tiêu sẽ cảm nhận và tương tác với chúng tôi. Đây là lý do tại sao chúng tôi bắt đầu bằng cách làm việc trên Kiến trúc thông tin, quyết định các trang, phần và thành phần cần thiết cũng như tạo bản thảo đầu tiên của bản sao.
• Tiếp theo, chúng tôi đã tạo các wireframe có độ chân thực thấp để thể hiện sơ bộ, độ chính xác thấp về bố cục và chức năng. Nó cho phép chúng tôi thử nghiệm và thử nghiệm các ý tưởng trước khi đầu tư quá nhiều thời gian và công sức vào thiết kế. Chúng tôi cũng đã xem xét luồng người dùng chung ở giai đoạn này.
• Giai đoạn này rất quan trọng vì nó đặt nền tảng cho toàn bộ các thành phần sẽ được sử dụng: tạo ra một Hệ thống thiết kế. Chúng tôi đã xây dựng một thư viện bằng Figma bao gồm các mẫu thiết kế, hướng dẫn và ví dụ. Thư viện này là nguồn thông tin chính xác duy nhất, đảm bảo sự gắn kết giữa tất cả các thành phần giao diện người dùng và đặt nền tảng cho khả năng mở rộng khi giới thiệu các thành phần mới.
• Sau khi xác định được hệ thống thiết kế, chúng tôi sẽ xây dựng bố cục ở Độ trung thực cao. Chúng tôi đã áp dụng giao diện người dùng cho wireframe lo-fi được tạo cho đến thời điểm đó. Ở giai đoạn này, thiết kế đã được kiểm tra đầy đủ về việc tuân thủ các yêu cầu về khả năng tiếp cận và chúng tôi đã đưa ra những kết luận tinh tế hơn về việc hiển thị nội dung.

Chúng tôi đã sử dụng Figma trong suốt quá trình, điều này giúp cộng tác với nhóm và thực hiện các lần lặp lại dễ dàng hơn. Sau một vài lần lặp lại, chúng tôi đã có một phiên bản tối ưu mà các nhà phát triển của chúng tôi có thể làm việc trên đó.

Phát triển

Chúng tôi tập trung vào việc lựa chọn nhóm công nghệ và triển khai các thiết kế trong giai đoạn phát triển của dự án. Chúng tôi đã làm việc trong các lần chạy nước rút dựa trên hồ sơ tồn đọng của sản phẩm với các câu chuyện của người dùng do người quản lý dự án của chúng tôi tạo.

Chọn ngăn xếp công nghệ

Khi giai đoạn thiết kế tiến triển, chúng tôi đã điều tra xem công nghệ nào phù hợp nhất với trang web mà chúng tôi muốn xây dựng. Các nhà phát triển của chúng tôi có thể xác định điều này dựa trên kết quả của các giai đoạn trước.

Việc chọn nhóm công nghệ phù hợp đã trở nên quan trọng hơn bao giờ hết trong thế giới ngày nay vì có rất nhiều lựa chọn. Chúng tôi đã xem xét các tiêu chí khác nhau, chẳng hạn như yêu cầu của dự án, chuyên môn của nhóm, tính sẵn có của tài nguyên, chi phí, hiệu suất, bảo mật và khả năng mở rộng.

Chúng tôi muốn có một trang web đơn giản, nhanh chóng và đẹp mắt cho dự án này.

Chúng tôi đã áp dụng cách tiếp cận mô-đun, chia nhỏ các thành phần, tính năng và chức năng của trang web thành các thành phần nhỏ hơn, có thể tái sử dụng. Cách tiếp cận này cho phép chúng tôi tái sử dụng các thành phần trên các phần khác nhau của trang web, tạo điều kiện cộng tác giữa các nhà phát triển và nhà thiết kế, giúp kiểm tra và duy trì những gì đã phát triển dễ dàng hơn, đồng thời cuối cùng cho phép cải thiện hiệu suất và giảm thời gian tải trang.

Các nhà phát triển của chúng tôi ủng hộ Astro , một khung web tất cả trong một dành cho các trang web tập trung vào nội dung, nhanh chóng. Họ mong muốn được dùng thử framework tập trung vào nội dung nhanh nhất hiện có. Ba điều khiến nhóm chúng tôi chú ý: kết xuất phía máy chủ, kết quả hiệu suất và tính linh hoạt.

Với trang web đơn giản mà chúng tôi đang hướng tới, chúng tôi không cần Hệ thống quản lý nội dung (CMS) chính thức nhưng chúng tôi muốn cho phép các thành viên nhóm không rành về kỹ thuật có thể làm việc trên trang web. Chúng tôi đã nghiên cứu rộng rãi các tùy chọn CMS khác nhau và cuối cùng đã chọn Sanity do các tính năng mạnh mẽ và dễ sử dụng của nó. Sanity cũng có tài liệu tuyệt vời và mức miễn phí rất hào phóng.

Ngoài Astro và Sanity, chúng tôi cũng quyết định sử dụng Netlify cho dự án của mình. Vâng, chúng tôi luôn làm như vậy. Khả năng lưu trữ và triển khai liền mạch của Netlify thường là Mạng phân phối nội dung (CDN) của chúng tôi. Chúng tôi cũng sử dụng nhiều thư viện khác nhau cho hoạt ảnh. Chúng tôi đã thảo luận sâu hơn về vấn đề này trong một bài đăng blog khác (sắp ra mắt).

Một khía cạnh cần cải thiện là biểu mẫu mà chúng tôi đã tạo để khách hàng tiềm năng liên hệ với chúng tôi. Chúng tôi đã sử dụng biểu mẫu của Netlify, hóa ra đây không phải là lựa chọn tốt nhất do các vấn đề của Biểu mẫu với Astro. Chúng tôi đã tìm thấy giải pháp (bản sửa lỗi nóng) và tạo một trang duy nhất cho biểu mẫu liên hệ của mình. Chúng tôi vẫn đang xem xét làm thế nào để thay đổi điều này cho tương lai.

Quá trình phát triển

Trước khi bắt đầu giai đoạn phát triển, người quản lý dự án đã tạo một bản tồn đọng sản phẩm với thông tin chi tiết về tất cả các tính năng và chức năng sẽ được nhóm xây dựng. Những câu chuyện của người dùng này đã làm cho quá trình phát triển diễn ra suôn sẻ và minh bạch. Trước khi xây dựng trang web, nhóm phải ưu tiên các tính năng và chức năng sẽ có trong lần phân phối trang web đầu tiên.

Đối với kho lưu trữ mã, chúng tôi đã sử dụng GitHub (GH) và sử dụng các bảng Quản lý dự án cũng như các tính năng lập kế hoạch chạy nước rút của nó. GH thường là lựa chọn của chúng tôi cho Hệ thống kiểm soát phiên bản, nhưng chúng tôi đã bắt đầu sử dụng Notion Projects và yêu thích nó để quản lý dự án.

Chúng tôi bắt đầu thực hiện các thiết kế. Chúng tôi tuân theo phương pháp linh hoạt và làm việc theo từng giai đoạn nước rút để đảm bảo rằng chúng tôi đi đúng hướng và mang lại kết quả trong khung thời gian đã đặt ra. Một lưu ý nhỏ: đây là một dự án nội bộ và ưu tiên chính của chúng tôi là các dự án của khách hàng. Điều này có nghĩa là các lần chạy nước rút sẽ diễn ra ngay sau khi nhóm của chúng tôi tạm dừng các dự án khác. Đây thường không phải là cách chúng tôi làm việc, nhưng đó là cách chúng tôi giải quyết vấn đề này và bài học rút ra là không lặp lại nó.

Một điểm quan trọng khác trong việc làm cho toàn bộ quá trình phát triển trở nên minh bạch và linh hoạt là phải có liên kết dàn dựng ngay từ khi bắt đầu dự án. Mọi người tham gia vào dự án đều có quyền truy cập vào nó và chúng tôi có thể thấy tiến độ đang được thực hiện, đưa ra phản hồi cũng như thực hiện các thay đổi và điều chỉnh nhỏ khi chúng tôi cảm thấy cần thiết.

Trong giai đoạn phát triển, nhóm tiếp thị đã có thể bắt đầu chèn nội dung. Điều này giúp họ làm quen với Sanity và đóng góp vào các vòng phản hồi thực tế hơn. Nhìn chung, giai đoạn phát triển là một nỗ lực hợp tác có sự tham gia của toàn bộ nhóm làm việc cùng nhau để đạt được mục tiêu của dự án.

Đảm bảo chất lượng

Trong quá trình phát triển, một hoặc hai nhà phát triển đã thử nghiệm mọi tính năng và chức năng. Tất cả mã đều trải qua quá trình xem xét mã và cuối cùng, chúng tôi thực hiện lần chạy nước rút cuối cùng để kiểm tra và đảm bảo trang web hoạt động như bình thường.

Việc kiểm tra khả năng sử dụng và khả năng tiếp cận đã được thực hiện trong giai đoạn thiết kế, như được mô tả ở trên. Đối với các thử nghiệm chung, chúng tôi đã sử dụng câu chuyện của người dùng và tiêu chí chấp nhận do người quản lý dự án tạo ra để hướng dẫn chúng tôi.

• Kiểm tra chức năng: xác nhận rằng tất cả các tính năng đều hoạt động như mong đợi.
• Kiểm tra hiệu suất: kiểm tra tốc độ tải và các điểm khác bằng Lighthouse.
• Kiểm tra nhiều trình duyệt và nhiều thiết bị: Kiểm tra trang web trên nhiều trình duyệt web khác nhau (ví dụ: Chrome, Firefox, Safari, Edge) và các thiết bị (máy tính để bàn, thiết bị di động, máy tính bảng) để đảm bảo khả năng tương thích và trải nghiệm người dùng nhất quán. Đối với điều này, chúng tôi đã sử dụng BrowserStack . Sản phẩm của họ rất trực quan để sử dụng và cho phép thực hiện rất nhiều thử nghiệm.

Chuẩn bị phát trực tiếp

Tất cả chúng tôi đều đã sẵn sàng đưa trang web hoạt động trên liên kết dàn dựng, nhưng trước khi tiến hành, hai điều quan trọng phải được xem xét cẩn thận- chuyển hướng đến tên miền mới và SEO. Vì chúng tôi dự định thay đổi tên miền nên việc đảm bảo rằng thứ hạng SEO của chúng tôi không bị ảnh hưởng là rất quan trọng.

Do đó, chúng tôi quyết định sử dụng chuyển hướng 301 để thông báo cho các công cụ tìm kiếm và trình duyệt rằng URL gốc đã được thay thế vĩnh viễn bằng một URL mới. Đây là những gì chúng tôi đã làm:

• Danh sách tất cả các trang từ trang web hiện tại:
• Nếu cấu trúc URL của một trang được giữ nguyên, hãy xác nhận rằng chuyển hướng 301 đang hoạt động.
• Khi URL trang cũ không có trên trang web mới, hãy tạo chuyển hướng đến trang thích hợp nhất.
• Liệt kê các trang được lập chỉ mục trong Google để đảm bảo chúng tôi có sẵn các chuyển hướng cho tất cả các trang đó.
• Sử dụng Netlify để chuyển hướng mọi thứ, làm theo các bước trong Tài liệu Netlify .
• Thông báo cho Google về thay đổi trên Bảng điều khiển Thay đổi địa chỉ dụng cụ.
• Yêu cầu Google lập chỉ mục lại tên miền mới để các trang cũ không xuất hiện. Việc này được thực hiện trực tiếp trong Google Console, làm theo các bước có sẵn trong Tài liệu về Bảng điều khiển của Google.

Cuối cùng nhưng không kém phần quan trọng, chúng tôi đã dành thời gian để đảm bảo rằng chúng tôi đã xem xét các phương pháp hay nhất để xếp hạng SEO tốt hơn và xác định chính xác những gì cần cải thiện. Nhóm tiếp thị đã đảm bảo thực hiện những điều sau:

• Để tối ưu hóa trang web mới cho các từ khóa có liên quan muốn xếp hạng cao hơn trong kết quả của công cụ tìm kiếm và thu hút lưu lượng truy cập không phải trả tiền, chúng tôi thực hiện tìm kiếm từ khóa bằng các công cụ như Google Key Planner hoặc SEMrush để khám phá các từ khóa phổ biến và ít cạnh tranh hơn
• Chúng tôi đã cố gắng hết sức có thể để tối ưu hóa thẻ tiêu đề meta và mô tả meta trên mỗi trang web, kết hợp các từ khóa có liên quan và lời kêu gọi hành động hấp dẫn để lôi kéo người dùng nhấp qua từ các trang kết quả của công cụ tìm kiếm (SERP)
• Đảm bảo các URL rõ ràng, ngắn gọn và bao gồm các từ khóa được nhắm mục tiêu
• Văn bản thay thế: Cung cấp văn bản thay thế mô tả cho hình ảnh, sử dụng từ khóa khi thích hợp
• Xác nhận Tối ưu hóa tốc độ trang (với ngăn xếp chúng tôi đã sử dụng, thật khó để không có kết quả tuyệt vời ở đây).

Kết quả

Chà, đó là một hành trình dài cho đến khi trang web của chúng tôi hoạt động. Nhưng đoán xem? Công việc tiếp tục sau khi ra mắt.

Giai đoạn đầu tiên là cơ sở vững chắc cho những gì chúng tôi muốn đạt được. Việc xây dựng nó theo cách tiếp cận mô-đun cũng mang lại cho chúng tôi sự linh hoạt trong việc lặp lại, thay đổi và điều chỉnh trang web cho phù hợp với các xu hướng và nhu cầu mới. Chúng tôi hài lòng với kết quả và tự hào về cách chúng tôi đến được đây. Chúng tôi hy vọng rằng bằng cách chia sẻ hành trình của mình, bạn sẽ biết điều gì sẽ xảy ra khi xây dựng một trang web mới hoặc thiết kế lại một trang web.

Để tóm tắt mọi thứ chúng tôi đã chia sẻ ở đây, chúng tôi đã chuẩn bị một bản tóm tắt nhỏ để bạn có thể sử dụng nó trong dự án của mình.