بررسی تحلیلی دیزاین سیستم جدید سامانه سفارش آنلاین غذا Zomato


هدف این مقاله بررسی تحلیلی دیزاین سیستم جدید سامانه سفارش آنلاین غذا zomato می‌باشد. با آکادمی محصول همراه باشید.

با رشد چشمگیر کسب‌و‌کار سفارش آنلاین غذا zomato تیم محصول مجبور شد تعداد زیادی طراح محصول استخدام نماید. از مشکلات عمده تیم محصول این کسب‌و‌کار، این بود که بسیاری از صفحات محصولات، ویژگی‌ها و اجزای سازنده در روند طراحی رابط کاربری و طراحی تجربه کاربری با یکدیگر همخوانی و یکپارچگی ندارند. این اتفاق از زمانی شدت گرفته بود که هر قسمت از اپلیکیشن در زمان‌های مختلف و توسط طراحان مختلف طراحی شده بودند و هیچ فلسفه، زبان یا اصول طراحی مشترکی برای یکسان‌سازی فرآیند و ساختار دیزاین سیستم محصولات این کسب‌و‌کار وجود نداشت.

از دگر سو، مشکل زمانی بغرنج‌تر گردید که تیم مدیریت محصول تصمیم به طراحی ویژگی‌های جدیدی برای محصول نمود. به دلیل نبود اصول طراحی مشخص، در نتیجه زمان زیادی برای اجرای تصمیمات طراحی هدر رفت و روند مدیریت و توسعه محصول به صورت فرسایشی کند شد. کاربر نهایی نیز به علت عدم سازگاری و زبان مشترک در دیزاین‌ها و تجربه کاربری درون محصول zomato رنج می‌برد.

نقطه اوج پیچیدگی ماجرا زمانی حاصل شد که قرار شد یک کمپین تبلیغاتی در مدت چند هفته و با طراحی قدیمی محصول راه اندازی شود. بنابراین با توجه به تحلیل وضعیت موجود و بررسی شرایط تیم محصول در اواسط سال ۲۰۱۷ تصمیم گرفت تا دیزاین سیستم محصول zomato را مجددا طراحی نماید.

هدف از فرآیند طراحی دیزاین سیستم جدید سرویس zomato اصلاح کامل زبان طراحی محصول بود که به دو تن از طراحان محصول خبره شرکت، این مسئولیت واگذار گردید.

تعریف اهداف در فرآیند طراحی دیزاین سیستم جدید

یکی از مهمترین گام‌ها، تعریف اهداف کسب‌و‌کار و طراحی محصول پیش از بازنگری دیزاین سیستم محصول می‌باشد. در این مورد‌کاوی، اهم اهداف تعریف شده شامل موارد زیر بوده است:

  • تمام محصولات zomato می‌بایست با سیستم‌عامل‌های مختلف سازگاری داشته باشند.
  • طراحی جدید دیزاین سیستم محصول می‌بایست تجربه منحصر به فرد و عالی برای کاربران به همراه داشته باشد.

در این مورد کاوی، طراحان محصول در فرآیند طراحی دیزاین سیستم جدید سرویس zomato برخی از UI Kit های موجود در سایت‌های معروفی مانند Dribbble (یکی از مراجع بصری طراحان محصول) را مورد بررسی و تحلیل قرار دادند. یکی از مهمترین اقدامات که آنها باید در روند طراحی دیزاین سیستم جدید در نظر می‌گرفتند ساده سازی فرآیندها و user flow و کاهش بار یادگیری نحوه کار کردن با خدمات  zomato از روی دوش کاربران به شیوه موثر و اثربخش بود. زیرا غفلت از این اقدام، خودش را در ریزش کاربر (churn rate) و کاهش فروش و تراکنشات مالی نشان می‌داد و از اینرو تاثیر بسیار مهمی در موفقیت کسب‌و‌کار و جذب / نگهداشت کاربران داشت.

همچنین طراحی دیزاین سیستم جدید به معنای دور ریختن یا در نظر نگرفتن دیزاین سیستم قدیمی نبود. بلکه می‌بایست یک توازن بین زبان طراحی قدیمی و دیزاین سیستم جدید برای کاربران وجود داشته باشد.

درک کردن و بررسی دیزاین سیستم محصول

پیش از ساختن دیزاین سیستم جدید، ابتدا باید در مورد دیزاین سیستم‌ها (مثلا دیزاین سیستم رقبا، سایر برندهای صنعت جاری و …) بررسی انجام داد تا بتوان به خوبی فرآیندهای ساخت دیزاین سیستم مربوط به محصولات سایر برندها، رقباء و … را درک نمود.

