UI/UX case study: Hướng dẫn cụ thể quá trình thiết kế một ứng dụng ăn uống cho thú cưng

Ngọc Quỳnh
06/10/2020 - 10:00 9756     0

Bài viết là chia sẻ kinh nghiệm thực tế của Guy Shomron, một designer - tác giả trên UX Collective, một trang web tổng hợp và hệ thống các nội dung chất lượng liên quan đến UX

UI-UX-case-study-a-step-by-step-guide-to-the-process-of-designing-a-pet-diet-app

Vài tháng trước, mẹ tôi đã nhờ tôi tìm thương hiệu thức ăn thú cưng tốt nhất cho thú cưng yêu quý của mẹ.

Nghiên cứu trực tuyến dẫn tôi đến hai kết luận. Một, hầu hết thực phẩm chế biến sẵn  (ví dụ như các loại thực phẩm có thương hiệu) có rủi ro sức khỏe đáng kể cho vật nuôi. Và hai, sự lựa chọn lành mạnh nhất là chế độ ăn uống nhà làm cân bằng.

Hiểu rõ thách thức

Thực phẩm chế biến không lành mạnh cho sức khoẻ vật nuôi. Thành phần thường bao gồm các sản phẩm chất thải từ ngành công nghiệp thực phẩm của con người hoặc thịt còn sót lại từ xác động vật bị bệnh. Trên hết, phần lớn các loại thức ăn cho thú cưng có bán trên thị trường có chứa hóa chất, chất bảo quản, chất nhũ hóa, màu nhân tạo, chất tăng cường hương vị và chất béo làm cho thức ăn ngon hơn cho chó và mèo, nhưng cũng kém lành mạnh hơn.

Kể từ khi thực phẩm chế biến cho vật nuôi đã được giới thiệu, đại dịch về các vấn đề sức khỏe thoái hóa đã leo thang ở chó và mèo. Thú cưng liên tục bị hội chứng tiêu chảy, các bệnh viêm và yếu đi do chế độ ăn uống kém.

Các ngành công nghiệp thực phẩm vật nuôi thương mại phải đối mặt với quy định thực chất tối thiểu. Không có tổ chức nào yêu cầu thức ăn cho thú cưng đưa ra bằng chứng về đảm bảo sức khỏe và không có công ty nào đầu tư vào nghiên cứu sâu rộng để xác định xem sản phẩm của họ có giữ cho động vật khỏe mạnh trong thời gian dài hay không.

Tuy nhiên…

Cung cấp một chế độ ăn uống tự làm đáp ứng tất cả các yêu cầu dinh dưỡng của động vật là một thách thức. Nó đòi hỏi nghiên cứu, nguyên liệu, đo lường và công thức nấu ăn phù hợp với cả nhu cầu cá nhân của thú cưng và lối sống của chủ sở hữu.

Khi không cân bằng, chế độ ăn tự làm có thể gây hại cho vật nuôi hơn là thực phẩm chế biến sẵn. Thú cưng của bạn có thể bị suy dinh dưỡng do thiếu chất chống oxy hóa, khoáng chất, vitamin và axit béo có thể gây ra một loạt các vấn đề sức khỏe.

Thức ăn cho thú cưng có bán trên thị trường có thể có thành phần chất lượng thấp hoặc thậm chí không phù hợp với loài, nhưng nó phải cung cấp dinh dưỡng cân bằng để đáp ứng các tiêu chuẩn của AAFCO (Hiệp hội kiểm soát thức ăn của Mỹ) và FedIAF (Liên đoàn công nghiệp thực phẩm thú cưng châu Âu).

Các phương pháp nghiên cứu

Cuộc khảo sát

Tôi đã chuẩn bị một cuộc khảo sát bằng Google Forms và phân phối nó giữa nhiều nhóm chủ sở hữu thú cưng trên Facebook. Mục đích là để xác định điểm đau cơ bản của những người nuôi thú cưng khi chuẩn bị chế độ ăn tự chế. Tìm hiểu về các vấn đề của người dùng tiềm năng là một cách tuyệt vời để được truyền cảm hứng và động lực. Làm việc với dữ liệu trong thế giới thực là một điểm nhìn tốt để giúp tránh phỏng đoán và định kiến. Sử dụng thông tin này cung cấp một cơ hội tốt hơn để khám phá gốc rễ của vấn đề và cách giải quyết nó.

 

UI-UX-case-study-a-step-by-step-guide-to-the-process-of-designing-a-pet-diet-app

Một số ý kiến trực tiếp từ người dùng:

