Bất kỳ dự án redesign cho trang web dù lớn hay nhỏ, có thể nói đều là một việc đòi hỏi khá nhiều thời gian và công sức. Dù đôi khi không tránh khỏi những rủi ro sau khi redesign một số trang web trở thành “thảm họa” nhưng bên cạnh đó vẫn có những trang web được “nâng cấp diện mạo” một cách ngoạn mục.

Website, có thể hiểu là một công cụ quảng cáo và bán hàng quan trọng nhất, đồng thời cũng là một điều đại diện của hầu hết các công ty. Nên việc bỏ mặc trang web với thiết kế quá 5 năm, gần như lỗi thời so với mặt bằng chung các trang web ngày càng được trau chuốt cả về nội dung lẫn hình thức. Trong bài viết này, Tali sẽ giới thiệu với bạn 5 trang web ví dụ điển hình cho việc redesign thành công.

Nhưng khoan! Thiết kế và sắp xếp lại một trang web, có gì khác nhau vậy?

Điều này đã khiến không ít các designer và người dùng tranh cãi. Và có nhiều người cho rằng thay vì thiết kế lại trang web, bạn nên tập trung suy nghĩ về việc điều chỉnh lại chiến lược kinh doanh của mình. Cách nghĩ này cũng đồng nghĩa với lời khuyên: việc thay đổi, sửa sang trang web của bạn hoàn toàn vô nghĩa nếu nó không có sự liên kết với mục tiêu của doanh nghiệp. Hay nói cách khác, khi nói đến redesign một trang web, chúng ta nói đến sự quan trọng của việc sắp xếp, xác định các mục tiêu kinh doanh, quảng cáo trong quá trình redesign.

Tất cả các trang web được thiết kế lại thành công đều bao gồm việc đảm bảo tính thẩm mỹ, tính liên kết với lĩnh vực kinh doanh của doanh nghiệp, sự thân thiện với người truy cập. Và tất cả những điều đó Tali đã và đang đảm nhận, Tali không chỉ hỗ trợ các doanh nghiệp thiết kế website mà còn đảm đương nhiệm vụ redesign cho các doanh nghiệp đang gặp những khúc mắc về việc thiết kế lại trang web, bạn có thể liên hệ trực tiếp với đội ngũ thiết kế web của Tali ngay tại đây:

Vài tips giúp bạn xác định được mục đích của việc redesign trang web:

Một điều quan trọng mà trước khi quyết định thực hiện dự án thiết kế lại một trang web mà bạn cần lưu ý đó là có một kế hoạch rõ ràng về nó. Trước hết tự đặt câu hỏi cho mình những câu hỏi như:

  • kinh doanh và tiếp thị mà bạn hoặc doanh nghiệp của bạn mong muốn sẽ đáp ứng là gì?
  • Ai là người dùng mà bạn muốn nhắm đến?
  • Chúng ta có thể cải thiện trải nghiệm người dùng khi truy cập website?

Những câu hỏi trên sẽ phần nào giúp bạn định hướng được mục tiêu của mình trước khi bắt đầu một dự án thiết kế lại trang web.

Sau đây là 5 website được “thay áo mới” thành công

Tali đã tìm ra được 5 trang web đã được thiết kế lại gần đây, hãy cùng Tali xem qua cách chúng được thiết kế lại và những điểm khiến chúng thành công nhé!

1. Rev.com

Rev.com là một trang web cung cấp dịch vụ phiên âm và thuyết minh trực tuyến. Website này đã hoàn thành dự án thiết kế lại, mang một diện mạo hiện đại và và chuyên nghiệp hơn bao giờ hết.

Trước khi được thiết kế lại

Diện mạo trước đây của trang Rev có phần “lạc nhịp” so với thời đại số. Về phần giao diện người dùng được bố trí với ba khung minh họa ba phần giá trị cốt lõi của công ty bao gồm: tốc độ, chất lượng và dịch vụ. Các thẻ được áp dụng thiết kế theo phong cách retro thập niên 50, mặc dù hình ảnh tên lửa và điện thoại được cho là sẽ tạo hiệu ứng thị giác tốt hơn, đồng thời tạo cảm giác chuyên nghiệp, hiện đại hơn.

