به عنوان مدیر محصولی که به دیزاین علاقه مند است و البته قبل از مدیر محصول شدن ۶ ماه در حوزه گرافیک دیزاین (نه طراحی محصول) و ۶ ماه تجربه طراحی محصول فعالیت داشتم، میخوام از آخرین تجربم در طراحی محصول بگم.
داستان از اینجا شروع شد که وقتی وارد فیدیبو شدم یک نفر طراح محصول بیشتر نبود، که تمام وقتش سمت طراحی اپلیکیشن گرفته میشد ولی من مدیر محصول پنل های بک آفیس و وبسایت بودم. و برای هیچکدوم از این محصولات هیچ دیزاینی وجود نداشت. بنابراین برای یک تغییر کوچیک در یکی از پنل ها یا باید به طراح محصول مراجعه میکردم که وقت نداشت یا باید خودم یه کاری میکردم.
من همیشه به طراحی تجربه کاربری UX علاقه داشتم. تو بیشتر محصولاتی که مسئولیتشون با من بود، نقش کلیدی در طراحی تجربه کاربری داشتم و هیچ وقت هیچ فیچری را بدون ماک آپ یا وایفریم سمت تیم طراحی محصول یا تیم توسعه نبردم، بنابراین تصمیم گرفتم که با تهیه یک ماک آپ ساده، کار را با تیم توسعه جلو ببرم و چون تعداد کاربران پنل های بک آفیس خیلی کم هستن، فرآیند ها و عملکرد درست اولویت داشت و انتظار دیزاین pixel prefect از تیم توسعه نداشتم.
بنابراین سه ماه اول با استفاده از Balsamiq که دستم توش تنده، ماک آپ هارو آماده میکردم و به تیم توسعه با PRD تحویل میدادم که شامل تمامی فلوهای فرآیندها، سناریوها و باقی اطلاعاتی که برای پیاده سازی نیاز داشتن بود.
به طور مثال یکی از صفحاتی که برای مدیریت اپلیکیشن در پنل بک آفیس داریم را به شکل زیر طراحی کردم:
و برای نشون دادن پیغام های مختلف در فلوی کاربر از روش زیر استفاده کردم:
و فلوی کاربر بین صفحات را به شکل زیر درآوردم:
خوب در کنار ماک آپ ها، استوری ها و جزییات بیشتر را در PRD مینوشتم و تحویل تیم توسعه میدادم و بچه ها هم به ظاهر (چیزی که به من میگفتن :) ) از این روش راضی بودند و باتوجه به اینکه تا قبل از من هیچ کدوم از این اطلاعات برای توسعه داده نمیشد این فرآیند جدید پیشرفت چشمگیری در فرایند کاری تیم محسوب میشد.
برای بقیه ویژگی ها هم همینطوری جلو رفتیم تا اینکه...
در ماکرو سرویس کمپین (Campaign Micro Service) که در حال باز نویسیش هستیم، تغییرات خیلی اساسی ایجاد کردیم و کلا کوبیدیمش و از اول با یک مدل ذهنی و تجربه کاربری دیگری طراحیش کردیم خیلی پیشرفته تر از گذشته شد و امکانات بسیار بیشتری از قبل به تیم مارکتینگ میده تا بتونه پلن هاشو راحتر و گسترده تر از قبل اجرا کنه.
ولی چالش اصلی این بود که ذهن تیم مارکتینگ با مدل پنل قبلی که ۲-۳ سال پیش توسعه داده شده و هر موقع یه چیزی نیاز داشتن فوری و حساب نشده بهش فیچر اضافه کرده بودن، بایاس شده بود. بنابراین گرفتن بعضی قابلیت ها (به ظاهر قابلیت ها) از تیم مارکتینگ و جایگزین کردن نمونه بهتر آن مقدار زیادی سخت بود. این سختی از طراحی منطق سرویس گرفته تا پنل ادمین. از طرفی ترجیهمون این بود که تا حد زیادی تجربه ی کاربران تغییر نکند و فقط دست و بال تیم مارکتینگ بازتر شود و سیستم چابک تر شود.
پس ابتدا من و سبحان عطار (همکار خوبم در تیم توسعه) سعی کردیم با جلسات مختلف با تیم مارکتینگ، ارزش و مزیت سرویس جدید را به آنها نشان دهم و مطمئن شوم تمام نیازمندی آنها در سرویس جدید دیده شده است. در مرحله دوم سبحان طراحی اولیه از منطق سرویس آماده کردم و باهم حسابی چکش کاریش کردیم.
بعد از توافق با سبحان سر ویژگی های سرویس، نوبت طراحی پنل بک آفیس این سرویس بود که قرار بود دست تیم مارکتینگ قرار بگیره تا باهاش کمپین های مختلف تعریف کنه. دیدیم سرویسمون شبیه کابین خلبان شده که واردش میشی هزاران دکمه و مانیتور وجود داره که البته همش لازمه وگرنه هواپیما سقوط میکنه ولی پیچیدگی زیادی در ظاهر اولیش وجود داشت. پس چالش این بود که چطور این کابین را مثل یک پراید برای تیم مارکتینگ راحتش کنیم.
در این نقطه میتونستم دوباره ماک آپ بزنم و تحویل تیم توسعه بدم ولی دیدم با یه ماک آپ ساده نمیشه این پیچیدگی رو کم کرد و لازمه رو همه سناریو و ابعادش فکر بشه تا تیم مارکتینگ به راحتی بتونه ازش استفاده کنه. از طرفی دیدم اگر بخوام کل پیچیدگی های سرویسو به طراح محصول توضیح بدم و منتظر بمونم اون طراحی بکنه خیلی زمان میبره (محدودیت زمانی داشتیم)، بنابراین تصمیم گرفتم این بار در Sketch طراحی رو انجام بدم.
آیا میدانم که پیچیدگی سرویس و محدودیت زمانی هم دلیل نمیشه که به عنوان مدیر محصول، طراحی محصول را انجام دهم؟ بله میدانم :) ولی علاقم به طراحی قلقکم داد که این کارو بکنم. از طرفی از سمت مدیریت اجباری بر استفاده از تیم طراحی محصول برای پنل ها نداشتم و با همون ماک آپ هم راضی بودند.
خوب بالاخره sketch را نصب کردم (اولین بارم بود با این برنامه کار میکردم ولی تجربه ی خوبی در کار با فوتوشاپ و ابزارهای دیگه دارم). اولش در مورد فونت مشکل داشتم که از آرین مقبلی کمک گرفتم بعدم برای آیکون اشکان عاشوری یه منبع خوب بهم معرفی کرد. در نهایت آماده بودم که طراحی رو شروع کنم.
قرار بود فرآیند اضافه کردن یک کمپین جدید به پنل بک آفیس فعلی طراحی بشه بنابراین مجبور بودم از قالب کلی و تا حد امکان از کامپوننت های موجود استفاده کنم (این کارو نکردم و کلا کامپوننت های جدیدی طراحی کردم) تا توسعش یکپارچه و سریع تر انجام بشه.
بنابراین ابتدا قالب کلی پنل فعلی را در اسکچ طراحی کردم. سپس تصمیم گرفتم با توجه به اینکه فیلدهای زیادی وجود داشت، فرآیند ثبت کمپین را به صورت ویزارد (Wizard) طراحی کنم. همچنین بخش پیش نمایشی از همه فیلدهای کمپین در سمت چپ ویزارد قرار داشته باشد تا در همه مراحل کاربر بتواند خلاصه کمپینی که تعریف کرده است ببیند این کار خطای کاربر را کاهش میدهد.
متاسفانه به علت تعهدی که به سازمان دارم نمیتونم همه ی طراحی رو نشر بدم. عذر بنده را بپذیرید
تعدادی از کامپوننت هایی که در طراحیم استفاده کردم:
در طراحیم نکات زیر را رعایت کردم:
- ساختار دیتاها در هر مرحله از ویزارد را برروی کاغذ پیش نویس کردم و یک مدل کلی از ویزارد رو کاغذ کشیدم (البته موقع طراحی بارها تغییر کرد)
- فواصل را بسته به اینکه کجا هست به صورت زیر در نظر گرفتم:
- اکشن های اصلی و داده های مهم را آبی و داده های فرعی را به ترتیب اولویت مشکی و خاکستری در نظر گرفتم.
- کامپوننت های تکراری را سیمبل (Symbol) تعریف کردم تا به صورت یکپارچه بتونم اصلاحشون کنم یا به دفعات ازشون استفاده کنم.
- بعد از اتمام طراحی صفحات، برای دموی دیزاین ارتباط اجزا به صفحات مختلف را تعریف کردم تا سناریو درست شود (در Sketch به این ویژگی Hotspot میگند).
در نهایت بعد از ۱۸ ساعت کار در طول دو روز، حاصل کار شد ۲۸ تا صفحه (Artboard)
نتیجه کار از نظر خودم دلچسب و بهتر از چیزی بود که انتظار داشتم شاید این احساس رضایت از ارضا شدن حس کنجکاویمه تا اصولی بودن طراحی.
خیلی دلم میخواست تمام طراحی ها را میتونستم اینجا به اشتراک بذارم تا نظر نقادانه طراحان عزیز رو نسبت به این جوجه دیزاینر :) (به قول بابک جعفری) بشنوم.
اینکه چی شد این پست را نوشتم فقط انرژی مثبتی بود که سبحان بهم داد. خودتون میتونید در چت زیر دلیلشو بفهمید:
درباره همکاریم با سبحان: سبحان تازه به عنوان backend developer به تیممون اضافه شده و اولین همکاری من با سبحان سر همین سرویس کمپین آغاز شد بنابراین مدت زیادی نیست که همو میشناسیم.
اگر مدیر محصول هستید سعی نکنید طراحی UI محصول را خودتون انجام بدید چون به وظایف دیگتون که بابتش دارین حقوق میگیرید نمیرسید و تخصص شما هم نیست. ولی اگر علاقه مند هستید تجربه ی خوبیه که یک بار خودتون دست به آچار بشید حتی اگر در نهایت طراحی شما تایید نشد و پیاده سازی نشد. کمک میکنه که از نزدیک دیدگاه و دغدغه های تیم طراحی محصول را بفهمید.
از خود چالش سازی نترسید. من به شخصه هرچیزی که یاد گرفتم، زمانی بود که سعی میکردم کاری بکنم که تا اون لحظه تخصصش را نداشتم.
من، علی معدنی را، میتوانید از طریق شبکه های اجتماعی زیر پیدا کنید:
