نمای کلی پروژه (Project Overview)
سفیر عقیق یک فروشگاه اینترنتی است که به عرضه و فروش سنگهای قیمتی و نیمهقیمتی به ویژه عقیق میپردازد. این سایت به عنوان یک مرکز تخصصی در زمینه سنگهای زینتی فعالیت میکند و به کاربران این امکان را میدهد تا سنگهایی با کیفیت بالا و اصالت تضمین شده را خریداری کنند. علاوه بر فروش عقیق، محصولاتی همچون حرز، تسبیح و محصولات فرهنگی نیز در این وبسایت به فروش میرسد.
-
طول پروژه
8 هفته
-
اسکرین
+18
-
مخاطب هدف
24 الی 55 سال
-
دستگاه
دسکتاپ و موبایل
-
ابزار
Figma & Maze
مسئله چی بود؟! (Problem Statement)
نسخه قبلی وبسایت سفیرعقیق بر بستر وردپرس (با قالب آماده) پیاده سازی شده بود و این قالب علاوه بر قدیمی بودن طراحی بصری، تجربه کاربری جالبی هم نداشت؛ فلذا با برگزاری جلسات متعدد با ذینفعان قرار بر بازنگری کلی بر رابط و تجربه کاربری و فرآیندها شد تا در دو نسخه علاوه بر یکپارچگی و جذابیت بصری، نرخ تعامل کاربران با سایت نیز افزایش پیدا کند.
- عدم امکان اضافه کردن فیچر فروش قسطی محصولات
- عدم امکان اضافه کردن بخش خیریه عقیق
- عدم وجود فیلتر در محصولات باعث سردرگمی کاربران شده بود
پروسه طراحی (Design Process)
در این مرحله، تمرکز ما بر شناخت کاربران هدف، تعیین اهداف کسب و کار و تعریف معیارهای موفقیت بود. با توجه به محدودیتها و چالشهای موجود، استراتژی طراحی را به گونهای تدوین کردیم که نیازهای کاربر با اهداف سازمان به بهترین شکل ممکن همسو شود. این فرآیند شامل شناسایی نقاط ضعف و قوت، تحلیل رفتار کاربر، و تدوین راهکارهایی برای بهبود تجربه کاربری بود تا به یک طرح نهایی موثر و کارآمد برسیم.
-
کشف مسئلهآنالیز رقبا
(بنچمارک رقبا)
-
تعریف مسئلهپرسونای کاربری
نقشه همدلی
-
ایده پردازیجریان کاربری
کارت سورتینگ
معماری اطلاعات
-
طراحیتست
کارت سورتینگ
کارت سورتینگ
-
تستتست کاربردپذیری
Maze
تست 5 ثانیه
مدت پروژه (Project Timeline)
پرسونای کاربر (User Persona)
با توجه به دیتایی که از طریق پرسشنامه آنلاین در وبسایت بدست آوردیم، توانستیم یک نمونه پرسونای کاربر ایده آل برای وبسایت طراحی کنیم. این پرسونا در رسیدن به بهترین راهحل کمک شایانی به ما کردند تا شناخت بهتر و عمیق تری نسبت به اهداف و مسائل کاربران خود داشته باشیم
نقشه همدلی (Empathy Map)
برای شناخت هر چه بهتر نیازهای کاربر، نقشه همدلی را ترسیم کردیم.
جریان کاربری (UserFlow)
User Flow یا جریان کاربر یک نمایش بصری از مراحل مختلفی است که کاربر از لحظه ورود تا انتهای فرآیند طی میکند. این کار به من کمک میکند تا درک بهتری از نحوه حرکت کاربر در وبسایت، تصمیمات احتمالی او، و تجربه کلیاش از وبسایت داشته باشم.
معماری اطلاعات(Information Architecture)
هدف معماری اطلاعات سازماندهی، ساختاردهی و برچسبگذاری محتوا به شیوهای موثر و پایدار و در نهایت کمک به
کاربران برای یافتن اطلاعات است.
جریان کاربری (UserFlow)
طراحی سیستم فروش قسطی
در طراحی سیستم فروش قسطی برای سفیرعقیق، هدف اصلی ما ارائه روشی بود که مشتریان بتوانند محصولات فرهنگی و مذهبی
مورد نیاز خود را بدون نگرانی از فشار مالی تهیه کنند. این سیستم بهویژه برای آن دسته از کاربران طراحی شده که
ارزشهای فرهنگی و معنوی برایشان اهمیت زیادی دارد و تمایل دارند در عین مدیریت بهتر مالی، از محصولات قسطی
سفیرعقیق استفاده کنند، این فیچر به درخواست کارفرما طراحی و اجرا شد.
طراحی خیریهعقیق
با توجه به درخواست کارفرما این بخش با تمرکز بر ارائه شفاف اطلاعات مربوط به نذریها طراحی شده است. کاربران
میتوانند با اعتماد کامل مبالغ خود را برای هزینههای موکبها و پیادهروی اربعین اهدا کنند.
طراحی فیلتر بهینه
با توجه به ویژگیهای کلی محصولات و نیازهای کارفرما چند نوع فیلتر برای بخش آرشیو محصولات در نظر گرفتیم.
طراحی ریسپانسیو
با توجه به اینکه ما میدانستیم اکثر کاربران ما (بالای 80 درصد) از طریق تلفن همراه خود به وبسایت ما دسترسی
دارند؛ اما متاسفانه تجربه کاربری خوبی ندارد. برای حل این مشکل طراحی نسخه بهینه ریسپانسیو برای وبسایت بود تا
کاربردپذیری اش را بهبود ببخشیم.
تست 5 ثانیه ای(5 Second Test)
هدف معماری اطلاعات سازماندهی، ساختاردهی و برچسبگذاری محتوا به شیوهای موثر و پایدار و در نهایت کمک
به
کاربران برای یافتن اطلاعات است.
- به طرز قابل توجهی اکثر شرکت کنندگان موضوع اصلی صفحه را به درستی شناسایی کردند.
- اکثر شرکت کنندگان عناصر مهمی مانند “عنوانها” و “تصاویر” را به خوبی به خاطر داشتند.
- اکثر شرکتکنندگان بخشهای کلیدی مانند “خیریه عقیق” و “قیمت” را به خاطر داشتند.
این تست در سایت Maze از شرکت کنندگان گرفته شد.
فرصتهایی برای بهبود طرح
-
شرکت کنندگان اندازه متن عنوان ها را بزرگ ارزیابی کرده بودند، بنابراین ما بخش تایپوگرافی طراحی رابط
کاربری خود را به روز کردیم.
چیزهایی که یاد گرفتیم (Learning)
- فرآیند و پروسه طراحی هیچوقت به صورت خطی نیست!
- کاربران میتونند برخی اوقات غیر قابل پیشبینی باشند!
- نیاز کاربران در کنار اهداف و نیازهای کسبوکار بسیار مهم و حائز اهمیت است.
- همکاری بین تیمهای طراحی، توسعه و کسبوکار در رسیدن به نتایج موفق در پروژه بسیار مهم و حائز اهمیت است.
- ارزیابی مداوم محصول بعد از اجرایی شدن، برای تضمین پیوستگی و بهبود آن پس بسیار مهم است.
معماری اطلاعات(Information Architecture)
برای ایجاد یک تجربه کاربری یکپارچه و جذاب در این وبسایت، نیاز بود تا یک استایل گاید دقیق و هماهنگ تدوین
شود. این استایل گاید شامل انتخاب فونتها، رنگها و دیگر عناصر بصری است که به ایجاد هویت بصری متمایز و هماهنگ
کمک میکند. با استفاده از این راهنما، تمام صفحات و بخشهای سایت با همدیگر سازگار خواهند بود و این انسجام
بصری نه تنها تجربه کاربری را بهبود میبخشد، بلکه باعث میشود تا هر گونه تغییر در آینده به سادگی و با
صرفهجویی در زمان انجام شود. استایل گاید همچنین به تیمهای فرانت اند و بک اند کمک میکند تا به راحتی و با
تبعیت از یک الگوی مشخص، روند طراحی و توسعه را پیش ببرند
-
#4BB543
#93D38E
-
#FD3D39
#FD6461
-
#4287F5
#689FF7
#8EB7F9
#B3CFFB
#D9E7FD
-
#00A693
#F7D368
#F9DE8E
#FBE9B3
#FDF4D9
-
#4287F5
#689FF7
#8EB7F9
#B3CFFB
#D9E7FD
Typography
Corners
8px
12px
16px
20px
24px
32px
40px
Gap between Items:
8px
16px
24px
32px
40px
48px
کامپوننتها (Components)
برای ایجاد یک تجربه کاربری یکپارچه و جذاب در این وبسایت، نیاز بود تا یک استایل گاید دقیق و هماهنگ تدوین
شود. این استایل گاید شامل انتخاب فونتها، رنگها و دیگر عناصر بصری است که به ایجاد هویت بصری متمایز و هماهنگ
کمک میکند. با استفاده از این راهنما، تمام صفحات و بخشهای سایت با همدیگر سازگار خواهند بود و این انسجام
بصری نه تنها تجربه کاربری را بهبود میبخشد، بلکه باعث میشود تا هر گونه تغییر در آینده به سادگی و با
صرفهجویی در زمان انجام شود. استایل گاید همچنین به تیمهای فرانت اند و بک اند کمک میکند تا به راحتی و با
تبعیت از یک الگوی مشخص، روند طراحی و توسعه را پیش ببرند
Thank you for scrolling all the way down here!
Visit my portfolio & don’t forget to share it with your friends
