همه‌ی کارها

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

Segmenticاوت ۲۰۲۶ تا حالاطراحی · فرانت‌اند، در یک تیم کوچک
۸
کانال ارسال: پوش، پیامک، ایمیل، پوش وب، درون‌برنامه، و سه پیام‌رسان داخلی
دوزبانه
پنل، لندینگ و مستندات، فارسی و انگلیسی
+۶۳۰
کامیت از شروع پروژه تا الان، و همچنان در حال توسعه
تیم کوچک
طراحی و فرانت‌اند، در کنار مهندسان بک‌اند

زمینه

سگمنتیک یک پلتفرم اتوماسیون مارکتینگ برای بازار ایران است: سگمنت‌ساز، ارسال کمپین و یک بوم سناریوی بصری، روی یک خط پردازش رویداد بلادرنگ، ساخته‌شده برای مقیاس شرکت‌هایی مثل دیجی‌کالا، اسنپ، تپسی و کافه‌بازار. طراح و فرانت‌اندم روی یک تیم کوچک؛ بک‌اند، خط پردازش رویداد و بیشتر مهندسی تحویل، کار آدم‌های دیگر تیم است، نه کار من. چیزی که مال من است رابطی است که مشتری واقعا باز می‌کند: داشبورد، پنل دوزبانه‌ی فارسی-انگلیسی، و UI سگمنت‌ساز و کمپین‌ساز.

بازقاب‌بندی

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

چه ساختم

کاری که کردم روی همان رابطی است که مشتری واقعا استفاده می‌کند. چارت‌ها و کارت‌های KPI داشبورد را برای خوانایی بازطراحی کردم. یک ساخت کاملا دوزبانه: پنل و لندینگ به فارسی و انگلیسی، با متن‌هایی که در برابر هم چک شده‌اند نه یک‌بار ترجمه و رهاشده. هویت برند روی صفحه‌های خطا و لوگوتایپ، تا صفحه‌ی خراب هم مثل خود محصول به نظر برسد نه مثل یک سرور شاکی. و کار جزئی روی کامپوننت‌های مشترک: سلکتور کانال حالا انتخابش را بین گزینه‌ها اسلاید می‌کند به‌جای عوض‌کردن پس‌زمینه، چون بازاریابی که دارد پیش‌نمایش کانال‌ها را کنار هم مقایسه می‌کند باید ببیند انتخاب از کجا آمد، نه اینکه کل ردیف را دوباره بخواند. موقعیت اسلاید از روی DOM اندازه‌گیری می‌شود نه از روی اندیس، چون برچسب فارسی همان لحظه‌ای که فونت وب لود می‌شود عرضش عوض می‌شود، و یک ResizeObserver مراقب است که تغییر اندازه‌ی کشو یا لودشدن فونت وسط کار جایش را خراب نکند.

چه چیزی را کنار گذاشتم

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

نتیجه

سگمنتیک هنوز در حال ساخته‌شدن است، پس عدد لانچ یا کاربر برای گزارش‌کردن ندارم. چیزی که می‌توانم بگویم وضعیت فعلی کد است: تست‌های خودکار در حد هزاران‌تا، با race detector روشن و بدون خطا، و توان اندازه‌گیری‌شده‌ای در حد چند هزار رویداد در ثانیه روی یک لپ‌تاپ که کل استک را هم‌زمان اجرا می‌کند؛ این با بار واقعی پروداکشن فرق دارد، ولی یک عدد واقعی و تکرارپذیر است، نه یک ادعا. بقیه‌ی جزئیات، مشتری، درآمد، مقیاس واقعی، مال شرکت است نه مال من.

کجا نقش من تمام شد

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

الان چه می‌دانم

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

یک نکته درباره‌ی اعداد

بعضی اعداد اینجا به‌جای مقدارِ مطلق به‌شکلِ جهت آمده‌اند و بعضی کاملا حذف شده‌اند، تا آنچه برای Segmentic محرمانه است حفظ شود. هرچه گفته شده مالِ من است و لزوما دیدگاهِ Segmentic نیست.