"Max là một thú nuôi rất khó tính trong việc ăn uống và tôi đã thử mọi thương hiệu xuất hiện trên thị trường."

"Tôi rất thích nấu ăn cho Daisy, nhưng tôi không phải lúc nào tôi cũng biết mình đang làm gì."

"Tôi đang lo rằng thức ăn tự làm quá đắt và mất thời gian."

"Chế độ ăn tôi tìm thấy trên mạng không phù hợp với nhu cầu cụ thể của con chó của tôi vì chúng quá chung chung."

"Điều đau đầu nhất là ước tính được chi phí."

Personas (chân dung người dùng)

Kết quả khảo sát của tôi cho thấy có một số loại người dùng có nhu cầu đa dạng. Việc tích lũy những hiểu biết khác nhau và các mẫu phổ biến xuất phát từ câu trả lời của người dùng đã giúp tôi tạo ra ba personas là biểu hiện của dữ liệu đó trong một nhân vật. Hai trong số các trường hợp xuất hiện có những khía cạnh khác biệt vì chúng dựa trên nhu cầu nhất định của một số người tham gia. Do đó, cuối cùng tôi tập trung vào tính cách phổ biến hơn.

Tập trung vào một người dùng cụ thể giúp ghi nhớ các nhu cầu của người đó và không bị phân tâm mỗi khi một ý tưởng cho một tính năng mới hoặc nhu cầu mới xuất hiện.

 

UI-UX-case-study-a-step-by-step-guide-to-the-process-of-designing-a-pet-diet-app

Hành trình người dùng

Tiếp theo, tôi viết kịch bản một thói quen cho ăn hàng ngày điển hình cho tính cách của đối tượng của tôi. Quá trình này đã giúp tôi quyết định trải nghiệm người dùng ứng dụng có thể được thiết kế như thế nào để phù hợp với thói quen cho ăn.

 

UI-UX-case-study-a-step-by-step-guide-to-the-process-of-designing-a-pet-diet-app

Công việc cần hoàn thành

Một trong những công cụ mạnh nhất mà tôi đã sử dụng là biểu mẫu JTBD. Thay vì tập trung vào vấn đề là gì hoặc người dùng muốn gì, tôi tự hỏi tại sao họ cần nó. Bằng cách hiểu tại sao mọi người có thể muốn ứng dụng này, nó làm tăng cơ hội tạo ra một sản phẩm thực sự có giá trị của tôi.

Lưu đồ người dùng

Cho đến bây giờ tôi đã có một ý tưởng mơ hồ về cách ứng dụng sẽ hoạt động. Vạch ra từng luồng cơ bản của ứng dụng buộc tôi phải tìm ra từng bước trên con đường người dùng sẽ thực hiện trong suốt giải pháp. Đầu tiên tôi phác thảo nó trên giấy và sau đó biểu thị bằng kỹ thuật số.

 

UI-UX-case-study-a-step-by-step-guide-to-the-process-of-designing-a-pet-diet-app

Phác thảo

Đây là bước đầu tiên giúp tôi phác thảo ứng dụng và trực quan tưởng tượng ra nó.

 

UI-UX-case-study-a-step-by-step-guide-to-the-process-of-designing-a-pet-diet-app

Wireframes (Khung ứng dụng)

Hướng dẫn trực quan này đại diện cho khung xương của ứng dụng. Nó giúp tôi sắp xếp các yếu tố giao diện trong khi tôi tập trung vào chức năng hơn là những gì nó trông như thế nào. Hơn nữa, sự đơn giản của khung ứng dụngcho phép tôi nhanh chóng kiểm tra ý tưởng mà không cần đi sâu vào chi tiết.

 

UI-UX-case-study-a-step-by-step-guide-to-the-process-of-designing-a-pet-diet-app

Storyboard - Sử dụng ứng dụng

Tôi đã tạo một bảng phân cảnh mô tả trải nghiệm người dùng của tôi với ứng dụng. Đây là một công cụ tuyệt vời để khám phá cách sản phẩm sẽ được sử dụng trong bối cảnh lớn hơn, như thể nó là một phần của một câu chuyện lớn hơn. Đây là một cách hiệu quả và rẻ tiền để nắm bắt, liên kết và khám phá ứng dụng trong môi trường thế giới thực. Tôi đã tạo một bảng phân cảnh mô tả trải nghiệm người dùng của tôi với ứng dụng. Nghiên cứu này giúp hiểu các trường hợp và bối cảnh lớn hơn mà ứng dụng sẽ được sử dụng.

 

UI-UX-case-study-a-step-by-step-guide-to-the-process-of-designing-a-pet-diet-app

