Pixy

Quy trình thiết kế lại website – Case Study

Trải nghiệm người dùng không bắt đầu bằng một mockup đẹp. Nó phải dựa trên kế hoạch chiến lược và tầm nhìn thiết kế tập trung vào các mục tiêu của công ty.  Khi một website trở nên lỗi thời, việc nắm vững quy trình cơ bản thiết kế lại website sẽ giúp doanh nghiệp rút ngắn thời gian thay đổi này.

Thiết kế website tồi vs Thiết kế đẳng cấp thế giới

Nhà thiết kế website chịu trách nhiệm về trải nghiệm người dùng (UX) và giao diện người dùng (UI). Nhiệm vụ của chúng tôi là đảm bảo rằng người dùng có trải nghiệm tối ưu khi tương tác với các giao diện chúng tôi thiết kế. Điều này đòi hỏi lập kế hoạch kỹ lưỡng ngay từ đầu.

Bài viết này phác thảo một quy trình thiết kế lại website đáng tin cậy sẽ giúp đảm bảo lần thiết kế lại website tiếp theo của bạn được xây dựng trên nền tảng vững chắc.

Nghiên cứu tiền dự án: Bước 0 trong quy trình thiết kế lại website

Để trình bày quy trình thiết kế lại website, chúng ta hãy đi qua các giai đoạn chúng tôi đã thực hiện cho Archaeology Southwest một tổ chức phi lợi nhuận khám phá và bảo vệ các địa điểm khảo cổ ở phía tây nam Hoa Kỳ.

Sau khi điều tra sơ bộ về lĩnh vực của khách hàng và đối thủ cạnh tranh, hãy kiểm tra chặt chẽ mọi tài nguyên website có sẵn.

Trong trường hợp Archaeology Southwest, tôi đã phải đối mặt với một website có rất nhiều núi.  Núi và nội dung lộn xộn bên trong một cổng thông tin cũ kỹ. Tình hình rất tệ nên tôi phải lặp lại trật tự.

Bước 1: Kiểm tra nội dung

Khi tu sửa một ngôi nhà, điều quan trọng là phải thử và trục vớt các vật liệu có giá trị trước ngày phá dỡ. Nguyên tắc tương tự áp dụng cho thiết kế website

Bạn cần phải đi qua website theo trang và lấy ra tất cả nội dung. Là nhà thiết kế, chúng ta phải tìm ra nội dung nào xứng đáng là một loại bài đăng độc đáo và những trang nào là tĩnh.

quy trình thiết kế lại website cho tổ chức khảo cổ
Archaeology Southwest: website trước khi thiết kế lại

Một khi điều này được thực hiện, hãy xây dựng một chiến lược về cách tổ chức mọi thứ.

Tuy nhiên, đừng quyết định nội dung nào nên ở lại và những gì nên được xóa. Lý do vì sao?

Khi làm việc với các doanh nghiệp, có một số người khác nhau chịu trách nhiệm về nội dung của một website và số lượng nội dung tồn tại có thể đáng kinh ngạc. Cách tiếp cận tốt nhất là phân loại mọi thứ đầu tiên.

Tôi thường bắt đầu với điều hướng chính và đi từng trang. Bằng cách này, tôi sẽ có kiến trúc thông tin và sơ đồ website trước cuộc họp khách hàng đầu tiên.

Thật không may, website Archaeology Southwest không phải là điển hình. Hầu hết các liên kết không thể truy cập thông qua điều hướng hàng đầu và được ẩn trong nội dung. Kế hoạch của tôi có thể đã lầm to nếu chỉ dựa trên điều hướng!

Bằng cách nói chuyện với nhiều người trong nhóm của khách hàng, tôi có thể hiểu rõ hơn về phạm vi của dự án và sau cuộc họp với khách hàng, tôi đã có thể xác định trọng tâm website, quy trình làm việc, nội dung và tính năng của website của họ. 

Từ đó, chúng tôi đã đưa ra các loại nội dung cốt lõi sau (một số mới, một số hiện có):

Danh sách nội dung website chính
Bước 2: Tạo trọng tâm – Đơn giản hóa – Tổ chức lại.

