The Case Study
Unica - Nền tảng đăng ký học online
Nền tảng học trực tuyến Unica
Một vài lưu ý nhỏ trước khi bắt đầu
Case study này được thực hiện nhằm mục đích nghiên cứu và là một phần của bài test online cho GeekUp - Product Designer.
Tôi sẽ chỉ trình bày phần mình làm trong bài test này đó là - đưa ra giải pháp cải thiện luồng tìm kiếm và đăng ký khóa học (aka re-designing) của học viên trên Unica.
Do phần đề bài đưa ra được trình bày hoàn toàn bằng tiếng Việt vậy nên tôi sẽ trình bày toàn bộ giải pháp thiết kế của mình cũng bằng tiếng Việt.
Case Study overview
Sơ lược về case study này
Vai trò của tôi
UX/UI Designer - Research & Analysis, Design System Development, Visual Design, Prototyping
Thời gian thực hiện
7/6/2024 - 8/6/2024 (2 ngày)
Tổng quan
Unica là một nền tảng học trực tuyến online tại Việt Nam, nơi người dùng có thể mua những khóa học e-learning để nâng cao trải nghiệm của bản thân.
Nghiên cứu này được thực hiện để giúp nền tảng cải thiện và nâng cao trải nghiệm cho học viên, đảm bảo họ nhận được giá trị tối đa từ các khóa học và dịch vụ cung cấp.
Tôi thực sự làm gì trong case study
Tôi đã nhanh chóng tiến hành nghiên cứu thị trường về học trực tuyến tại Việt Nam và chọn một công ty E-Learning hàng đầu để phân tích.
Để đưa ra các giải pháp cải thiện trong thời gian hạn chế, tôi phải kết hợp tư duy logic về người dùng và thiết kế để phân tích các luồng nghiệp vụ và ghi chú các điểm cần hoặc có thể cải thiện của Unica.
Những ghi chú này sẽ là cơ sở và nền tảng cho việc phát triển và cải thiện nền tảng học trực tuyến này.
The Problem
Những khó khăn mà tôi gặp phải
Báo cáo về vấn đề
Thực tế, với sự phát triển từ năm 2016, Unica đã xây dựng được một nền tảng học trực tuyến với các giá trị khá tốt so với các đối thủ cạnh tranh.
Tuy nhiên, về mặt nghiệp vụ và giao diện, Unica chưa đầu tư đủ kỹ lưỡng. Giao diện không thực sự hấp dẫn và thu hút đối với học viên, đặc biệt là nhóm đối tượng trẻ.
Nền tảng hiện tại tập trung quá nhiều vào việc hiển thị và dàn trải các khóa học mà chưa thực sự tập trung đầu tư vào trải nghiệm cá nhân của từng học viên.
Trang chủ của Unica
Research Summary
Quy trình nghiên cứu và phân tích
Thị phần của Unica trên thị trường học trực tuyến khá tốt
Market Research
Với một thị trường mà theo ước tính có thể đạt được tới 3 tỷ đô vào năm 2023 và những số liệu đáng kinh ngạc khi phân tích về doanh nghiệp thì Unica có thể nói có lợi thế cạnh tranh rất cao và đang nằm trong top 3 những nền tảng học trực tuyến được sử dụng nhiều nhất ở Việt Nam.
Vietnam IT Landscape 2020 - TOPDev
Nghiên cứu Doanh Nghiệp
Nền tảng học trực tuyến Unica - “Siêu thị” Khóa học E-Learning
Được thành lập vào năm 2016
+1.000 giảng viên
+2.000 khóa học trực tuyến
500.000 học viên
Nghiên cứu Sản Phẩm
Sản phẩm của Unica là hệ thống học trực tuyến. Họ bán những khóa học trực tuyến của mình cho họ viên
Bên cạnh đó họ cũng có cung cấp giải pháp học trực tuyến cho các doanh nghiệp và bán các gói hội viên cho các cá nhân.
Giá trị của Doanh Nghiệp và Sản Phẩm
Slogan: Học bất cứ lúc nào, bất cứ nơi đâu
Sứ mệnh của Unica là đem tri thức tới 10 triệu người dân Việt Nam.
Mang lại
Cơ hội nghề nghiệp và hợp tác giảng dạy với nhiều giảng viên.
Trải nghiệp học trực tuyến mọi lúc mọi nơi cho học viên.
USP:
Khóa Học Chất Lượng Cao: Unica cung cấp các khóa học được thiết kế bởi các chuyên gia hàng đầu, đảm bảo kiến thức đa dạng và bổ ích.
Trải Nghiệm Cá Nhân Hóa: Nền tảng được tùy chỉnh để phản ánh nhu cầu học tập riêng biệt của từng học viên.
Cộng Đồng Học Tập Sôi Động: Hỗ trợ và tương tác từ cộng đồng học viên, đồng nghiệp.
Tiện Lợi và Linh Hoạt: Giao diện dễ sử dụng cho phép tiếp cận nội dung học tập mọi lúc, mọi nơi cả ở nền tảng web và mobile.
Hỗ Trợ Chuyên Nghiệp: Đội ngũ hỗ trợ sẵn lòng giúp đỡ và hỗ trợ học viên trong suốt quá trình học tập.
Mục tiêu và kỳ vọng của Doanh Nghiệp vào Sản Phẩm trong thời gian tới
Vươn lên trở thành đơn vị dẫn đầu thị trường trong năm 2024.
Cung cấp trải nghiệm đa kênh liền mạch và thú vị cho khách hàng.
Góp phần tăng conversion (đăng ký khóa học) & retention rate (quay lại đăng ký khóa khác/ giới thiệu người khác đăng ký).
Ra mắt phiên bản mới trong vòng 6 tháng trên cả 2 nền tảng Web và Mobile app.
Nghiên cứu tập khách hàng mục tiêu và chân dung người dùng
Khi nghiên cứu về tập khách hàng mục tiêu và chủ yếu của doanh nghiệp, phần lớn là người dùng có độ tuổi từ khoảng 19 - 38 tuổi, là sinh viên hoặc người đã đi làm.
24 tuổi - Lập trình viên Python
Kinh nghiệm
Emma tốt nghiệp ngành Khoa học Máy tính và đã làm việc làm Lập trình viên Python trong hai năm. Cô có nền tảng vững chắc về các khái niệm lập trình và đã tham gia vào nhiều dự án, bao gồm phát triển web, phân tích dữ liệu và các kịch bản tự động hóa.
Mục tiêu
Emma quan tâm đến việc nâng cao kỹ năng lập trình Python để phát triển sự nghiệp của mình. Cô muốn hiểu sâu hơn về các chủ đề nâng cao về Python, như cấu trúc dữ liệu, thuật toán và các framework, để giải quyết các dự án và thách thức phức tạp hơn.
Nhu Cầu và Vấn Đề
Hạn Chế Thời Gian: Làm việc toàn thời gian là một lập trình viên khiến cho Emma bị hạn chế thời gian còn lại để học thêm.
Chi phí: Cô có thể phản đối việc chi trả một lượng lớn tiền cho các khóa học trực tuyến, đặc biệt khi cô không chắc chắn về chất lượng và tính hiệu quả của chúng.
Sự tự học: Emma không có động lực tự học một mình và thường xuyên lo lắng về việc thiếu sự hỗ trợ từ giáo viên.
Expectations and Needs
Học Liên Tục: Emma muốn được học mọi lúc mọi nơi
Minh bạch trong giá cả và thanh toán: LCô cần nhận được thông tin rõ ràng về các chi phí liên quan và phương thức thanh toán trước khi quyết định đăng ký vào một khóa học cụ thể.
Tương Tác Cộng Đồng: Mặc dù Emma thích học tự tốc, nhưng cô đánh giá cao các cơ hội để tương tác với đồng nghiệp và mentor.
Trước khi bắt đầu thiết kế, tôi đã tổng hợp một số ý tưởng
Mục tiêu của nghiên cứu này
Tối ưu hóa trải nghiệm người dùng trong quá trình tìm kiếm và thanh toán khóa học trên nền tảng Unica.
Cần có
Giao diện gọn gàng bắt mắt
Câu truyện được kể tốt
Giải quyết nghiệp vụ thanh toán tốt hơn
Cần giải quyết
Chưa có khâu xác minh người dùng trong bước thanh toán
Sự phân tán tập trung
Sẽ tốt nếu có
Những yếu tố hấp dẫn hơn về mặt hình ảnh
Giải pháp cần đưa ra
Tối ưu hóa giao diện tìm kiếm để người dùng dễ dàng tìm kiếm khóa học theo tiêu chí như chủ đề, giáo viên, hoặc mức độ phổ biến.
Cung cấp thông tin minh bạch về giá cả và các phương thức thanh toán để tăng tính minh bạch và tin cậy từ phía người dùng.
Tạo ra một quy trình thanh toán trực quan và dễ sử dụng, giúp người dùng hoàn thành thanh toán một cách nhanh chóng và thuận tiện.
Tiêu chí đánh giá thành công của giải pháp
UI:
Giao diện tìm kiếm phải có thiết kế đơn giản, sạch sẽ và dễ dàng để người dùng có thể tìm kiếm thông tin một cách nhanh chóng.
Quy trình thanh toán cần phải có giao diện trực quan, dễ hiểu và dễ sử dụng, giúp người dùng hoàn thành thanh toán một cách thuận tiện và nhanh chóng.
UX:
Trải nghiệm tìm kiếm phải được tối ưu hóa để người dùng có thể dễ dàng tìm kiếm thông tin một cách tự nhiên và nhanh chóng.
Quy trình thanh toán cần phải tạo ra trải nghiệm mượt mà và thuận tiện, giúp người dùng cảm thấy thoải mái và hài lòng khi sử dụng.
Tiêu chí đánh giá thất bại của giải pháp
UI:
Giao diện tìm kiếm phức tạp, mất thời gian và khó hiểu, gây khó khăn cho người dùng trong quá trình tìm kiếm thông tin.
Quy trình thanh toán có giao diện rối mắt, phức tạp hoặc không nhất quán, dẫn đến sự bất tiện và khó chịu cho người dùng.
UX:
Trải nghiệm tìm kiếm phức tạp, không nhất quán hoặc không linh hoạt, dẫn đến sự khó chịu và mất hứng thú của người dùng.
Quy trình thanh toán gặp phải các vấn đề như lỗi kỹ thuật, thời gian xử lý chậm, hoặc thông tin không chính xác, làm giảm trải nghiệm của người dùng.
Những kỳ vọng khác cần được giải quyết
Khả năng tương thích và đồng nhất trên các thiết bị và trình duyệt khác nhau.
Tính linh hoạt trong việc thay đổi thông tin tìm kiếm và thanh toán.
Hỗ trợ từ nhóm dịch vụ khách hàng khi cần thiết.
Tôi đã vẽ lại một luồng nghiệp vụ đầy đủ hơn trước khi bắt tay vào thiết kế
Luồng nghiệp vụ tìm kiếm và thanh toán khóa học
Major Design DEcision
Những quyết định về giải pháp thiết kế
Design System
Hệ thống layout và grid được sử dụng để đảm bảo Responsive cho desktop
Tôi đã áp dụng bố cục layout và hệ thống grid 8px để đảm bảo thiết kế website được phù hợp trên tất cả các thiết bị, mọi độ phân giải màn hình.
Hệ thống layout và grid được dùng cho Desktop
Tận dụng bố cục thẻ - Một sự lựa chọn đơn giản nhưng tác động mạnh mẽ
Thiết kế dạng thẻ được sử dụng khá nhiều vì lợi ích mà nó mang lại.
Sức hấp dẫn trực quan nâng cao: Thẻ nâng cải thiện thiết kế bằng cách trình bày thông tin quan trọng theo cách hấp dẫn và hấp dẫn về mặt hình ảnh, cải thiện sự quan tâm và khả năng tiếp cận của người dùng.
Tổ chức thông tin được cải tiến: Thẻ hợp lý hóa việc tổ chức thông tin, cho phép người dùng dễ dàng quét và định vị nội dung có liên quan. Dù được trình bày dưới dạng lưới, danh sách hay băng chuyền, thẻ đều cải thiện được khả năng truy cập nội dung.
Khả năng thích ứng trên nhiều nền tảng: Thẻ có khả năng phản hồi nhanh và điều chỉnh liền mạch với nhiều kích thước màn hình và thiết bị khác nhau, đảm bảo trải nghiệm người dùng nhất quán và tối ưu bất kể nền tảng.
Bố cục thẻ được sử dụng trong thiết kế
Major Design improvements
Những cải thiện từ giải pháp thiết kế đã đưa ra
Tạo một không gian gọn gàng dễ nhìn, phù hợp với việc học
Do mặt hạn chế về thời gian, tôi đã không thể dành quá nhiều thời gian và công sức vào để thiết kế lại trang chủ cho Unica, tuy nhiêu với những gì tôi có thể làm trong khả năng của mình, tôi sắp xếp nhanh lại trang chủ để phát triển lại định hướng thiết kế mới trong tương lại.
Thay vì tập trung show càng nhiều khóa học càng tốt như phiên bản cũ, tôi tập trung phát triển một giao diện có thể tối ưu hóa những khóa học phù hợp cho người học dựa trên keywords họ sử dụng. Bên cạnh đó, do trang chủ thực rất thiếu các CTAs và các yếu tố hấp dẫn người dùng vậy nên tôi nghĩ mình cần bổ sung thêm các yếu tố này để trang chủ không bị nhàm chán và một màu.
Trang chủ được thiết kế lại
Tối ưu hóa việc tìm kiếm của người dùng
Để tối ưu hóa được việc tìm kiếm của người dùng, trước hết cần phải tối ưu hóa bộ lọc tìm kiếm để họ có thể tìm thấy được khóa họ theo tiêu chí của bản thân.
Trong trường hợp keyword tìm kiếm của họ không trả về lại kết quả nào, tôi tận dụng cơ hội và khoảng trống này trong thiết kế để giới thiệu những khóa học có liên quan tới cho họ.
Việc tối ưu này cũng sẽ đòi hỏi rất cao việc phân tích về keywords của người dùng, tuy nhiên nó sẽ mang lại hiệu quả rất đáng kể và tối ưu được trải nghiệm cá nhân cho người dùng. Tỷ lệ chuyển đổi cũng sẽ tăng nếu người dùng thực sự kiếm được khóa học phù hợp với họ và họ thực sự có hứng thú học nó.
Kết quả tìm kiếm khóa học
Cải thiện về mặt màu sắc và giao diện - Kể chuyện trong thiết kế
Màu sắc thương hiệu đã được tôi bố cục lại và sử dụng một cách khéo léo hơn do độ tương phản cao của màu sắc nhằm nhấn mạnh những điểm cần chú ý. Về mặt tổng thể giao diện mới này đã truyền đạt được một câu chuyện tốt hơn cho doanh nghiệp. Cùng tôi xem qua sự thay đổi đó nhé.
Trang chi tiết khóa học cũ
Câu chuyện được kể ở đây là:
(1) Unica đang bán khóa học online
(2) Khóa đó là "Làm chủ Python trong 4 tuần"
(3) Mua ngay bạn nhé! / Thêm vào giỏ hàng ngay bạn nhé!
Thực chất câu chuyện đang truyền tải sẽ bị ngắt tại đây và điểm nhìn của người dùng sẽ bị tập trung vào background màu tối do sự tương phản màu sắc quá cao trên một trang nền của đạo màu trắng.
Bên cạnh đó, việc đặt tận 2 button có style bold với màu 2 branding ở cạnh nhau sẽ khiến người dùng bị phân tân và không biết nên là gì trong trường hợp này. Nên thêm vào giỏ hàng hay mua ngay.
Hơn nữa yếu tố cần minh bạch nhất chính là giá cả, lại không được làm nổi bật.
Trang chi tiết khóa học được thiết kế lại
Câu chuyện được kể sau khi được chỉnh sửa lại sẽ như sau:
(1) Unica đang bán khóa học online
(2) Khóa đó là "Làm chủ Python trong 4 tuần"
(3) Khóa này có giá là dd699.000 đã được giảm 12% từ giá gốc
(4) Bấm mua ngay hoặc cân nhắc thêm vào giỏ hàng để không bỏ lỡ ưu đãi
(5) Khi mua khóa học này, bạn sẽ học được etc
Khi thay đổi màu sắc làm điểm nhấn và khích thước của các yếu tố trên một thiết kế, ta thấy câu chuyện mà thiết kế đó kể cho người dùng cũng sẽ thay đổi theo. Điều này giúp cho người dùng có những trải nghiệm được mượt hơn.
Cải thiện trong flow thanh toán
Ở flow thanh toán cũ, người dùng phải trải qua từ 3 tới 4 bước tùy thuộc vào phương thức thanh toán để có thể thanh toán được đơn hàng của mình, việc nhập thông tin này cũng sẽ phải thực hiện lại các bước mỗi khi người dùng muốn thanh toán một sản phẩm mới.
Ngoài ra ở các bước thanh toán, giao diện không cho phép người dùng quay lại bước thông tin để khiểm tra thông tin mình nhập có chính xác hay chưa. Điều này dễ dẫn tới nhiều sai sót về dữ liệu khi thực hiện thanh toán.
Flow Thanh Toán cũ
Để tối ưu hóa bước thanh toán, tôi muốn một thiết kế cho phép người dùng kiểm tra giỏ hàng của họ trước khi bước vào khâu thanh toán. Người dùng bắt buộc phải trải qua bước xác nhận đơn hàng và sản phẩm thanh toán trong đơn hàng để tới được bước thanh toán.
Ở bước thanh toán, người dùng sẽ chỉ phải điền thông tin trên 1 trang và lựa chọn hình thức thanh toán ở đây. Sau khi thanh toán, tùy thuộc vào thành công hay thất bại, sẽ có 2 kết quả được trả về cho người dùng.
Flow Thanh Toán được thiết kế lại
Phương thức thanh toán
Khi thiết kế giải pháp để người dùng lựa chọn phương thức thanh toán, tôi nghĩ nên hiển thị từ 2 đến 3 phương thức để tối ưu được về mặt giao diện cũng như tránh gây rối đối với người dùng.
Lựa chọn mặc định phương thức thanh toán có để được thay đổi sau khi phân tích hành vi người dùng và xem họ sử dụng phương thức nào nhiều nhất.
Thanh toán đơn hàng
Retrospective
Một kết thúc chưa mấy hoàn thiện
Thực chất khi bắt tay vào làm nghiên cứu cho case study này, tôi đã biết bản thân mình bị giới hạn rất nhiều về mặt thời gian và nguồn lực. Vậy nên việc có một kết thúc chưa được hoàn thiện cũng là việc không nằm ngoài dự đoán của tôi. Tuy nhiên tôi đã làm tất cả trong khả năng của mình và tôi tin rằng những giải pháp và cải thiện trong thiết kế mình đưa ra thực sự mang lại những hiệu quả khác biệt.
Tạo mới lại một thiết kế hài hòa hơn về mặt màu sắc
Tôi tin rằng case study này đã thể hiện được khả năng sử dụng màu sắc một cách thông minh của bản thân để thay đổi lại câu chuyện thương hiệu.
Tối ưu hóa được trải nghiệm của người dùng
Việc cải thiện cách kể truyện trong một thiết kế cũng khiến cho trải nghiệm của người dùng được diễn ra một cách suôn sẻ và mượt hơn.
Case Study Conclusion
Overall, I think I did a good job
Tổng kết lại case study này tôi nghĩ bản thân mình đã đáp ứng được phần lớn các yêu cầu của đề bài và những phân tích của bản thân mình. Tuy nhiên, nếu được phân tích kỹ hơn, tôi sẽ để ý các điểm sau:
Xác minh người dùng trước khi cho phép họ thanh toán
Đây là một bài toán rất khó và đòi hỏi sự khéo léo trong khâu thiết kế UX. Bởi việc bắt người dùng nhập liệu quá nhiều sẽ khiến họ nhập bừa hoặc xác minh qua quá nhiều bước sẽ khiến họ bỏ cuộc giữa chừng.
Biến khả năng tiếp cận thành bản năng
Do thời gian quá gấp gáp, tôi dường như không quá để ý mấy đến việc kiểm tra lại tính tiếp cận (Accessibility) của các yếu tố thiết kế. Chỉ khi trình bày lại toàn bộ tôi mới nhận ra.
Thêm vào nhiều hình vẽ và yếu tố tương tác
Một yếu tố mang đậm tính thiết kế cá nhân của tôi đó là những hình vẽ bằng tay và tính chất tương tác của chúng. Tuy nhiên tôi lại không thể hiện nó tốt ở case study này :(