براد فراست (brad frost)؛ به عنوان فردی که روش‌شناسی طراحی اتمی دیزاین سیستم را مطرح کرد، درباره اصول طراحی اتمی در ابتداي مقاله‌اش نقل قول قابل توجهی را آورده:

“ما صفحات را طراحی نمی‌کنیم، ما اجزای سیستم را طراحی می‌کنیم. ” – Stephen Hay

با خواندن این جمله متوجه می‌شویم که طراحی برای توسعه UI Kit احتمالا بهترین ایده برای طراحی دیزاین سیستم نیست. اما پاسخ درست، ساخت هر دو آنها به صورت همزمان و موازی برای ایجاد تغییرات می‌باشد. بنابراین طراحان محصول تمام صفحات اپلیکیشن zomato را در پلتفرم‌های مختلف (آندروید و آی.او.اس)  مورد بررسی قرار دادند تا قادر باشند طراحی دیزاین سیستم جدید محصول را به صورت درست و همه جانبه انجام داد.

تیم محصول این شرکت در گام اول شروع به طراحی اتم‌های پایه دیزاین سیستم مانند فونت، رنگ و آیکون‌ها نمودند. در واقع نقطه شروع از اتم‌های جالب‌تر و ملموس‌تر در طراحی بود. سپس این اتم ها را با یکدیگر ترکیب کردند تا مولکول‌هایی مانند دکمه‌ها، فرم‌ها، ستون‌ها، جداول و سایر موارد ساخته شوند.

طراحان محصول در طول فرآیند تغییر رویکرد نیز انجام دادند به اینصورت که همزمان از این اتم‌ها و مولکول‌ها در دیزاین‌های محصول استفاده کردند تا ببیند آیا در عمل خوب از کار می‌آید یا خیر. این رویکرد به طراحان محصول در طول طراحی دیزاین سیستم کمک می‌کند تا عملکرد اجزا طراحی در ساختار محصول را مورد تست و بررسی قرار دهند. در صورتی که اجزاء دیزاین سیستم به درستی کار نکند، آنها می‌بایست به صورت چابک به بازنگری و تغییر مجدد در سطح اتم‌های دیزاین سیستم روی آورند.


در دیزاین سیستم، مولکول‌ها مانند بلوک‌های ساختمانی هستند که با ترکیب آنها ارگانیسم‌ها تشکیل می‌شوند و سپس می‌توان شاهد شکل‌گیری رابط کاربری محصول بود.

الگوها (Templates) مجموعه‌ای از ارگانیسم‌ها هستند که برای تشکیل صفحات رابط کاربری به هم متصل می‌شوند. اینجا، جایی است که ما شروع به دیدن طرح‌ها می کنیم و در عمل دیزاین سیستم را مشاهده خواهیم کرد.

اکنون به اهدافی که تعیین کرده بودیم برمی‌گردیم.

برای تحقق اهدافی که در وهله اول تعیین شده است، باید اقدامات موثری صورت گیرد. در همین راستا، تیم محصول، برخی از اصول طراحی که zomato را به عنوان یک برند تجاری تعریف می‌نماید، را لیست کردند.

این اصول طراحی به تیم محصول zomato کمک کرد تا برای UI Kit، یک دیزاین سیستم مرجع ایجاد کنند و محلی برای رجوع تمام افراد این کسب‌و‌کار شامل توسعه‌دهندگان، طراحان محصول، مدیران محصول، تیم بازاریابی و … باشد. از اینرو، طراحان محصول یک کتابخانه دیجیتال با تمام اجزاء و مولفه‌ها برای ایجاد تسریع و ساده‌سازی همکاری‌های بین تیمی مبتنی بر چارچوب دیزاین سیستم جدید ایجاد کردند.

یکی از اهداف تعریف شده پیش از ایجاد دیزاین سیستم جدید، بهینه‌سازی تجربه کاربری عالی و منحصر‌به‌فرد برای کاربران سرویس سفارش آنلاین غذا zomato بود.

در همین راستا، یکی از اقدامات تغییر فونت برنامه zomato نسخه آی.او.اس از SF UI به Avenir Next بود. علت انتخاب این فونت برای نسخه آی.او.اس برنامه، تطبیق‌پذیری آن بوده است که نمایانگر یک الگوی هندسی مدرن می‌باشد و با ایجاد حس تازه برای مخاطب، تعادل خوبی برای مشاهده و قابلیت خواندن در برنامه را ایجاد می‌کند. همچنین این فونت کنتراست خوب و سلسله مراتب بصری شفاف و واضحی را برای برنامه به همراه دارد. همچنین بعد از بررسی‌های صورت گرفته توسط تیم محصول، آنها متوجه شدند این تغییر باعث شده کاربران زمان بیشتری را صرف بررسی بخش‌های مختلف اپلیکیشن zomato نمایند.

