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

بازطراحی صفحه سفر، پرداخت و امتیاز به رانندهبهبود تجربه‌ی کاربر یکی از موارد مهم در بازطراحی هر محصول است. ما در بوت‌کمپ دیموندلب، نسخه پیشین اپلیکیشن تپسی رو بررسی کردیم که از نظر تجربه کاربر مشکلاتی داشت « هنوز هم داره :)) » که دسترس‌پذیر نبودن و رعایت نشدن افوردنس و... از جمله‌ی آن‌هاست و من در تلاش بودم که در حل چالش‌های تعریف شده از طرف شرکت تپسی به خوبی عمل کنمبنچمارکینگدر اولین مرحله از تحقیقات کاربر، کارم رو با بنچمارک سرویس‌های مشابه شروع کردمپرسونادر مرحله‌ی بعد برای درک بهتر نیازها و مشکلات کاربران، بر اساس گزارش‌های بدست آمده، پرسونای فرضی ساختمپروفایل پرسوناظاهر کلی رابط کاربر بازطراحی شدهدر اسنپ‌شات زیر، ظاهر کلی رابط کاربر و نحوه تعاملش رو مشاهده می‌کنیدرابط کاربر بازطراحی شدهنحوه اینتراکشن صفحه اطلاعات سفردر ادامه‌ی این گزارش به چند مورد از مهم‌ترین تغییراتی که در بازطراحی تپسی با هدف بهبود تجربه‌ی کاربر انجام دادم می‌پردازم۱. دسترس‌پذیری مکالمه با رانندهدر نسخه پیشین تپسی « یک‌بار دیگه عرض کنم که چالش‌های تعریف شده برای ما بر اساس نسخه پیشین تپسی بود :)) »، امکان مکالمه با راننده در صفحه دیگری قرار داشت که همین باعث دسترس‌پذیر نبودن این امکان می‌شود. برای حل این مشکل، کلید تماس با راننده رو در موقعیت قابل دید و قابل دسترس کاربر قرار دادمدسترس‌پذیر بودن دکمه تماس با راننده۲. افزایش افوردنس نحوه باز شدن کشویی صفحه اطلاعات سفربرای بهبود این مسئله، بعد از انجام بررسی‌های مختلف، تغییراتی رو در این بخش دادمحالت بسته صفحه اطلاعات سفرالف. بهبود قرارگیری فِلِش : این فلش نشان‌دهنده قابلیت باز شدن این صفحه است که رنگ نارنجی آن با قرار گرفتن در پس‌زمینه سفید باعث کنتراست بیشتری شده و بهتر وظیفه خودش رو نشان می‌دهدب. کلمه‌ی ویرایش سفر : با قرار دادن این تیتر در کنار قرار گیری فلش، کاربر بهتر متوجه می‌شود برای انجام تغییرات در گزینه‌های سفر « مثل افزودن مقصد جدید و زمان توقف » باید صفحه رو بالا بکشد۳. ساده‌تر شدن پروسه پرداختنشان دادن هزینه سفر در صفحه اول که شامل وضعیت شیوه پرداخت و مقدار هزینه است و رنگ نارنجی به‌کار برده شده کاربر رو ترغیب به کلیک می‌کند و وقتی روی این قسمت بزند یا این قسمت رو بالا بکشد، می‌تواند دکمه پرداخت اعتباری یا تغییر شیوه پرداخت به نقدی رو لمس کندنحوه اینتراکشن بخش هزینه سفرحالت‌های مختلف بخش هزینه‌ی سفر۴. بخش گزینه‌های سفربه‌منظور سهولت و سادگی، این گزینه‌ها رو در بخش ویرایش سفر قرار دادم، همچنین به این خاطر از رنگ اصلی نارنجی استفاده کردم که اهمیت بالاتر اون رو نسبت به سایر دکمه‌های این صفحه نشان دهمبخش گزینه‌های سفر۵. بخش سرگرمی / وبلاگبه جای ورق زدن آیتم‌ها در صفحه‌ی scrollable عمودی که تجربه‌ی ناخوشایندی رو به کاربر می‌دهد، از آیتم‌ها به‌صورت لیست عمودی استفاده کردم. این بخش که برای تبلیغات و پست‌های جدید است، می‌تواند برای سرگرمی هم استفاده شود که اولین آیتم آن برای گیم است. ایده‌های مختلفی هم برای بخش گیم تپسی داشتم ولی در این پست بهش نمی‌پردازم :)بخش سرگرمی / وبلاگ۶. بخش امتیاز به سفیرگزارش‌هایی که از این بخش به‌دست آمده حاکی از آن بود که گروهی از کاربران اطلاعات سفر رو فراموش می‌کنند و اطلاعات اشتباه وارد می‌کنند. به‌همین منظور از نظر رابط و تجربه کاربر تغییراتی در این بخش دادم که به دو بخش تقسیم می‌شوددر اسنپ‌شات سمت چپ امتیاز را وارد می‌کند و بعد در سمت راست می‌تواند دلیل خود را نیز ارسال کندالف. نشان دادن اطلاعات سفر : وقتی سفر پایان می‌یابد، در این صفحه اطلاعات سفر را به کاربر نشان می‌دهد تا به یادآوری تجربه‌ی آن سفر به کاربر کمک کنداطلاعات سفر در بخش نظرسنجیب. استفاده از ایموجی در نظرسنجی : برای تعامل بهتر با کاربر و جلوگیری از گیج شدن او، از پنج ایموجی با حالت‌های مختلف و توصیف هر کدام به‌صورت نوشته استفاده کردمنظرسنجیممنون که همراهم بودین، خوشحال می‌شم نظرتون رو بدونم، امیدوارم در آینده بتونم case studyهای جامع و کامل‌تری بذارم و اگر این پست براتون مفید بود سِیو کنید :)