Study4 Redesign
Thiết kế lại giao diện và trải nghiệm luyện đề trên website Study4, giúp người dùng thao tác thuận tiện hơn trong quá trình ôn luyện.
1. Thiết kế lại trải nghiệm luyện đề
Mình từng ôn luyện TOEIC trên website của Study4 và trong quá trình này, mình nhận thấy một số điểm chưa hợp lý trong cách website sắp xếp thông tin và tương tác với người dùng. Từ trải nghiệm đó, mình muốn thử thiết kế lại website Study4 với trọng tâm là luồng luyện đề.
Với dự án cá nhân này, mình tập trung vào phiên bản desktop. Bắt đầu bằng việc rà soát giao diện gốc để xác định những điểm cần cải thiện rồi thiết kế lại các màn cụ thể và xây dựng hệ thống component.
Ảnh 1: Trang chủ Study4 trước và sau redesign
Những điểm cần cải thiện
Khi xem xét các màn hình trong cùng một luồng, mình nhận thấy website có nhiều vấn đề lặp lại. Các thông tin và hành động chính chưa được phân cấp rõ ràng, trong khi cách dùng màu sắc, chữ và các thành phần giao diện còn thiếu thống nhất. Một số chi tiết cũng chưa thể hiện rõ đâu là nội dung có thể tương tác hoặc trạng thái hiện tại của bài làm.
Từ những ghi nhận này, mình tổ chức lại nội dung và cách thao tác ở từng trang, đồng thời xây dựng các quy tắc chung cho UI. Mục tiêu là giúp người dùng (học viên) dễ theo dõi thông tin và nhận biết các lựa chọn khác nhau với cách hiển thị và thao tác nhất quán hơn trong suốt quá trình sử dụng website.
2. Từ việc chọn đề đến làm bài
Sắp xếp lại trang chủ và thư viện
Mình phân bổ và sắp xếp lại nội dung theo mục đích sử dụng của từng trang. Trang chủ tập hợp lịch học, mục tiêu cá nhân và các nội dung học tập để người học theo dõi việc ôn luyện. Khi chuyển sang thư viện, trọng tâm là tìm và chọn đề.
Các khối thông tin cá nhân và giới thiệu được đưa ra khỏi thư viện, dành thêm không gian cho danh sách đề và bộ lọc. Đề thi được phân loại theo kỳ thi và cấp độ; trạng thái trên thẻ giúp phân biệt đề chưa làm, đang làm dở và đã hoàn thành.
Ảnh 2: Giao diện Trang chủ và Thư viện đề thi
Thông tin đề thi và Cấu hình làm bài trực quan hơn
Sau khi chọn đề, người học cần xác định chế độ, phần thi và thời gian làm bài. Ở giao diện gốc, nút Bắt đầu nằm dưới một khối thông tin dài và khá thiếu nổi bật. Mình gom các lựa chọn liên quan vào một khối riêng, đặt cạnh thông tin đề và lịch sử làm bài, để người học có thể xem lại thiết lập trước khi bắt đầu.
Nút chính thay đổi nhãn theo chế độ đã chọn và chỉ có thể bấm khi đã chọn phần thi. Cách thể hiện này nối các lựa chọn với hành động tiếp theo ngay trong cùng một khu vực.
Ảnh 3: Trang đề thi và khu vực thiết lập bài làm
Ảnh 4: Thiết lập cấu hình làm bài trên laptop
3. Khung làm bài của chế độ Luyện tập và Thi thử
Thiết kế dựa trên thực tế
Bố cục của giao diện làm bài được dựa trên giao diện thi TOEIC thực tế (tham khảo từ IIG). Mục đích là để học viên làm quen và dễ thao tác hơn khi thi thật.
Khi bắt đầu làm bài, thanh điều hướng website và các thành phần không liên quan được đưa ra khỏi màn hình, dành không gian cho nội dung đề, thông tin tiến độ và các công cụ cần thiết với cùng một bố cục cho luyện tập và thi thử.
Các công cụ được điều chỉnh theo chế độ. Luyện tập có thêm lựa chọn hỗ trợ, chẳng hạn như xem cả part trên cùng một trang (kế thừa từ website Study4 gốc). Chế độ Thi thử giới hạn những hỗ trợ này. Cấu trúc chung giúp giữ vị trí của câu hỏi, đồng hồ và các thao tác quen thuộc khi chuyển chế độ.
Ảnh 5: Giao diện Luyện tập và Thi thử
Theo dõi câu trả lời và kết thúc bài làm
Bảng điều hướng câu thay đổi theo mục đích sử dụng. Khi làm bài, bảng thể hiện câu đã trả lời, chưa trả lời và được đánh dấu. Ở chế độ Xem lại, bảng chuyển sang thể hiện kết quả đúng, sai hoặc bỏ trống để người dùng có thể nhảy nhanh đến câu cần kiểm tra.
Trước khi nộp, hộp xác nhận cho phép kiểm tra tình trạng bài làm và quay lại nếu cần. Việc hết giờ cũng được xử lý theo chế độ: nếu là Luyện tập thì chỉ thông báo đến người dùng và cho phép tiếp tục làm nếu họ muốn; nếu là Thi thử thì hệ thống sẽ tự động nộp bài và hiển thị thông báo hết giờ.
Ảnh 6: Bảng điều hướng câu và Hộp xác nhận nộp bài/hết giờ
4. Kết quả và xem lại bài làm
Xem và hiểu lỗi trước khi làm lại
Ở trang kết quả, phần tổng quan được đặt lên trước, sau đó mới đến phân tích chi tiết. Các thông tin về điểm số và số câu đúng, sai, bỏ trống giúp người học nhìn lại bài vừa làm trước khi đi vào từng câu.
Nút “Xem đáp án” được ưu tiên là hành động chính còn “Làm lại các câu sai” là hành động phụ. Thứ tự này thể hiện hướng thiết kế: xem lại và hiểu lỗi trước rồi mới thử làm lại sau.
Ảnh 7: Trang kết quả bài làm
Đối chiếu bài làm ngay khi xem đáp án
Màn xem lại giữ câu hỏi, câu trả lời đã chọn, đáp án đúng và lời giải trong cùng một màn hình. Với phần nghe, transcript nằm bên cạnh để người học đối chiếu với nội dung câu hỏi.
Mình tập trung việc xem đáp án vào màn này và bỏ danh sách đáp án dài ở trang kết quả. Nhờ vậy, mỗi màn có vai trò rõ hơn: trang kết quả cung cấp tổng quan và phân tích, còn màn xem lại dành cho việc đọc và hiểu từng câu.
Ảnh 8: Màn xem lại bài làm
Ảnh 9: Xem lại bài làm trên laptop
5. Hệ thống thiết kế và Tổng kết dự án
Xây dựng Design System
Để giữ sự nhất quán giữa các màn, mình xây dựng một Design System nhỏ dựa trên Material Design 3 và điều chỉnh cho phù hợp với Study4. Màu sắc được phân theo vai trò, chữ có các mức nhấn khác nhau, còn nút được chia thành ba mức ưu tiên theo hành động cần thực hiện.
Bộ thiết kế gồm 43 component, từ nút và ô tìm kiếm đến thẻ đề, bảng điều hướng câu và thẻ xem đáp án. Các biến thể dựa trên những trạng thái khác nhau. Ví dụ như thẻ xem đáp án giữ cách sắp xếp nội dung nhưng thay đổi dấu hiệu và thông tin phản hồi theo kết quả trả lời.
Ảnh 10: Một phần của hệ thống giao diện
Kết quả và bước tiếp theo
Dự án hoàn thành 5 màn chính trên desktop, các biến thể làm bài, bảng điều hướng, hộp thông báo cùng bộ component và tài liệu mô tả thiết kế. Các quyết định về bố cục, thao tác và trạng thái được cụ thể hóa trong toàn bộ luồng luyện đề.
Thiết kế chưa được kiểm thử với người dùng. Nếu tiếp tục, mình sẽ ưu tiên kiểm tra cách người học chọn thiết lập bài và tìm lại câu sai, để xem những thay đổi này có hỗ trợ việc ôn luyện như dự kiến hay không.
Trung Nguyên
Tác giả
Cảm ơn bạn đã dành thời gian xem dự án này. Nếu bạn cũng từng sử dụng website Study4, mình rất muốn biết liệu những thay đổi này có phù hợp với cách bạn học và luyện đề không?