Sau khi được thiết kế lại

Sau quá trình redesign, trang web Rev sở hữu một diện mạo hiện đại, gọn gàng và “sạch sẽ” hơn. Trang dẫn hiển thị các giá trị vốn có của công ty, và 3 thẻ dịch vụ chính mà công ty cung cấp, có phần giải thích ngắn gọn, thông tin về giá và mục “call to action” ở mỗi thẻ dịch vụ. Và hơn thế nữa, các thẻ có hình dạng hiện đại, màu sắc trang nhã, hình động bắt mắt khuyến khích nhấp chuột vào CTA.

Khi cuộn trang xuống, chúng ta sẽ thấy nhiều sự thay đổi lớn hơn. Mỗi dịch vụ hiển thị trên trang có thể dễ dàng xác định bằng màu sắc, và đặc biệt khách hàng có thể nhấp vào các mục. Theo đánh giá của các khách hàng việc tương tác này tạo cảm giác tin tưởng hơn.

Nhìn chung, dự án redesign của Rev đã đạt một thành công lớn từ góc độ UX. Trang web đã có một cái nhìn nhẹ nhàng hơn, hiện đại hơn, kèm theo những tương tác tạo cảm giác tin tưởng cho người truy cập hơn, và màu sắc hài hòa hơn trước đó. Thậm chí, người chịu trách nhiệm quản lý dự án thiết kế lại trang Rev, Barron Caster đã chia sẻ :” Với thiết kế mới, diện mạo mới, Rev đã có thể cải thiện tỷ lệ chuyển đổi lên đến 18%, và đây là một con số đáng mừng cho công ty.

2. Panos Pictutures

Agency Panos Pictures, một agency cung cấp hình ảnh và film đã hoàn toàn “thay áo mới” cho trang web của mình về diện mạo cũng như trải nghiệm người dùng và nền cơ bản của cả trang web.

Trước khi thiết kế lại