Khi tất cả nội dung được sắp xếp vào các hộp có nhãn, đã đến lúc phát triển kế hoạch chi tiết cho một cấu trúc mới. Các nội dung sẽ hiển thị nội dung ở dạng tốt nhất. Nhưng trước tiên, chúng ta cần tạo sự tập trung.

Theo Archaeology Southwest, mọi người truy cập website của họ để nghiên cứu thông tin về các dự án đang diễn ra, tìm hiểu về các sự kiện sắp tới và đọc một tạp chí hàng tháng. 

Tuy nhiên, các thông tin này chỉ trả lời, “người ta làm gì trên website?” nhưng không tiết lộ lý do tại sao mọi người truy cập website ở nơi đầu tiên.

Các lý do “tại sao” là một trọng tâm của website. Để tìm trọng tâm, hãy nhìn vào cốt lõi của tổ chức.

Trong trường hợp này, Archaeology Southwest, chính là “trái tim” của Archaeology Southwest. Không có vị trí, sẽ không có địa điểm khảo cổ, không có di tích và chắc chắn không có bảo tàng hay triển lãm nào. 

Tất cả mọi thứ trong khảo cổ học liên quan đến vị trí.

Với trọng tâm được xác định, chúng ta có thể đơn giản hóa và tổ chức. Đối với Archaeology Southwest. 

Tôi bắt đầu bằng cách chia nội dung thành các danh mục không liên quan đến địa điểm, chẳng hạn như trang nhóm và báo cáo hàng năm. Sau khi dọn dẹp một chút, tôi đã kết thúc với bản đồ thô này:

Hai khu vực nội dung cốt lõi – Những việc cần làm và Địa điểm

Hình ảnh trên thể hiện hai lĩnh vực cốt lõi: Những việc cần làmĐịa điểm. Những việc cần làm (trái) bao gồm các hoạt động mà khách truy cập vào website có thể tìm hiểu và thực hiện. Vị trí (phải) tập trung vào nội dung trang có liên quan đến các vị trí cụ thể. Tại sao cấu trúc nó theo cách này?

Ý tưởng là một người dùng trung bình có thể không biết tên của video hoặc dự án nhưng có thể sẽ biết tên của một địa điểm. Theo cách này, khách truy cập có thể tìm thấy nội dung vì nó liên quan đến vị trí.

Ngoài ra, mỗi khối màu trong Vị trí thể hiện một loại bài đăng duy nhất. Từ góc độ tổ chức, triển lãm, lớp học và triển lãm trực tuyến là tất cả các sự kiện có tính chất khác nhau.

Trong website Archaeology Southwest cũ, có các trang tĩnh riêng cho một tạp chí và một cửa hàng trực tuyến nơi khách truy cập có thể mua tạp chí. Để làm cho việc mua đơn giản hơn, tôi đã tích hợp một tùy chọn mua trong mẫu tạp chí.

Cấu trúc tổ chức còn lại rất đơn giản: 

  • Trang Giới thiệu để tìm hiểu thêm về tổ chức
  • Liên kết trực tiếp đến trang của Cửa hàng 
  • Trang Quyên góp
  • Trang Các cập nhật mới

Cửa hàng và trang quyên góp là chỗ tạo ra tiền, vì vậy nó là cần thiết chúng được bao gồm trong các điều hướng chính.

Khi kế hoạch chi tiết tổ chức hoàn tất, đã đến lúc kết nối nội dung thực tế.

Bước 3: Cho khách hàng tham gia ngay từ đầu

Sơ đồ website bao gồm các trang, nhưng nó không bao gồm bản đồ nội dung. Các nhà thiết kế website dày dạn biết rằng hầu hết các vấn đề xảy ra khi khách hàng bắt đầu thêm nội dung vào website của họ. Để tránh vấn đề này, hãy cho khách hàng tham gia ngay từ đầu.

Đối với Archaeology Southwest, tôi đã tạo một Tài liệu Google bao gồm sơ đồ website và tôi đã yêu cầu khách hàng ráp nội dung cũ của nó với cấu trúc mới.

