رویکردی متفاوت به سوپراپلیکیشن؛ قدم به قدم با ریدیزاین صفحه اصلی ازکی
ازکی، همواره در تلاش بوده است با ارائه سرویسهای جدید دامنه فعالیت خود را افزایش دهد و خدمات بیشتر و مفیدتری در اختیار کاربران بگذارد. در راستای این سیاست و با شکلگیری ازکیوام و ازکیسرمایه، نیاز به ایجاد ساختاری جدید و گویا برای شرح خدمات ازکی احساس شد که بازطراحی صفحه اصلی ازکی به عنوان مهمترین جلوه این هدف، بخشی از برنامهی بلند مدت ازکی بود. بازطراحی صفحه اصلی، علاوه بر معرفی موثر و مفید خدمات، برای توسعه در آینده انعطاف و ظرفیت بالایی دارد و امکان ایجاد گستره متنوعی از خدمات را فراهم میکند. در این گزارش شرح مرحله به مرحله فرآیند بازطراحی صفحه اصلی ازکی را مشاهده خواهید کرد.
در ادامه خواهید خواند:
۱- شرح مسئله و چراییها
۲- اهداف
۳- چالشها
۴- فرآیند و روند بازطراحی
۵- مطالعات و پژوهشها
۶- نتایج
۱- شرح مسئله و چراییها
مهمترین مسئله در پروژه بازطراحی، ایجاد ساختاری مناسب برای نمایش تمام سرویسهای ازکی بود. از طرفی این بازطراحی با رویکرد تولید یک سوپر اپلیکیشن انجام شد و از طرف دیگر میتوان آن را نقطه شروعی پررنگ و قدرتمند برای بهبود جریان کاربری (User flow) در سرویسهای دیگر ازکی یعنی ازکیوام و ازکیسرمایه در نظر گرفت. علاوه بر این موارد ویژگی توسعهپذیری طراحی نیز از اهمیت بسیار بالایی برخودار بود تا امکان اضافه کردن سرویسهای جدید در آینده با کمترین هزینه و به راحتی وجود داشته باشد.
بنابراین صورت مسئله به این ترتیب شکل گرفت:
ایجاد ساختاری منعطف و توسعهپذیر برای ارائه و افزودن سرویسهای متنوع، با در نظر گرفتن نیازهای کاربری، محتوایی و مارکتینگی برای صفحه نخست ازکی به عنوان پلتفرمی در حال رشد و پرمخاطب
۲- اهداف
در راستای این بازطراحی ۴ هدف اصلی دنبال شد. هر یک از این اهداف متصل به سیاستهای کلان محصول در بلند مدت است. نکته اساسی و مهم طی این مسیر در نظر داشتن تمام جوانب و شرایط موجود بود زیرا این صفحه به عنوان اولین نقطه تماس کاربران اهمیت بسیار بالایی داشت و بر روی اهداف و عملکرد تمام تیمهای سازمان تاثیرگذار بود. اهداف شامل موارد زیر بودند:
۳- چالشها
مهمترین چالش در بازطراحی این صفحه، حفظ توامان تجربهی قبلی کاربران از ازکی به عنوان ابزار مقایسه، انتخاب و خرید آنلاین بیمه و ایجاد ظرفیت برای توسعه و اضافه شدن سرویسهای دیگر به این صفحه بود. حضور سرویسها با ویژگیهای متعدد و متفاوت و در نظر گرفتن کامپوننتها و اجزای تعاملپذیر در هر کدام، طراحی فضایی یکپارچه و منسجم را سختتر میکرد. از طرف دیگر پیادهسازی این فضا در محیط محدود وب و PWA در موبایل این مسیر را پیچیدهتر کرده بود.
به طور کلی چالشها را میتوان در موارد زیر خلاصه کرد:
۱- حفظ تجربه قبلی کاربران از ازکی به عنوان سرویس مقایسه، انتخاب و خرید آنلاین بیمه
۲- ایجاد راهکاری جامع و گسترشپذیر
۳- یکپارچهسازی و ایجاد انسجام در نمایش تمام سرویسها
۴- مدیریت زمان، منابع و ذینفعان با توجه به محدودیتها
۴- فرآیند و روند بازطراحی
ویژگیای که این پروژه را از سایر موارد متمایز میکرد، وجود سرویسهای دیگر یعنی ازکیوام و ازکیسرمایه در این بازطراحی بود؛ این ویژگی موجب شد فرآیند معمول تیم طراحی تجربه برای پاسخ به پچیدگیها این پروژه دستخوش تغییراتی شود. برای مثال این پروژه ذینفعان بیشتری نسبت به پروژههای دیگر داشت؛ پیگیری و جمعآوری نظرات تمام ذینفعان مسیری زمانبر و پرهزینه بود که فرآیندی بهینه را میطلبید.
فرآیندی که در این پروژه طی شد به شرح زیر است؛ لازم به ذکر است که جزئیات بیشتر و نکات مهم هر مرحله، در ادامه به طور مفصل شرح داده شدهاست.
۱-۴- طرح مساله
به طور کلی صورت مساله این پروژه در سیاستهای کلان ازکی برای توسعه و افزایش دامنه خدمات آنلاین به کاربران ریشه داشت و بر اساس نقشه راه و نکات تعیین شده از سمت کسبوکار و ملزوماتش شکل گرفته بود. بنابراین در طرح مسئله این پروژه دغدغههای کسبوکار و چگونگی پیادهسازی موارد پیشبینی شده در بهترین حالت ممکن با هدف بهبود، حفظ و ارتقا تجربه کاربران در اولویت بودند. نتیجه این بخش در ابتدای این مستند شرح داده شد.
۲-۴- ایده پردازی
در این مرحله با توجه به شرایط متفاوت ازکی و سرویسهای مختلفش از نظر زمینه فعالیت، ویژگیهای مخاطبین و... لازم بود راه حلی نوآورانه و خلاقانه ایجاد کنیم تا علاوه بر پاسخ دادن به نیازهای مطرح شده از سمت کسبوکار، تجربه کاربر حفظ شده و امکان توسعهپذیری نیز فراهم شود.
مهمترین چالش در این مرحله مدیریت ذینفعان بود. ذینفعان این پروژه نسبت به سایر پروژه بسیار بیشتر بودند. راهحلی که برای مدیریت این موضوع به کار گرفتیم استفاده از فرآیند Early Feedback بود. با این روش توانستیم با پیادهسازی و طراحی low-fi و جمعآوری نظرات با سرعت بالا و هزینه کم، نتیجه قابل قبولی دریافت کنیم.
برای طرح ایدهها در طی فرآیند بالا، بنچمارک و پژوهشهای متعددی انجام شد که در ادامه توضیح داده شدهاند. ساختار کلی به دست آمده به شرح زیر است:
۳-۴- طراحی
با انجام فرآیندها در مرحله قبل به ساختار کلی جدید دست پیدا کردیم. این ساختار با جمعآوری تمام نظرات، انتظارات و بررسی عملکرد تیمهای مختلف شکل گرفت. این تیمها شامل سرویسها (ازکیوام و ازکیسرمایه)، مدیران و سرپرستان محصول، مارکتینگ، SEO و... بودند. نتایج این قسمت به طور مفصل در ادامه آورده شده است.
۴-۴- تست
با توجه به محدودیت در منابع و زمان پروژه، تستها بر اساس اهداف مذکور پروژه تدوین شده اند. این تستها در سه دسته تقسیمبندی میشوند که در قسمتهای بعد به توضیح آنها میپردازیم.
۵- مطالعات و پژوهشها
برای دستیابی به نتیجهای مطمئن و اثربخش و همینطور کاهش ریسک، زمان قابل توجهی برای این مرحله صرف شد. البته در تمام مراحل و تصمیمات همواره سعی داشتیم با در نظر گرفتن اهداف این بازطراحی از اتلاف زمان و هزینه جلوگیری کنیم.
۱-۵- بنچمارکها
بنچمارک در ایجاد و سنجنش ایدهها در مراحل ابتدایی بسیار حائز اهمیت است. این پروژه نیز از این قاعده مستثنی نبود. در بنچمارکها سعی شد به چرایی و رویکردها پرداخته شود. برای مثال چرا شرکت A چنین راه حلی را برای سرویسش انتخاب کرده است یا چرا شرکت B با وجود شباهت بسیار در خدمات از همان راه حل استفاده نکرده است. این رویکرد باعث میشود مرحله بنچمارک اثر بخشتر باشد و سرنخهای بهتری در اختیار ما بگذارد.
در این پروژه سعی شد انتخاب نمونهها با تمرکز بر رویکرد و پیادهسازی راهحل ارائه شده توسط آنها تنوع داشته باشند، چرا که هدف این بازطراحی با مفاهیم مطرح شده در حوزه سوپراپلیکیشنها متفاوت بود. در واقع مقاصد و اهداف ازکی مشابه با این دست اپلیکیشنها بود اما دغدغههایی همچون حفظ تجربه قبلی کاربران موجب شد که راهحل انتخابی کمی متفاوت و منعطف باشد.
در بررسی هر گزینه بر روی موارد زیر تمرکز کردیم:
۱- نحوه چیدمان و اولویتدهی: موضوع اساسی در سوپراپلیکیشنها یعنی چگونگی چینش سرویسهای اصلی و فرعی با توجه به میزان اهمیت آن ها برای کاربران و از نظر کسبوکار
۲- فضای در نظر گرفته شده برای سرویسها: هر سرویس چه مقدار فضا در اختیار دارد، چه اجزای داخلی دارد و این موارد تعاملپذیر یا پویا هستند یا خیر.
۳- تمایز پیادهسازی در موبایل و دسکتاپ: چگونگی و تفاوت پیادهسازی راهحل انتخابشده در موبایل و دسکتاپ و رعایت محدودیتها و ویژگیها در هر فرم
۴- تطبیقپذیری و پویایی: تغییر ساختار سوپراپلیکیشن در طول زمان و چگونگی استفاده کاربران از آن
۲-۵- مطالعات
مستقل از انجام بنچمارکها و با توجه به مفهومی که به دنبال پیادهسازی آن برای صفحه نخست ازکی بودیم، مطالعاتی در میان مقالات مرتبط با سازمانها و مجموعههایی که در حوزه سرویسهای برخط فعال هستند و خدماتی با موضوعات و زمینههای متفاوت ارائه میدهند، انجام شد. مهمترین نکات حاصل به شرح زیر است:
۱- چیدمان پویا: در کنار هم گذاشتن آیکن سرویسها خصوصا در مجموعههایی که تعداد زیادی سرویس مجزا دارند، از نظر ترتیب و اولویت حساس و حائز اهمیت زیادی است و نیازد دارد تا از حالت ایستا و ثابت فاصله بگیرد. پویا ساختن این چینش به طور کلی میتواند در سه گروه دستهبندی شود:
- بر اساس موقعیت جغرافیایی: تفاوت سرویسها در چگونگی یا حتی فعالیت یا عدم فعالیت در نقاط مختلف جغرافیایی (شهرها یا کشورها)
- بر اساس رفتار کاربر: تغییر اولویتها و چیدمان بر اساس نیاز کاربران و رفتارهای گذشتهی او در سوپراپلیکیشن
- بر اساس سیاستهای کسبوکار: نحوه برنامه ریزی کسبوکارها در رونمایی و یا توسعه یک سرویس خاص در نحوه جانشانی سرویسها میتواند در مقاطع مختلف زمانی تغییر ایجاد کند. این سیاستها باید به نحوی باشد که تجربه قبلی کاربران تا حد امکان حفظ شده و حداقل بهبود یابد.
۲- فضاهای مخصوص تبلیغات: از مهمترین مشکلاتی که در سوپراپلیکیشنها میتوان به آن اشاره کرد، معرفی و یا تبلیغ سرویسها و ویژگیهای آنهاست. مدیریت جایگاهها و جلوگیری از شلوغی بیش از حد در فضای اپلیکیشن نکته مهمیست که نیازمند برنامهریزی و سازماندهی دقیق است.
۳- ناحیه کاربری و اطلاعات مرتبط: ایجاد جریانی روان و مراحلی هر چه سادهتر برای دسترسی به قسمتها و سرویسهای مختلف یک بار ورود کاربر و مدیریت موارد مرتبط بسیار مهم است. برای مثال ایجاد و پیادهسازی سرویس SSO یا موارد مشابه آن.
۳-۵- تستها
تستهای انجام شده در این پروژه به سه دسته کلی تقسیم میشوند:
۱- تستهای کاربرد پذیری:
برگزاری ۳ تست برای هر یک از بخشهای بیمه، وام و سرمایه و یک تست برای کل مجموعه بعد از پیاده سازی کامل هر سه تب انجام شد.
بیمه: از آنجایی که ساختار این بخش دچار تغییرات زیادی نشده بود و در بازطراحی قبلی تستهای متعددی را به خوبی پشت سر گذاشته بود، صرفا برای تغییرات کوچک ایجاد شده تست کاربردپذیری انجام دادیم. در این تست نحوه عملکرد ویژگی جستوجوی بیمهها مورد بررسی قرار گرفت که تمامی شرکتکنندگان به خوبی از آن استفاده کردند.
تست برگزار شده در مورد پیدا کردن بیمه توسط کاربران بود. در این تست که با ۶ نفر برگزار شد، از کاربران خواستیم تا ۲ بیمه خاص را پیدا کنند؛ بیمه اول در تایلها موجود بود و بیمه دوم در تایلهای اصلی وجود نداشت.
تمام کاربران توانستند بیمه مورد نظر را بیابند، ۴ نفر از قابلیت جستوجو و ۲ نفر از دکمه «همه بیمهها» استفاده کردند.
وام: به دلیل محدودیتهای قانونی و تغییراتی که این بخش در طی پروژه متحمل شد، در نهایت خروجی پیادهسازی شده با خروجی عبور کرده از تستها، تفاوت داشت. در نتیجه با توجه به شباهت خروجی پیادهسازی شده با دیزاین بخش بیمه، صرفا از نتایج تستهای قبلی استفاده کردیم. این تست متمرکز بر نحوه استفاده از شبکه آیکن (tiles) بود و از الگوهای مورد انتظار کاربران پیروی میکرد.
سرمایه: در فضای اختصاصی این سرویس کامپوننتی وجود دارد که در آن کاربر میتواند با مشخص کردن مبلغی که برای سرمایهگذاری انتخاب کرده است، مقدار سود خود را ببیند؛ در طی تست انجام شده اصلاحاتی در نحوه نمایش قیمتها و امکان مقایسه با سود بانکی صورت گرفت.
۶- نتایج
در این بخش نتایج به دست آمده را در وجوه مختلفی بررسی خواهیم کرد: موارد مرتبط با تجربه و رابط کاربری، تجربه نویسی و طراحیهای بصری به طور جداگانه مورد بحث قرار میگیرند.
۱-۶- ساختار تبها و سرویسها
بنابر آنچه در قسمتهای قبل توضیح داده شد، در نهایت ساختار Tab برای نمایش سرویسها در کنار هم انتخاب و پیادهسازی شد. با این روش علاوه حفظ تجربه کاربران ازکی به عنوان سرویس مقایسه، انتخاب و خرید بیمه، امکان توسعه سرویسها فراهم آمد؛ همچنین فضای اختصاصی کافی و مجزایی برای نمایش هر سرویس با هر شرایطی از نظر تعداد اجزا یا کامپوننتها به وجود آمد.
ساختار دقیق هر تب به این صورت است:
۲-۶- آیکنها
در طراحی آیکنها سه معیار اصلی تعیینکننده هستند. حفظ یکپارچگی، وضوح و صراحت محتوایی، قابلیت تمایز کافی. یکپارچگی بدین معناست که بین آیکنها از منظر سبک طراحی، زبان بصری و ترکیب رنگی همسویی وجود داشته باشد. وضوح و صراحت محتوایی پایهایترین اصل طراحی یک آیکن است، در اکثر مواقع هدف اصلی استفاده از آيکن، ایجاد یک راهنمای بصری برای بخشی از محتوا و در اینجا عنوان محصولات است. در صورتیکه یک آیکن نتواند محتوای موردنظر را به خوبی نمایش دهد و از سمت کاربر قابل تشخیص نباشد، از هدف اصلی خود باز مانده است.
معیار سوم یعنی قابلیت تمایز آیکنها، در بازشناسی آیکنها اهمیت پیدا میکند. زمانیکه آیکنها برای طیف متنوعی از خدمات و محصولات طراحی میشوند و به طور مستمر مورد استفادهی کاربران قرار میگیرند نیاز است نسبت به هم تفکیکپذیر باشند. ایجاد این تفکیکپذیری از دو طریق امکانپذیر است، تفاوت در رنگ و یا تفاوت در سیلوئت. انتخاب ما با توجه به هویت برند و نیازمندیهای محصول استفاده از سیلوئتها و فرمهای متفاوت بود.
از چالشهای عمومی طراحی آیکنها میتوان به تعامل میانتیمی در فرآیند طراحی برای خدمات متفاوت اشاره کرد، تلاش کردیم با گرفتن فیدبکهای سریع و کوتاهکردن لوپ طراحی این مسئله را برطرف کنیم. از دیگر چالشها، طراحی بصری برای مفاهیم متناسب با بیمه است. همواره تلاش ما در ایجاد زبان بصری محصول ازکی برخورد غیربدبینانه با مفاهیم بیمهای بودهاست، برای این منظور تا حد ممکن نمایش حفاظت به نسبت آسیب ارجحیت داشتهاست و افزودن چاشنی طنز برای نمایش مفاهیم راهکار دیگری بوده که انتخاب کردهایم.
۳-۶- تجربه نویسی
هدف اصلی تجربهنویس ایجاد تجربه بهتر برای کاربران یک پلتفرم دیجیتال به واسطه وجه نوشتاری محصول است. در این پروژه برای ایجاد تجربه یکپارچه باید نیاز هر سه سرویس ازکی مورد توجه قرار میگرفت. از آن جایی که سرویس بیمه اخیرا بازطراحی شده بود، وجه نوشتاری آن به عنوان معیار اصلی در نظر گرفته شد و ازکیوام و ازکیسرمایه بر اساس لحن آن نوشته شدند.
چون در این پروژه سه سرویس اصلی ازکی به صورت مجزا در یک صفحه جای گرفتهاند و هر کدام از آنها شامل چندین زیرمجموعه میشوند لازم بود تا کاربران سریع و با صرف انرژی و بار شناختی اندک، سرویسها را شناسایی کرده و به هدف خود دست یابند.
سه بخش مربوط به سرویسها شامل یک عنوان و یک زیر عنوان میشد. برای رسیدن به هدف مذکور عناوین را با رویکرد توضیح سرویسها در یک نگاه نوشتیم تا کاربران پس از ورود به وبسایت بر اساس نیاز خود به سرعت یکی از سرویسهای اصلی را انتخاب کنند و سپس زیر عنوانها را طوری انتخاب کردیم که کاربران به طور کلی با ویژگیها و اهداف هر سرویس آشنا شوند.
بیمه: از آنجایی که حفظ تجربه و شناخت کاربران از ازکی به عنوان پلتفرم مقایسه و خرید بیمه اهمیت زیادی داشت با هدف افزایش تمرکز کاربران، عنوان آن را بر خلاف دو سرویس دیگر، کوتاه و یک بخشی انتخاب کردیم. زیر عنوان این بخش قسمتی از تگ لاین ازکی و دو هدف اصلی این پلتفرم یعنی مقایسه و خرید در نظر گرفته شد. در ادامه پس نوشتن کامل شعار ازکی و متن کادر جستوجو، به تایلهای مخصوص خدمات این بخش پرداختیم که در طراحی قبلی، پس از معماری اطلاعات و بررسی SEO عناوین آن نوشته شد و زیر عنوان آن بر اساس نقاط تمرکز هر رشته بیمه تعیین شده بود.
خرید اعتباری: از چالشهای ما در نوشتن خرید اعتباری طراحی چندین ورژن برای رسیدن به بهترین محتوا بود. تیم ازکیوام علاوه بر شعار و توضیح اصلی سرویس خود، چهار دسته از محصولات قابل خرید با اعتبار را به عنوان نقطه تماس کاربری در نظر گرفت و آن را با فرم بصری و نوشتاری مشابه و آزموده شده مانند بخش بیمهی ازکی مورد تایید قرار داد. در ادامه جهت معرفی کاملتر ۳ ویژگی اصلی سرویس را با اشاره به مدت زمان بازپرداخت وامها، طیف گسترده کالاهای انتخابی و خرید از فروشگاههای معتبر توضیح دادیم.
سرمایهگذاری: این سرویس با توجه به حساسیت سرمایهگذاری برای افراد، شامل توضیحات، نکات کلیدی و اصطلاحات بسیاری میشد و چالش تجربهنویسی آن، تقسیم تمام این جزئیات نوشتاری در رابط کاربری بود. متنهای این سرویس باید احساس اعتماد را القا میکردند و آگاهی کامل برای شروع سرمایهگذاری امن را به کاربر میدادند. این هدف با اولویتبندی پارامترها و انتخاب کلمات مناسب انجام شد.
۴-۶- نسخه روز و شب
برای تجربهای جذابتر و بهیادماندنیتر، طراحی صفحه نخست در دو نسخه روز و شب پیادهسازی شد. به این صورت که نسخه شب با آغاز نیمهشب تا بامداد نمایش داده میشود. در نسخه شب تصویر پسزمینه، ساختار بنرها و رنگ متون تغییر میکند.
۵-۶- نتیجه نهایی
خروجی آنچه که خواندید در ادامه قابل مشاهده است. خروجی نهایی، انتظارات تمام تیمها را برآورده کرد که شامل فضای در نظر گرفته شده برای سرویسها، بنرها و موارد مرتبط با مارکتینگ میشد. طراحی بصری منسجم آیکنها در تبها و تایل محصولات موجب شد در نهایت ظاهری یکپارچه و هماهنگ با هویت برند در صفحه نخست جلوه کند.
جمع بندی
برای سنجش موفقیت یک Design میتوان معیارهای متعددی تعریف کرد، از مواردی که در اعداد خلاصه میشوند تا متریکهای متعدد در تخصصهای مختلف. در زمان انتشار این مقاله مدت زیادی از انتشار این بازطراحی نگذشته است اما در همین زمان کوتاه، سرویسهای اضافه شده یعنی ازکیوام و ازکیسرمایه engagement rate حدود ۹۵٪ را تجربه کردهاند. همچینین Average engagement time این صفحه حدودا ۲ برابر شده است. لازم به ذکر است که این مستند در طول زمان در قسمت نتایج و تاثیرات بروزرسانی خواهد شد.
تیم:
فرزین پزشکی - طراح محصول ارشد (Linkedin)
دنا مهرگان - طراح بصری (Linkedin)
مارال امدادیان - تجربهنویس (Linkedin)
قدردانی:
فرهاد فلاح - front-end developer
ایمان امیدی - Front-end chapter lead
ملیحه صحراگرد - Art director
زانیار قادرپناه - Graphic designer
آران فنونی - Graphic designer
یسنا باقرفر - Content specialist
محمد رخشانیزاده - eCRM expert
زهرا میرحسینی - Performance marketing manager
فاطمه داوودیآبادی - SEO expert
محمد صفاییان - Customer acquisition specialist
علیرضا کاظمزاده - MarCom Manager
فرید عطارزاده - Public relation manager
مطلبی دیگر از این انتشارات
کی میتونه بگه همه چی قطعیه؟
مطلبی دیگر از این انتشارات
تجربه من به عنوان Agile Delivery Manager در ازکی
مطلبی دیگر از این انتشارات
نامگذاری مبتنی بر دامنه کانستنتها در جاوااسکریپت