Giao diện web trước đây của Panos (https://www.panos.co.uk) được đánh giá là không thân thiện với người dùng và đặc biệt là các thiết bị di động.

Trang chủ https://www.panos.co.uk bao gồm một menu điều hướng, khung tìm kiếm ở trên cùng, tiếp đó là một khung ảnh một anh hùng lớn cùng hai, ba hình nhỏ hơn, mỗi hình ảnh được liên kết đến các kho lưu trữ hình ảnh. Khi di chuyển chuột đến từng khung ảnh, người dùng có thể nhấp vào để xem thêm thông tin về câu chuyện của mỗi tấm ảnh. Tuy nhiên, tất cả vẫn là trình đơn được lồng vào nhau theo kiểu cũ, không có đường dẫn rõ ràng, cụ thể cho người dùng thuận tiện theo dõi.

Sau khi được thiết kế lại

Trang web https://www.panos.co.uk sau khi được thiết kế lại, bao gồm các yếu tố quen thuộc để người dùng vẫn có thể nhận ra “người quen”. Nhưng trải nghiệm người dùng cũng như cách thức bố trí trên trang web đã có nhiều cải tiến.

Trước hết, trang web Panos đã được đáp ứng đầy đủ những tính năng cần thiết giúp người dùng tương tác dễ dàng hơn. Nội dung cùng các yếu tố tự động thay đổi kích thước để có thể tương thích với màn hình của người dùng. Menu cuốn sau khi được thiết kế lại được ẩn đằng sau nút bánh hamburger và xuất hiện dưới dạng các lớp khi được nhấp vào. Trường tìm kiếm dễ dàng sử dụng hơn.

Khu vực hiển thị nội dung chính được hiển thị với một khung ảnh lớn cùng tiêu đề và CTA. Sau khi đuợc thiết kế lại, Panos được nhận xét là có không gian tốt hơn, tạo cảm giác thoáng hơn. Đi kèm theo đó là những hiệu ứng hấp dẫn và hay ho khi người dùng nhấp vào từng hình ảnh, một điểm cộng cho Panos.

Nhìn chung, dự án thiết kế lại của Panos đã mang lại trải nghiệm người dùng mà không làm mất đi bản chất, những đặc trưng của thương hiệu.

3. Mailchimp

Là một trong những dự án redesign thành công được nhắc đến nhiều nhất, trang web nền về tiếp thị Mailchimp được ra mắt vào năm 2018. Từ cách lựa chọn kiểu chữ serif mới mẻ, logo cũng được thiết kế lại một cách đẹp mắt đã phần nào giúp Mailchimp “thay áo mới” ngoạn mục.

Trước khi thiết kế lại

Trò chơi trên web Mailchimp rất mạnh và thu hút lượt truy cập đáng kể. Trang chủ rất đơn giản: một tùy chọn menu trên cùng theo sau là đề xuất các giá trị và CTA, kế đến là các mô tả tính năng chi tiết hơn. Tất cả điều này đều được minh họa bằng hình ảnh. Trang web phản hồi nhanh và có cấu trúc nền khá tốt, nhìn chung không có gì đáng để phàn nàn. Nhưng, điều đó không có nghĩa nó không thể được cải thiện thêm.

Sau khi được thiết kế lại

Diện mạo mới của Mailchimp được thay đổi toàn diện, nhưng vẫn giữ được một số đặc điểm quen thuộc. Trước tiên, người dùng sẽ nhận thấy màu vàng sáng, phông chữ serif đen cho các đề xuất giá trị và phác họa hoạt hình hay thay đổi. Một phần tùy chỉnh mới sẽ đi kèm vào bốn tính năng chính của Mailchimp, mỗi tính năng kèm theo một hình minh họa cỡ nhỏ.

Mailchimp đã chú trọng vào việc sắp xếp, bố trí không gian dành cho hướng dẫn và các bài viết có nội dung quảng cáo có giá trị tốt đẹp. Mailchimp cũng không quên làm nổi bật một số khách hàng lớn, củng cố trải nghiệm thương hiệu độc lập. Và trang được kết thúc với một lời kêu gọi hành động, khi cuộn đến cuối trang người dùng cũng sẽ nhận ra phần footer đã được tối giản, nhưng vẫn có nét tinh tế rất riêng của Mailchimp.

Có thể nói, Mailchimp đã can đảm, táo bạo khi quyết định thực hiện dự án redesign này, và đã thành công khi không chỉ cải thiện UX cơ bản mà còn làm hài lòng người dùng về UI.

4. UserTesting

Nền tảng nghiên cứu Trải nghiệm khách hàng UserTesting hẳn sẽ được đề cập nhiều nhất khi nói đến việc tạo mẫu, tham khảo người dùng để có thể đạt được trải nghiệm người dùng tốt hơn. Và website UserTesting cũng được đánh giá là một thương hiệu thực hiện việc redesign trang web thành công trong năm qua.

Trước khi thiết kế lại

Ở phần trang chủ, UserTesting cho hiển thị khung băng chuyền ba trang quảng cáo đăng ký dịch vụ thử nghiệm người dùng và CTA trỏ đến các dịch vụ khác. Ngoài những rủi ro thường thấy ở các thiết kế băng chuyền, các slide thứ hai và thứ ba cũng tạo cảm giác không rõ ràng và khó có thể tạo ra các khách hàng tiềm năng cho công ty.

Trước khi thiết kế lại, trang web UserTesting có phần lộn xộn, và công ty nhận thấy đã đến lúc cần chỉnh sửa, “trùng tu” trang web.

Sau khi được thiết kế lại

Trang chủ UserTesting là đã mang một luồng gió mới đến với người dùng. Toàn bộ trang sau khi redesign nhẹ hơn hẳn. Phần điều hướng trên đầu trang được cải thiện, băng chuyền được lược bỏ thay vào đó là hình minh họa thông minh, chuyên nghiệp và truyền cảm hứng hơn, kèm theo đó là một đều xuất giá trị táo bạo “call to action”.

Mỗi khi người dùng di chuyển chuột, các đề xuất giá trị sẽ lần lượt mở rộng ra, mỗi đề xuất được minh họa bằng đồ họa cùng ảnh động có hiệu ứng động thú vị, vui mắt.

Sau khi thiết kế lại, trang web UserTesting được nhận xét là nhẹ hơn, tốc độ tải trang nhanh hơn, bố cục rõ ràng và logic hơn. Thuận tiện cho người dùng khi thao tác sử dụng hơn.

5. Art Institute of Chicago

Trang web https://www.artic.edu cực nổi tiếng về nghệ thuật, sở hữu bộ sưu tập lớn nhất tại Hoa Kỳ. Đúng với cái tên và tính chất, trang web hiển thị những khung hình ảnh lớn và chiếm hầu hết vị trí trung tâm.

Trước khi thiết kế lại

Phiên bản cũ của trang web AIC có một chiều rộng cố định khá đơn giản và cứng nhắc. Ở phía trên của trang web, hiển thị một số nút điều hướng kích hoạt các menu.

Cả trang đều bị chi phối bởi băng chuyền hình ảnh có kích thước lớn mô tả chi tiết một số triển lãm của bảo tàng trong sáu slide. Một vấn đề lớn của băng chuyền hình ảnh này là: phần tùy chọn gần như biến mất nếu hình ảnh bên dưới khớp với màu của chúng, khiến người dùng khó định vị được phần mình đang theo dõi. Một điểm “cứu” trang web này là các hình ảnh hiển thị có độ sắc nét, tính thẩm mỹ cao. Tuy nhiên phần văn bản màu trắng trên hình ảnh hơi khó đọc.

Bên dưới băng chuyền là một thanh điều hướng footer đơn giản, được sử dụng phông chữ nhỏ hiển thị mục giờ hoạt động, một số biểu tượng truyền thông xã hội.

Sau khi được thiết kế lại

Trang web Art Institue of Chicago sau khi được thiết kế lại đã được cải thiện nhiều về UX. Đầu tiên, người dùng có thể thoải mái truy cập trang web trên mọi thiết bị. Thanh điều hướng hàng đầu được tối giản hóa, giảm thiểu tình trạng menu được thả xuống lộn xộn. Trang web có thêm không gian cho các thông báo ngắn hạn, tạm thời.

Băng chuyền hình ảnh được lược bỏ bớt, thay vào đó là một khung hình cỡ lớn duy nhất. Thông tin về các buổi triển lãm được trình bày trên một lớp màu xám mờ đơn giản, tinh tế, giúp cải thiện khả năng đọc cho người dùng.

Khi kéo xuống, chúng ta có thể thấy trang web được bố cục theo dạng lưới tương ứng với từng module của triển lãm và sự kiện nghệ thuật. Tiếp theo là đăng ký email cho người dùng. Phần footer được cải thiện khá nhiều, và được tổ chức theo từng phần tách bạch, dễ hiểu.

Dự án redesign đã mang lại cho trang web AIC một diện mạo mới mẻ, tạo cảm giác trang trọng hơn đúng với tên gọi “Art Institute of Chicago”, đồng thời cải thiện trải nghiệm người dùng. Bảo tàng thậm chí còn quyết định đăng tải hàng ngàn hình ảnh có độ phân giải cao miễn phí lên trang web này, đây được đánh giá là sự đầu tư mạnh của bảo tàng trong dự án redesign này.

Cuối cùng,

Tali nghĩ rằng những ví dụ trên có thể giúp bạn dễ dàng hình dung đến tầm quan trọng UI, UX đối với một trang web và đặc biệt là đối với thương hiệu mà trang web đó đại diện. Và việc thiết kế lại một trang web để theo kịp xu hướng công nghệ cũng như xu hướng thiết kế vào mỗi giai đoạn đều rất quan trọng. Bên cạnh đó, Tali cũng nhận thấy việc thêm những chuyển động hay hoạt hình cũng khiến trang web trở nên thân thiện hiện với người truy cập cũng rất cần thiết nhất là khi chúng ta đang từng bước tiến sâu hơn vào kỷ nguyên “vạn vật kết nối” như hiện nay.

Nếu bạn có bất cứ câu hỏi nào cũng như mong muốn về việc thiết kế website hoặc thiết kế lại website bạn có thể liên hệ theo thông tin:

Liên lạc ngay với chúng tôi hoặc để lại thông tin của bạn, bộ phận tư vấn của ZIVAS sẽ liên lạc lại ngay để giải đáp mọi thắc mắc!

Leave a Comment