Nếu một cái gì đó không phù hợp, chúng tôi sẽ giải quyết nó sau. Đây là một bước quan trọng. Tại sao? Bên cạnh việc đưa khách hàng tham gia vào quá trình, nó sẽ phát hiện ra các vấn đề với cấu trúc trước khi bắt đầu thực hiện.

Trong trường hợp này, một số mục trình đơn sơ đồ website đã được thay đổi và do khách hàng có nhiều trang quyên góp, nên tạo ra một loại bài đăng duy nhất chỉ dành cho điều đó.

Tạo cấu trúc trực quan thông qua wireframe

Trong bước này, tôi bắt đầu cung cấp cho tác phẩm một cấu trúc trực quan. Để hệ thống hoạt động tốt và tích hợp thành công khái niệm rằng tất cả mọi thứ liên quan đến vị trí, thì tôi đã tạo ra một mối quan hệ hai chiều giữa các loại bài đăng.

Đây là ý tưởng cơ bản: Khi khách truy cập vào website Archaeology Southwest và chọn Grand Canyon, họ sẽ thấy thông tin về vị trí đó, nhưng họ cũng sẽ tìm thấy thông tin liên quan đến các dự án, sự kiện, triển lãm và mọi thứ khác mà quản trị viên website đánh dấu là vị trí- riêng.

Vì liên kết là hai chiều, khách truy cập cũng có thể đến Grand Canyon bằng cách truy cập trang dự án. Cuối cùng, tôi đã kết thúc với kết quả này:

Concept Layout của website

Danh sách vị trí hiển thị tất cả các vị trí gần đây nhất ở trên cùng. Thanh tìm kiếm là thứ đầu tiên người dùng nhìn thấy khi đến trang. 

Bản đồ Google sẽ chiếm khoảng 80 phần trăm màn hình. Nó cho phép người dùng chọn các điểm trên bản đồ và khi họ cuộn hoặc tìm kiếm, lưới danh sách sẽ xuất hiện.

Trên một trang địa điểm, phần chính nằm ở bên trái vì đó là thông tin quan trọng nhất. Thông tin meta liên quan là thứ yếu, vì vậy nó ở bên phải.

Để đạt được bố cục cân bằng, điều quan trọng là phải có sự phân cấp khác biệt giữa các khối phần tử thứ nhất, thứ hai và thứ ba. Điều này cho phép mắt di chuyển dễ dàng giữa các phần.

Trong bố cục Archaeology Southwest, mắt người dùng bắt đầu bằng tiêu đề, sau đó di chuyển đến khối nội dung và cuối cùng theo dõi sang thanh bên phải. 

Mỗi phần nội dung liên quan được hiển thị theo thứ tự liên quan. Chẳng hạn, nếu người dùng đang đọc về Grand Canyon, nội dung này có thể sẽ được theo sau bởi hình ảnh và bản đồ.

Vì đây chủ yếu là một website thông tin, điều quan trọng là phải có một Tùy chọn liên quan đến Vị trí này.

 Tuy nhiên, không có nhiều nội dung được liên kết duy nhất với từng vị trí, vì vậy tôi hiếm khi kết hợp nội dung được sử dụng (nhưng có liên quan) thành một khối duy nhất dưới phần thân trang.

Cung cấp mục tiêu rõ ràng cho Trang chủ 

Với một mô hình chung cho các loại bài đăng tại chỗ, tôi có thể tập trung vào “Trang chủ”.

 Bước đầu tiên là thiết lập mục tiêu cho trang chủ, đây là một phần quan trọng của thiết kế UI. 

Nghiên cứu của khách hàng cho thấy nhiều người dùng rời khỏi website mà không hiểu đầy đủ về nó. Do đó, một văn bản giới thiệu và chào đón cần phải là điều đầu tiên người dùng nhìn thấy.Trọng tâm cốt lõi mới xoay quanh khối vị trí thứ cấp. Tiếp theo là “Các sự kiện đang diễn ra” tại archaeologysouthwest.org (tạp chí hiện tại, blog, sự kiện, bản tin, v.v.). Đây là sự lặp lại của quá trình bố trí:

