داستان طراحی محصول تپسی

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

موضوع:
طراحی محصول مسافران تپسی (بهبود نسخه ۲ - طراحی نسخه ۳)

مسئولیت: سرپرست طراح محصول
مدت همکاری: فروردین ۱۳۹۶ - خرداد ۱۳۹۹

پیش درآمد:
حدود سال ۱۳۹۴ در کنار همکاری با فیلیمو، روی پروژه‌هایی مثل (هم‌پیما: سرویس حمل‌ونقل اشتراکی) هم کار می‌کردم و که از طرف تپسی (هومن دمیرچی) برای همکاری دعوت شدم اما به دلیل همکاری تمام‌وقت با صباایده این همکاری امکان‌پذیر نشد.
*درآن بازه هنوز تپسی محصول دیجیتالی نداشت و وارد بازار نشده بود و اسنپ هم هنوز نوپا بود.

همین عاملی بود که نسبت به نسخه اول منتشر شده کنجکاوتر باشم. بعدها شنیدم یک طراح خارجی نسخه اول محصول تپسی را طراحی کرده اما نتوانسته نظرها را جلب کند و تصمیم مدیریت بر این شده تا طراحی نسخه دوم را بر اساس یک سرویس موفق خارجی (اوبر) پیش ببرند.

«چرا تپسی؟ چرا اسنپ نه؟» این سوالی بود که CTO مجموعه دکتر مهینی در روز مصاحبه از من پرسید
جوابم مشخص بود: من عاشق ساختنم. عاشق چالشم...
اینکه بتونم تاثیرگذار باشم، اینکه بدونم در جایگاه اول نیستیم، بهترین نیستیم اما برای به دست آوردنش تلاش کنم من رو سرحال نگه می‌داره.
احتمالا فلسفه تمام انتخاب‌های زندگیم چیزی شبیه اینه. در انتخاب‌های کاری حداقل مطمئنم.

من از فروردین ۱۳۹۶ وارد تپسی شدم.
ورود من به تپسی با ارايه راهکارهایی برای بازطراحی نسخه سفیران (رانندگان) تپسی و سرویس Back-Office و پشتیبانی و مدیریت شروع شد که در مطلب مجزای دیگری به آن‌ها می‌پردازم.

اولین اقدامات هر طراحی با ورود به یک مجموعه جدید آشنایی با اقدامات گذشته و استراتژی‌های شرکت در برابر محصول است.
محصول تپسی سال ۱۳۹۵ با سرویس پرو (با خودروهای لوکس مانند پورشه و مزراتی) و پرایم (ارايه سرویس مختص بانوان) به عنوان محصولی شایسته و لوکس معرفی شد.
هرچند در این موراد چندان موفق نبود و با تخفیف‌های عرضه شده، بیشتر به عنوان سرویسی ارزان قیمت مورد توجه بود.
اما تصمیم مدیران شرکت به تغییر این نگرش مشهود بود. امیدوار بودیم تا بتوانیم این ذهنیت را به سرویسی پیشرو و هوشمند تغییر دهیم.

سرآغاز داستان

شروع کار من تپسی این شکلی بود :)

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

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

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

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

بنچمارک و تحلیل رقبا

رصد رقبای داخلی و خارجی یکی از دستاوردهای مهم تپسی در آن دوره بود. فرایندی که پیش‌تر اجرا نمی‌شد را به یکی از روندهای اجرایی تبدیل کردیم تا هر تغییری در محصولات و استراتژی‌های آنها بررسی و تحلیل شود.
با بررسی محصولات داخلی (اسنپ، ماکسیم، کارپینو، آژانسی، دینگ و... ) و خارجی (,Uber, lyft, careem, Grab Yandex) نقاط ضعف و قوت آن‌ها را لیست کردیم. قابلیت‌ها و امکانات از نظر کارایی استفاده و چک می‌شد. حتی اسکرین‌شات یا ویدیوهایی از صفحات و فلوی محصول در دوره‌های مختلف آرشیو و طبقه‌بندی شد و بروزرسانی می‌شد.

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

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

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

بازخوردها (Reactive Feedback)

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

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

یا امکانات «تنظیمات سفر» که با گزینه‌‌های ویلچر/عصا دارم یا ناشنوا/کم‌شنوا هستم شرایط بهبود تجربه سفر افراد مسن یا معلول و ناشنوا مهیا می‌شد.

