AI sales platform UI/UX

Axcieve — AI-powered sales platform: website and app

UI/UX design by Nahj team members for Axcieve, an AI-powered sales platform: a seven-page marketing website with solutions, products and pricing, a design system, and the app's overview dashboard for leads, sales funnel and revenue, including its empty state.

  • Outcome: Marketing website and app dashboard UI

Technologies: UI/UX Design, Figma, Design System, SaaS, Web Design, Dashboard Design, Data Visualization, Empty States, AI, Sales Enablement, B2B

Project links: Watch the project video

The Challenge

Axcieve is an AI-powered sales platform for sales teams. It finds and qualifies leads, writes outreach for email, LinkedIn and calls, and tracks the sales funnel and revenue. It needed two things designed: a marketing website that explains the product and sells its plans, and the app where teams follow their leads and deals.

The hard part was making an AI product easy to grasp. Visitors needed to see what it does, not just read about it, so the website is built around the app's own screens. Inside the app, a lot of data (leads, qualification rates, funnel stages, revenue) had to read at a glance, and a brand-new account with nothing in it still needed a useful first screen.

This case study shows individual work by Nahj team members, delivered across various roles and companies. It was not a Nahj studio project.

Our Approach

  1. Site structure — Seven marketing pages (home, solutions, products, services, pricing, blog and contact) under one top menu with dropdowns.
  2. App structure — The app mapped as pages in the file: login and registration, dashboard, overview, leads, sales funnel, CRM and AI Sales Coach.
  3. Design system — A design system page and a shared components board, so the website and the app speak one purple visual language.
  4. Show the product — Website sections built around the app's own screens, so each AI feature is shown, not just described.
  5. Dashboard exploration — Several overview layouts, chart types and colour schemes explored side by side in the file.
  6. Empty state — The overview designed for a new account with no data yet: zeroed cards and three first steps.

Core Features

  • Hero with app cards — Sales funnel, qualified-leads, scheduled-presentation and AI assistant cards float around the home page headline.
  • Product tour tabs — Overview, Generate leads, Sales Funnel and Outreach tabs walk visitors through the app.
  • Sales journey steps — Onboard, Empower, Analyze, Value and Automate, laid out as five linked steps on the home page.
  • Features beside their screens — Lead sourcing, smart qualification and automated outreach, each paired with the app screen behind it.
  • Pricing plans — Four plans side by side, a monthly or yearly switch, and the most popular plan highlighted.
  • Overview dashboard — Four KPI cards and charts for leads, qualification rate, funnel stages and revenue, with export and a date range.
  • AI Sales Coach — The AI Sales Coach sits in the app's top bar, next to search, quick add, notifications and messages.
  • Guided empty state — With no data yet, the overview lists three first steps, each linking to the right part of the app.

تصميم UI/UX لمنصة مبيعات بالذكاء الاصطناعي

Axcieve — منصة مبيعات بالذكاء الاصطناعي: الموقع والتطبيق

تصميم واجهات وتجربة استخدام من أعضاء فريق نهج لمنصة Axcieve للمبيعات بالذكاء الاصطناعي: موقع تسويقي من سبع صفحات للحلول والمنتجات والأسعار، ونظام تصميم، ولوحة النظرة العامة في التطبيق للعملاء المحتملين ومسار المبيعات والإيرادات، مع حالتها الفارغة.

  • النتيجة: واجهات الموقع التسويقي ولوحة التطبيق

التقنيات المستخدمة: UI/UX Design، Figma، Design System، SaaS، Web Design، Dashboard Design، Data Visualization، Empty States، AI، Sales Enablement، B2B

روابط المشروع: شاهد فيديو المشروع

التحدي

تعمل منصة Axcieve بالذكاء الاصطناعي لخدمة فرق المبيعات: تبحث عن العملاء المحتملين وتؤهّلهم، وتكتب رسائل التواصل عبر البريد الإلكتروني ولينكدإن ونصوص المكالمات، وتتابع مسار المبيعات والإيرادات. واحتاجت إلى تصميم جزأين: موقع تسويقي يشرح المنتج ويعرض باقاته، والتطبيق الذي يتابع فيه الفريق عملاءه المحتملين وصفقاته.