Chuỗi lặp lại  và thiết kế cuối cùng cho thiết kế lại website (phiên bản V1, V2, V3)

Với V1 (trái), tôi đã thiết kế một bố cục cơ bản giống với trang chủ ban đầu. Không có nhiều thứ bậc. Điều đầu tiên người dùng nhìn thấy là vị trí nổi bật, nhưng từ đó, họ có thể sẽ bị lạc trong các cột.

Đối với V2 (giữa), tôi đã tạo một cột riêng để mắt dễ theo dõi hơn. Tuy nhiên, nó vẫn có thể được cải thiện. Đây là nơi kiến ​​thức về nội dung đóng vai trò chính. 

Tôi biết rằng Archaeology Southwest không bao giờ có nhiều hơn hai sự kiện diễn ra cùng một lúc, vì vậy sẽ không có chỗ cho một số sự kiện trên trang chủ.

Trong V3 (phải), tôi tập trung vào các sự kiện sắp tới. Nếu vì một lý do nào đó, có nhiều hơn hai sự kiện, người dùng có thể nhấp vào nút Xem thêm và xem phần còn lại. 

Tôi cũng nhấn mạnh thêm vào tạp chí hiện tại vì đó là nơi tạo doanh thu của khách hàng. Người dùng bắt đầu từ trên xuống và di chuyển xuống theo mẫu F. Luồng mắt là:

Vị trí nổi bật> Chào mừng> Tạp chí> Sự kiện> Tin tức

Với wireframe trực quan và cấu trúc của website, việc củng cố các tính năng và cách mọi thứ sẽ hoạt động dễ dàng hơn nhiều. Tại thời điểm này, tôi có một cuộc họp khác với khách hàng để xem xét chức năng và luồng tương tác của người dùng, cả hai đều rõ ràng hơn ở giai đoạn này.

Vẫn sẽ có những sửa đổi sau này xuống đường? Có, nhưng chúng sẽ là các chỉnh sửa, không phải toàn bộ quá trình thay đổi. Quan trọng nhất, sẽ không có bất ngờ.

Kết hợp với Hướng dẫn về Phong cách Thương hiệu

Bây giờ đến phần thú vị, chuyển đổi các wireframe thành thứ mà mọi người sẽ sử dụng và trải nghiệm. Đối với dự án này, tôi nhằm mục đích làm cho nội dung bằng văn bản dễ tiêu hóa bằng cách triển khai màu sắc và kiểu chữ thương hiệu.

Hướng dẫn về Phong cách – Màu sắc thương hiệu và kiểu chữ cho website được thiết kế lại

Thử nghiệm với Kết hợp Kiểu chữ 

Kiểu chữ là không thể thiếu đối với thiết kế web tốt. Vì vậy chúng tôi phải sớm tìm ra  Bộ kiểu chữ (Type Scheme) của chúng tôi ngay lập tức. 

Hầu hết các bản sắc Archaeology Southwest sử dụng phông chữ đậm đặc của Univers và Adobe Caslon. Adobe Caslon được sử dụng không có quy tắc, nhưng tôi nhận thấy rằng nó không được sử dụng thường xuyên như Univers.

Tôi đã thực hiện một nghiên cứu phông chữ nhỏ để xem những cặp đôi nào tạo cảm giác tốt nhất cho một tổ chức phi lợi nhuận chuyên nghiệp. 

Tuy nhiên, tôi cũng không muốn Bộ kiểu chữ  của mình trông quá khác biệt với tài liệu tiếp thị của khách hàng.

Nghiên cứu phông chữ cho Adobe Caslon và Univers để thiết kế lại website

Sau khi thực hiện so sánh phông chữ, rõ ràng Adobe Caslon phải là phông chữ tiêu đề và Univers sẽ được sử dụng cho phụ đề. 

Đặt tiêu đề chính trong trường hợp câu mang lại cho thương hiệu một cảm giác cá nhân hơn, trong khi chữ hoa lại tạo ra nhiều rung cảm của công ty.