Nghiên cứu hình ảnh

Bảng truyền cảm hứng

Trước khi bắt đầu với thiết kế hình ảnh, tôi tạo ra một bảng cảm hứng. Mục đích là để tìm hiểu về thế giới thị giác và thu thập cảm hứng từ các ứng dụng dinh dưỡng và thú cưng khác.

 

UI-UX-case-study-a-step-by-step-guide-to-the-process-of-designing-a-pet-diet-app

Lặp lại

Tiếp theo tôi khám phá các khả năng thiết kế khác nhau: Từ mỗi lần lặp lại thiết kế, tôi học được điều gì đó mà tôi có thể sử dụng cho lần tiếp theo

 

UI-UX-case-study-a-step-by-step-guide-to-the-process-of-designing-a-pet-diet-app

Bảng màu

Màu xanh tượng trưng cho thiên nhiên, cuộc sống, sức khỏe, tuổi trẻ, mùa xuân, hy vọng, đổi mới, tăng trưởng, nghỉ ngơi và thư giãn. Do đó, một bảng màu xanh lá cây phù hợp cho một ứng dụng thúc đẩy thức ăn vật nuôi lành mạnh và tự nhiên. Ngoài ra, tôi đã sử dụng màu xám cho văn bản và bao gồm rất nhiều màu trắng để mang lại vẻ ngoài điềm tĩnh và sạch sẽ.

UI-UX-case-study-a-step-by-step-guide-to-the-process-of-designing-a-pet-diet-app

Kiểu chữ

Nunito Sans là một phông chữ Google miễn phí được thiết kế bởi Vernon Adams và Jacques Le Bailly. Nó là một siêu gia đình kiểu chữ sans serif cân bằng tốt dường như bổ sung cho giao diện. Đơn giản là câu thần chú hàng đầu; do đó, tôi quyết định chỉ đi với một họ phông chữ.

 

UI-UX-case-study-a-step-by-step-guide-to-the-process-of-designing-a-pet-diet-app

Biểu tượng & Minh họa

Các hình minh họa và biểu tượng là một phần quan trọng của thiết kế. Họ truyền đạt những ý tưởng và khái niệm không nên và đôi khi không thể truyền đạt bằng lời nói. Hơn nữa, chúng cho phép tính nhất quán của tính thẩm mỹ thị giác giúp xây dựng người dùng tin tưởng và tạo ra những khoảnh khắc thú vị.

 

UI-UX-case-study-a-step-by-step-guide-to-the-process-of-designing-a-pet-diet-app

Đặt tên & Logo

Lý do chính để chọn tên Petcy là thực tế. Tôi muốn có từ ‘pet” trong tên nhưng mọi sự kết hợp khác với nó đã được sử dụng. Hậu tố ‘cy, có nghĩa là trạng thái hoặc tình trạng của. Tôi cảm thấy điều này phù hợp với tầm nhìn của ứng dụng và do đó tôi đã chọn Petcy.

Tôi muốn logo thật đơn giản, phản ánh mức độ dễ dàng khi sử dụng ứng dụng. Logo trông giống như một nét vẽ nguệch ngoạc được ghép lại nhanh chóng với rất ít dòng, giống như một bữa ăn chuẩn bị với Petcy. Ban đầu tôi muốn nó cũng chỉ ra sức khỏe (ống nghe), tình yêu dành cho thú cưng (trái tim) và bản thân thú cưng (mèo và chó). Tuy nhiên, cuối cùng tôi đã quyết định rằng điều quan trọng hơn là giữ cho nó đơn giản, vì vậy tôi đã giải quyết một logo chỉ là tên.

UI-UX-case-study-a-step-by-step-guide-to-the-process-of-designing-a-pet-diet-app

 

Tương tác vi mô và Hoạt hình

Một trong những điều cuối cùng tôi đã làm là khám phá cách chuyển động sẽ được thực hiện trong ứng dụng, giúp tôi nắm bắt được dòng chảy và chức năng của ứng dụng ở cấp độ sâu nhất.

UI-UX-case-study-a-step-by-step-guide-to-the-process-of-designing-a-pet-diet-app

 

 

Thiết kế cuối cùng

Quá trình bắt đầu sử dụng ứng dụng

Mục tiêu của quá trình sử dụng ứng dụng trong Petcy là thu thập thông tin về thú cưng của người dùng để thực sự làm cho nó phù hợp với nhu cầu của họ. Phần quan trọng là để người dùng trả lời mười câu hỏi mà không bị nản lòng và tắt ứng dụng. Nó đòi hỏi một quá trình đơn giản và nhanh chóng. Đánh số các câu hỏi, thẻ trượt lớn và thanh tiến trình là một số giải pháp tôi sử dụng để giảm bớt quá trình.

