در انتظار تپسی (داستان طراحی صفحه جستجوی راننده)

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


فروردین ۹۶ وارد تپسی شدم و یکی از اولین ماموریت‌هام طراحی ماشین روی نقشه تپسی بود.
جدای از اینکه زشت و سیاه بود :) جهت نداشت و مشخص نبود در مسیر به سمت من مسافر در حرکت است یا از من گذشته، یا در کدام سمت یک بلوار در حال حرکت است.

تپسی قبل از عمل :) آیکون خودروهای روی نقشه
تپسی قبل از عمل :) آیکون خودروهای روی نقشه


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


برای اینکه بهترین سبک، مدل و رنگ از یک ماشین رو انتخاب کنم تصمیم گرفتم یک تست به‌شکل بازی طراحی‌کنم. پس تصاویر مختلفی از کلاس‌های مختلف ماشین‌ها (SUV, Hatchback, Fastback ,sedan) در سبک‌های مختلف تصویرسازی تخت (Flat) و سه‌بعدی و رنگ‌های مختلف روی زمینه طوسی نقشه جمع‌آوری کردم و روی کارت‌های کوچکی پرینت کردم.

مقایسه بج قدیمی تپسی کلاسیک با نسخه جدید و بج و تصویرسازی‌های اوبر
مقایسه بج قدیمی تپسی کلاسیک با نسخه جدید و بج و تصویرسازی‌های اوبر


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

اتودهای دستی برای تصویرسازی‌های محصول تپسی
اتودهای دستی برای تصویرسازی‌های محصول تپسی


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

اتودهای ماشین‌های تپسی - آرین مقبلی
اتودهای ماشین‌های تپسی - آرین مقبلی
مسیر طراحی بج خودروی کلاسیک تپسی
مسیر طراحی بج خودروی کلاسیک تپسی


البته که کمی‌بعد پیکسی تپسی ماموریت‌های ویژه دیگه‌ای هم داشت تا در مناسبت‌ها و رویداد‌های مختلف تغییر چهره بده. مثل یلدا، مسابقات فوتبالی و شهراورد‌ها، عید نوروز و ...

تصاویری از خودروی روی نقشه تپسی ( پیکسی-تپسی / pixi-tapsi ) - آرین مقبلی
تصاویری از خودروی روی نقشه تپسی ( پیکسی-تپسی / pixi-tapsi ) - آرین مقبلی




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

صفحه جستجوی راننده تپسی - ۱۳۹۶ پیش از آغاز فرایند بازطراحی
صفحه جستجوی راننده تپسی - ۱۳۹۶ پیش از آغاز فرایند بازطراحی


در این راستا یکی از مهمترین صفحاتی که باید تغییر می‌کرد پروژه جستجوی راننده (Finding Driver) بود.
جدای از شباهت با اوبر، رنگ سیاه صفحه و لودینگ در هنگام جستجو، باعث می‌شد کاربران زودتر از جستجو خسته و دلسرد شوند یا حداقل مدت‌کمتری را در انتظار تایید سفر توسط راننده بمانند.

در ادامه با جزئیات پیشنهادات و مسیر طراحی این صفحه تاثیرگذار همراه باشید:

شیرین، مثل انتظار
حرکت (Motion)
انتظار همیشه سخته و چالش ما این بود که تلخی انتظار رو شیرین کنیم.
اولین کاری که قبل از خواندن یک کتاب انجام می‌دهیم تماشای تصاویر آن است. حال اگر با حرکت هم ترکیب شود می‌تواند کاربر را بیشتر جذب کند اما یک موشن کوتاه اگر بطور مستمر تکرار شود بعد از مدتی خسته‌کننده خواهد شد.

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

اتودهای اولیه برای تایید سبک تصویرسازی‌های تپسی - پیکان و ۲۰۶ - آرین مقبلی
اتودهای اولیه برای تایید سبک تصویرسازی‌های تپسی - پیکان و ۲۰۶ - آرین مقبلی


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

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


با پرستیژ مثل تپسی
برندینگ (Branding)
طراحی فرایند تا جایی باید جذاب باشد که کاربر را ترغیب به اشتراک‌گذاری آن کند. اینجاست که تصویر یا ویدئوی منتشر شده باید گویا و معرف برند تپسی باشه. من داشتم سعی می‌کردم ماشین هاچ‌بک سفید رو به نمادی از تپسی بدل کنم.