پشتیبانی و مرکز تماس (call center & Support): بخش دیگری از دریافتی‌های مورد نیاز از گزارش‌های طبقه‌بندی شده پشتیبانی تامین می‌شد و می‌توانست نیازها، سوال‌ها و مشکلات اساسی کاربران در استفاده از سرویس تپسی را روشن کند.

کانال ارتباطی درون برنامه‌ای (in-app Feedback Channels): تاثیر بازخوردها به حل ریشه‌ای چالش‌های پیش رو منجر می‌شد و تجربه کاربران تپسی چه مسافر باشند، چه سفیران شرکت مهم بود.

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

بازخورد (Proactive feedback)

فوکس گروپ (focus group) : با دعوت از مسافران و مطرح کردن موضوعات از پیش تعیین شده و هدایت بحث سعی می‌کردیم تا به ریشه مشکلات و نیازهای کاربران برسیم. عمده مشکلات کاربران به شیوه پرداخت و امنیت سرویس‌ها بود. یکی دیگر از دغدغه‌های کاربران (مسافر/راننده) پشتیبانی بود.

تحلیل دیتای اپلیکیشن (in-app analytics and Data Analysis)
الگوی رفتار و مسیر حرکت کاربر در محصول، کمک می‌کرد تا سرعت و دستیابی هدف را برای او تسریع کنیم.
ارائه پیشنهادات هوشمندانه از سوی سرویس می‌توانست روند عادی را کوتاه کند.

پرسشنامه (Surveys)

همدلی با ذی‌نفعان: برای بیزینس هماهنگی تعداد مسافران و راننده‌ها یکی از موضوعات مهم بود. در آن روزها تعداد درخواست‌ها بیش از تعداد راننده‌ها بود و جذب راننده یکی از دغدغه‌های تیم‌ها از جمله تیم دیزاین بود.

تست‌های کاربردپذیری (Usability test) و سلامت محصول: یکی از مهمترین روش‌های ارزیابی محصول که پیش از این جایی در تپسی نداشت و توانستیم به یک روال تکرار شونده تبدیل کنیم تست‌های کاربردپذیری بود.
هر ایده یا قابلیت جدید به این روش تست می‌شد تا کارآمدترین طرح به مرحله توسعه وارد شود.

استراتژی دیزاین (روایت هویت):
بهبود نسخه ۲

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

1. طراحی دیزاین‌سیستم و UI-Kit برای یکپارچه‌سازی و سرعت‌بخشیدن به فرایند طراحی
2. طراحی مجزای صفحات برای اندروید و iOS با درنظر گرفتن عادات کاربران هر سیستم‌عامل
3. طراحی مراحل و جریان کاربری برای هر قابلیت و تسک

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

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

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

فلسفه تپسی

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

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

۱. این سرویس جدید چیست؟ معرفی سرویس‌ها و قابلیت‌های جدید و نمایش بج راهنما برای هر سرویس
۲. سفیر کی به مبدا من می‌رسد و برای آماده شدن چقدر فرصت دارم؟ زمان رسیدن سفیر به مبدا ما یا پیش‌بینی زمان
۳. اخطار پیک ترافیک چیست؟ معرفی اوج ترافیک و دلیل افزایش قیمت
۴. برای اینکه تخمین زمان رسیدن به مقصد را بدانم باید از راننده بپرسم؟ نمایش تخمین زمان رسیدن قبل از گرفتن سفر و هنگام سفر روی نقشه
۵. اطراف من چند خودرو فعال هستند؟ نمایش تعداد خودروهای فعال برای دریافت درخواست

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

هوشمند:
تپسی باید ارتباط نزدیک‌تری با کاربر بگیرد و مثل یک دستیار و راهنما مسیر و جریان رسیدن به هدف را کوتاه کند.
یعنی داده‌های موثر که کاربر وارد کرده را تحلیل و پاسخ (پیشنهاد) مناسب ارايه دهد.

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

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

همچنین کاربر نباید یک اکت را چندبار انجام دهد.
مثلا اگر سفیر درخواست سفر را پیش از رسیدن به مبدا لغو کرد سیستم بصورت خودکار، همان مسیر را با مبلغ جدید(در صورت تغییر مبلغ) درخواست دهد.