UI-UX-case-study-a-step-by-step-guide-to-the-process-of-designing-a-pet-diet-app

Chuẩn bị một bữa ăn

Yếu tố này là mấu chốt của ứng dụng. Sau khi onboarding, người dùng nhận được một công thức phù hợp với nhu cầu của bạn. Khi xem công thức, người ta có thể thấy một danh sách các thành phần, ba bước đơn giản giải thích cách chuẩn bị bữa ăn, video hướng dẫn và phân tích các giá trị dinh dưỡng của bữa ăn đó.

 

UI-UX-case-study-a-step-by-step-guide-to-the-process-of-designing-a-pet-diet-app

 

Tìm nguyên liệu thành phần

Để thuận tiện hơn, tôi quyết định cung cấp cho người dùng một tùy chọn để có được tất cả các thành phần cần thiết. Do đó, thách thức tiếp theo là tạo ra một quy trình bao gồm danh sách mua sắm, chọn nhà cung cấp, so sánh giá cả và giao hàng đến cửa trước của họ. Quy trình này phải dễ dàng và nhanh chóng để giữ cho nó phù hợp với giao diện dễ dàng của ứng dụng.

Kết luận

Tôi vừa học cái gì đấy?

Thiết kế ứng dụng là một hành trình đầy thử thách và bổ ích. Rõ ràng từ khi bắt đầu, thách thức lớn sẽ là làm cho những người nuôi thú cưng thích thú với thứ gì đó cạnh tranh với thói quen và dễ dàng chuyển một cốc kibble khô từ bao tải sang hộp đựng thức ăn cho thú cưng. Tôi đã nghiên cứu nhu cầu ăn kiêng, công thức nấu ăn và chi phí cho bữa ăn chó tự làm. Tôi hiểu nhu cầu của người dùng thông qua khảo sát và hội thoại. Cuối cùng, tôi phải đối mặt với thách thức tạo ra một ứng dụng hấp dẫn cả từ góc độ trải nghiệm người dùng và góc nhìn trực quan.

Các bước tiếp theo là gì?

Nghiên cứu sâu về các tính năng cụ thể

Kiểm tra khả năng sử dụng của nguyên mẫu với người dùng

Cải thiện lưu lượng người dùng

Một mô hình kinh doanh toàn diện

Tính năng trong tương lai

Tùy chọn ghép nối: ghép đôi với bạn bè và những người dùng khác để mua nguyên liệu với số lượng lớn để tiết kiệm tiền bạc và thời gian.

Cuối cùng...

Thức ăn cho thú cưng là một ngành công nghiệp trị giá 75 tỷ đô la, sản xuất các loại thực phẩm mà không phải là lựa chọn ăn kiêng lành mạnh nhất cho chó và mèo và thậm chí có thể gây hại cho sức khỏe và tuổi thọ của những người bạn lông xù của chúng ta. Tuy nhiên, trong cuộc sống bận rộn hàng ngày của hầu hết chúng ta, sự tiện lợi của việc sử dụng thực phẩm khô sẽ dễ dàng chiến thắng.

UI-UX-case-study-a-step-by-step-guide-to-the-process-of-designing-a-pet-diet-app

Mục tiêu của ứng dụng di động miễn phí này là cho phép người dùng nhanh chóng và dễ dàng chế biến thực phẩm lành mạnh hơn cho vật nuôi yêu quý của họ với chi phí tương đương với thực phẩm đóng gói cao cấp. Petcy được thiết kế để giúp chủ vật nuôi chuẩn bị thức ăn tự chế cho những người bạn lông xù của họ. Ứng dụng này cung cấp một kế hoạch cho ăn hàng ngày cho mỗi thú cưng dựa trên nhu cầu dinh dưỡng của chúng. Ứng dụng này cũng điều chỉnh số lượng thực phẩm và có thể giao sản phẩm từ các cửa hàng địa phương.

Tôi hy vọng rằng ứng dụng này sẽ được hỗ trợ bởi một nhà sản xuất hoặc marketer thức ăn cho thú cưng, với nhận thức rằng rằng việc cung cấp cho chủ vật nuôi những lựa chọn bổ sung và lành mạnh hơn là một cách có trách nhiệm hơn về mặt xã hội và nghiêm túc hơn,  để tiến hành kinh doanh.

Ngọc Quỳnh
Ngọc Quỳnh

The New York Times