موارد و نیازهایی که می‌تونستیم توی این صفحه نمایش بدیم.
۱. نمایش لودینگ و مدت زمان جستجو
۲. نمایش تایید درخواست سفر توسط راننده
۳. نمایش عدم قبول سفر
۴. تعداد درخواست ارسالی و خودرو‌های اطراف
۵. نمایش تبلیغ (معرفی قابلیت‌ها، سرویس‌ها، ویژگی‌ها و کمپین‌ها)
۶. نمایش بخشی از قوانین تپسی

کانسپت چشم عقاب:
اولین ایده من نمایش ماشین‌تپسی (pixi-tapsi) از بالا بود. این کانسپت در سه‌لایه ایجاد می‌شد.
۱. زمینه که بخش‌هایی از تصاویر هوایی جاده‌ها و خیابان‌های ایران تهیه شده بود و در کنار هم تشکیل یک مسیر دیدنی و پرجزئیات می‌داد.
۲. ماشین تپسی
۳. ابرها، پل‌ها و طونل‌ها
این کانسپت آمادگی زیادی برای تبدیل شدن به بازی داشت و از همان اول برنامه‌های زیادی داشتیم مثلا سبقت گرفتن از ماشین‌ها یا ردکردن مانع‌های داخل جاده
شبیه‌سازی شرایط جوی مثل باد و باران و رعد بر اساس دیتای هواشناسی منطقه‌ای کاربران
شبیه‌سازی نور و تاریکی بر اساس ساعات شبانه روز

طراحی اتود کانسپت چشم عقاب - ماشین از بالا روی جاده - تپسی
طراحی اتود کانسپت چشم عقاب - ماشین از بالا روی جاده - تپسی


