طراحی مجدد سایت باشگاه مشتریان بانک ملت

بانک ملت به موجب مصوبه‌ی مورخ ۲۹ آذر ۱۳۵۸ مجمع عمومی بانک‌ها از ادغام بانک‌‌های تهران، داریوش، بین‌المللی ایران، عمران، بیمه‌ی ایران، ایران و عرب، پارس، اعتبارات تعاونی و توزیع، تجارت خارجی و فرهنگیان در تاریخ ۳۱ تیر ۱۳۵۹ تشکیل و با شماره ۳۸۰۷۷ در اداره‌ی ثبت شرکت‌ها به ثبت رسید و عملیات اجرایی بانک از همان تاریخ آغازشد.

بانک ملت در حال حاضر با سرمایه ۵۰۰۰۰ میلیارد ریال یکی از بزرگ ترین بانک‌های کشور است که درچارچوب دولت جمهوری اسلامی ایران فعالیت می‌کند.

مهم‌ترین راهبردهای بانک ملت توسعه‌ی فناوری اطلاعات و ارتباطات، مدیریت روابط مشتریان، بهبود کیفیت خدمات، توسعه منابع انسانی و بهبود شاخص‌های عملکرد است. برای دستیابی به این راهبردها، اهدافی همچون رشد و بهره‌وری بانک، سوددهی و ارائه خدمات مناسب به مشتریان، شناخت نیازها و دسته‌بندی مشتریان و فرآیندهای مربوط به سود، آموزش‌های استراتژی محور، فن‌آوری نوین بانکی و همسوسازی اهداف فردی، بخشی و سازمانی ترسیم شده‌است.

پروژه طراحی مجدد سایت باشگاه مشتریان بانک ملت به آدرس  http://club.bankmellat.ir توسط تیم DPM در سال ۱۳۹۵ انجام شد و رابط کاربری سایت به صورت کلی طراحی مجدد شد و از شهریور ۱۳۹۵ بصورت رسمی در قسمت باشگاه مشتریان سایت بانک ملت مورد استفاده قرار گرفت.

طرح ابتدایی سایت باشگاه مشتریان بانک ملت

بعد از بررسی نیازهای مشتری و هماهنگی های انجام شده ابتدا پیش طراحی توسط تیم UI/UX ما انجام شد و بعد از چند مرحله با انجام تغییرات و تایید نظر کارشناسان بانک ملت , پلتفورم نهایی سایت رونمایی شد.

در ادامه میتوانید نمونه طرح انجام شده را ببینید که مورد تایید نهایی قرار نگرفت و مجددا تغییراتی در آن داده شد.

تکنولوژی های به کار رفته در این پروژه :

HTML 5

 HTML5 یا زبان نشانه‌گذاری ابرمتنی۵ یا اچ‌تی‌ام‌ال۵ (به انگلیسی: Hyper Text Markup Language5 یا HTML5) زبانی برای ساختن و ارائهٔ محتوا برای شبکه جهانی وب است، این پنجمین تجدید نظر از استاندارد اچ‌تی‌ام‌ال است (در سال ۱۹۹۰ ایجاد و در سال ۱۹۹۷ به عنوان HTML4 استاندارد شده‌است) و تاکنون همچنان در دست توسعه‌است. اهداف اصلی اچ‌تی‌ام‌ال۵ بهبود این زبان به صورتی است که از جدیدترین فناوری‌های چند رسانه‌ای پشتیبانی کند در حالی که هم به راحتی توسط انسان‌ها قابل خواندن باشد وهم به طور مداوم توسط رایانه‌ها و دستگاه‌ها (مرورگرهای وب، تجزیه کننده‌ها و غیره) قابل درک باشد. اچ‌تی‌ام‌ال۵ در نظر دارد نه تنها HTML4 بلکه XHTML۱ و ۲HTML را نیز پشتیبانی کند.

CSS 3

سی اس اس زبان نشانه ‎گذاری تحت وب است که برای توصیف ظاهر یک وب‎ سایت برای مرورگر استفاده می‎ شود. CSS از سه حرف اول کلمات cascading style sheet تشکیل شده است؛ CSS3 در واقع آخرین نسخه CSS است که دارای قابلیت ‎هایی فراتر از دو نسل اول است. CSS3 به خاطر ساختار ماژولارش، به توسعه‎ دهندگان وب این امکان را می ‎دهد که صفحات وب با محتوای غنی که نیاز به کد سبک‎تری دارند، ایجاد کنند. این یعنی ایجاد ظاهری خیال انگیز، واسط‎ های کاربری بهتر و لود سریعتر وب ‎سایت به‏ کمک عملکرد‎ هایی که برای طراحان وب تقریبا غیر ممکن بود تا بتوانند بدون استفاده از jQuery و  Photoshop  آنها را خلق نمایند. ویژگی هایی نظیر سایه دار کردن متن، منحنی کردن لبه های کادرها، استفاده از چند تصویر پس زمینه به عنوان بک گراند، ایجاد افکت های حرکتی بر روی عناصر صفحه تنها بخشی از قابلیت های منحصر بفرد سی اس اس ۳ است.

TWEEN MAX

یکی از بهترین تکنیک های ایجاد افکت و انیمیشن سازی برای سایت است و از یک لایبریری جاوا اسکریپت تشکیل شده است

jQuery

جِی‌کوئری(به انگلیسی: jQuery) یک کتابخانه جاوا اسکریپت سبک‌وزنِ چند مرورگری است که برای ساده سازیِ نوشتنِ اسکریپ‌هایِ سمت-مشتری، دراچ تی ام‌ال(به انگلیسی: HTML) طراحی شده و امروزه محبوب‌ترین کتابخانهٔ جاوااسکریپتِ در حال استفاده است.

جی کوئری نرم‌افزار بازمتن و رایگان است که تحت دو پروانه “GPL” و “MIT” منتشر می‌شود.دستور زبان جِی‌کوئری به گونه‌ای طراحی شده است که عملِ هدایت به پرونده را آسان‌تر کرده باشد. می‌توان با آن حرکات انیمیشین ایجاد و از رویدادهای صفحه استفاده کرد و به وسیله آن می‌توان نرم‌افزارهای مبتنی بر ای‌جکس(به انگلیسی: Ajax) را ایجاد و توسعه داد.

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

 RequireJS

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

Canvas

عنصر HTML Canvas  به منظور کشیدن گرافیک، از طریق برنامه نویسی (معمولا جاوا اسکریپت) استفاده می شود. این عنصر تنها یک ظرف برای گرافیک است. شما باید از کدنویسی برای رسم واقعی اشکال استفاده نمایید.

Canvas چندین متد برای رسم مسیر، جعبه، دایره، متن، و اضافه کردن تصاویر دارد.

SVG

SVG مخفف کلمه Scalable Vector Graphics (گرافیک برداری مقیاس پذیر) میباشد و برای تعریف گرافیک در وب سایت استفاده می شود.

تگ SVG که در HTML5 معرفی شده است، ظرفی برای گرافیک SVG است.

SVG دارای چندین متد برای رسم مسیر، جعبه، دایره، متن، و اضافه کردن تصاویر می باشد.

 زمان انجام پروژه به مدت ۱۲ هفته یا ۳ماه بوده است که از این زمان ۱ ماه برای امور طراحی رابط کاربری و  گرافیک و مدت ۲ ماه هم برای کدنویسی آن صرف شده است.

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