بازطراحی تپسی در بوت‌کمپ دیموندلب

بازطراحی صفحه سفر، پرداخت و امتیاز به راننده

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


بنچمارکینگ

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

پرسونا

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

پروفایل پرسونا
پروفایل پرسونا


ظاهر کلی رابط کاربر بازطراحی شده

در اسنپ‌شات زیر، ظاهر کلی رابط کاربر و نحوه تعاملش رو مشاهده می‌کنید

رابط کاربر بازطراحی شده
رابط کاربر بازطراحی شده


نحوه اینتراکشن صفحه اطلاعات سفر
نحوه اینتراکشن صفحه اطلاعات سفر


در ادامه‌ی این گزارش به چند مورد از مهم‌ترین تغییراتی که در بازطراحی تپسی با هدف بهبود تجربه‌ی کاربر انجام دادم می‌پردازم

۱. دسترس‌پذیری مکالمه با راننده

در نسخه پیشین تپسی « یک‌بار دیگه عرض کنم که چالش‌های تعریف شده برای ما بر اساس نسخه پیشین تپسی بود :)) »، امکان مکالمه با راننده در صفحه دیگری قرار داشت که همین باعث دسترس‌پذیر نبودن این امکان می‌شود. برای حل این مشکل، کلید تماس با راننده رو در موقعیت قابل دید و قابل دسترس کاربر قرار دادم

دسترس‌پذیر بودن دکمه تماس با راننده
دسترس‌پذیر بودن دکمه تماس با راننده


۲. افزایش افوردنس نحوه باز شدن کشویی صفحه اطلاعات سفر

برای بهبود این مسئله، بعد از انجام بررسی‌های مختلف، تغییراتی رو در این بخش دادم

حالت بسته صفحه اطلاعات سفر
حالت بسته صفحه اطلاعات سفر


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


ب. کلمه‌ی ویرایش سفر : با قرار دادن این تیتر در کنار قرار گیری فلش، کاربر بهتر متوجه می‌شود برای انجام تغییرات در گزینه‌های سفر « مثل افزودن مقصد جدید و زمان توقف » باید صفحه رو بالا بکشد

۳. ساده‌تر شدن پروسه پرداخت

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

نحوه اینتراکشن بخش هزینه سفر
نحوه اینتراکشن بخش هزینه سفر


حالت‌های مختلف بخش هزینه‌ی سفر
حالت‌های مختلف بخش هزینه‌ی سفر


۴. بخش گزینه‌های سفر

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

بخش گزینه‌های سفر
بخش گزینه‌های سفر


۵. بخش سرگرمی / وبلاگ

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

بخش سرگرمی / وبلاگ
بخش سرگرمی / وبلاگ


۶. بخش امتیاز به سفیر

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

در اسنپ‌شات سمت چپ امتیاز را وارد می‌کند و بعد در سمت راست می‌تواند دلیل خود را نیز ارسال کند
در اسنپ‌شات سمت چپ امتیاز را وارد می‌کند و بعد در سمت راست می‌تواند دلیل خود را نیز ارسال کند


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

اطلاعات سفر در بخش نظرسنجی
اطلاعات سفر در بخش نظرسنجی


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

نظرسنجی
نظرسنجی


ممنون که همراهم بودین، خوشحال می‌شم نظرتون رو بدونم، امیدوارم در آینده بتونم case studyهای جامع و کامل‌تری بذارم و اگر این پست براتون مفید بود سِیو کنید :)