https://virgool.ir/feed/@h8manمدیر طراحی مجموعه‌ی اسنپfa2026-11-12 08:54:11https://files.virgool.ir/upload/users/742979/avatar/2KN62Z.jpeghttps://virgool.ir/@h8manhttps://virgool.ir/@h8man/بازطراحی-اپلیکیشن-figma-mirror-بررسی-موردی-طراحی-محصول-igwlp4qmszvdبا یک جستجوی سریع می‌شه مقاله‌ها و کتاب‌های زیادی درباره‌ی طراحی تجربه‌ی کاربر توی اینترنت پیدا کرد اما به عنوان یک طراح، تا حالا چند بار به تجربه‌ی خودمون حین طراحی فکر کردیم؟مقدمهسال ۲۰۱۵، Figma به عنوان یک ابزار طراحی تحت وب خودش رو به جامعه‌ی طراحی معرفی کرد: ابزاری که با کمک اون می‌شه به صورت مشترک و تیمی طراحی کرد، بدون نیاز به فضای ذخیره‌سازی Local طرح‌ها رو آرشیو کرد و تنها از طریق مرورگر به پروژه‌ها دسترسی داشت و همینطور کمک کرد تا طراح‌ها بتونن به ساده‌ترین شکل ممکن نمونه‌های اولی‌ از ایده‌هاشون بسازن و با بقیه به اشتراک بذارن.برای طراحی کافی بود فقط به یک مرورگر وب دسترسی داشته باشیم و مهم نبود از چه سیستم‌عاملی استفاده می‌کنیم. و Figma اومده بود تا با کمک بستر وب، پارادایم طراحی محصول را تغییر بده .ولی با وجود تمام قابلیت‌های انقلابی و مهم Figma تحت وب (یا Windows و Mac) یک محدودیت بزرگ یعنی کاستی‌های اپلیکیشن موبایل Figma باعث ‌شد که این پلتفرم طراحی توی پروسه‌ی طراحی برای موبایل دیوایس‌ها، نیازهای پایه‌ای طراح رو برطرف نکنه و از اون مهم‌تر، «طراحی تیمی» که یکی از مهم‌ترین مزیت‌های رقابتی Figma بود توی اپلیکیشن موبایل Figma جایی نداشته باشه.با اینکه اپلیکیشن موبایل Figma باعث می‌شه تا شما از طریق اینترنت و بدون نیاز به اتصال کابل بین موبایل و کامپویتر محتوای پروژه‌هاتون رو در لحظه و داخل موبایل ببینید، اما از طرف دیگه، محدودیت‌‌هایی که توی این اپلیکشن هست، باعث می‌شه شما نتونید از اکثر قابلیت‌های نسخه‌ی اصلی Figma توی گوشی‌تون استفاده کنید.ماجرا از کجا شروع شد؟هر سه ما دوران کاریمون رو با نرم‌افزار Sketch شروع کردیم. تعداد زیادی پروژه رو با این نرم‌افزار انجام دادیم و با دیزاین‌سیستم‌های زیادی دست و پنجه نرم کردیم. سال ۲۰۱۹ وقتی فرشید و زینت تصمیم گرفتن که از کار به صورت تمام‌وقت رو به پروژه‌های دورکاری بیارن فهمیدن که با نیازهای جدیدی توی پروسه‌ی طراحی‌شون مواجه شدن. ارتباط دائمی با کارفرما و گرفتن بازخورد، نیاز به جابجایی‌های پی‌درپی و سرعت، سه عاملی بود که باعث شد فرشید و زینت از Sketch به Figma سویچ کنن. این تغییر نرم‌افزار با همه‌ی چالش‌هاش و اینکه همیشه تغییر زیرساخت طراحی کار استرس‌آوریه باعث شد که پروسه‌ی طراحی‌شون هم بهبود‌ زیادی پیدا کنه. می‌تونستن به جای جلسات طولانی با کارفرما از طریق سیستم «نظردهی» Figma ارتباط سریع‌تر و بهتری داشته باشن: قادر بودن تا در سریع‌ترین زمان و بدون پیچیدگی و چالش به ازای هر پروژه دیزاین‌سیستم طراحی کنن و از همه مهم‌تر، از هر جایی و با هر کامپیوتری به همه‌ی طرح‌هاشون دسترسی داشته باشن.هومن هم از ۲۰۱۹ شروع به لایو استریم‌ توی Twitch کرده بود و دوست داشت که توی استریم‌ها با مخاطباش به صورت تعاملی طراحی کنه. از اون مهم‌تر با به اشتراک‌گذاشتن پروژه‌ها حین استریم با بیننده‌ها، باعث شد که اون‌ها محدود به ویدیوی استریم شده نباشن و با آزادی عمل بیشتری روند طراحی رو ببین و حتی بعد از تموم شدن استریم، نتیجه رو بهتر کنن.حین یکی از همین استریم‌ها بود که هومن این ایده رو مطرح کرد که می‌خواد اپلیکیشن موبایل Figma رو باز طراحی کنه. فکر می‌کرد با وجود مزیت‌های خیلی زیاد نسخه‌ی دسکتاپ Figma، نسخه‌ی موبایل این سرویس کمبود‌های خیلی اساسی داره و مزیت‌های رقابتی اون، مثل طراحی تعاملی و ارتباط تیمی توی این اپلیکیشن به چشم نمی‌خوره. برای همین از بیننده‌های استریمش خواست تا اگه کاربر Figma هستن،  مشکلات یا نیازهایی که تا به حال حین استفاده از اپلیکیشن موبایل Figma برخوردن رو باهاش به اشتراک بگذارن و براش بفرستن. حین همین استریم بود که فرشید و زینت پیشنهاد دادن تا به صورت یک تیم روی این پروژه کار کنن و داستان شروع شد.چرا دوست داشتیم Figma Mirror‌ رو بهتر کنیم؟فیگما جاییه که ما بیشتر روزمون رو توش می‌گذرونیم. شاید حتی بیشتر از دیدن دوستان و اطرافیانمون، روزانه با Figma سر و کار داریم. توی همین استفاده‌ی روزانه بود که فهمیدیم با همه‌ی قابلیت‌های خوب این نرم‌افزار، خیلی از نیازهامون تامین نمی‌شه. نه می‌تونیم با مشتری‌ها و بقیه‌ی اعضای تیم توی محیط اپلیکیشن در ارتباط باشیم، نه می‌تونیم پروژه‌هامون رو به راحتی مرور کنیم و نه حتی طرح‌هامون رو با دیگران به اشتراک بذاریم.این پروژه رو انجام دادیم تا یادمون نره که تجربه‌ی طراحی هم برامون به اندازه‌ی تجربه‌ی کاربر اهمیت داره و هرچقدر پروسه‌ی طراحی‌مون لذت‌بخش‌تر باشه، می تونیم طرح‌های کاربرپسندتری تولید کنیم.اگه بخوایم Figma Mirror رو به یه حمام تشبیه کنیم، حمامی تو ذهنمون میاد که آبش گاهی گرم و سرد می‌شه. خودمونم باور داشتیم که با شرایط فعلی ، این اپلیکیشن قابل استفاده‌س. اما نه به اون صورتی که استفاده ازش لذت‌بخش باشه! ما نمی‌خواستیم با ایده‌های عجیب و غریب، مثل جایگزین کردن شیر آب با دکمه، تعریف کلی استفاده از این محصول رو عوض کنیم. ما فقط می‌خواستیم اول مشکل گرم و سرد شدن آب رو حل کنیم.داشتن یه فرضیه‌ی غلط بهتر از فرضیه نداشتنه!با داشتن یه فرضیه‌، هرچند غلط، حداقل می تونی بفهمی که داشتی اشتباه می‌کردی. فهمیدن اشتباه‌هامون و امتحان کردن راه‌حل‌های مختلف توی این مسیر بود که باعث شد، بتونیم با بازده بیشتری به مشکلات و راه‌حل‌های احتمالی‌شون برسیم.پس  ابتدای کار با پرسیدن نظر دوستامون، همکارها و حتی نگاه کردن به پروسه‌ی طراحی فعلی خودمون سعی کردیم لیستی از فرضیه‌هامون رو توسعه بدیم:لازمه این اپلیکیشن از نسخه‌ی دسکتاپ یا وب‌ش مستقل باشه.دسترسی ابری به همه‌ی پروژه‌ها باید وجود داشته باشه.جزئیات پروژه‌ها مثل دیزاین سیستم‌شون باید قابل دیدن باشه.تعامل و ویژگی‌های ارتباطی، مثل قابلیت ثبت کامنت باید توی این اپلیکیشن وجود داشته باشه.باید بشه پروژه‌ها رو بی‌نیاز از کامپیوتر مدیریت کرد یا به اشتراک گذاشت.بعد از ساختن این لیست بود که متوجه شدیم مشکلات اپلیکیشن فعلی، شاید چیزهایی مثل «مستقل نبودن اپلیکیشن فعلی»، «محدودیت و فقدان تعامل گروهی» و «نبود قابلیت‌های مدیریت کردن پروژه‌ها» باشن.حالا وقت این بود که برای یه سوال خیلی مهم، جواب پیدا می‌کردیم:چه کسایی درگیر این مشکلات هستن؟ما می‌دونستیم طراح‌ها، پرتعدادترین کاربرهای اپلیکیشن Figma هستن ولی، قطعن افرادی با تخصص‌های دیگه هم از این سرویس استفاده می‌کنن. پس تمرکز صرف روی «طراح‌ها»، جنبه‌های مختلف مساله رو برای ما تشریح نمی‌کرد.پس با در نظر گرفتن تجربه‌ی کاری خودمون و نگاه کلی به پروژه‌های معمول توسعه‌ی محصول، فهمیدیم که با سه دسته‌ی کلی از گروه‌های کاربری یعنی «طراح‌ها»، «توسعه‌دهنده‌ها» و «کارفرما‌ها »به ازای هر پروژه مواجه هستیم.حالا وقت این بود که بفهمیم، رفتار این سه گروه چطور هست و چه چیزهایی رو ترجیح می‌دن. برای همین، مجموعه‌ای از نظرسنجی‌ها رو طراحی کردیم و با هر گروه به اشتراک گذاشتیم. بعد از تحلیل نتایج داده‌های جمع‌آوری شده بود که فهمیدیم:منظور از طراح‌ها:طراح‌هایی هستن که به صورت تمام‌وقت یا پاره‌وقت در یک شرکت کار می‌کن. این طراح‌ها ممکنه  به صورت فردی یا تیمی کار کنن.فری‌لنسرهایی که روی یک یا چند پروژه به صورت هم‌زمان کار می‌کنن.طراح‌هایی که علاوه بر طراحی، توسعه‌ی محصول رو هم خودشون انجام می‌دن.منظور از توسعه‌دهنده‌ها:توسعه دهنده‌ها یا تیم‌های توسعه‌دهنده‌ای که توی شرکت‌ها مشغول به کار هستن.توسعه دهنده‌ها یا تیم‌های توسعه‌دهنده‌ای که به صورت فری‌لنس کار می‌کنن.منظور از کارفرما‌ها:مدیرهای طراحی و محصولی که توی شرکت‌ها مشغول به کار هستن.صاحب‌های کسب‌و‌کارها یا افرادی که پروژه‌هاشون رو برون‌سپاری می‌کنن.مشاورهای طراحی یا محصولی که به شرکت‌ها تو زمینه‌ی توسعه‌ی محصول کمک می‌کنن.بعد از تعریف دقیق‌تر گروه‌های کاربری که باهاشون سر و کار داشتیم، حالا نوبت این رسیده بود که کمی به عقب برگردیم و نیازهای هر کدوم از این گروه‌ها رو دوباره با مسائل و فرضیه‌هامون بررسی کنیم.ما فهمیدیم که طراح‌هایی که توی شرکت‌ها کار می‌کنن، علاوه بر اینکه به صورت موازی روی پروژه‌های مختلف مشغول به کارن، در عین حال با افراد زیادی مثل سایر طراح‌های تیم‌شون یا مدیر طراحی و یا مدیر محصول در ارتباط هستن. این رفتار تقریبن بین طراح‌های فری‌لنسر هم دیده می‌شد. طراح‌های فری‌لنسری که لازم بود در طول پروژه‌های موازی‌شون، نه فقط با مشتری‌ها، بلکه با تیم فنی (فری‌لنس یا درون‌سازمانی) هم در ارتباط باشن.همینطور فهمیدیم که نه تنها طراح‌ها، بلکه تمام گروه‌های کاربری مورد بحث‌مون به خاطر شرایط پاندمی ساعت‌های کاری شناورتری پیدا کردن. در نتیجه‌، زمان و مدیوم تعاملات‌شون هم به صورت منعطف‌تری انتخاب می‌شه. این مساله فرضیه‌ی جدیدی رو توی ذهن‌مون شکل داد که به خاطر همین انعطاف، تعامل گروه‌های کاربری هم از حالت سنتی و مبتنی بر کامپیوتر، بیشتر به سمت ابزارهای پرتابل مثل موبایل‌ها و تبلت‌ها متمایل شده.یکی از رفتارهای جالبی هم که بین گروه‌های کاربری‌مون به چشم می‌خورد، این بود که رد و بدل کردن عکس و اسکرین‌شات یکی از روش‌های متداول برای گرفتن فیدبک و توسعه‌ی طراحی به شمار میاد. این رفتار از طرف کارفرماها پررنگ‌تر بود.حالا وقت این رسیده بود که فرضیه‌هامون رو بر مبنای یافته‌هامون از گروه‌های کاربری فیلتر کنیم و برای مشکلاتی که شناسایی و تایید شده بودن، دنبال راه حل بگردیم.وقت این بود که حال بقیه رو بهتر کنیم!شرکت Figma همیشه روی سرعت، تعامل و دسترسی تاکید می‌کنه اما آیا اپلیکیشن Figma Mirror تمام این خصوصیات رو توی خودش داره؟بررسی‌های ما نشون داد که جواب این سوال «نه» هست. پس وقت این بود که راه‌حل‌هایی رو پیدا کنیم که کاربرها بتونن با سرعت بیشتر و البته بهینه‌تر تعامل کنن و به معنای واقعی، از همه جا به پروژه‌هاشون دسترسی داشته باشن.بعد از چند ورکشاپ ایده‌پردازی و بررسی نمونه‌های موجود و خصوصن بررسی قابلیت‌های اپلیکیشن نسخه‌ی دسکتاپ Figma، سعی کردیم تا فرصت‌های طراحی‌ای که هم‌راستا با نیاز کاربرها باشن رو استخراج و برای خودمون لیست کنیم:کاربرهای سرویس Figma باید بتونن بی‌نیاز از کامپیوتر شخصی‌شون به همه‌ی پروژه‌هاشون دسترسی داشته باشن.اون‌ها باید بتونن در هر لحظه که خواستن به صورت منعطف با ذی‌نفع‌های پروژه‌هاشون در ارتباط باشن.باید قادر باشن تا پروسه‌ی پیشرفت پروژه‌ها رو مدیریت کرده و به سادگی به اشتراک بذارن.حالا لازم بود که بر مبنای این فرصت‌های طراحی، شروع به توسعه‌ی بک‌لاگ طراحی‌مون کنیم و فیچرها رو تک به تک توسعه بدیم اما…چالش‌هامون جدی‌تر شده بودن! عدم دسترسی به داده‌های کمی و کیفی از یک طرف و عدم شناخت دقیق بازار رقابت ابزارهای طراحی از طرف دیگه، کار ما رو برای توسعه‌ی بک‌لاگ و طراحی فیچرها پیچیده کرده بود.اینجا بود که برای رسیدن به نتیجه، سعی کردیم تا کمی بیشتر به فرضیه‌هامون اعتماد کنیم و به حرف قلب‌مون بیشتر گوش بدیم. پس فیچرهای اصلی که با فرصت‌های طراحی شناسایی شده‌مون هم‌راستا بودن رو ایده‌پردازی و لیست کردیم:ثبت‌نام و ورودمدیریت و بررسی پروژه‌هاارسال و بررسی کامنت‌هاتاریخچه‌ی تغییرات به ازای هر پروژهبه‌اشتراک‌گذاری پروژه‌ها و صفحاتمدیریت و بررسی صفحات و اجزای پروژه‌هاحالا باید می‌دیدیم که رقبای سرویس Figma مثل Sketch و Adobe XD کدوم یکی از این قابلیت‌ها رو توی اپلیکیشن‌های خودشون دارن و منطق پشت هر کدوم از این قابلیت‌ها توی اون سرویس‌ها به چه صورته.تحلیل رقبا: Figma Mirror در مقایسه با Adobe XD و Sketch Mirrorبعد از تحلیل اپلیکیشن‌های رقیب بود که به ویژگی‌های جالبی برخوردیم که خوب بود توی ادامه‌ی پروسه‌ی طراحی‌مون بهشون توجه داشته باشیم.به عنوان مثال فهمیدیم که توی Adobe XD می‌تونیم به صورت لحظه‌ای تغییرات رو توی این اپلیکیشن ببینیم. یا اینکه می‌شه با جستجو به تمام پروژه‌ها و صفحات دسترسی داشت. حتی امکان این وجود داره که پروژه‌ها رو به صورت آفلاین رو موبایل ذخیره کرد و بعدن بهشون دسترسی داشت.از طرف دیگه فهمیدیم که توی اپلیکیشن موبایل Sketch، لازم هست که برای دسترسی به پروژه‌ها حتمن از طریق Wi-Fi‌ یا USB به کامپیوتر مبدا متصل بود و پروژه‌ها به صورت ابری در دسترس نیستن. از طرف دیگه به ویژگی جالبی توی Sketch‌ برخوردیم که اجازه‌ی بررسی صفحات و نویگیت کردن بین اون‌ها و Symbolها رو می‌داد.با در نظر گرفتن نتایج بنچ‌مارک‌ها، بررسی دوباره‌ی راه‌حل‌ها و مقایسه‌ با قابلیت‌های سایر اپلیکیشن‌ها بود که حالا دید خوبی نسبت به فیچر‌های مورد نظرمون توی اپلیکیشن Figma Mirror داشتیم.حالا وقت این بود که جزئیات هر کدوم از فیچر‌ها رو طراحی کنیم و تحت Epicها و Storyها برای خودمون بنویسیم.جوری که Figma Mirror جدید قراره کار کنه!در حین پروسه‌ی طراحی قابلیت‌های جدید اپلیکیشن، سعی کردیم تا کمی ایده‌آل‌گرایانه به موضوع نگاه کنیم و علاوه بر فیچرهای پایه‌ای این محصول، از نتایج بنچ‌مارک‌ها و همینطور فرضیات‌مون هم بیشتر استفاده کنیم. در واقع نگاهی که ما به این اپلیکیشن جدید داشتیم، یک نگاه جامع بود که این قابلیت رو فراهم می‌کرد تا پروسه‌ی توسعه به صورت فازبندی شده و بر مبنای نتایج دقیق‌تر، پیش بره.پس به صورت خیلی کلی، دوباره مزیت‌های رقابتی Figma رو تو ذهنمون آوردیم و با دیدی کاربر محورانه به اپلیکیشن جدید فکر کردیم:«به عنوان یک کاربر Figma، می‌خوام که بتونم مستقل از پلتفرم دسکتاپ یا وب از یک اپلیکیشن همیشه در دسترس استفاده کنم تا بدون محدودیت تعامل کنم و با سرعت و بهره‌وری بیشتری پروژه‌هام رو جلو ببرم.»این جمله رو به عنوان Initiative خودمون در نظر گرفتیم و با تکیه به داده‌هامون از مراحل قبل، لیستی از Epicهای این اپلیکیشن ساختیم:پروسه‌ی احراز هویت: به عنوان یک کاربر Figma، می‌خوام که وارد این اپلیکیشن بشم یا ثبت‌نام کنم تا بتونم پروژه‌های خودم رو مدیریت کرده و یا به پروژه‌های جدید اضافه بشم و با بقیه تعامل کنم.پروسه‌ی مدیریت پروژه: به عنوان یک کاربر Figma، می‌خوام که همه‌ی پروژه‌های خودم رو به صورت مرتب شده ببینم تا بتونم از وضعیت‌شون مطلع بشم و بهتر اون‌ها رو مدیریت کنم.پروسه‌ی ثبت و نمایش نظرات: به عنوان یک کاربر Figma، می‌خوام که به تمام تعاملات حول یک پروژه دسترسی داشته باشم و یا موضوع جدیدی رو مطرح کنم تا بتونم در سریع‌ترین زمان و بر مبنای نظرات، در مورد هر پروژه تصمیم‌گیری کنم.پروسه‌ی مانیتورینگ پروژه: به عنوان یک کاربر Figma، می‌خوام که به تاریخچه‌ی اتفاقاتی که حول یک پروژه می‌افته دسترسی داشته باشم تا بتونم درک بهتری نسبت به روند پروژه‌های فعلی پیدا کنم.پروسه‌ی مدیریت جزئیات پروژه: به عنوان یک کاربر Figma، می‌خوام که علاوه بر کلیات پروژه، به جزئیات اون، مثل فریم‌ها و کامپوننت‌ها دسترسی داشته باشم تا بتونم از روند پیشرفت پروژه در تمام سطوح باخبر باشم.پروسه‌ی به اشتراک‌گذاری و مدیریت دسترسی‌ها: به عنوان یک کاربر Figma، می‌خوام که کل یک پروژه یا بخشی از اون رو با بقیه‌ی تیم یا خارج از تیم به اشتراک بذارم و یا دسترسی‌های فعلی رو مدیریت کنم تا بتونم تعاملم رو با اون‌ها هدف‌مند‌تر و ساده‌تر کنم و یا افراد حاضر در پروژه رو در لحظه مدیریت کنم.پروسه‌ی میرورینگ: به عنوان یک کاربر Figma، می‌خوام که به صورت آنی تغییرات پروژه‌م رو علاوه بر نسخه‌ی دسکتاپ یا وب Figma، روی موبایل خودم هم ببینم تا بتونم مطمئن بشم که طرح‌هام، مطابق با ابعاد و استانداردهای پلتفرم‌های موبایل هم خوان هستن.لیست Epicهای نسخه‌ی بازطراحی Figma Mirrorیوزر فلو و معماری اطلاعاتزمان این رسیده بود تا بر مبنای این ‌ٍEpicها، ساختار کلی اپلیکیشن جدید Figma رو تعریف کنیم. می‌خواستیم قبل از طراحی وایرفریم‌ها ببینیم که جای هر فیچر کجاست و ارتباط اون با بقیه‌ی بخش‌های اپلیکیشن به چه صورته.ما روش خودمون رو برای طراحی User Flow و Information Architecture داریم. دوس داریم تا حین طراحی Flowها، بدونیم که با چه اطلاعاتی سر و کار داریم و علاوه بر ارتباط کلی بخش‌ها با هم، جزئیات هر بخش چطور با هم در ارتباطن. روی همین حساب، User Flowهایی که می‌کشیم تا حدی معماری اطلاعات صفحات رو هم در بر می‌گیره. این به ما کمک می‌کنه تا اگه نیاز هست، توی همین مرحله به روش‌های مختلف تعامل فکر کنیم و Micro و Macro Interactionها رو بهتر در نظر بگیریم.User Flow و Information Architectureوایرفریم‌هاحالا که عملکرد کلی Epicهامون رو می‌دونستیم و ارتباط بخش‌ها با هم رو شناسایی کرده بودیم؛ باید می‌فهمیدیم که هر کدوم از این عملکرد‌ها با چه layout و چه ساختاری با کاربر قرار هست تعامل کنن.وایرفریم‌های پروژهاز طرف دیگه، برای خیلی از سوالاتمون توی مراحل قبل به جواب مناسبی رسیده بودیم و لازم نبود، برای تمام قسمت‌های پروژه وایرفریم طراحی کنیم. پس روی بخش‌هایی تمرکز کردیم که نسبت به چیدمان و ارتباط اجزائشون با هم شک بیشتری داشتیم.با پروسه‌ی احراز هویت شروع کردیم. در ابتدا فکر می‌کردیم که مبنای اصلی‌مون توی تصمیم‌گیری باید تعداد قدم‌هایی که کاربر قرار هست برداره باشه اما بعدتر، با طراحی این صفحه به این نتیجه رسیدیم که از طرف دیگه نیاز هست تا علاوه بر «تعداد قدم‌ها» به «یک‌پارچگی داده‌ها» در هر صفحه هم اهمیت بدیم.گزینه‌های طراحی برای پروسه‌ی احراز هویتبا برگشتن به بخش «گروه‌های کاربری» استفاده کننده از این محصول، پیش‌فرض ما این بود که تعداد افرادی که تحت قالب طراح از این محصول استفاده خواهند کرد بسیار بیشتر از گروه‌های دیگه خواهد بود و این یعنی قابلیت «ورود» و «ثبت‌نام» نباید وزن یکسانی داشته باشند. همینطور لازم بود که بین قابلیت‌های ورود و ثبت‌نام، سلسه‌مراتب بصری مناسبی رعایت بشه تا کاربر بدون پیچیدگی روش احراز هویت مورد نظرش رو انتخاب کنه.با مجموع این بایدها بود که ما چیدمان سمت چپ رو انتخاب کردیم.بعدتر سراغ پروسه‌ی مدیریت پروژه‌ها رفتیم. چون در این بخش لازم بود که کاربر بتونه پروژه‌ها رو «ببینه»، اون‌ها رو بر مبنای نظر خودش «مرتب» و یا «فیلتر» کنه و از همه مهم‌تر، به عنوان صفحه‌ی اول و اصلی اپلیکیشن، به سادگی به سایر بخش‌های اپلیکیشن هم دسترسی داشته باشه.یادمون نره که اپلیکیشن Figma چیدمانی مشابه خیلی دیگه از اپلیکیشن‌های طراحی دیگه داره و این یعنی ما هم باید خلاقیت دربصری‌سازی داده‌ها رو در محدوده‌ی استانداردها در نظر می‌گرفتیم.گزینه‌های طراحی برای پروسه‌ی مدیریت پروژه‌هابا مجموع توضیحات بالا، طرح سمت چپ ویژگی‌هایی داشت که ما رو متقاعد کرد اون رو مبنای مراحل بعدی‌مون در نظر بگیریم. ویژگی‌هایی مثل چیدمان استاندارد و بر مبنای cellها، سهولت دسترسی به قابلیت‌های sort و filter و همینطور وضوح بیشتر عناوین صفحات که باعث می‌شد کاربرهایی که کمتر با فضای دیجیتال آشنا هستن، در هر مرحله و بدون گیج شدن، بفهمن که در کجای اپلیکیشن حضور دارن.حالا وقت این بود که روی یکی از جذاب‌ترین قابلیت‌های این اپلیکیشن کار کنیم. قابلیت «ثبت و نمایش نظرات» یکی از ویژگی‌های مهمی بود که باعث می‌شد تا کاربرها بتونن به ازای هر پروژه، نظرات رو به راحت‌ترین نحو ببینن و بنا به نیازشون با نظرات تعامل کنن.این پروسه از دو بخش عمده تشکیل می‌شد:مدیریت و بررسی نظراتنوشتن نظر جدیددر بخش اول از این پروسه، تلاش کردیم تا با در نظر گرفتن رفتار کاربرها نسبت به نظرات و نحوه‌ی تعاملشون با این قابلیت، چیدمانی رو طراحی کنیم تا کاربرها بتونن در فضایی مجتمع و بر مبنای متدهای فیلترینگ متنوع و بر اساس Micro Interactionهای مختلف، نظرات هم‌تیمی‌های خودشون رو ببینن و به سادگی اون‌ها رو مدیریت کرده و یا به این نظرات پاسخ بدن.از طرف دیگه نسخه‌ی دسکتاپ Figma قابلیت مهمی برای مدیریت Notificationها داشت که باعث می‌شد از اسپم شدن و یا گم شدن نظرات جلوگیری بشه. ما هم به دلیل یکسان بودن نسبی کاربرها و رفتارهاشون، این ویژگی رو در قسمت نظرات اپلیکیشن Figma Mirror و تحت نام Notification Setting عینن قرار دادیم.بالاتر درباره‌ی یک فضای مجتمع برای نظرات صحبت کردیم اما دلیل الزام به حضور این بخش جدید در نسخه‌ی موبایل چی بود؟ آیا لازم بود تا کاربرها در همین بخش بتونن نظرات رو به صورت کامل ببینن؟ آیا باید به عملکرد بخش نظرات نسخه‌ی دسکتاپ Figma کاملن پایبند می‌موندیم یا لازم بود بیشتر فکر کنیم؟برای پیدا کردن جواب برای سوالات بالا، گزینه‌های زیادی رو طراحی کردیم، تلاش کردیم تا چیدمانی پیدا کنیم که برای رفتارهای متفاوت کاربرها، پاسخ‌های بهتری داشته باشه و در نهایت به دو گزینه‌ی زیر رسیدیم:گزینه‌های طراحی برای پروسه‌ی نظردهیدر نسخه‌ی دسکتاپ سرویس Figma کاربرها قادر هستن تا با تغییر Tabها و یا کلیک روی عنوان هر پروژه به تمامی پروژه‌ها و نظرات دسترسی داشته باشن و بخش مجزایی برای نمایش کلیه‌ی نظرات وجود نداره. اما در نسخه‌ی موبایل، اگر ما بخشی مجزا و مجتمع برای نمایش کلیه‌ی نظرات و همینطور فیلترینگ بر مبنای پروژه‌ها در نظر نمی‌گرفتیم، کاربر مجبور می‌شد تا برای مدیریت نظرات به ازای هر پروژه، قدم‌های زیادی رو به جلو یا عقب حرکت کنه.با در نظر گرفتن رفتار همین کاربرها [که به صورت روتین، کامنت‌هایی روی پروژه‌های مختلف دریافت و یا ثبت می‌کنن] بود که در وهله‌ی اول بخشی مجتمع برای نظرات در نظر گرفتیم و بعد، با نمایش پروژه‌ها در این قسمت و قابلیت فیلترینگ بر مبنای اون‌ها، Funnelها رو ساده‌تر و کوتاه‌تر کردیم.بعدتر سراغ امتحان کردن متدهای مختلفی برای نمایش نظرات در این صفحه رفتیم. اون‌ها رو بر مبنای متدهایی مثل Accordion، Cell و Tile طراحی کردیم. روشی مثل Tile‌ رو کنار گذاشتیم چون بهینه نبود و میزان Scroll‌ رو افزایش می‌داد. همینطور متد Accordion [وایرفریم سمت راست] رو کنار گذاشتیم چون می‌دونستیم بنا بر ماهیت پیچیده و داینامیک هر نظر، کاربر نیاز داره تا روی هر نظر متمرکز بشه و اون رو با دقت بخونه و جواب بده. پس با این حال که متد Accordion تعداد صفحات اپلیکیشن رو کاهش می‌داد، اما مانع می‌شد تا کاربر روی هر نظر کنترل و تمرکز کافی داشته باشه.با در نظر گرفتن توضیحات بالا، در آخر وایرفریم سمت چپ رو به عنوان طرح نهایی انتخاب کردیم. چون در این طرح علاوه بر اینکه پروژه‌ها با وضوح بیشتری در دسترس کاربرها بودن، نحوه‌ی نمایش هر نظر هم در قیاس با گزینه‌ی سمت راست منظم‌تر و خواناتر به نظر می‌رسید.حالا که در مورد پروسه‌ی مدیریت و بررسی نظرات به نتیجه رسیده بودیم، وقت این بود که سراغ بخش نوشتن نظرات جدید بریم.اول به نسخه‌ی دسکتاپ Figma نگاه کردیم و بعدتر سری به محصولاتی مثل Zeplin و Avocode زدیم. دلیل انتخاب این محصولات هم این بود که پروسه‌ی ثبت نظر جزو عناصر کلیدی این سرویس‌ها محسوب می‌شد و می‌خواستیم بفهمیم که هر کدوم چه راه حلی برای این بخش دارن.با در نظر گرفتن روش‌های ثبت نظرات توی اپلیکیشن‌ها، در نهایت به دو گزینه‌ی پایین رسیدیم:گزینه‌های طراحی برای بخش نظرات جدیددر گزینه‌ی سمت راست، کاربر قادر بود تا مشابه با نحوه‌ی تعامل در پلتفرم دسکتاپ، روی بخشی از Frame تپ کنه و داخل فیلدی که براش باز می‌شد، نظر خودش رو تایپ و ارسال کنه. اما با تمام خوبی‌های این گزینه، دو مشکل اصلی وجود داشت.مشکل اول این بود که با تایپ کردن @ به منظور منشن کردن بقیه‌ی اعضای تیم، لازم بود تا Modal جدیدی برای پیشنهاد اسم هم‌تیمی‌ها باز بشه و این تجربه‌ی عجیب و بعضن ناخوشایندی رو پدید می‌آورد.اما در مورد مشکل دوم هم باید گفت در صورتی که کامنت ثبت شده، در قسمت‌های کناری Frame قرار می گرفت، رفتار فیلد ثبت کامنت خیلی عجیب به نظر می‌رسید.با در نظر گرفتن مشکلات بالا بود که ما گزینه‌ی سمت چپ رو به عنوان نسخه‌ی اصلاح‌شده برای بخش ثبت نظرات در نظر گرفتیم. در این نسخه، فقط Pinها وظیفه‌ی مشخص کردن «منطقه‌ی مورد بحث» رو داشتن و تمام اطلاعات کلامی و همینطور قابلیت منشن کردن، در باکسی که به کیبورد متصل شده بود تجمیع شدن.طراحی نهاییبعد از اینکه از در مورد چیدمان صفحات و عملکرد قابلیت‌های اپلیکیشن جدید اطمینان نسبی پیدا کردیم، حالا وقت این بود که با بهره‌گیری از تمام اطلاعاتی و اسنادی که تا حالا بدست آورده یا تولید کرده بودیم، جزئیات هر قابلیت رو طراحی کنیم.رابط کاربر اپلیکیشن جدید Figma Mirrorقبل از طراحی نهایی هر یک از قابلیت‌های این اپلیکیشن، اول لازم بود تا هویت بصری و ظاهر اون رو تعریف کنیم. ما می‌خواستیم نتیجه‌ی نهایی از یک طرف هویت سرویس Figma رو در خودش داشته باشه و از طرف دیگه به صورت زاید پیچیدگی بصری نداشته باشه.در نهایت بررسی دقیق ظاهر نسخه‌ی فعلی اپلیکیشن Figma Mirror بود که ما رو از فرضیه‌هامون مطمئن کرد. این اپلیکیشن با تبعیت نسبی از زبان طراحی خود سیستم عامل، فضایی آشنا رو برای تعامل با کاربر فراهم می‌کنه و با استفاده از عناصر کوچکی مثل رنگ، تایپ‌فیس و لوگو هویت سرویس Figma رو در ذهن کاربر تداعی می‌کنه.حالا زمان این بود تا زیرساخت لازم برای طراحی اینترفیس یعنی Design System پروژه رو آماده کنیم. در ابتدا سری به وب‌سایت و اپلیکیشن نسخه‌ی دسکتاپ Figma زدیم تا زبان طراحی Figma رو درک کنیم. بعدتر، المان‌ها و کامپوننت‌های استفاده شده در نسخه‌ی موبایل اپلیکیشن Figma Mirror‌ رو بررسی کردیم. اینجا بود که به دلیل محدود بودن صفحات و جزئیات اپلیکیشن موبایل Figma از یک سو و تفاوت ساختار طراحی وب و موبایل از سوی دیگه، قادر نبودیم تا نمونه‌ای مشابه از بسیاری از کامپوننت‌های مورد نیازمون در پروژه رو پیدا کنیم. به عنوان مثال، ما نمی‌دونستیم که یک Tab Bar استاندارد از دید شرکت Figma، چه جزئیاتی خواهد داشت یا Cellها در این اپلیکیشن دقیقن با چه زبانی طراحی می‌شن.در نهایت ناگزیر شدیم تا جزئیات Design System پروژه رو با تلفیقی از سه منبع اصلی و با چاشنی نظرات شخصی خودمون طراحی کنیم:زبان طراحی پلتفرم وب Figmaزبان طراحی اپلیکیشن موبایل Figmaزبان طراحی سیستم عاملنکته‌ی حائز اهمیت در این بخش از طراحی این بود که ما بر مبنای شناختمون نسبت وسعت این پروژه می‌دونستیم که لازم نیست یک Design System تمام و کمال برای داشته باشیم. تمرکز بر طراحی عناصر ضروری این Design System به ما این امکان رو داد تا توی پروسه‌ی طراحیمون زمان زیادی رو صرفه‌جویی کنیم.بعد از طراحی و ساخت Design System، حالا زمان این رسیده بود تا با در نظر گرفتن لیست Epicهای پروژه، طراحی هفت بخش زیر رو شروع کنیم:پروسه احراز هویتپروسه مدیریت پروژهپروسه ثبت و نمایش نظراتپروسه مانیتورینگ پروژهپروسه مدیریت جزئیات پروژهپروسه به اشتراک‌گذاری و مدیریت دسترسی‌هاپروسه میرورینگاحراز هویتاین بخش که در صورت Login نبودن کاربر، درست بعد از صفحه‌ی Splash و Onboarding (در اولین استفاده از اپلیکیشن) به کاربر نمایش داده می‌شه، در ابتدا مسیر «ورود» و «ثبت‌نام» رو مشخص می‌کنه. ما می‌دونستیم بزرگ‌ترین گروه کاربری استفاده کننده از این اپلیکیشن، طراحانی هستن که پیش از این، از پلتنفرم وب یا دسکتاپ Figma استفاده کردن. پس قشر بزرگتری از کاربرها احتمالن از قبل، حساب کاربری دارن و این دلیل اولویت بیشتر بخش «ورود» نسبت به «ثبت‌نام» در این صفحه بود.صفحات مربوط به Onboarding و خوش‌آمد‌گوییما در این صفحه روش‌های ورود به اپلیکیشن Figma Mirror رو مثل نسخه‌ی دسکتاپ، متشکل از «ورود با اکانت گوگل»، «ورود از طریق متد SSO» و در نهایت «ورود با ایمیل و پسورد» در نظر گرفتیم.شایان ذکر هست که  استفاده از دکمه‌ی Primary‌ برای روش «ورود با ایمیل و پسورد» به دو دلیل بود. از طرفی ماهیت و عملکرد این روش با سایر روش‌های «ورود» و «ثبت‌نام» کمی متفاوت بود و از طرف دیگه، حدس می‌زدیم که Figma هم مثل سایر شرکت‌ها، ترجیح می‌ده تا برای مقاصدی مثل Email Marketing، این روش رو در پروسه «ورود» و «ثبت‌نام»، متمایزتر طراحی کنه.در صفحات داخلی این پروسه هم، مسیر و خطاهای احتمالی بخش «ورود» و «ثبت‌نام» و همینطور پروسه‌ی «فراموشی رمز عبور» طراحی شد.فلوی ثبت‌نام و ورودمدیریت پروژهبعد از ورود یا ثبت‌نام کاربر، ما صفحه‌ای رو به منظور مدیریت پروژه‌ها در نظر گرفتیم. در این صفحه کاربر قادر هست تا از طریق متد‌های مختلف Sorting و یا Filtering دسترسی راحتی به پروژه‌های خودش داشته باشه؛ می تونه اون‌ها را بر مبنای اسم پروژه‌ها و یا اسم افراد حاضر در یک پروژه‌ی خاص جستجو کنه و مشخصات کلی هر پروژه مثل اسم، کاور، آخرین زمان تغییرات روی پروژه و تعداد کامنت‌های خونده نشده رو ببینه.همچنین با در نظر گرفتن نقاط تماسی مثل Tab Bar متصل به پایین صفحه، کاربر می‌تونه به تمامی بخش‌های اپلیکیشن دسترسی داشته باشه.جزئیات بخش مدیریت پروژهبعد از طراحی کلیات این صفحه، کمی توجهمون رو به جزئیاتی مثل Micro Interactionها و خصوصن قابلیت سوایپ به چپ و راست هر Cell معطوف کردیم. از طرفی می‌دونستیم که این اپلیکیشن روبرای کاربرهایی طراحی می‌کنیم که متخصص‌تر هستن و ساده‌ترین Micro Interactionهارو یاد می‌گیرن ولی از طرف دیگه می‌خواستیم تا از این ویژگی به درستی و با بهره‌وری بیشتر استفاده کنیم. ما می‌تونستیم مثل اپلیکیشن Telegram بعد از سوایپ کردن، آپشن‌های زیادی رو جلوی کاربر بذاریم یا می‌تونستیم مثل اپلیکیشن Spark سوایپ رو دو مرحله‌ای در نظر بگیریم. اما در نهایت بر مبنای گروه‌های کاربری متفاوتمون تصمیم گرفتیم تا تعادلی بین عملکرد و سهولت در استفاده از اپلیکیشن در نظر بگیریم.برای رسیدن به بهترین گزینه برای سوایپ به چپ یا راست، در ابتدا تمام گزینه‌های موجود رو مثل «حذف پروژه»، «ثبت نظر جدید»، «آرشیو کردن پروژه» و غیره رو در نظر گرفتیم و در نهایت به دو گزینه‌ی نهایی رسیدیم:ما فرض کردیم که بخشی از کاربرهای این اپلیکیشن، کاربر‌هایی هستن که تعداد زیادی پروژه در حساب کاربری‌شون دارن و لازمه تا با روشی مثل Pin کردن پروژه‌های پر اهمیت‌ترشون، دسترسی ساده‌تری به اون‌ها داشته باشن. از طرف دیگه فکر کردیم که «به اشتراک‌گذاری لینک پروژه‌ها» برای اون دسته از کاربرهایی که با هم‌تیمی‌ها و یا مشتری‌های زیادی سر و کار دارن قابلیتی پرکاربرد محسوب می‌شه.بهره‌گیری از Micro Interactionهااینجا بود که در نهایت برای سوایپ به چپ Pin یا Unpin کردن هر پروژه رو در نظر گرفته و برای سوایپ به راست، قابلیت «به اشتراک‌گذاری لینک پروژه» و ذخیره‌ی این لینک در Clipboard رو مد نظر قراردادیم .همینطور در نسخه‌ی دسکتاپ یا وب Figma ویژگی دیگه‌ای در نظر گرفته شده که در صورت نیاز به تغییرات در زیرساخت، Figma برای دقایقی از دسترس خارج می‌شه. ما هم، این ویژگی رو فراموش نکردیم و صفحات مرتبط با اطلاع‌رسانی از زمان و دلایل اون رو طراحی کردیم.Scheduled maintenance قابلیتثبت و نمایش نظراتدر بخش نظرات پروژه، کاربر می‌تونه تمام کامنت‌ها رو ببینه، کامنت‌های پر اهمیت رو با Micro Interaction سوایپ Pin یا Unpin کنه و حتی بدون نیاز به باز کردن هر کامنت، اون‌ها رو Mark as read یا Unread کنه.در این بخش، Sorting و Filtering کمی متفاوت‌تر طراحی شدن. علاوه بر روش‌های متداول برای این مساله، ما روش Filtering منحصربه فردی رو بر مبنای پروژه‌ها طراحی کردیم. در این روش Filtering ،کاربر قادر هست تا از بین تمام کامنت‌های موجود، صرفن کامنت‌های یک پروژه خاص رو بدون نیاز به باز کردن پروژه ببینه و باهاشون تعامل کنه.همینطور در این بخش، قسمتی مشابه با نسخه‌ی وب و دسکتاپ Figma برای مدیریت اعلان‌های کامنت‌ها در نظر گرفته شده تا کاربر فقط اعلانات مهم و مورد نظرش رو دریافت کنه.و در نهایت برای این بخش یک قابلیت کوچک اما جدید هم لحاظ کردیم. بنا به تجربه‌ی خودمون در استفاده از Figma، جای خالی یک دکمه یا اکشن برای Mark as read کردن تمامی کامنت‌ها احساس می‌شد. حالا کاربر می‌تونست با Long press کردن تب Comments در پایین صفحه امکان این رو داشته باشه تا تمامی کامنت‌های موجود رو Mark as read کنه.پروسه‌ی مانیتور کردن نظراتدیدن نظرات هم از دو مسیر قابل دسترسی هستن. روش اول، باز کردن هر کامنت از بین لیست نظرات بوده و روش دوم هم از طریق باز کردن هر پروژه و انتخاب متد Comment mode داخل هر Frame .در روش اول کاربر قادر هست تا هر Thread رو مطالعه کرده، اون رو Resolve کنه، هر کامنت رو Pin و یا حذف کنه و در صورت تمایل به کامنت‌ها جواب بده. همینطور کاربر می‌تونه تا با تایپ کردن @ درست مثل نسخه‌ی وب و دسکتاپ Figma، افراد حاضر در پروژه رو منشن کنه.ویژگی کوچکی هم در این بخش در نظر گرفته شده تا کاربر بتونه تمام افراد حاضر در پروژه رو ببینه و ساده‌تر اون‌ها رو منشن کنه.پروسه‌ی درج و خواندن نظراتاما در روش دوم ثبت نظرات، مشابه با نسخه‌ی وب و دسکتاپ Figma، کاربر با باز کردن هر Frame از پروژه و سویچ کردن روی Comment mode می‌تونه تمامی کامنت‌های مربوط به هر بخش از Frame‌ رو ببینه و با تپ کردن روی هر کامنت، به متن اون دسترسی داشته باشه و در صورت نیاز بهش پاسخ بده.لازم به ذکر هست که دسترسی به دکمه‌ی Comment mode و به اشتراک‌گذاری پروژه، با دو بار تپ کردن روی صفحه‌ی نمایش ظاهر می‌شه.قابلیت Comment Modeمانیتورینگ پروژهاین بخش شامل لیستی از تمام فعالیت‌هایی هست که خود کاربر یا افراد حاضر در پروژه‌های مختلف انجام دادن. در این بخش کاربر قادر هست تا تغییرات پروژه‌های مختلف رو ببینه، لیستی از کامنت‌های جدید داشته باشه و دعوت‌نامه‌هایی که برای پروژه‌های جدید می‌گیره رو مدیریت کنه.این بخش جنبه‌ی نمایش Logهای پروژه رو داره و همونطور که از اسمش پیداست، تمرکز این بخش بیشتر روی مانیتورینگ تغییرات هست تا اعمال تغییرات جدید.پروسه‌ی مانیتورینگ پروژه‌هامدیریت جزئیات پروژهدر طراحی بخش جزئیات پروژه تلاش کردیم تا دوباره نگاهی به نمونه‌های مشابه و خصوصن Sketch‌ داشته باشیم. همیشه نحوه‌ی نمایش Artboardهای مختلف و سادگی‌شون در اپلیکیشن Sketch  برامون جذاب بود. در طراحی این بخش از اپلیکیشن Figma Mirror سعی کردیم تا از نحوه‌ی این چیدمان در Sketch ایده بگیریم و علاوه بر اون دسترسی به Frameها، خصوصن در پروژه‌های بزرگ رو با امکان جستجو بر مبنای اسم Frame تسهیل کنیم.پروسه‌ی مدیریت جزئیات پروژهبعد از باز کردن هر Frame، همونطور که قبل‌تر گفته شد؛ کاربر قادر هست تا با دو بار تپ کردن روی صفحه‌ی نمایش، به Zoom level هر Frame دسترسی داشته باشه و یا به Comment mode سویچ کنه. نکته‌ی جالب و جدیدی که برای این قسمت از اپلیکیشن در نظر گرفتیم؛ قابلیت به اشتراک‌گذاری هر Frame‌ به صورت منفرد بود که از طریق سه متد زیر قابل انجام هست:به اشتراک‌گذاری از طریق لینکبه اشتراک‌گذاری به صورت اسکرین‌شاتذخیره Frame به صورت عکس PNGدلیل طراحی این ویژگی هم گروه‌های کاربری مختلفی بودن که قرار هست تا با این اپلیکیشن سر و کار داشته باشن. گروه‌هایی که ممکنه بخوان به Frame خاصی از پروژه دسترسی داشته باشن یا اصلن اپلیکیشن Figma Mirror‌ روی گوشی‌شون نصب نشده باشه اما نیاز داشته باشن تا یک Frame خاص رو به صورت عکس ببینن.اشتراک‌گذاری و مدیریت دسترسی‌هابخش اشتراک‌گذاری و مدیریت دسترسی‌ها در نسخه‌ی جدید Figma Mirror بسیار مشابه با نسخه‌ی وب و دسکتاپ این اپلیکیشن طراحی شده. ما اعتقاد داشتیم که تقریبن تمام ویژگی‌های این بخش در نسخه‌ی وب و دسکتاپ برای اپلیکیشن نسخه‌ی موبایل Figma هم کاربردی و قابل استفاده هستن. پس نیازی به اختراع دوباره‌ی چرخ نبود.این بخش که از طریق باز کردن هر پروژه و تپ روی دکمه‌ی اشتراک‌گذاری در دسترس بوده؛ از سه عنصر اصلی تشکیل شده:مدیریت کلی دسترسی‌های پروژهمدیریت افراد حاضر در پروژه و دعوت افراد جدیدمدیریت لینک به‌اشتراک‌گذاری پروژهدر قسمت Access setting این امکان برای کاربر وجود داره تا سطح دسترسی کلی افراد به هر پروژه رو تعریف کنه و در قسمت People سطح دسترسی هر فرد به پروژه رو تعریف کرده و یا افراد جدید رو به پروژه دعوت کنه. در نهایت و در بخش Link setting کاربر می‌تونه لینک به اشتراک‌گذاری پروژه رو بسازه؛ حذف کنه و یا در Clipboard موبایل خودش ذخیره کنه. لازم به ذکر هست که با ساختن لینک پروژه برای اولین بار، این لینک به صورت اتوماتیک در Clipboard ذخیره می‌شه.روش‌های به‌اشتراک‌گذاری و مدیریت دسترسی‌هامیرورینگدر نهایت، آخرین بخش از این اپلیکیشن شامل پروسه‌ی Mirroring اپلیکیشن Figma Mirror‌ می‌شه. ویژگی آشنایی که محدودیت‌هاش باعث شد تا ما این پروژه رو شروع کنیم!پروسه‌ی میرورینگعملکرد این بخش از اپلیکیشن درست مشابه با نسخه‌ی فعلی اپلیکیشن Figma Mirror طراحی شده و کاربر قادر هست تا با انتخاب یک Frame روی وب یا دسکتاپ، اون Frame رو روی صفحه‌ی نمایش گوشی خودش ببینه و در صورت لزوم با اون تعامل کنه. همینطور درست مثل صفحه‌ی جزئیات پروژه، کاربر با دو بار تپ کردن روی صفحه‌ی نمایش گوشی خودش، می‌تونه به Tab Bar و گزینه‌های بیشتری مثل Zoom level و به‌اشتراک‌گذاری دسترسی داشته باشه.تاثیرات این بازطراحیبرای ما، تاثیرات بازطراحی کانسپچوال Figma Mirror از دو جنبه قابل بررسی هستن. از یک طرف انجام دادن تیمی این پروژه در اوقات فراغت، باعث شد تا بعد از مدت‌ها دور بودن از هم، باز هم با همدیگه کار کنیم. تو این مسیر، به دلیل سکونت فرشید، زینت و هومن در کشور‌های متفاوت ، ارتباطات تیمی بیشتر از طریق Skype و یا کامنت‌های Figma صورت می‌گرفت. بعضی اوقات زمان مشخصی رو تعریف می‌کردیم و هم‌زمان روی طراحی بخش‌هایی که بهمون محول شده بود کار می‌کردیم و گاهی به صورت گروهی و هم‌زمان، روی یک بخش خاص ایده‌پردازی یا طراحی می‌کردیم.از جنبه‌ی دیگه ما فکر می‌کنیم که توسعه‌ی این طراحی باعث می‌شه تا از یک طرف تجربه‌ی کاربر اپلیکیشن Figma Mirror بهبود چشم‌گیری پیدا کنه و از طرف دیگه متریک‌هایی مثل SUS، CSAT و NPS بهتر بشن. اما یادمون نره که به دلیل تفاوت ساختاری زیادی که نسخه‌ی فعلی این اپلیکیشن با نسخه‌ی بازطراحی شده‌ی ما داره، متریک‌هایی که برای این پروژه تا الان تعریف شدن باید به‌روز بشن. بعد از توسعه‌ی نسخه‌ی جدید بد نیست تا متریک‌هایی مثل Time on page، Session duration و Page views سنجیده بشن.در پایان ذکر یک نکته‌ی بسیار مهم ضروری هست که یکی از اهداف اصلی ما از طراحی این پروژه این بود که گروه‌های کاربری جدیدتری این اپلیکیشن رو نصب کرده و گروه‌های کاربری فعلی (مثل طراحان) بیشتر از این اپلیکیشن استفاده کنن. تغییرات اعمال شده در نسخه‌ی بازطراحی شده‌ی Figma Mirror به ما این امید رو می‌ده تا افرادی مثل صاحبان کسب‌و‌کارها، توسعه‌دهنده‌ها، مشاورها و از همه مهم‌تر، طراحان بیشتری این اپلیکیشن رو نصب و از اون استفاده کنن تا در نهایت متریک‌هایی مثل DAU و MAU از یک سو و تعداد Installها از سوی دیگه افزایش پیدا کنه.از اینکه مارو خوندید ممنونیم!نسخه‌ی تصویری و خلاصه شده‌ی این Case Study رو می‌تونید از Behance ببینید و یا نسخه‌ی انگلیسی اون رو از Medium بخونید.با ما در ارتباط باشید:هومن هاتفی - مدیر طراحی مجموعه‌ی اسنپ (لینکدین، دریبل، توییتر، اینستاگرام)زینت فراهانی - طراح محصول در License.Rocks و Socialteq (لینکدین، دریبل، اینستاگرام)فرشید درویشی - طراح محصول در License.Rocks و Socialteq (لینکدین، دریبل، اینستاگرام)هومن هاتفیهومن هاتفیThu, 25 Mar 2021 11:21:43 +0430