تولد دیجی‌کالای جدید؛ از تغییر تکنولوژی تا تغییر طراحی به زبان ساده

۱۹ بهمن ۱۴۰۰ | ۱۲:۱۵ ۵ اسفند ۱۴۰۰ زمان مورد نیاز برای مطالعه: ۴ دقیقه
وب‌سایت جدید دیجی‌کالا

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

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

بیشتر کسب‌وکارهای فعال در دنیای دیجیتال بعد از سال‌ها، متوجه می‌شوند که به تکنولوژی‌های جدیدتر نیاز دارند که باید آنها را به بکار گرفت؛ چون هر چیزی حتی در دنیای برنامه‌نویسی هم تاریخ انقضا دارد و بالاخره روزی به پایان می‌رسد. برای ما هم دوران قدیمی وب‌سایت دیجی‌کالا به پایان رسیده بود و حالا وقت آن بود تا همزمان با تولدش، از نسخه جدیدتر آن رونمایی کنیم.

هرچند تغییرات سایت جدید دیجی‌کالا ممکن است که برای کاربران حرفه‌ای و علاقه‌مندان به تکنولوژی شفاف و قابل درک باشد، اما با توجه به اینکه نتیجه این تغییرات در دسترس همه مخاطب‌ها قرار گرفته، در ادامه به زبان ساده تو‌ضیح می‌دهیم که دقیقا چه اتفاقی افتاده و چرا ما در دیجی‌کالا دست به این تغییر زده‌ایم؟

بازنویسی سایت دیجی‌کالا با استفاده از کتابخانه ری‌اکت

بازنویسی جدید سایت دیجی‌کالا، چه تغییر در تکنولوژی و چه پیاده‌سازی بهبودهایی در طراحی آن، بیشتر از هرچیز به دلیل نیازهای مشترک کسب‌وکار دیجی‌کالا و کاربران این پلتفرم انجام شده است. یکی از مهم‌ترین چالش‌هایی که ما در تیم تکنولوژی دیجی‌کالا با آن روبه‌رو هستیم، بازدیدهای بسیار زیاد کاربران و حضور همزمان آن‌ها در پلتفرم به ویژه در زمان برگزاری کمپین‌ها و جشنواره‌های بزرگ است. به همین دلیل باید توانایی خود را از نظر فنی برای پاسخگویی بهتر به این حجم از کاربران را افزایش می‌دادیم.

در نتیجه با هدف رفع این چالش و البته بهبود تجربه کاربری و عملکرد وب‌سایت دیجی‌کالا، نسخه وب را بازنویسی کردیم که تاثیر این بازنویسی به خوبی در موارد زیر خود را نشان می‌دهد:

  • عملکرد بهتر پلتفرم در کمپین‌ها و جشنواره های فروش
  • افزایش سرعت توسعه رابط کاربری
  • افزایش سرعت لودینگ پلتفرم و انتقال سریع‌تر بین صفحات

بازنویسی دوباره سایت دیجی‌کالا با توجه به محدودیت‌های سمت تکنولوژیِ قدیمی‌شده سایت دیجی‌کالا، امری اجتناب‌ناپذیر بود. به همین دلیل و در مسیر ایجاد بستری قابل توسعه‌تر و بهبود‌های فنی، با تغییر تکنولوژی و بازنویسی وب‌سایت دیجی‌کالا از کتابخانه ری‌اکت (React) استفاده کردیم. به این ترتیب با کمک رابط‌های کاربری که به صورت کامپوننت نوشته شده‌اند می‌توانیم به سادگی، سرعت و مقیاس‌پذیری رابط کاربری در وب‌سایت دیجی‌کالا کمک کنیم. لازم به توضیح است که کامپوننت‌ها ابزارهایی هستند که برای پیشگیری از نوشتن کدهای اضافی در دنیای برنامه‌نویسی استفاده می‌شوند.

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

دیجی‌کالای جدید با تغییرات ظاهری در طراحی

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

لازم به توضیح است که هدف اصلی این پروژه، بازنویسی سایت دیجی‌کالا و تغییر تکنولوژی آن با هدف بهبود عملکرد بوده است و نه باز طراحی وب‌سایت. اما ما از این فرصت برای باز طراحی مجدد بعضی از صفحات و اصلاح رابط کاربری هم چشم‌پوشی نکردیم. چون یکی از مهم‌ترین اهدافی که در پروژه بازنویسی دیجی‌کالا دنبال کردیم، ایجاد یکپارچگی شکل و ظاهر در اپلیکیشن و وب‌‌سایت دیجی‌کالا با هدف اثرگذاری مثبت در تجربه کاربری بود.