https://virgool.io/p/bfq67mtj3lmx/%DA%A9%D8%A7%D9%86%D8%B3%D9%BE%D8%AA%D8%A7%DB%8C%D8%B1%D8%A7%D9%86%E2%80%8C%D8%B4%D9%87%D8%B1:%D8%A7%DB%8C%D9%86%D8%A7%DB%8C%D8%AF%D9%87%D8%AF%D9%88%D9%85%D8%A8%D9%88%D8%AF%D8%A8%D8%A7%D8%B2%D8%AF%D9%86%D8%AF%DA%A9%D9%85%D9%87%D8%AF%D8%B1%D8%AE%D9%88%D8%A7%D8%B3%D8%AA%D8%B3%D9%81%D8%B1%D8%8C%D9%85%D8%A7%D8%B4%DB%8C%D9%86%D8%AA%D9%BE%D8%B3%DB%8C%D9%88%D8%A7%D8%B1%D8%AF%DA%A9%D8%A7%D8%AF%D8%B1%D9%85%DB%8C%E2%80%8C%D8%B4%D8%AF%D8%AF%D8%B1%D8%AD%D8%A7%D9%84%DB%8C%DA%A9%D9%87%D8%AF%D8%B1%D8%B2%D9%85%DB%8C%D9%86%D9%87%D8%AA%D8%B5%D9%88%DB%8C%D8%B1%D8%B3%D8%A7%D8%B2%DB%8C%D8%A7%D8%B2%D8%B4%D9%87%D8%B1%D8%A8%D8%A7%D8%A7%D9%84%D9%85%D8%A7%D9%86%E2%80%8C%D9%87%D8%A7%DB%8C%D8%B4%D9%87%D8%B1%DB%8C%D9%88%D9%86%D9%85%D8%A7%D8%AF%D9%87%D8%A7%DB%8C%D9%87%D8%B1%DB%8C%DA%A9%D8%A7%D8%B2%D8%B4%D9%87%D8%B1%D9%87%D8%A7%DB%8C%D8%A7%DB%8C%D8%B1%D8%A7%D9%86%DA%A9%D9%87%D8%AA%D9%BE%D8%B3%DB%8C%D8%AF%D8%B1%D8%A2%D9%86%D8%AD%D8%B6%D9%88%D8%B1%D8%AF%D8%A7%D8%B1%D8%AF.%D8%A7%DA%AF%D8%B1%D8%AF%D8%B1%D8%AE%D9%88%D8%A7%D8%B3%D8%AA%D9%BE%D8%B0%DB%8C%D8%B1%D9%81%D8%AA%D9%87%D9%85%DB%8C%E2%80%8C%D8%B4%D8%AF%D9%85%D8%A7%D8%B4%DB%8C%D9%86%DA%AF%D8%A7%D8%B2%D9%85%DB%8C%E2%80%8C%D8%AF%D8%A7%D8%AF%D9%88%D8%A7%D8%B2%D8%B3%D9%85%D8%AA%DA%86%D9%BE%D8%B5%D9%81%D8%AD%D9%87%D8%AE%D8%A7%D8%B1%D8%AC%D9%85%DB%8C%E2%80%8C%D8%B4%D8%AF%D9%88%D8%A7%DA%AF%D8%B1%D8%AF%D8%B1%D8%AE%D9%88%D8%A7%D8%B3%D8%AA%D9%82%D8%A8%D9%88%D9%84%D9%86%D9%85%DB%8C%E2%80%8C%D8%B4%D8%AF%D9%85%D8%A7%D8%B4%DB%8C%D9%86%D8%AA%D8%B1%D9%85%D8%B2%D9%85%DB%8C%E2%80%8C%D8%B2%D8%AF%D9%88%D8%A7%D8%B2%D8%B3%D9%85%D8%AA%D8%B1%D8%A7%D8%B3%D8%AA%DA%A9%D8%A7%D8%AF%D8%B1%D8%AE%D8%A7%D8%B1%D8%AC%D9%85%DB%8C%E2%80%8C%D8%B4%D8%AF.%D8%A7%DB%8C%D9%86%DA%A9%D8%A7%D9%86%D8%B3%D9%BE%D8%AA%D8%A8%D9%87%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C%D9%81%D9%86%DB%8C%D9%86%D8%B2%D8%AF%DB%8C%DA%A9%E2%80%8C%D8%AA%D8%B1%D8%B4%D8%AF.%D9%82%D8%B1%D8%A7%D8%B1%D8%A8%D9%88%D8%AF%D8%AF%D8%B1%DA%86%D9%86%D8%AF%D9%81%D8%A7%D8%B2%D8%A7%D8%AC%D8%B1%D8%A7%D8%B4%D9%88%D8%AF%D8%AF%D8%B1%D9%86%D8%B3%D8%AE%D9%87%D8%A7%D9%88%D9%84%D8%B2%D9%85%DB%8C%D9%86%D9%87%D8%AB%D8%A7%D8%A8%D8%AA%D8%A8%D8%A7%D8%B4%D8%AF.%D8%AF%D8%B1%D9%86%D8%B3%D8%AE%D9%87%D8%AF%D9%88%D9%85%D8%8C%D9%85%D9%88%D8%B4%D9%86%E2%80%8C%D9%87%D8%A7%DB%8C%DB%8C%D9%85%D8%AB%D9%84%D8%A8%D8%A7%D8%AF%D9%88%D8%A8%D8%A7%D8%B1%D8%A7%D9%86%D9%88%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1%D9%86%D9%88%D8%B1%D8%AF%D8%B1%D8%B2%D9%85%DB%8C%D9%86%D9%87%D8%A7%D8%AA%D9%81%D8%A7%D9%82%D8%A8%DB%8C%D9%88%D9%81%D8%AA%D8%AF%D9%88%D8%AD%D8%AA%DB%8C%D8%AF%D8%B1%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF%D9%87%D8%A7%DB%8C%D9%85%D8%AE%D8%AA%D9%84%D9%81%DB%8C%D8%A7%D8%A7%D8%A8%D8%AA%D8%AF%D8%A7%DB%8C%D9%81%D8%B5%D9%84%E2%80%8C%D9%87%D8%A7%DB%8C%D8%B3%D8%A7%D9%84%D8%B1%D9%86%DA%AF%D9%88%D8%A8%D9%88%DB%8C%D9%85%D8%AA%D9%86%D8%A7%D8%B3%D8%A8%D8%A8%DA%AF%DB%8C%D8%B1%D8%AF.%D8%AF%D8%B1%D9%86%D8%B3%D8%AE%D9%87%D8%B3%D9%88%D9%85%D8%A8%D8%A7%D8%B2%DB%8C%D8%A8%D9%87%D8%A2%D9%86%D8%A7%D8%B6%D8%A7%D9%81%D9%87%D8%B4%D9%88%D8%AF(%D9%85%D8%AB%D9%84%D8%A7%D8%A7%D8%B2%D8%B1%D9%88%DB%8C%D8%B3%D8%B1%D8%B9%D8%AA%E2%80%8C%DA%AF%DB%8C%D8%B1%D9%87%D8%A7%D8%A8%D9%BE%D8%B1%D8%AF%DB%8C%D8%A7%D8%A8%D8%A7%D8%AA%D9%86%D8%B8%DB%8C%D9%85%D8%A7%D8%B1%D8%AA%D9%81%D8%A7%D8%B9%D8%A7%D8%B2%D8%B1%D9%88%DB%8C%D9%85%D8%AE%D8%B1%D9%88%D8%B7%E2%80%8C%D9%87%D8%A7%D9%88%D8%AA%D8%A7%D8%A8%D9%84%D9%88%E2%80%8C%D9%87%D8%A7%D8%B1%D8%A7%D8%B1%D8%AF%DA%A9%D9%86%D8%AF)*%D8%A7%DB%8C%D8%B1%D8%A7%D9%86%E2%80%8C%D8%B4%D9%87%D8%B1%D8%8C%D8%AA%D8%B1%DA%A9%DB%8C%D8%A8%DB%8C%D8%A7%D8%B2%D8%B9%D9%86%D8%A7%D8%B5%D8%B1%D9%85%D8%B9%D9%85%D8%A7%D8%B1%DB%8C%D9%88%D8%B7%D8%A8%DB%8C%D8%B9%DB%8C%D8%A7%DB%8C%D8%B1%D8%A7%D9%86%D9%87%D8%B3%D8%AA.%D8%A8%D8%B1%D8%AC%D9%85%DB%8C%D9%84%D8%A7%D8%AF%D9%88%D8%A2%D8%B2%D8%A7%D8%AF%DB%8C%D8%AF%D8%B1%D8%AA%D9%87%D8%B1%D8%A7%D9%86%D8%8C%D9%85%DB%8C%D8%AF%D8%A7%D9%86%D8%B4%D9%87%D8%B1%D8%AF%D8%A7%D8%B1%DB%8C%D8%AF%D8%B1%D8%B1%D8%B4%D8%AA%D8%8C%D8%AD%D8%A7%D9%81%D8%B8%DB%8C%D9%87%D8%AF%D8%B1%D8%B4%DB%8C%D8%B1%D8%A7%D8%B2%D8%8C%D8%B3%DB%8C%E2%80%8C%D9%88%E2%80%8C%D8%B3%D9%87%D9%BE%D9%84%D8%A7%D8%B5%D9%81%D9%87%D8%A7%D9%86%D8%8C%D8%A2%D8%B1%D8%A7%D9%85%DA%AF%D8%A7%D9%87%D8%B4%D9%87%D8%B1%DB%8C%D8%A7%D8%B1%D8%AA%D8%A8%D8%B1%DB%8C%D8%B2%D9%88%D8%A8%D8%A7%D8%B1%DA%AF%D8%A7%D9%87%D8%A7%D9%85%D8%A7%D9%85%E2%80%8C%D8%B1%D8%B6%D8%A7%D8%AF%D8%B1%D9%85%D8%B4%D9%87%D8%AF.%D8%A7%D9%84%D9%85%D8%A7%D9%86%E2%80%8C%D9%87%D8%A7%DB%8C%D8%B4%D9%87%D8%B1%DB%8C%DA%A9%D9%87%D9%85%DB%8C%E2%80%8C%D8%AA%D9%88%D8%A7%D9%86%D8%AF%D8%A8%D9%87%D9%85%D8%B1%D9%88%D8%B1%D8%A8%DB%8C%D8%B4%D8%AA%D8%B1%D8%B4%D9%88%D8%AF.%D8%A7%DB%8C%D9%86%DA%86%D8%B4%D9%85%E2%80%8C%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%D8%B9%D9%84%D8%A7%D9%88%D9%87%D8%A8%D8%B1%D8%AC%D8%B0%D8%A7%D8%A8%DB%8C%D8%AA%D8%A8%D8%B5%D8%B1%DB%8C%D9%86%D9%85%D8%A7%D8%AF%D8%A7%DB%8C%D8%B1%D8%A7%D9%86%DB%8C%DB%8C%DA%A9%D9%BE%D8%A7%D8%B1%DA%86%D9%87%D8%A7%D8%B3%D8%AA.%D9%87%D9%85%DA%86%D9%86%DB%8C%D9%86%D8%AD%D8%B6%D9%88%D8%B1%D8%AA%D9%BE%D8%B3%DB%8C%D8%AF%D8%B1%D9%87%D8%B1%DB%8C%DA%A9%D8%A7%D8%B2%D8%B4%D9%87%D8%B1%D9%87%D8%A7%DB%8C%DB%8C%DA%A9%D9%87%D8%AF%D8%B1%D8%A2%D9%86%D9%86%D9%85%D8%A7%DB%8C%D9%86%D8%AF%DA%AF%DB%8C%D8%AF%D8%A7%D8%B1%D8%AF%D8%B1%D8%A7%D8%A8%DB%8C%D8%A7%D9%86%D9%85%DB%8C%E2%80%8C%DA%A9%D9%86%D8%AF.%DB%8C%DA%A9%DB%8C%D8%AF%DB%8C%DA%AF%D8%B1%D8%A7%D8%B2%DA%86%D8%A7%D9%84%D8%B4%E2%80%8C%D9%87%D8%A7%DB%8C%D9%85%D8%A7%D8%B2%D9%85%D8%A7%D9%86%DB%8C%D8%A8%D9%88%D8%AF%DA%A9%D9%87%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%A8%D8%B9%D8%AF%D8%A7%D8%B2%D8%B2%D8%AF%D9%86%D8%AF%DA%A9%D9%85%D9%87%D8%AF%D8%B1%D8%AE%D9%88%D8%A7%D8%B3%D8%AA%D8%B3%D9%81%D8%B1%D8%8C%DA%AF%D9%88%D8%B4%DB%8C%D8%B1%D8%A7%D8%B1%D9%87%D8%A7%D9%85%DB%8C%E2%80%8C%DA%A9%D9%86%D8%AF%D8%AA%D8%A7%D8%A2%D9%85%D8%A7%D8%AF%D9%87%D8%B4%D9%88%D8%AF%DB%8C%D8%A7%D8%AF%D8%A7%D8%AE%D9%84%D8%AC%DB%8C%D8%A8%D8%B4%D9%85%DB%8C%E2%80%8C%DA%AF%D8%B0%D8%A7%D8%B1%D8%AF%D9%88%D8%A8%D9%87%D9%87%D8%B1%D8%B5%D9%88%D8%B1%D8%AA%D8%B5%D9%81%D8%AD%D9%87%D8%B1%D8%A7%D9%86%D9%85%DB%8C%E2%80%8C%D8%A8%DB%8C%D9%86%D8%AF.%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87%D8%A7%D8%B2%D8%B5%D9%88%D8%AA%D8%B1%D8%A7%D9%87%DA%A9%D8%A7%D8%B1%D9%85%D8%A7%D8%A8%D9%88%D8%AF%D8%A8%D9%87%D8%B7%D9%88%D8%B1%DB%8C%DA%A9%D9%87%D8%B5%D8%AF%D8%A7%DB%8C%DA%AF%D8%A7%D8%B2%D8%AF%D8%A7%D8%AF%D9%86%D8%AE%D9%88%D8%AF%D8%B1%D9%88%D8%A8%D9%87%D9%85%D8%B9%D9%86%D8%A7%DB%8C%D9%82%D8%A8%D9%88%D9%84%D8%AF%D8%B1%D8%AE%D9%88%D8%A7%D8%B3%D8%AA%D9%88%D8%AA%D8%B1%D9%85%D8%B2%D8%A8%D9%87%D9%85%D8%B9%D9%86%D8%A7%DB%8C%D8%B9%D8%AF%D9%85%D9%82%D8%A8%D9%88%D9%84%D8%AF%D8%B1%D8%AE%D9%88%D8%A7%D8%B3%D8%AA%D8%AF%D8%B1%DA%A9%D9%86%D8%A7%D8%B1%D9%88%DB%8C%D8%A8%D8%B1%D9%87%E2%80%8C%D9%87%D8%A7%DB%8C%D9%85%D8%AA%D9%86%D8%A7%D8%B3%D8%A8%D9%85%DB%8C%E2%80%8C%D8%AA%D9%88%D8%A7%D9%86%D8%B3%D8%AA%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%B1%D8%A7%D8%A7%D8%B2%D8%B4%D8%B1%D8%A7%DB%8C%D8%B7%D9%85%D8%B7%D9%84%D8%B9%DA%A9%D9%86%D8%AF.%D9%86%D8%B3%D8%AE%D9%87%D8%A7%D9%88%D9%84%D8%A7%DB%8C%D9%86%D8%B7%D8%B1%D8%AD%D8%AF%D8%B1%DA%AF%D9%88%D8%B4%DB%8C%E2%80%8C%D9%87%D8%A7%DB%8C%D8%A7%D9%86%D8%AF%D8%B1%D9%88%DB%8C%D8%AF%D8%A8%D8%B1%D8%A7%DB%8C%D9%85%D8%AF%D8%AA%DB%8C%D8%A7%D8%AC%D8%B1%D8%A7%D9%88%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87%D8%B4%D8%AF.
ایران‌شهر | آرین مقبلی - تپسی
ایران‌شهر | آرین مقبلی - تپسی

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