سایر ویژگی‌های تپسی در طراحی

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

یافت‌پذیری:
با بزرگتر و کشیده شدن ابعاد صفحات موبایل و دسترسی کمتر به بالای صفحه برای لمس، تصمیم گرفتیم تمامی پیام‌های تعاملی (مانند Popupها) را به پایین صفحه (به صورت Bottom sheet) انتقال دهیم. این تغییر علاوه بر بهبود ارگونومی استفاده، کاربران را برای یافتن دکمه‌های تعاملی در پایین صفحه راهنمایی می‌کرد و سرعت تعامل با محصول را بالا می‌برد.

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

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

یکپارچگی:
یکپارچه سازی و ایجاد نسخه اول دیزاین سیستم تپسی
قبل از طراحی دیزاین سیستم سرویس مسافران، برای سرویس پشتیبانی(back-office) و اپ سفیران(driver app) دیزاین سیستم تهیه کرده بودیم و این کمک می‌کرد تا فرایندها سریع‌تر پیش برود.
اما با توجه به گستردگی و تعداد صفحات و مراحل طراحی شده برای تپسی، یکپارچه‌سازی محصول در فرایند طراحی و توسعه چندان هموار نبود.

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

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

هم‌زمان توسعه یک دیزاین سیستم پیچیده با توجه به محدود بودن زمان و افراد تیم، یکی از چالش‌های تیم بود.

رزرو سفر

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

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

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

طراحی نسخه ۳
با ریبرند تپسی لازم بود تا محصول مطابق با هویت‌بصری جدید بروز شود.

داستان ریبرند تپسی:

نیازها و مشکلات متعددی باعث شد تا شرکت به فکر ری‌برند تپسی باشه.
مشکلاتی که در نوشتار و خوانایی (تپ‌سی-TAP30) ، لوگوی پیچیده، رنگ سازمانی مشکی که چه در محصول و تبلیغات مارکتینگ موثر نبود و دیگر بازتاب دهنده خدمات لوکس تپسی نبود.

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

مراحل اولیه بازنگری در استراتژی برند به همت آقای نژده هوانسیان در پاییز ۱۳۹۷ آغاز شد.
نتیجه این استراتژی جوهره برند (Hero & Creator / قهرمان و سازنده) بود که در طراحی هویت جدید محصول که توسط تیم استودیو شیزارو در اردیبهشت ۱۳۹۸ معرفی شد.
+ ویژگی این لوگو، استفاده هم‌زمان لوگوتایپ فارسی و لاتین در کنار مستطیل‌هایی به رنگ آبی و سبز (نمادی از آسمان و زمین) در یک قاب و چیدمان بود. این دو تجسمی از مسافر و راننده، مبدا و مقصد بودند و فصل مشترک همه اینها که جاده است و برشی از جاده همان خطوط پیوسته و منقطع راهنما در مسیر است که عنصر اولیه شکل دهنده لوگو شد.

اما پیشنهاد ارائه شده هر چند در روایتگری بی‌نقص بود اما نه در محصول چندان مورد تایید بود نه برای تیم مارکتینگ.

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

یکی از موثرترین تغییرات شیوه نگارش نوشتار عنوان شرکت از تپ‌سی به تپسی در فارسی
و Tap30 به TAPSI در حروف لاتین بود.

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

در نسخه لاتین هم اساسا TAP30، تپسی خوانده نمی‌شود و بسیاری از شرکای تجاری یا مدیران خارجی در تلفظ نام آن به مشکل می‌خوردند.

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

(در آن بازه علاوه بر بهبود وضعیت نسخه ۲تپسی، دیزاین جدید با همان تم مشکی اما ساختاری بروز و جذاب‌تر طراحی شده بود که آماده معرفی بود.)

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

در این پیشنهاد طراحی بصری محصول دچار دگرگونی می‌شد تا ظاهری به‌روز، جوان پسند و جذاب براساس رنگ‌سازمانی جدید بر تن کند.

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

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

این تغییرات تنها جنبه بصری نداشت و تجربه‌کاربری بر اساس تست‌های کاربردپذیری و گزارشات و راهکارهایی که پیشتر بررسی و در صف انتشار بودند در مسیر پیاده‌سازی قرار گرفتند.