Cắt gọt lại vẻ ngoài và biểu cảm của website

Tôi thiết kế trải nghiệm nhẹ nhàng và cởi mở để người dùng cảm thấy rằng Archaeology Southwest vừa dễ tiếp cận vừa có năng lực cao. 

Dựa trên dữ liệu phân tích, phần lớn khách truy cập sử dụng trình duyệt máy tính để bàn (có thể do hầu hết mọi người truy cập website để nghiên cứu). Do đó, trọng tâm ban đầu của tôi là thiết kế cho người dùng máy tính để bàn.

Khi đến từ máy tính để bàn, tôi muốn khách truy cập thấy ngay vị trí nổi bật, văn bản chào mừng và các sự kiện sắp tới theo sau là một phần của tiêu đề tạp chí. 

Bằng cách này, mọi người trước tiên nhìn thấy những gì công ty nói về và những gì họ đang quảng bá.

Bố cục web đáp ứng cho máy tính để bàn và thiết bị di động

Trên các thiết bị di động, các ưu tiên có một chút khác biệt. Vì người dùng đang truy cập thông tin khi đang di chuyển, các sự kiện quan trọng hơn, vì vậy chúng được đặt cao hơn trong danh sách.

So sánh thiết kế máy tính để bàn và thiết bị di động cho website được thiết kế lại

Tôi cũng cập nhật nút quyên góp ở chân trang để thân thiện hơn bằng cách thay đổi từ nút thành câu.

Kết thúc mạnh mẽ: Lưu ý đến các chi tiết

Có hai lý do khiến người dùng đến trang chi tiết, họ muốn tìm hiểu thêm về một mốc, hoặc họ đã biết về một địa điểm và đang tìm kiếm thêm thông tin (chỉ đường, số điện thoại, v.v.). Do đó, điều quan trọng là phải trình bày cả hai tùy chọn ngay lập tức để người dùng không phải tìm kiếm.

thiết kế lại website cuối cùng cho Archaeology Southwest

Tôi đã quyết định tách cột chi tiết ra khỏi khu vực nội dung để làm cho nó có trọng lượng hơn và làm cho trang thú vị hơn. Điều này giúp tạo cấu trúc phân cấp thành phần, vì vậy khi khách truy cập đến trang, trước tiên họ sẽ thấy tiêu đề trang theo sau là một bộ sưu tập hình ảnh nhỏ và sau đó là cột chi tiết.

Kiểu thiết kế này đảm bảo rằng người dùng sẽ nhận thấy các chi tiết bổ sung của một vị trí ngay lập tức. Một chút đệm thêm xung quanh cột giữ cho mắt tập trung và giúp quét qua thông tin dễ dàng hơn.

Chế độ xem di động sụp đổ như người ta mong đợi. Nội dung xóa sạch trước và thông tin meta theo sau. Tôi đã đặt video và tạp chí cuối cùng trên trang di động vì chúng ít quan trọng nhất đối với người dùng di động. Các trang khác theo cùng một cấu trúc để tạo ra một dòng chảy và kinh nghiệm nhất quán.

Quy trình thiết kế lại website được xây dựng trên nền tảng của một kế hoạch cẩn thận

Nhìn lại quy trình thiết kế lại website, rõ ràng phần lớn thời gian được dành cho việc tổ chức và lập kế hoạch. Chỉ 30 phần trăm của dự án đã được dành để thiết kế website.

Kế hoạch chi tiết phải được thực hiện để quy trình thiết kế lại website thành công. Dành thời gian để thực hiện nghiên cứu trước dự án, làm quen với nội dung hiện có và liên quan đến khách hàng là những bước quan trọng.

Cuối cùng, không có cách nào xung quanh nó; con đường dẫn đến thiết kế lại website tuyệt vời và sự tự tin chuyên nghiệp được mở ra bằng cách tiếp cận có phương pháp để tổ chức dự án.

Nếu nội dung bài này hữu ích, hãy like và share để ủng hộ Pixy team nhé. 

F: https://www.facebook.com/pixystudiovn

E: [email protected]

viVI
en_USEN viVI