شفافسازی ارزش محصول
کاربر باید در چند ثانیه اول متوجه شود کارنو کلاد چه مسئلهای را برای سازمان او حل میکند و چرا نسبت به گزینههای جایگزین ارزش بررسی دارد.
Case Study · طراحی و توسعه وب
طراحی و توسعه کارنو کلاد
کارنو کلاد بهعنوان یک پروژه نمونه B2B SaaS طراحی شده تا یک محصول فنی و پیچیده را برای مدیران کسبوکار، مدیران فناوری و تیمهای عملیات به زبانی روشن، قابل مقایسه و نتیجهمحور ارائه کند.
فارسیRTL
نتیجه کلیدی۳ مسیر تبدیل مستقل، ۱۲ الگوی صفحه قابل توسعه و زیرساخت محتوایی مقیاسپذیر برای تیم بازاریابی و فروش
نمای کلی
پروژه از چه مسئلهای شروع شد؟
کارنو کلاد یک سناریوی کامل برای یک پلتفرم زیرساخت ابری سازمانی است که سرویسهایی مانند سرور ابری، ذخیرهسازی، شبکه، پایگاهداده، مانیتورینگ و مدیریت منابع را در اختیار کسبوکارها قرار میدهد. مخاطبان این محصول از نظر دانش فنی و نیاز تصمیمگیری یکسان نیستند؛ مدیرعامل بیشتر به هزینه، مقیاسپذیری و ریسک توجه دارد، مدیر فناوری معماری، امنیت و APIها را بررسی میکند و تیم عملیات به مانیتورینگ، پایداری و سرعت استقرار نیاز دارد.
در معماری اولیه پروژه، محتوا بر اساس قابلیتهای محصول چیده شده بود و بازدیدکننده برای رسیدن به پاسخ سؤال خود مجبور بود بین صفحات مختلف جابهجا شود. در نسخه جدید، معماری اطلاعات بر پایه چهار محور «محصول»، «راهکار»، «صنعت» و «نقش سازمانی» بازطراحی شد. این ساختار اجازه میدهد هر کاربر از مسیر متناسب با مسئله خود وارد شود و به شواهد فنی، مزیت تجاری، نمونه استفاده، FAQ و CTA مرتبط برسد.
طراحی UI بر پایه یک Design System روشن، مینیمال و تکنولوژیک شکل گرفت. داشبوردها، نمودارها و Componentهای محصول در مرکز هویت بصری قرار گرفتند تا سایت بهجای استفاده از تصاویر عمومی، خود محصول را نمایش دهد. در بخش توسعه، ساختار Front-end با Next.js و TypeScript طراحی شد، محتوا از Headless CMS دریافت میشود و فرمهای جذب لید به CRM و Analytics متصل هستند.
Scope پروژه
Research، معماری اطلاعات، Site Map، User Flow، Wireframe، UI/UX، Design System، توسعه Front-end، اتصال Headless CMS، فرمهای جذب لید، Analytics، Technical SEO، Performance و استقرار
چالش
چالش اصلی پروژه
بزرگترین چالش، تبدیل یک محصول زیرساختی و فنی به تجربهای قابل فهم برای چند گروه مخاطب بود. نسخه قبلی بیش از حد قابلیتمحور بود، پیام ارزش محصول در صفحات مختلف تکرار میشد و تفاوت میان سرویسها، راهکارها و کاربردهای صنعتی بهوضوح مشخص نبود. صفحات فرود اختصاصی برای کمپینها وجود نداشت، فرم درخواست دمو اطلاعات زمینهای کافی جمعآوری نمیکرد و لیدها بدون منبع و Intent مشخص وارد فرایند فروش میشدند. از سمت فنی نیز لازم بود ساختار سایت برای توسعه تعداد زیادی Landing Page، محتوای آموزشی، Case Study و Integrations بدون وابستگی دائمی به توسعهدهنده آماده شود.
راهکار
راهکار Nemove
راهکار پروژه از بازطراحی معماری اطلاعات آغاز شد. برای هر نقش سازمانی، صنعت و مسئله کلیدی یک مسیر محتوایی مستقل تعریف شد و صفحات محصول بهجای فهرست ساده قابلیتها، با ساختار «مسئله → راهکار → شواهد محصول → مزیت → جزئیات فنی → CTA» طراحی شدند. یک Design System ماژولار برای کارتها، Pricing، Feature Comparison، Dashboard Preview، FAQ، Form و Resource Block ساخته شد. فرمهای دمو کوتاه شدند اما اطلاعاتی مانند نوع سازمان، اندازه تیم، سرویس موردنیاز و UTM را ثبت میکنند. Headless CMS امکان ساخت صفحات جدید بدون تغییر کد را فراهم میکند و رویدادهای اصلی تعامل برای GA4 و GTM تعریف شدهاند. زیرساخت Deployment نیز با Docker، Nginx و Cloudflare برای Performance، Cache و امنیت لایه Edge آماده شده است.
اهداف پروژه
خروجیهایی که باید واقعاً به دست میآمدند
تفکیک مسیر مخاطبان
مدیرعامل، CTO، DevOps و تیم عملیات باید بدون جستجوی طولانی به محتوای متناسب با نقش و دغدغه خود برسند.
افزایش کیفیت Lead
فرمها علاوه بر اطلاعات تماس، Context کافی برای اولویتبندی و تخصیص درخواست به تیم فروش ثبت کنند.
مقیاسپذیری محتوا
تیم بازاریابی بتواند صفحات راهکار، صنعت، Integration و کمپین را با Blockهای استاندارد توسعه دهد.
نمایش واقعی محصول
UI محصول، Dashboard و Data Visualization به بخش اصلی Storytelling تبدیل شوند و وابستگی به تصاویر Stock کاهش یابد.
اندازهگیری کامل Funnel
تعامل با CTA، فرم، Resource، Pricing و صفحات کلیدی بهصورت استاندارد قابل تحلیل باشد.
Product Design Process
از Site Map و Wireframe تا UI/UX و Development
فرآیند واقعی پروژه بهصورت مرحلهای ثبت شده تا تصمیمهای طراحی و توسعه قابل دنبال کردن باشند.
01
RESEARCH
Research و کشف مسئله
خروجی: Problem Map، Audience Map و فهرست اولویتهای محتوا.
02
SITEMAP
Site Map و معماری اطلاعات
خروجی: Site Map نهایی و Content Hierarchy.
03
WIREFRAME
Wireframe
خروجی: Wireframe دسکتاپ و موبایل صفحات کلیدی.
04
VISUAL-STYLE
Visual Style و Design Direction
خروجی: Color System، Typography، Grid و Component Direction.
05
UIUX
UI/UX Design
خروجی: Design System و Responsive States.
06
DEVELOPMENT
Development
خروجی: Component Library و صفحات Production-ready.
07
RESPONSIVE
Responsive و Mobile First
بازطراحی Componentها برای اندازهها و الگوهای تعامل مختلف.
08
TESTING
QA و Testing
خروجی: QA Checklist و اصلاحات UAT.
09
OPTIMIZATION
SEO، Performance و Security
خروجی: Production Deployment و Monitoring Checklist.
Feature List
قابلیتهای کلیدی نسخه اجراشده
هر قابلیت به یک نیاز واقعی در تجربه کاربر، عملیات یا رشد کسبوکار پاسخ میدهد.
تجربه کاربری
Responsive / Mobile First
طراحی و بهینهسازی تجربه برای Desktop، Tablet و Mobile.
رشد
Technical SEO
ساختار Semantic، Heading، Crawlability، Indexability و URLها.
فنی
Performance Optimization
بهینهسازی Assetها، تصاویر، Cache و Core Web Vitals.
فنی
Security Hardening
کاهش سطح حمله، کنترل دسترسی و تنظیمات امنیتی کاربردی.
تصاویر صفحات پروژه
صفحات پروژه را شفاف و باکیفیت ببینید
هر صفحه را از تب بالا انتخاب کنید. روی تصویر Hover کنید تا بهصورت نرم اسکرول شود و برای مشاهده نسخه کامل روی تصویر کلیک کنید.
صفحه اصلی کارنو کلاد
صفحه محصولات و سرویسهای ابری
صفحه راهکارها
صفحه قیمتگذاری
مرکز منابع و مستندات
داشبورد نمای کلی
داشبورد مدیریت سرورها
داشبورد مانیتورینگ و صورتحساب
Hover برای اسکرول نرم · کلیک برای نمایش تمامصفحه
Technology Stack
فناوریها و ابزارهای استفادهشده در پروژه
Tech Stack به تفکیک نقش در طراحی، توسعه، زیرساخت، سئو و یکپارچهسازی نمایش داده میشود.
TS
TypeScriptزبان
⚛
ReactFront-end
N
Next.jsFront-end
API
REST APIBack-end
Pg
PostgreSQLDatabase
D
DockerDevOps
N
NginxDevOps
☁
CloudflareDevOps
GTM
Google Tag ManagerAnalytics
نتیجه پروژه
آنچه بعد از اجرا بهتر شد
- معماری اطلاعات از ساختار قابلیتمحور به مدل محصول، راهکار، صنعت و نقش سازمانی تبدیل شد.
- سه مسیر تبدیل مستقل تعریف شد تا درخواست دمو، تماس فروش و دانلود منابع رفتار و داده متفاوتی داشته باشند.
- Design System ماژولار امکان ساخت Landing Pageهای جدید بدون طراحی مجدد کل صفحه را فراهم میکند.
- فرمهای Lead با UTM و Context محصول طراحی شدند تا تیم فروش از منبع و Intent هر درخواست مطلع باشد.
- UI خود محصول و Dashboardها به هسته Storytelling تبدیل شدند و وابستگی به تصاویر عمومی کاهش یافت.
- Event Tracking برای CTAها، فرمها، Pricing و Resourceها بهصورت ساختاریافته تعریف شد.
- ساختار Front-end و Deployment برای Performance، Cache، Edge Delivery و توسعه آینده آماده است.
- نسخه موبایل بهصورت مستقل طراحی و تست شده و CTAها، جداول و فرمها برای استفاده لمسی بهینه هستند.
نتیجه کلیدی۳ مسیر تبدیل مستقل، ۱۲ الگوی صفحه قابل توسعه و زیرساخت محتوایی مقیاسپذیر برای تیم بازاریابی و فروش
جزئیات نتیجه بر اساس داده واقعی پروژه در پیشخوان Case Study قابل ویرایش است.
پاسخگویی و بررسی پروژه
مشاوره تخصصی Nemove
برای شروع پروژه آمادهاید؟
نیازها، کاربران و هدف تجاری پروژه را ارسال کنید تا بهترین مسیر طراحی، فناوری و اجرای نسخه اول را بررسی کنیم.
بررسی نیازها
پیشنهاد مسیر اجرا
پاسخگویی سریع
پروژههای مرتبط