از دیگر اصلاحات، ایجاد تغییرات در پالت رنگ برنامه بود. فعل و انفعلات انسان به شدت بر پایه تعامل با عناصر گرافیکی است. در این تعامل، رنگ نقش مهمی در اثربخشی و موفقیت تعاملات بین محصول و کاربر ایفا می‌کند. رنگ‌ها به کاربران کمک می‌کنند به صورت ساده‌تری، محتوای برنامه را تحلیل کنند و یاد بگیرند چطور با محصول ارتباط برقرار کنند. بنابراین، برخی اصلاحات مرتبط با این اقدام که توسط تیم محصول zomato صورت گرفت عبارتند از:

  • سبز کردن تمام دکمه‌های تماس. رنگ سبز در روان شناسی به معنای رفتن و به جلو حرکت کردن می‌باشد. این رنگ رشد و حرکت مثبت در user flow را برای کاربر تداعی می‌کند.
  • بازنگری در استفاده از رنگ تجاری برند در محصول. نسخه قدیمی اپلیکیشن zomato به رنگ قرمز (رنگ تجاری کسب‌و‌کار مذکور) بود به طوریکه در تمام هدرها، پیوندها و اقدامات از رنگ قرمز به وفور استفاده می‌شد اما بعد از شناخت اصول روان‌شناسی رنگ‌ها و به کارگماری آنها در طراحی دیزاین سیستم جدید برنامه، از رنگ قرمز برای اقداماتی نظیر حذف و لغو استفاده شد. قرمز معنای خطر و معانی منفی را برای کاربر تداعی می‌کند و از اینرو، باید به صورت محتاطانه و در  نقاطی از محصول که لازم هست، از این رنگ استفاده شود.
  • تغییرات در بک گراند – در دیزاین سیستم جدید، کادرهای سفید در پس زمینه خاکستری به منظور افزایش تمرکز کاربر بر روی یک بخش خاصی از اطلاعات معرفی شد. همچنین برای عمق بخشیدن به کادرها، کمی سایه اضافه گردید. برای کاهش شلوغی و افزایش تمرکز بر نقاط کلیدی محتوای محصول نیز، فضای سفید کافی در اپلیکیشن با هدف افزایش ضریب خوانایی توسط کاربران و استفاده آنها از محتوای برنامه در نظر گرفته شد.

نتایج بدست آمده از طراحی دیزاین سیستم جدید سرویس Zomato

طراحی دیزاین سیستم جدید سرویس سفارش آنلاین غذا zomato برای تیم محصول، ذینفعان کسب‌و‌کار و کاربران اثرات ارزشمند و قابل توجهی به همراه داشت که برخی از آنها عبارتند از:

  • سازگاری محصول zomato با تمام سیستم عامل‌ها و در نتیجه افزایش فروش و تراکنشات مالی
  • تسهیل و تسریع فرآیند طراحی، به اشتراک‌گذاری مؤثر و هماهنگی بهتر بین تیم محصول (طراح، توسعه دهنده و…) و مدیران محصول و تسریع اثربخش و موثر انتقال دانش به اعضای جدید تیم محصول
  • حفظ سازگاری محصول نهایی توسط توسعه دهندگان با توجه به کتابخانه‌های ترکیبی ایجاد شده مبتنی بر دیزاین سیستم جدید (زبان طراحی مشترک)
  • افزایش سطح رضایمندی کاربران از محصول جدید مبتنی بر دیزاین سیستم جدید با توجه به فیدبک‌های دریافتی آنها در شبکه‌های اجتماعی و …

از منابع مختلف برای خلاقیت در طراحی و توسعه محصول الهام بگیرید، اهداف کسب‌و‌کار و محصول خود را به صورت شفاف و واضح تعریف نمایید تا بتوانید در مراحل طراحی دیزاین سیستم محصول به صورت کارآمدتری تصمیم گرفته و اقدام نمایید.

منابع جهت مطالعه بیشتر

https://dribbble.com/shots/4504298-Zomato-Style-Guide

https://uxdesign.cc/developing-the-zomato-design-system-438357188904

https://www.pinterest.com/pin/467670742550230909/