كان الجزء الأصعب أن يصبح منتج قائم على الذكاء الاصطناعي سهل الفهم. فالزائر يحتاج أن يرى ما يفعله المنتج لا أن يقرأ عنه فقط، لذلك بُني الموقع حول شاشات التطبيق نفسها. وداخل التطبيق، كان على بيانات كثيرة (العملاء المحتملون ونسب التأهيل ومراحل المسار والإيرادات) أن تُقرأ من نظرة واحدة، وعلى الحساب الجديد الذي لا يحتوي شيئًا بعد أن يجد شاشة أولى مفيدة.

يعرض هذا المشروع عملًا فرديًا لأعضاء من فريق نهج، أُنجز في أدوار وشركات مختلفة، وليس مشروعًا لاستوديو نهج.

كيف عملنا

  1. هيكل الموقع — سبع صفحات تسويقية (الرئيسية والحلول والمنتجات والخدمات والأسعار والمدونة والتواصل) تحت قائمة علوية واحدة بقوائم منسدلة.
  2. هيكل التطبيق — تقسيم التطبيق إلى صفحات داخل الملف: الدخول والتسجيل، ولوحة التحكم، والنظرة العامة، والعملاء المحتملون، ومسار المبيعات، وCRM، وAI Sales Coach.
  3. نظام التصميم — صفحة لنظام التصميم ولوحة مكوّنات مشتركة، ليتحدث الموقع والتطبيق لغة بصرية بنفسجية واحدة.
  4. عرض المنتج — أقسام الموقع مبنية حول شاشات التطبيق نفسها، فتُعرض كل ميزة ذكاء اصطناعي ولا تُوصف فقط.
  5. استكشاف اللوحة — تجربة عدة تخطيطات وأنواع رسوم بيانية وألوان للوحة النظرة العامة جنبًا إلى جنب داخل الملف.
  6. الحالة الفارغة — تصميم النظرة العامة لحساب جديد بلا بيانات بعد: بطاقات بأصفار وثلاث خطوات أولى للبدء.

الميزات الأساسية

  • واجهة ببطاقات من التطبيق — بطاقات مسار المبيعات ونسبة التأهيل والعرض المجدول والمساعد الذكي تحيط بعنوان الصفحة الرئيسية.
  • جولة بالتبويبات — تبويبات النظرة العامة وتوليد العملاء المحتملين ومسار المبيعات والتواصل تأخذ الزائر في جولة داخل التطبيق.
  • خطوات رحلة المبيعات — الانضمام والتمكين والتحليل والقيمة والأتمتة، في خمس خطوات متتابعة على الصفحة الرئيسية.
  • كل ميزة بجانب شاشتها — البحث عن العملاء المحتملين والتأهيل الذكي والتواصل الآلي، كل ميزة بجانب شاشة التطبيق التي تقدّمها.
  • باقات الأسعار — أربع باقات جنبًا إلى جنب، مع اختيار الدفع شهريًا أو سنويًا، وإبراز الباقة الأكثر طلبًا.
  • لوحة النظرة العامة — أربع بطاقات للمؤشرات الرئيسية ورسوم بيانية للعملاء المحتملين ونسبة التأهيل ومراحل المسار والإيرادات، مع التصدير واختيار الفترة الزمنية.
  • مدرّب المبيعات الذكي — زر AI Sales Coach في الشريط العلوي للتطبيق، بجانب البحث والإضافة السريعة والإشعارات والرسائل.
  • حالة فارغة ترشد المستخدم — حين لا توجد بيانات بعد، تعرض النظرة العامة ثلاث خطوات أولى، لكل منها رابط إلى الجزء المناسب في التطبيق.

Previous Project: Aura — Arabic money management app with a smart assistant · Next Project: Sensation for Export — Fresh and frozen produce exporter · Back to Portfolio · Start a Conversation