ایده‌ها، تغییرات و اجراهای صفحه جستجوی راننده در تپسی
ایده‌ها، تغییرات و اجراهای صفحه جستجوی راننده در تپسی



کمی بعد با بازطراحی لوگوی تپسی با توجه به پیشنهادات ارائه شده نمونه چشم عقاب بصورت تصویرسازی فلت و موشن اجرایی شد. طراحی این بخش با تیم خلاقیت تپسی بود. با انتشار این نسخه همونطور که انتظار داشتیم موجی از درخواست‌ها و پیشنهادات برای اجرای بازی روی این صفحه شد.
پس باز دست به کار شدیم و انواع گیم‌های کوچیک رو مقایسه کردیم.
درسته وجود بازی جذابه اما باید به تاثیرات دیگرش هم فکر می‌کردیم. ما نمی‌خواستیم تعداد سفرهای لغو شده و انصراف سفرها بخاطر شوق بازی در تپسی زیاد بشه. یا اگر به عنوان کاربر مشغول بازی و رکورد شکنی باشم و یکباره درخواست قبول بشه چه اتفاقی باید بیوفته؟
یکی از ایده‌ها جاده موزیکال بود. نت‌های موسیقی روی جاده که و اگر از روشون رد می‌شدی یک موزیک جذاب در زمینه شکل می‌گرفت. قبلا چند باری در مورد موزیک برند برای تپسی صحبت کرده بودیم و اگر این موزیک همان موزیک بود به شناخت بیشتر برند کمک می‌کرد و اطرافیان رو از گرفتن تپسی آگاه می‌کرد. از طرفی به کاربر حس امتیاز منفی نمی‌دادیم و اشتباهات کاربر رو نمی‌شمردیم و کاربر از حس خوب عملکردش برای تکمیل موزیک لذت می‌برد ( بهترین امتیاز! ? )
چون تازگی بحث کهکشان تپسی در اپ قرارگرفته بود و اسمش به سفینه تپسی تغییر کرد. ایده تبدیل شدل ماشین به سفینه و تیراندازی به دشمن یا مانع‌عای روبرو یکی دیگه از پیشنهادات بود.
ایده دیگه رد کردن مانع بدون تیر و خون‌ریزی بود. این موانع میتونست ماشین‌های سبز ? ، مخروطی‌های نارنجی راهسازی، چاله‌های خیابون یا حتی دست‌انداز و سرعت‌گیرها یا هر چیز بیخود دیگه‌ای باشه.
آخرین باری که روی این پروژه کار کردم سرعتگیر‌ها رو طراحی می‌کردم.
نزدیک به یکسالی هست تپسی نیستم و باید ادامه این پروسه رو از بچه‌های جدید تیم‌طراحی محصول پرسید

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

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

آرین مقبلی
سرپرست سابق محصول تپسی
رویا پرداز و مدیر کارخانه رویاسازی استودیو سرخ

من رو در شبکه‌های اجتماعی دنبال کنید
redl.ink/arian