پس در کنار تغییر تکنولوژی، به تغییراتی در طراحی هم پرداختیم و با کمک کامپوننت‌های مشترک توانستیم هماهنگی کل وب‌سایت با اپلیکیشن را افزایش دهیم که روی تجربه کاربران هم تاثیر مثبتی می‌گذارد.

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

در دیجی‌کالا هیچ مرزی وجود ندارد

دیجی‌کالا حالا یک وب‌سایت جدید با تکنولوژی مدرن است. بیشتر از ۲۰ نفر در تیم‌های مختلف واحد تکنولوژی دیجی‌کالا به مدت ۱۰ ماه برای اجرای این پروژه تلاش کرده‌اند. پروژه‌ای که نه تنها خودش تحول بزرگی است، بلکه می‌تواند زمینه‌ساز تغییرهای بیشتر در آینده دیجی‌کالا هم باشد. چون این پروژه به عنوان یک ابزار به کمک زیرساخت دیجی‌کالا آمده تا تغییرات آینده پلتفرم دیجی‌کالا هم بر همین اساس پیش برود.

ما دیجی‌کالای جدید را همزمان با تولد ۱۵ سالگی‌اش، رونمایی کردیم تا یادآور این باشد که برای تولد ایده‌های نو تلاش می‌کنیم. چون برای ما در دیجی‌کالا هیچ مرزی وجود ندارد.

دیدگاه شما

