پرش به محتوای اصلی
Case Study · پرتال خدمات شهروندی

طراحی و توسعه شهرمن

پرتال خدمات شهروندی با کاتالوگ خدمت، فرم‌های مرحله‌ای، بارگذاری مدارک، کد رهگیری و پنل پیگیری؛ طراحی‌شده برای طیف وسیع کاربران و سطح دسترسی‌پذیری بالا.

Service PortalGovernment UXWorkflowAccessibility
شهرمن
نتیجه کلیدیکاتالوگ ۳۰ خدمت دیجیتال
مشتری / برندسازمان خدماتی فرضی
مدت اجرا۱۴ هفته
شروع پروژه
لانچ / تحویل
تعداد صفحات
وضعیتدموی کامل پورتفولیو
نمای کلی

پروژه از چه مسئله‌ای شروع شد؟

شهرمن یک سناریوی نمونه برای پرتال‌های خدماتی است. کاربر نباید برای فهم نام اداری یک خدمت سردرگم شود؛ بنابراین خدمات بر اساس نیاز روزمره و گروه مخاطب قابل جستجو هستند.

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

Scope پروژه

خدمات آنلاین، درخواست، پیگیری و اعلان

چالش

چالش اصلی پروژه

فرم‌ها در سامانه‌های جدا بودند و نام‌های سازمانی با زبان کاربر تفاوت داشت. پیگیری نیز عمدتاً تلفنی انجام می‌شد.

راهکار

راهکار طراحی‌شده

Service Catalog، موتور فرم مرحله‌ای، Workflow وضعیت و پنل شهروند طراحی شد. اصول کنتراست، اندازه لمس و پیام خطا برای کاربران با سطح سواد دیجیتال متفاوت در نظر گرفته شد.

اهداف پروژه

خروجی‌هایی که باید واقعاً به دست می‌آمدند

01

یافتن خدمت

جستجو بر اساس نیاز نه نام اداری.

02

فرم قابل فهم

مرحله‌ای با پیش‌نیاز روشن.

03

پیگیری غیرحضوری

وضعیت و نقص مدارک در پنل.

04

دسترسی‌پذیری

کنتراست، کیبورد و متن خوانا.

۳۰خدمت نمونهدر Service Catalog
۵مرحله عمومیدر فرم‌های پیچیده
۸وضعیت Workflowقابل پیکربندی
WCAG-readyدسترسی‌پذیریدر طراحی رابط
Product Design Process

از Site Map و Wireframe تا UI/UX و Development

فرآیند واقعی پروژه به‌صورت مرحله‌ای ثبت شده تا تصمیم‌های طراحی و توسعه قابل دنبال کردن باشند.

۰۱
PROCESS

کشف و معماری

جلسات نیازسنجی، تعریف کاربران، مسیرهای اصلی، KPI و مدل محتوایی انجام شد و دامنه نسخه اول به‌صورت شفاف مستند شد.

۰۲
PROCESS

UX و وایرفریم

User Flowهای اصلی به وایرفریم تبدیل شدند؛ سناریوهای موبایل در اولویت قرار گرفتند و نقاط اصطکاک قبل از طراحی بصری اصلاح شدند.

۰۳
PROCESS

UI و Design System

رابط کاربری با کامپوننت‌های قابل استفاده مجدد، قواعد تایپوگرافی، فاصله‌گذاری، حالات فرم و Responsive States طراحی شد.

۰۴
PROCESS

توسعه و یکپارچه‌سازی

Front-end و Back-end/WordPress پیاده‌سازی، اتصال سرویس‌ها انجام و داده نمونه نزدیک به حالت واقعی وارد شد.

۰۵
PROCESS

تست و انتشار

سناریوهای اصلی، فرم‌ها، موبایل، لینک‌ها، دسترسی‌ها و خطاهای مرزی تست و پس از UAT نسخه آماده انتشار شد.

Feature List

قابلیت‌های کلیدی نسخه اجراشده

هر قابلیت به یک نیاز واقعی در تجربه کاربر، عملیات یا رشد کسب‌وکار پاسخ می‌دهد.

کاتالوگ و جستجوی خدمت

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

صفحه پیش‌نیاز و مدارک

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

فرم مرحله‌ای و ذخیره پیشرفت

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

بارگذاری مدارک

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

کد رهگیری و پنل وضعیت

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

اعلان نقص مدرک و تغییر وضعیت

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

Technology Stack

فناوری‌ها و ابزارهای استفاده‌شده در پروژه

Tech Stack به تفکیک نقش در طراحی، توسعه، زیرساخت، سئو و یکپارچه‌سازی نمایش داده می‌شود.

Next.jsTechnology
Form EngineTechnology
Workflow APITechnology
PostgreSQLTechnology
Object StorageTechnology
OTPTechnology
Role AccessTechnology
Audit LogTechnology
MonitoringTechnology
نتیجه پروژه

آنچه بعد از اجرا بهتر شد

  • مسیرهای اصلی کاربر از ورود تا اقدام نهایی به‌صورت واضح و قابل اندازه‌گیری طراحی شدند.
  • محتوا و داده‌های کلیدی به مدل‌های قابل مدیریت تبدیل شدند تا تیم داخلی برای تغییرات روزمره وابسته به توسعه‌دهنده نباشد.
  • نسخه موبایل به‌عنوان یک تجربه مستقل بررسی شد و CTA، فرم و اجزای مهم برای لمس و خوانایی بهینه شدند.
  • رویدادهای مهم محصول و بازاریابی برای تحلیل رفتار و تصمیم‌گیری بعدی تعریف شدند.
  • ساختار فنی و Design System امکان توسعه صفحات و قابلیت‌های بعدی را بدون بازطراحی کامل فراهم می‌کند.
نتیجه کلیدیکاتالوگ ۳۰ خدمت دیجیتال

جزئیات نتیجه بر اساس داده واقعی پروژه در پیشخوان Case Study قابل ویرایش است.

کارشناس مشاوره و پشتیبانی Nemove پاسخ‌گویی و بررسی پروژه
مشاوره تخصصی Nemove

پروژه‌ای با نیاز مشابه دارید؟

نوع کسب‌وکار، کاربران و خروجی مورد انتظار را توضیح دهید تا معماری مناسب، فناوری و مسیر اجرای نسخه اول بررسی شود.

بررسی نیازها پیشنهاد مسیر اجرا پاسخ‌گویی سریع