قدم به قدم، تا بازطراحی اسنپ!

اواخر شهریور 99 بود که در دورهِ‌ی طراحی رابط و تجربه‌ی کاربری هومن هاتفی در مدرسه‌ی آنلاین اینورس شرکت کردم. موضوعی که برای انجام تمرین‌های دوره‌ام انتخاب کرده بودم، بازطراحی نرم‌افزار اسنپ تاکسی بود. اسنپ از زمستان سال 1393، کار خود را با ارائه‌ی خدمات تاکسی آنلاین در ایران، آغاز کرد. در دو سال اول با مشکلات مختلفی رو به رو شد ولی پس از مدتی به یکی از استارت آپ های پر استفاده میان مردم تبدیل شد. همچنین با شیوع بیماری کرونا و ترس از آلودگی تاکسی های حمل و نقل شهری، اسنپ به بهترین جایگزین و انتخاب برای سفر مردم تبدیل شد. خودم به شخصه هر روز حداقل دو سفر برون شهری و دو سفر درون شهری برای رفتن به محل کارم، با اسنپ داشتم. اما همیشه از طرف دوستانم با جملاتی نظیر اینکه "چطور اعتماد میکنی تنها با اسنپ به خارج از شهر سفر کنی؟" یا " چطور سفر های آخر شب و نیمه شب رو با اسنپ میری؟" مواجه می‌شدم. با اینکه اسنپ در میان مردم محبوب و پرکاربرد است اما هنوز هم عده ای (خصوصا خانم ها و مردم شهر های کوچک) به دلیل نوع انتخاب راننده، نمی توانند به سفر با اسنپ اطمینان کنند. از طرفی افراد زیادی نیز به واسطه‌ی تجربیات بد سفر، کم کم این اعتمادشان را از دست داده بودند.مسئله‌ای که برای تمرین‌ام مطرح کردم، کمبود اعتماد و حس امنیت مسافران در اسنپ به دلیل نوع انتخاب رانندگان بود.یک قدم قبل از شروع Researchقبل از شروع، با استفاده از متد 5 Whys سعی کردم مسئله را به اجزای کوچک‌تر تبدیل کرده و حدس بزنم که چه دلایلی ممکن است باعث ایجاد آن شده باشند. در این متد شما ابتدا باید مسئله‌ی سطحی و اولیه‌ای که مشاهده می‌کنید را یادداشت کرده، سپس یک چرا از نوشته‌ی خود بپرسید. در قدم بعدی، پاسخ خود به چرا را یادداشت نموده و مجددا از پاسخ خود چرا را بپرسید. این روند را آنقدر ادامه دهید تا به یک نتیجه‌ی مشخص و بدیهی برسید. معمولا تا 5 مرحله، به پاسخ خود خواهید رسید.پس از بررسی مسئله‌ام با این روش، حدس می‌زدم که احتمالا بخاطر نحوه‌ی جذب راننده توسط اسنپ (در آن زمان معمولا ثبت‌نام به راحتی و توسط تعدادی آدم کنار خیابان با پر کردن فرم‌های مختصر اتفاق می‌افتاد.) و دسترسی به پشتیبانی در مواقع پرخطر بود.قدم بعدی، Primary Quantitive Researchخب، حالا که تا حدودی مسئله‌ی اولیه را درک کرده بودم، باید پا را کمی فراتر گذاشته و وارد دنیای کاربران می‌شدم و به اصطلاح پا جای کفش آن‌ها قرار می‌دادم. برای این کار من از دو متد تحقیق Survey و Interview استفاده کردم. از طرفی هم باید طوری سوالات را طرح کرده و مسیر مصاحبه را هدایت می‌کردم که دچار Confirmation bias نشوم.از آنجایی که دسترسی مستقیم به اطلاعات اسنپ نداشتم، در مورد تعداد کلی کاربران اسنپ تاکسی در شهر ساری نمی‌دانستم. من با تعداد فرضی 400 کاربر، تحقیقات خودم را شروع کردم و با سطح اعتماد به نفس 80%، حاشیه‌ی خطای 10%، باید از 39 نفر پرسشنامه می‌گرفتم. در نهایت موفق به گرفتن Survey از 41 نفر که 51% آن‌ها نیز خانم بودند، شدم. میانگین سن اغلب شرکت کنندگان بین 21 تا 23 سال بود. 41% از شرکت کنندگان در اکثر مواقع از اسنپ برای حمل و نقل عمومی استفاده کرده و 56% نیز به ندرت اما باز هم استفاده می‌کردند. باقی سوالات باید به نحوی مطرح می‌شد که نیازها و دردهای مشترک 41% از شرکت کنندگان را مطرح کرده و همچنین دلیل استفاده‌ی کم 56% دیگر از شرکت کنندگان را پیدا کند. اصلی‌ترین دلایل استفاده از اسنپ در بین شرکت کنندگان، نداشتن وسیله‌ی نقلیه‌ی شخصی، حمل و نقل راحت‌تر و همچنین سریعتر و راحت‌تر بودن نسبت به تاکسی‌های شهری بود. سفرهای عصر و غروب با درصد 22% و 18% بیشترین زمان سفر و سفر درون شهری با 88% بیشترین نوع سفر، بین شرکت کنندگان بود. 24.4% در اکثر مواقع و 48.8% درصد معمولا به تنهایی سفر کرده و 24.3% نیز معمولا با همراه سفر می‌کنند. 68.3% با اولین راننده‌ی پیشنهادی اسنپ سفر می‌کنند. با این حال 12.2% ممکن است تصویر و مشخصات راننده در تغییر تصمیم‌شان تاثیر بگذارد. و از این بین 37% انقدر لغو و درخواست دوباره‌ی سفر را ادامه می‌دهند که بتوانند راننده‌ی مورد نظر خود را پیدا کنند. تصویر راننده با 53.7% و نوع خودرو با 41.5% جزو تاثیرگذارترین معیارها در جلب اعتماد شرکت کنندگان بودند.تمامی مکالمات با مصاحبه کنندگان را با اجازه‌ی خودشان ضبط کرده و مجددا به صورت کامل یادداشت کردم. سپس بعد از مرور زیاد نوشته‌ها داده‌های مفید را از آن استخراج کردم. مجموع تمامی این اطلاعات به همراه استفاده از بوم Empathy map و Market Segment منجر به درک بهتر من از کاربران و طراحی پرسونا شد.personaMarket Segmentبوم ارزش مشتری، قدمی برای درک بیشتر پرسونابعد از آشنایی با کاربران، نوبت به درک بیشتر دردها، مشکلات و نیازهای آنها در طول استفاده از اسنپ تاکسی، و همچنین پیدا کردن پاسخ و راه حلی مناسب برای این نیازها بود. بوم Lean، پروفایل مشتری و نقشه‌ی ارزش، به ترتیب رسیدن به این درک را راحت‌تر کردند.پروفایل مشتری، توصیفی از مشغله‌ها و کارها، نارضایتی‌ها و دردها و در نهایت منافع و دست‌آوردهاست. و در مقابل، نقشه‌ی ارزش شامل محصولات و خدمات ارزش، مُسکن‌ها و مرحم‌ها و خلق منافع است. همبستگی بین اطلاعات این دو نقشه، به خلق مزیت رقابتی ختم می‌شود.بوم ارزش مشتری یا بوم گزاره ارزشLean Canvasدر نهایت مزیت رقابتی‌ای که بعد از کشیدن بوم ارزش مشتری، برای پروژه‌ام نوشتم به شرح زیر بود:ما فقط از تضمین سفر امن و راحت در هر زمان و مکانی حرف نمی‌زنیم، بلکه آن را ایجاد می‌کنیم. اسنپ با انتخاب رانندگان مجرب و پشتیبانی سریع این امنیت و اعتماد را ایجاد می‌کند.قدم آخر برای درک کاربر هدفم، Costumer Journey Mapبرای اینکه بهتر و بیشتر نیازها و دردهایی که کاربران در حین استفاده از نرم افزار با آن مواجه می‌شدند را درک کنم، از نقشه‌ی مسیر کاربر استفاده کردم.برای کشیدن این نقشه، ابتدا باید یک هدف برای کاربر مشخص کنیم. در این پروژه، هدف، گرفتن سفری امن با اسنپ و به موقع به مقصد رسیدن بود. سپس باید روند رسیدن به این هدف را به یک سری Touchpoint تقسیم کرد. Touchpointها درواقع بخش‌های ریزتر و اصلی یک مسیر هستند. برای مثال؛ درخواست سفر، تایید راننده، پرداخت هزینه‌ی سفر و... .در قدم بعدی باید فعالیت‌ها، احساسات، حالات، انتظارات و اهداف کاربران را در هرکدام از Touchpointها بررسی کرد تا در نهایت به Costumer Journey Map کامل برسیم.Costumer Journey Mapاستوری پوینت‌ها، یک قدم قبل از شروع دیزاینبرای نوشتن استوری پوینت‌ها، ابتدا ایده‌ام را برای تعدادی برنامه نویس شرح دادم و در مورد نحوه‌ی پیاده سازی، نیازمندی‌ها و زمان مورد نیازشان سوال پرسیدم که منجر به نوشتن استوری پوینت‌ها به صورت زیر شد:story pointstory pointاستوری پوینت‌ها درواقع مانند توکن بازی، ارزش و اهمیت تسک‌ها را بر اساس معیاری که برای ارزش‌گذاری تعیین می‌کنیم، و همچنین velocity هر فرد، مشخص می‌کنند که به الویت بندی کارها و نحوه‌ی اجرای آن، کمک می‌کنند.* البته استوری پوینت‌های داده شده توسط بخش برنامه نویسی، کاملا قابل اتکا نیست، چون برنامه نویسی که به سوالاتم در مورد این بخش و تسک بندی مراحل در تیم برنامه نویسی پاسخ داد، اشاره کرد که از آنجایی که در مورد نحوه‌ی کار اسنپ کاملا اطلاع ندارد، نمی‌تواند دقیق و کامل تسک ها را مشخص کند. *قدم اول دیزاین، User Flow و Information ArchitectureUser FlowUser FlowInformation ArchitectureInformation Architectureقبل از کشیدن وایرفریم، دیزاین فلوی کاربر و معماری اطلاعات صفحات، به منسجم و یکپارچه شدن محتوا، مشخص شدن فلوی نرم‌افزار، مشخص شدن نیازمندی‌هایی که احتمالا در روند کار فراموش و یا جا انداخته شده، چینش درست صفحات و محتوای درون آن‌ها و... کمک می‌کند.آخرین قدم قبل از دیزاین نهایی، Wire Frameقبل از کشیدن وایرفریم، فلوی کلی صفحات اصلی اسنپ و دسترسی‌های موجودشان را کشیدم تا موقع اضافه کردن feature و صفحات جدید، مسیر و نحوه‌ی اضافه شدن آن‌ها مشخص باشد.page flowWireframeقدم‌های نهایی برای دیزاین رابط کاربریColor paletteرنگ‌ها یکی از بخش‌های مهم دیزاین محسوب می‌شوند و در انتقال سریع مفاهیم، احساسات و جلب توجه کاربر نسبت به محتوا یا المان خاصی، تاثیر به سزایی دارند. برای همین بعد از کشیدن وایرفریم پالت رنگ‌ اولیه را طراحی کردم.color paletteUI KITیوآی کیت UI KIT یا همان بسته طراحی کاربری در واقع فایلی است که تمام المنت های موردنیاز برای طراحی وب سایت‌ها یا اپلیکیشن‌های موبایل و نیز ویژگی‌های آن‌ها نظیر سایز، اندازه، فاصله گذاری‌ها و... را به صورت آماده در اختیار شما قرار می دهد. کیتی که من طراحی کردم شامل؛فونت‌ها:تایپوگرافی:تمامی تایپوگرافی‌ها در دو نوع سایز Px و dp ( برپایه‌ی 160 dpi) نوشته شده. و سایز آن‌ها در رزولیشن‌های مختلف برای برنامه نویس مشخص شده است.رنگ تایپوگرافی:و در نهایت UI Elements که شامل؛ Buttons، Input، Notifications، Paginations، Map و Icons می‌باشد را طراحی کردم. سپس با داشتن کیت و رنگ‌های اولیه، وایرفریم را به یوآی تبدیل کردم.آخرین قدم، دیزاین UI"خاطرات شهریور تا آذر 99"