۳۳ دیدگاه
  1. Avatar علی

    تو دسکتاپ خوبه ولی تو موبایل خیلی کند و لگ داره بخصوص تو گوشی های ۲۰۱۹ به قبل که اندروید ۸ یا ۷ به پایین دارن

  2. Avatar علی حبیبی

    سلام و خداقوت من یکی از مشتریان دائم دیجی کالا هستم وحدودا تا چند هفته قبل هیچ مشگلی در خرید و انتخاب و بررسی و مقایسه و….. نداشتم و تمام موارد بسیار روان بود ولی با تغییر نرم افزار دیگر امکان دریافت سایت شما برای من بکلی از بین رفت تا آنکه از دو روز پیش سایت بصورت ناقص بالا می آید.
    بنظر می آید که سایت جدید کامل نیست و بایستی حد اقل دارای کارایی قبل باشد. با این شرایط فعلی افرادی مثل اینجانب امکان استفاده از این سایت ارزشمند را نخواهند داشت .
    خواهشمند است هر چه زودتر مشکل حل شده تا امکان سفارش ایجاد گردد.( شماره تلفن همراه من نزد شما مشخص بوده تا چنانچه نیاز به اطلاعات بیشتر باشد- اشکال عدم و نقص دریافت – بهتر به شما انتقال داده شود.)
    با تشکر و موفق باشید

  3. Avatar امیر

    سلام و درود فراوان خدمت کلیه کارکنان زحمتکش و باکلاس دیجی کالا برای من این سوال که چرا سراشتباه پرسنل که جنس برچسب پلمپ ضمانت پاره و حتی داخل کارتن از چند جا پاره ارسال کرده ومن هم همون لحظه که دستم رسیده گزارش دادم کامل و مرجوع کردم و خیلی زنگ زدم خیلی ایمیل زدم ولی تا به این لحظه متاسفانه به پولم نرسیدم شماره سفارش ۲۳۳۱۹۲۲۶۰ مرجوعی سردوش سوبان ۱۴۰۰/۰۸/۳۰ممنون میشم رسیدگی کنین باتشکر

  4. Avatar اردی

    تغییر جدید دیجیکالا از نظر فنی متاسفانه بسیار بد است. سرعت مرور صفحات به شدت کند شده و رابط کاربری با اشکال همراه است و هر صفحه جدید فقط به تنهایی ۵۰۰ مگابایت از حافظه سیستم را اشغال می‌کند.

  5. Avatar امیر

    تو دسکتاپ بهتر ولی تو موبایل دیوایس کندتر.

  6. Avatar J

    عجیبه ولی عکس بعضی کالاها (تعدادی خیلی کمی) لود نمیشه یا به سختی لود میشه. کش رو هم پاک کردم ولی فرقی نکرد. همینطور بخش پرسش ها یک گزینه بود که میشد پرسش های خودمون رو ببینیم الآن دیگه نیست. همینطور سایز منوها و کل رابط کاربری بزرگ شده و سایز نوشته ها کوچیک. اون نسبتی که بهش عادت کرده بودیم از بین رفته.

  7. Avatar زهرا

    سلام.امکانش هست قسمت کد تخفیف های تولد دیجی کالا رو تمدید کنین؟

  8. Avatar سمیر

    با سلام

    ممنون که همیشه به فکر مشتریان و کاربران خود هستید، ارائه UI , UX جدید رو تبریک میگم.
    اجازه میخوام که چند انتقاد (امیدوارم سازنده) داشته باشم:
    استفاده از تکنولوژی های جدید در زمینه نرم افزار همیشه خوب نیست البته اگه با ارائه یک نسخه که به خوبی نسخه قبل بلکه بهتر کار نکنه (اصطلاحا ارائه نسخه جدید تولید باگ کنه).
    react خیلی خوبه (البته همه نرم افزارهای توسعه در جای خود خیلی خوب هستند) ولی مهمتر از بستر نرم افزار و انتخاب پلتفرم (یا به گفته بعضی ها زبان برنامه نویسی) ؛ نحوه صحیح استفاده از آن مهم است.
    من نمیخوام درگیر مباحث فنی بشم فقط به عنوان کاربر و مشتری چندین ساله نرم افزار های شرکت نوآوران فن‌آوازه (مخصوصا فروشگاه آنلاین دیجی‌کالا) تجربه کاربری خودم رو بعد از استفاده از طراحی جدید بگم:
    – خیلی وقت ها تصاویر لود نمیشه حتی با زدن F5 یا حتی با زدن Ctrl+F5
    – قسمت فیلترها بعضی از موارد رو به خوبی نسخه قبلی نمیاره.
    – اتولودر صفحات باید قبل رسیدن به انتهای صفحه عملیات fetch رو شروع کنه ولی متاسفانه این طور نیست.
    – خیلی جاها طراحی یا شاید پیاده سازی خیلی حرفه ای نیست مثل همین textarea که در حال تایپ کردن هستم.
    – و خیلی از موارد دیگه که من سرسری از اون ها میگذرم چون میدونم خود شما هم اگه دپارتمان تست داشته باشید احتمالا بهتون ارجاع دادند
    – و …

    البته که سرعت اینترنت من عالیه.

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

    با احترام

  9. Avatar آیدین

    وضعیت گوگل پیج اسپید رو چک کردین؟
    بعد از ده ماه تلاش ۲۰ نفره امتیاز سئو برای موبایل شده ۸ از ۱۰۰ عالیه
    تو این تاریخ البته

  10. Avatar حسین

    من حس میکنم سایت سنگین تر شده و کندتر شده

  11. Avatar امین

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

  12. Avatar m

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

  13. Avatar m

    کاربران حرفه ای این تغییرات را میپسندند؟؟؟
    تا تعریف شما از کاربر حرفه ای چی باشه!
    تیم تکنولوژی دیجی کالا اگه از عملکرد غلط خودشون دفاع نکنن چیکار کنن؟ بایدم دفاع کنید چون حقوق نمیدن بهتون اگه قبول کنید خراب کردید

  14. Avatar آرمان

    کاش یه گزینه ی تم شب (دارک) هم بذارید.
    واقعا برا امثال من شدیدا آزار دهنده هستش که با نور سفید صفحات رو نگا کنه.

  15. Avatar امیر

    سلام لطفاً به صورت فنی هم این مقاله رو بنویسید تا بیشتر جزییات پروژه رو بدونیم
    در تغییر گذشته دیجیکالا رویداد برگزار شد
    این یکی خبری نیست ازش

  16. Avatar علی

    خواهشا در لیست مورد علاقه ها آیکون هر کالا را کوچکتر کنید کلی باید اسکرول کرد تا به کالای مورد نظر رسید ضمنا قبلا که لیست ها در صفحات جداگانه بود سریعتر جستجو میشد الان باید منتظر بود تا لیست لود بشه تا به فرض به کالا صفحه ۷ رسید

  17. Avatar امیر

    در طراحی جدید امکان جستجو در زیر شاخه ها حذف شده و باعث شده پیدا کردن بعضی کالا ها خیلی زمان بر یا غیر ممکن بشه اگر امکانش هست قسمت جستجو رو بهبود بدین خیلی موثره

  18. Avatar حسین

    صفحه اول احتیاج به تغییر داره ،

    دیجی کالا هدفش فروش کالا هست، ایکون های پروداکت های دیگه زیر مجموعه در پیشونی کار چرا باید باشه؟ احتمال داره بخواین پروداکت های دیگرو بیارین بالا ولی اینکار ضربه میزنه ب اصل کار ،پیشنهادم ادغام ویژگی ها هست تا معرض نمایش گذاشتن پروداکت های دیگه با این همه وضوح ، مثل پیندو تنیده بشه پروداکت های دیگه بهتره و ادغام خوبی انجام شده برای پیندو ، ولی بازم جای کار داره

    آرزوی بهترین ها

    1. Avatar حسن

      احسنت

  19. Avatar محمد رضا

    سلام
    برای بک اند php رو کنار گذاشتید و از nodejs استفاده میکنید؟

    1. Avatar مهرداد

      نخیر، از ssr استفاده می کنن.

    2. Avatar بهراد

      ظاهرا از Node.js استفاده کردن.

  20. Avatar مهدی

    میشه در مورد dynamic rendering هم یه مقاله بدید؟

    1. Avatar مسلم

      از مجنتو کوچ کردن و الان روی وردپرس پیاده سازی کردن … واقعا با اون حجم از محتوا و محصول واقعا ریسک خیلی بالایی داشته …

  21. Avatar mahan

    متاسفانه طراحی ظاهری سایت دسکتاپ اصلا راحت و خوب نیست.کالا ها به صورت ۵ تایی کنار هم چیده شدن که باعث شلوغی زیاد شده.یه نکته مهم اینکه قابلیت زوم عکس ها برداشته شده که مشکل جدی هست.فونت ها بیش از حد بزرگ شده لطفا اصلاح کنید.

  22. Avatar علی

    برای من که دیجی کالای تحت وب کند شده در این طراحی جدید.
    اون علامت لودینگ که جلوی دسترسی به صفحه رو میگیره هم به شدت روی اعصابه!

  23. Avatar saeid_biologist

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

  24. Avatar mahan

    متاسفانه طراحی ظاهری جدید دیجی کالا دسکتاپ اصلا خوب نیست. چیدمان کالا ها به صورت ۵ تایی و تنگ شده.در بخش عکس ها قابلیت زوم برداشته شده است و فونت ها بیش از حد بزرگ شده.لطفا اصلاح کنید

  25. Avatar hosein

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

  26. Avatar زاکربزرگ

    تمرکز رو گذاشتین که بگین سرعت بیشتر شده ولی نشده. کافیه از webpagetest و gtmetrix چک کنید. با لایت هاوس و کور وب ویتال چک کنید. چطور می گید سریع تر شده در صورتی که بسیار سنگین تر و کند تر شده!

  27. Avatar علی

    در طراحی جدید به دلایل مختلف اسکرول کردن صفحات زیاد شده

  28. Avatar علی

    در طراحی پیشین در بخش دیدگاه ها (همون نظرات کاربران) اگر کاربری کالایی را از فروشگاه X خریده بود با کلیک روی نام اون فروشگاه میشد سایر کالاها و امتیازات اون فروشگاه را دید ولی این مورد الان نیست

  29. Avatar علی

    با طراحی جدید به مشکلات زیادی برخوردیم به عنوان مثال در بخش تاریخچه سفارشات بیشتر از ۱۰۰ صفحه قابل جستجو نیست و به تاریخچه خریدهای قبلی دسترسی وجود ندارد یا مثلا در لیست مورد علاقه ها با توجه به بزرگ شدن قسمت مربوط هر کالا عملا سرعت جستجو پایین اومده و باید منتظر لود عکسها بود (ضمنا باید کلی اسکرول کرد تا به کالاهای بعدی رسید) قبلا با توجه به طراحی فشرده تر این صفحه مورد علاقه ها سرعت بازبینی کالاهای مورد علاقه بالاتر بود یا در بخش تاریخچه سفارشات اگر روی کالایی کلیک میشد مستقیم پیج اون کالا باز میشد ولی در طراحی فعلی با کلیک روی عکس کالا مجددا جزئیات سفارش باز میشود .. در کل از لحاظ طراحی ظاهری بنظرم طرح قبلی بهتر بود