یکی از نکات مهم انعطاف‌پذیری و یافت‌پذیری با توجه به آگاهی اضافه شده سرویس‌های جدید بود.
در نسخه v02 تپسی با وجود این که نهایتا دو سرویس(تپسی کلاسیک و لاین) فعال بود اما سرویس لاین در طرح به درستی دیده نمی‌شد.
در نسخه جدید علاوه بر تعدد سرویس‌ها (مانند تاکسی، موتور، سرویس پلاس و ...) ، اطلاعات بیشتری نظیر تخمین زمان رسیدن هم اضافه می‌شد.

کارت سفر:

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

پرداخت راحت:یکی از بزرگترین و گیج‌کننده‌ترین مشکلات کاربران در بخش پرداخت، شباهت دکمه‌ها و text-field ها بود و باعث می‌شد در هنگام پرداخت گیج شوند.

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

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

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

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

چشم انداز من منتشر کردن نسخه جدید دیزاین‌سیستم تپسی با عنوان (طلوع - Sun Rise) برای عموم بود.
علاوه بر تغییرات مهم روی کامپوننت‌ها، تصویرسازی‌های جدید و آیکون ست اختصاصی تپسی را در این نسخه معرفی کردیم.

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

چرا آیکون ست جدید؟
۱. عدم هماهنگی بصری آیکون‌های رسمی اندروید و iOS با هویت جدید
۲. در دسترس نبودن آیکون‌های رسمی برای موضوعات مرتبط با سرویس تاکسی اینترنتی و سایر المان‌های مورد نیاز در محصول.
۳. زمان‌بر بودن طراحی دو نسخه آیکون برای موضوعات مختلف با توحه به زبان طراحی متریال و HID
۴. آیکون‌های توپر متریال (android) از نظر بصری سنگین و توپر بودند (سریع دیده می‌شدند اما موضوع را به دلیل جزئیات پایین، کمتر منتقل می‌کردند)
و آیکون‌های iOS سبک، ظریف و زیبا بودند و هرچند به دلیل جزئیات بیشتر موضوع را منتقل می‌کردند اما به دلیل ظرافتشان سریع دیده نمی‌شدند و در گوشی‌هایی با رزولوشن پایین افت کیفیت بیشتری داشتند.

قبل از هرچیز لازم بود بریفی از آنچه نیاز داریم و دلایل آن لیست شود تا طراحان با توجه به هویت جدید و فرم و استایل لوگو طراحی را شروع کنند. به هیچ وجه فرصت آزمون و خطا نبود.
در مورد طراحی بصری آیکون‌ست مهم بود:
۱. خطی باشد
۲. اندازه خطوط ضخیم‌تر از آیکون ست iOS (تا سریع‌تر دیده شود و با توجه به رزولوشن پایین بعضی اسکرین‌های موبایل رنجه نشود) و ظریف‌تر از آیکون‌های سطحی متریال گوگل باشد (تا امکان شناسایی آیکون‌ها بالاتر رود)
۳. امکان استفاده دو رنگ (Dual-tone) آیکون‌ها
۴. استفاده از فرم‌های لوگوی جدید تپسی در آیکون
۶. استفاده از خطوط پخ و صاف در آیکون‌ها

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

ویژگی آیکون‌های جدید:
۱. هماهنگی با برند
۲. هماهنگ با ترند طراحی آیکون‌های خطی / ساده و سبک
۳. افزایش سرعت استفاده در طرح و اجرا
۴. استفاده از یک پکیج برای دو نسخه اندروید و iOS
۵. شناسایی سریع موضوع، نمایش دقیق در نمایشگر‌ها

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

نمایی از نسخه طراحی تپسی ۲ و نسخه ریبرند ۳

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

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

همین نکته در طراحی صفحه ریبرند هم لحاظ شد.

آینده‌ی سرویس‌های تاکسی اینترنتی چگونه است؟
این سوالی بود که باعث شکل‌گیری (طراحی نسخه ۴ دیزاین تپسی) و طراحی کانسپت‌هایی از نسخه آتی تپسی شد.
اگر عمری باقی بود در مورد تحقیقاتی که انجام دادیم و نتیجه طراحی‌ها مطلب مجزای دیگری می‌نویسم.

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

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

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