بازطراحی تجربه کاربری و رابط کاربری فروشگاه اینترنتی سبحان رایانه
سبحان رایانه از مشتریان قدیمی گروه نرمافزاری مدیا است. نسخه اولیه سایت را در سال ۱۳۹۹ طراحی کردیم و در سال ۱۴۰۵، با تغییر نیازهای فروشگاه و رفتار کاربران، دوباره سراغ آن رفتیم؛ این بار نه فقط برای تغییر ظاهر، بلکه برای سادهتر کردن مسیر خرید، واضحتر کردن خدمات و ساختن تجربهای بهروزتر و منسجمتر.
اسکرول داخل قاب برای مشاهده کامل صفحه اصلی طراحیشده.
مشاهده تصویر با کیفیت اصلی ↗پروژه سبحان رایانه در یک نگاه
در این صفحه مرحلهبهمرحله نشان میدهیم چرا سایت سبحان رایانه بعد از چند سال به بازطراحی نیاز پیدا کرد، چه مشکلاتی را بررسی کردیم و چطور ساختار، مسیرهای خرید و ظاهر سایت را به نسخه جدید رساندیم.
- چرخه پروژه
- ۱۳۹۹ طراحی اولیه→۱۴۰۵ ریدیزاین
- برند
- مجموعه سبحان رایانه
- حوزه فعالیت
- فروش تجهیزات رایانهای و دیجیتال
- نوع پروژه
- بازطراحی UX/UI فروشگاه اینترنتی
- دامنه کار
- تحلیل تجربه، ساختار صفحات، مسیر کاربر، طراحی رابط و ریسپانسیو
- نمونه خروجی
- صفحه اصلی، محصولات و طرح تعویض
- نسخه زنده
- sobhanrayaneh.com ↗
خلاصه مسئله و راهحل
چالش اصلی فقط قدیمیشدن ظاهر سایت نبود. کاربر باید میان تعداد زیادی محصول و چند نوع خدمت مختلف مسیر خودش را پیدا میکرد. بنابراین ابتدا ساختار و اولویتها را بازبینی کردیم و بعد طراحی جدید را ساختیم؛ بهطوریکه کاربر سریعتر بفهمد از کجا شروع کند، چه گزینههایی دارد و قدم بعدی چیست.
از طراحی اولیه در سال ۱۳۹۹ تا ریدیزاین در سال ۱۴۰۵
همکاری ما با سبحان رایانه به یک پروژه مقطعی محدود نشد. نسخه اولیه وبسایت در سال ۱۳۹۹ توسط گروه نرمافزاری مدیا طراحی شد و در سال ۱۴۰۵، بعد از چند سال استفاده واقعی و تغییر نیازهای فروشگاه، دوباره آن را بررسی و بازطراحی کردیم.
طراحی نسخه اولیه فروشگاه
نسخه نخست با هدف راهاندازی حضور آنلاین فروشگاه و فراهمکردن مسیرهای اصلی مشاهده و خرید محصولات طراحی شد. در آن مقطع، ساختار سایت متناسب با دامنه خدمات، تعداد دستهها و الگوهای رایج طراحی همان دوره شکل گرفت.
بازطراحی UX/UI و بازنگری ساختار تجربه
با گسترش دستههای محصول، اضافهشدن مسیرهای تجاری مثل فروش اقساطی، طرح تعویض و خرید سازمانی و تغییر انتظارات کاربران، فقط بهروزرسانی ظاهر کافی نبود؛ معماری اطلاعات، اولویت محتوا، User Journey و زبان بصری نیز بازطراحی شدند.
برای ریدیزاین عدد ثابتی مثل «هر ۳ سال یکبار» وجود ندارد. ممکن است یک سایت چند سال بدون نیاز به بازطراحی جدی کار کند و سایتی دیگر زودتر به تغییر نیاز داشته باشد. نشانههای مهم، تغییر محصولات و خدمات، سختتر شدن مسیر کاربر، رشد استفاده موبایل، تغییر الگوهای طراحی و استانداردهای جدید وب و فاصله گرفتن سایت از نیاز فعلی کسبوکار است. ریدیزاین زمانی ارزش دارد که یک مسئله واقعی را حل کند، نه فقط ظاهر را تازه کند.
از کجا بفهمیم سایت ما هم به بازطراحی نیاز دارد؟
لازم نیست صاحب کسبوکار با اصطلاحات UX و معماری اطلاعات آشنا باشد. چند نشانه ساده میتواند بگوید وقت بررسی دوباره سایت رسیده است.
کاربر برای پیدا کردن خدمات یا محصولات سردرگم میشود
اگر مشتری برای رسیدن به بخش مهم سایت چند بار بین منوها جابهجا میشود، مسئله فقط ظاهر نیست؛ ساختار و مسیرها نیاز به بررسی دارند.
کسبوکار رشد کرده اما سایت همان ساختار قدیمی را دارد
اضافهشدن خدمات، دستههای جدید یا مدلهای تازه فروش میتواند ساختار اولیه سایت را ناکافی کند؛ دقیقاً چیزی که در سبحان رایانه اتفاق افتاد.
سایت روی موبایل یا صفحات کوچک تجربه خوبی ندارد
ریسپانسیو بودن فقط کوچکشدن عناصر نیست. ترتیب محتوا، اندازه دکمهها و مسیر اقدام باید برای موبایل دوباره اولویتبندی شوند.
ظاهر سایت با جایگاه فعلی برند هماهنگ نیست
گاهی کسبوکار حرفهایتر شده، اما سایت هنوز تصویری از چند سال قبل نشان میدهد. این فاصله میتواند روی اعتماد اولیه کاربر اثر بگذارد.
میتوانید ساختار فعلی سایت و هدف کسبوکارتان را برای گروه نرمافزاری مدیا بفرستید تا مسیر مناسب پروژه مشخص شود.
بازطراحی از «صفحه فروش» شروع نشد؛ از مسئله کاربر شروع شد
فروشگاه تجهیزات دیجیتال مجموعهای از محصولات، دستهها، خدمات و مدلهای خرید مختلف دارد. بنابراین مسئله فقط زیباتر کردن صفحه نبود؛ باید ساختاری ایجاد میشد که کاربر سریعتر بفهمد کجا باید برود، چه انتخابهایی دارد و چگونه به مسیر مناسب خودش برسد.
کاهش ابهام در شروع مسیر
دستههای اصلی و خدمات مهم باید از همان لایههای ابتدایی تجربه قابل تشخیص باشند و کاربر برای پیدا کردن مسیر اصلی مجبور به جستوجوی طولانی نشود.
هماهنگکردن فروش و خدمات
تجربه باید هم فروش محصول را پوشش دهد و هم مسیرهایی مثل خرید اقساطی، طرح تعویض، پشتیبانی و راهنماهای تصمیمگیری را در جای درست قرار دهد.
ساخت سلسلهمراتب روشن
در یک فروشگاه پرمحصول، همه چیز نباید وزن بصری یکسان داشته باشد. محصول، خدمت، اعتمادسازی و CTA هرکدام باید در مرحله مناسب دیده شوند.
چطور سریع به گزینه مناسب برسم؟
دستهبندی و ناوبری باید بهاندازه کافی واضح باشند تا کاربر میان لپتاپ، مانیتور، همهکاره، موبایل، لوازم جانبی و سایر گروهها مسیر خود را پیدا کند.
اگر خرید من مسیر عادی ندارد چه؟
برای فروش اقساطی، طرح تعویض یا خرید سازمانی، کاربر به توضیح و CTA متفاوت از صفحه محصول نیاز دارد.
چطور خدمات کلیدی بهتر دیده شوند؟
سرویسهای درآمدی و تمایزدهنده باید در معماری اصلی حضور داشته باشند، نه اینکه در صفحات عمیق یا Footer پنهان بمانند.
چطور اعتماد در طول مسیر ساخته شود؟
ضمانت، اصالت، پشتیبانی، محتوا و راههای ارتباطی باید در نقاط مرتبط با تصمیم کاربر دیده شوند.
مسیر UX تا رسیدن به ریدیزاین نهایی
مسیر پروژه به چند تصمیم متصل تقسیم شد؛ هر مرحله، ورودی مرحله بعد بود تا طراحی نهایی از منطق تجربه کاربر جدا نشود.
ارزیابی نسخه موجود
مرور صفحه اصلی، ساختار ناوبری، دستهبندیها، صفحات لیست محصول و مسیرهای خدماتی برای شناخت نقاط اصلی تجربه.
تفکیک نیازهای کاربر
در برد UX، نیازها در دو محور رفتاری و مالی بررسی شدند تا مسیرهای تصمیمگیری فقط بر اساس نوع محصول تعریف نشوند.
بازطراحی معماری اطلاعات
صفحه خانه به هاب اصلی تبدیل شد و دستههای محصول، خدمات تجاری، محتوا و مسیرهای اعتماد در ساختار مشخصتری قرار گرفتند.
تعریف اولویت صفحه
ترتیب نمایش Hero، دستهها، مزیتهای فروشگاه، پیشنهادهای محصول، Cross-sell، محتوای راهنما و راههای ارتباطی مشخص شد.
طراحی رابط کاربری
منطق UX به کارت محصول، بخشهای دستهبندی، CTAها، صفحات خدمات و زبان بصری منسجم تبدیل شد.
هماهنگی مسیرهای کلیدی
صفحه اصلی، صفحات دستهبندی و سرویسهایی مانند طرح تعویض در یک سیستم یکپارچه قرار گرفتند.
بررسی واکنشگرایی
چیدمانها بهگونهای طراحی شدند که در دسکتاپ، تبلت و موبایل اولویت محتوا و CTAها حفظ شود.
خروجی نهایی
نتیجه، یک ریدیزاین مبتنی بر ساختار و تجربه بود؛ نه صرفاً تغییر رنگ، فاصله و ظاهر کارتها.
اتصال تجربه به کسبوکار
مسیرهای فروش، خدمات، اعتمادسازی و محتوا در کنار هم قرار گرفتند تا تجربه سایت با مدل واقعی کسبوکار هماهنگ بماند.
برد UX؛ محل اتصال نیاز کاربر، ساختار سایت و هدف تجاری
برد طراحی نشان میدهد که تصمیمها از یک وایرفریم ساده فراتر رفتند. ساختار صفحات، اولویتهای محتوا و نیازهای رفتاری و مالی کنار هم قرار گرفتند تا مسیر اصلی تجربه تعریف شود.
لایه ساختاری
- خانه بهعنوان مرکز توزیع مسیرهای اصلی.
- دستههای کلیدی مثل لپتاپ، مانیتور، آلاینوان و لوازم جانبی.
- تفکیک خدمات تجاری مانند خرید اقساطی و طرح تعویض از دسته محصول.
- حفظ مسیرهای اعتماد و اطلاعات سازمانی مانند درباره ما و تماس.
- قرار دادن بلاگ و محتوای راهنما بهعنوان پشتیبان تصمیم خرید.
لایه تصمیمگیری کاربر
- دیدهشدن سریع دستههای پرکاربرد.
- نمایش مزیتهای فروشگاه در نقطه مناسب.
- کمک به کاربران برای انتخاب محصول بر اساس نیاز.
- ایجاد فرصت برای کشف محصولات مکمل و Cross-sell.
- اعتمادسازی با اطلاعات شفاف، راهنما و دسترسی به مسیر تماس.
معماری اطلاعات جدید بر اساس نوع هدف، نه فقط نوع محصول
ساختار جدید فقط «دستهبندی کالا» نیست. کاربر ممکن است برای خرید مستقیم، خرید اقساطی، تعویض دستگاه، مقایسه یا کسب اطلاعات وارد سایت شود؛ معماری باید همه این نیتها را پوشش دهد.
Product Discovery
مسیرهای محصول برای دسترسی سریعتر به گروههای اصلی و کاهش اصطکاک در شروع جستوجو.
Service Discovery
خدماتی که ماهیت خرید متفاوت دارند، مثل طرح تعویض یا خرید اقساطی، به مسیر مستقل نیاز دارند و نباید در لابهلای محصولات گم شوند.
Decision Support
محتوا و راهنماها نقش پشتیبان دارند؛ بهخصوص برای کاربری که هنوز مدل مناسب یا نوع محصول موردنیازش را انتخاب نکرده است.
Trust & Contact
اطلاعاتی مثل ضمانت، اصالت، پشتیبانی و مسیر تماس بخشی از تجربه خرید هستند و صرفاً محتوای Footer محسوب نمیشوند.
هشت اولویت که چینش تجربه را شکل دادند
این اولویتها از برد UX پروژه استخراج شدند و تعیین کردند چه چیزی زودتر دیده شود، چه چیزی کاربر را هدایت کند و چه چیزی نقش پشتیبان داشته باشد.
جلب توجه
Hero برای انتقال سریع ارزش و هدایت کاربر به مهمترین اقدام.
دسترسی سریع
کوتاهکردن مسیر رسیدن به گروههای پرکاربرد محصول.
ارزشهای اصلی فروشگاه
نمایش خلاصه مزیتهایی که قبل از خرید به اعتماد و تصمیم کمک میکنند.
تصمیمگیری سریع
استفاده از انتخابها و پیشنهادهای هدفمند بهجای نمایش بدون اولویت محصول.
کشف محصول بیشتر
برچسبها، دستهها و مسیرهای کاربردی برای کاربرانی که هنوز انتخاب دقیق ندارند.
فروش جانبی
ایجاد فرصت طبیعی برای کشف محصولات مکمل بدون ایجاد مزاحمت در مسیر اصلی.
اعتمادسازی و محتوا
ترکیب اطلاعات فروشگاه با محتوای راهنما برای کاهش ابهام و افزایش اطمینان.
راههای ارتباطی
دسترسی روشن به اطلاعات تماس و پشتیبانی در پایان و نقاط مهم تجربه.
تصمیمهایی که از تحلیل به طراحی منتقل شدند
در این مرحله، یافتههای UX به قواعد عملی برای Navigation، صفحه اصلی، لیست محصولات و صفحات خدمات تبدیل شدند.
کاهش رقابت بصری
همه عناصر نباید همزمان CTA اصلی باشند. برای هر بخش یک وظیفه روشن تعریف شد.
جداسازی محصول از خدمت
خرید محصول با استفاده از طرح تعویض یا مسیر اقساطی یکسان نیست؛ تجربه این سرویسها باید توضیح مستقل داشته باشد.
Content after commerce
محتوای راهنما در جایگاهی قرار گرفت که از تصمیم خرید پشتیبانی کند، نه اینکه مسیر تجاری صفحه را قطع کند.
قیمت و CTA قابل اسکن
در صفحات لیست محصول، قیمت و اقدام بعدی باید بدون نیاز به خواندن تمام جزئیات قابل تشخیص باشند.
اعتماد در متن تجربه
نشانههای اعتماد و پشتیبانی بهعنوان بخشی از User Journey در نظر گرفته شدند، نه تزئینات جداگانه.
Consistency across templates
زبان بصری و منطق CTA بین صفحه اصلی، دستهبندی و خدمات تا حد ممکن ثابت نگه داشته شد.
هر یافته UX چگونه به تصمیم طراحی تبدیل شد؟
این بخش ارتباط میان مسئله، تصمیم طراحی و خروجی قابل مشاهده را روشن میکند تا Case Study فقط مجموعهای از تصاویر نباشد.
| یافته یا نیاز | تصمیم UX/UI | شاهد در خروجی |
|---|---|---|
| تعداد زیاد دستههای محصول کاربر به نقطه شروع واضح نیاز دارد. | تقویت دستهبندی و دسترسی سطح بالا به گروههای اصلی. | در نسخه زنده گروههایی مثل لپتاپ، مانیتور، همهکاره، موبایل، لوازم جانبی و پایه نگهدارنده مسیرهای قابل دسترسی دارند. |
| تفاوت خرید محصول با دریافت خدمت | جداکردن مسیر سرویسهایی مثل طرح تعویض و فروش اقساطی از صفحات صرفاً محصولی. | طرح تعویض، فروش اقساطی و خرید سازمانی بهصورت مسیر مستقل در سایت حضور دارند. |
| نیاز به اعتماد پیش از خرید | نمایش نشانههای اعتماد و اطلاعات پشتیبانی در تجربه اصلی. | ارسال، ضمانت کالا، پشتیبانی و اصالت کالا در صفحه زنده بهصورت بخشهای مستقل نمایش داده میشوند. |
| کاربر همیشه مدل دقیق را نمیداند | حفظ محتوای راهنما و مسیرهای آموزشی برای پشتیبانی از انتخاب. | بخش مقالات و راهنمای خرید در کنار ساختار فروشگاهی قرار گرفته است. |
| کشف بیشتر محصول | طراحی بخشهای محصول و دسته بهگونهای که مسیر مشاهده گزینههای بیشتر قطع نشود. | گروههای محصول و فهرستهای مختلف در چند نقطه از تجربه در دسترساند. |
از منطق UX به زبان بصری برند
رابط کاربری باید هم هویت سبحان رایانه را حفظ کند و هم برای فروشگاه پرمحصول، قابل اسکن و کماصطکاک بماند. به همین دلیل قرمز برند برای تأکید و CTA، خاکستری تیره برای متن و سفید برای ایجاد تمرکز استفاده شد.
Hierarchy
تیتر، قیمت، نام محصول و CTA وزنهای متفاوت دارند تا کاربر بتواند صفحه را سریعتر اسکن کند.
Consistency
کارتها، دکمهها و فاصلهگذاری با منطق مشترک در صفحه اصلی، فهرست محصولات و خدمات ادامه پیدا میکنند.
Responsive Priority
در نمایشهای کوچکتر، اطلاعات و CTA اصلی باید پیش از عناصر فرعی قابل دسترسی بمانند.
زبان طراحی استخراجشده از خروجی نهایی
طراحی این Case Study عمداً از زبان بصری نسخه نهایی سبحان رایانه الهام میگیرد: سطحهای سفید، پسزمینه خاکستری روشن، کارتهای ماژولار فروشگاهی، گوشههای نرم و قرمز برند برای اقدامهای اصلی. هدف، کپیکردن خود سایت نیست؛ بلکه بازتاب همان منطق بصری در روایت پروژه است.
تفاوت در منطق تجربه، نه فقط ظاهر
نسخه قبل و خروجی جدید نشان میدهند که تغییر اصلی در نحوه اولویتبندی، دسترسی و تبدیل اهداف کاربر به بخشهای قابلفهم اتفاق افتاده است.
نسخه موجود
تمرکز عمده روی نمایش فروشگاه و محصولات بود و برای برخی مسیرها فرصت بهتری برای ایجاد سلسلهمراتب و هدایت کاربر وجود داشت.
خروجی نهایی
صفحه نهایی با اولویتبندی روشنتر دستهها، محصولات، خدمات، محتوا و CTAها شکل گرفت و زبان بصری یکدستتری پیدا کرد.
این Before/After فقط مقایسه دو ظاهر نیست؛ نشان میدهد سایتی که چند سال قبل برای نیازهای آن زمان مناسب بوده، با رشد کسبوکار میتواند به ساختار و تجربه تازه نیاز پیدا کند.
دو مسیر متفاوت: انتخاب محصول و استفاده از خدمت
یک فروشگاه خوب نباید همه نیازها را در یک Template حل کند. مسیر مشاهده محصول و مسیر استفاده از یک سرویس تجاری، سؤالها و CTAهای متفاوتی دارند.
صفحه محصولات
تمرکز روی اسکن سریع گزینهها، تشخیص قیمت و اقدام بعدی است.
- تفکیک واضح کارتهای محصول
- برجستهسازی قیمت و CTA
- فضای سفید برای کاهش شلوغی
- امکان ادامه مسیر به راهنمای انتخاب
طرح تعویض لپتاپ
اینجا کاربر ابتدا باید سرویس، مراحل و شرایط را بفهمد و بعد برای ادامه فرایند اقدام کند.
- تعریف روشن سرویس
- شرح مراحل به زبان قابل فهم
- اطلاعات تماس و اقدام بعدی
- پاسخ به پرسشهای متداول
شواهدی که امروز در نسخه زنده قابل مشاهدهاند
این قسمت تفاوت «طرح» و «پیادهسازی» را مستند میکند. موارد زیر در نسخه فعلی sobhanrayaneh.com قابل مشاهدهاند.
ساختار فعلی فروشگاه
محصولات و سرویسهای تجاری هر دو در معماری قابل دسترسی نگه داشته شدهاند.
دستههای محصول
گروههای اصلی در Navigation و صفحه اصلی قابل دسترسیاند.
سرویسهای تجاری
فروش اقساطی، طرح تعویض لپتاپ و خرید سازمانی مسیرهای مستقل دارند.
اعتمادسازی
ارسال، ضمانت کالا، پشتیبانی و اصالت کالا در صفحه اصلی حضور دارند.
محتوای راهنما
مقالات و راهنماهای خرید در کنار فروشگاه از مرحله تحقیق و انتخاب پشتیبانی میکنند.
نتیجه: سایت جدید، مسیر روشنتر برای مشتری و کسبوکار
در این پروژه هدف فقط ساخت یک ظاهر جدید نبود. ساختار صفحات، مسیرهای خرید و خدمات و نحوه نمایش اطلاعات دوباره طراحی شدند تا سایت برای کاربر قابل فهمتر باشد و کسبوکار بتواند محصولات و خدمات مهمش را واضحتر معرفی کند. برای حفظ دقت، بدون داده تحلیلی قابل استناد ادعای عددی درباره افزایش فروش یا نرخ تبدیل مطرح نمیکنیم.
پیدا کردن مسیرها سادهتر
محصولات، خدمات و محتوای راهنما در جای مشخصتری قرار گرفتند تا کاربر راحتتر بداند قدم بعدی چیست.
خدمات مهم واضحتر
سرویسهایی مثل طرح تعویض و فروش اقساطی بهجای گمشدن میان محصولات، مسیر و توضیح مستقل دارند.
ظاهر حرفهایتر و یکدستتر
صفحات مختلف از یک زبان بصری مشترک استفاده میکنند تا تجربه سایت منظمتر و حرفهایتر دیده شود.
IA قبل از UI
وقتی سایت هم محصول دارد و هم سرویس، ابتدا باید رابطه مسیرها در معماری مشخص شود و بعد ظاهر آنها طراحی شود.
هر CTA یک هدف دارد
مشاهده محصول، مشاهده شرایط، مشاوره و شروع فرایند نیتهای متفاوتی دارند و نباید همه با یک الگو رفتار کنند.
محتوا بخشی از UX است
راهنمای خرید وقتی در جای مناسب قرار بگیرد از تصمیم کاربر پشتیبانی میکند بدون اینکه مسیر تجاری صفحه را قطع کند.
پرسشهای کلیدی درباره بازطراحی سبحان رایانه
پاسخهای مستقیم برای کاربری که میخواهد بداند در این پروژه چه کاری انجام شده و منطق تصمیمها چه بوده است.
در این پروژه دقیقاً چه چیزی بازطراحی شد؟
چرا قبل از طراحی ظاهر، ساختار سایت را بررسی کردیم؟
تفاوت صفحه محصول با صفحه طرح تعویض چیست؟
آیا پروژه فقط تغییر ظاهر بود؟
برای یک پروژه مشابه از کجا شروع کنیم؟
اگر سایت شما دیگر جوابگوی رشد کسبوکارتان نیست، قبل از بازطراحی با ما صحبت کنید
ممکن است سایت شما به یک ریدیزاین کامل نیاز داشته باشد یا فقط چند اصلاح هدفمند کافی باشد. در گروه نرمافزاری مدیا ابتدا مسئله را بررسی میکنیم و بعد درباره ساختار، تجربه کاربری، طراحی و اجرای مناسب تصمیم میگیریم.