CodePay
FINTECH · B2B · SAAS · 2024מערכת תשלומים B2B לניהול תקציבים, הכנסות ושכר. Dashboard מלא עם overview פיננסי, ניהול לקוחות, קופונים, דוחות ומלאי — הכל ב-UI אחד מקצועי.
30 שניות, אם אתה ממהר.
קיבלתי 5 מסכי UX בסיסיים (מ-Codesigner) לניהול תשלומים עסקיים. המשימה: לתרגם אותם ל-UI מקצועי, נקי ושמיש — כולל עיצוב Brand מאפס, בחירת צבעים, ועיצוב פרטי פרטים.
ניתוח ה-UX הקיים → זיהוי בעיות hierarchy → ארגון מחדש של המידע לפי Gestalt principles → בחירת orange+blue → עיצוב כל מסך מ-0.
Dashboard B2B מלא: overview תקציבי עם donut chart, טבלת עסקאות עם סינון, ניהול לקוחות ומוצרים, מערכת קופונים, דוחות, ומעקב מלאי/משלוחים.
לקחת UX בסיסי ולהפוך אותו ל-UI שמרגיש כמו מוצר אמיתי.
ב-CodePay קיבלתי משהו שקורה הרבה בעולם האמיתי: UX שמישהו אחר תכנן, ואני צריך לקחת אותו הלאה. זה לא "free canvas" — זה אחריות כפולה: לכבד את ה-UX שנמסר, ולהוסיף ערך UI אמיתי.
מ-UX Skeleton ל-UI מלא
ה-UX שקיבלתי היה functional אבל flat — מבנה נכון, אבל בלי היררכיה ויזואלית. הבעיה המרכזית: Dashboard עם המון נתונים שנראה כמו גיליון Excel. המשתמש B2B שנכנס לראות "מצב העסק" לא צריך לפענח — הוא צריך להבין ב-3 שניות.
יישמתי Gestalt Principles בכל מסך: Law of Proximity (נתונים קשורים צמודים), Law of Similarity (כל ה-KPIs עם אותו card style), Law of Figure-Ground (הנתונים הקריטיים בולטים על רקע ניטרלי). כל עיצוב החלטה היתה מוצדקת פסיכולוגית.
ה-Donut Chart לתקציב חודשי (₪22,500) הוא המרכז הויזואלי של ה-Dashboard. עיצבתי אותו כ-hero element — גדול, צבעוני, ומיידי. מסביבו: 4 KPI cards, טבלת עסקאות, ומיני-chart של הכנסות. Eye flow טבעי: chart → KPIs → טבלה.
הוספתי sidebar navigation עם icons ברורים לכל מודול: Dashboard, Clients, Products, Coupons, Reports, Inventory, Deliveries. 7 מודולים — sidebar מארגן אותם בלי לגרום לתחושת overwhelm.
כתום + כחול = אנרגיה ואמון
הבחירה בכתום היתה מחושבת. B2B Finance נוטה ל-boring כחול. כתום מביא אנרגיה, חיות, ותחושה של "הכסף שלך בתנועה". הוא משדר growth — בדיוק מה שבעל עסק רוצה לראות ב-Dashboard שלו.
הכחול משלים את הכתום עם אמינות ויציבות. Accent כחול לפעולות שניוניות, כתום לפעולות ראשיות (CTA, highlight עיקרי). הטבלאות ניטרליות (אפור בהיר) כדי שהנתונים יבלטו, לא ה-UI.
הטיפוגרפיה: Heebo Bold 700 לכל ה-KPI numbers (₪22,500 גדול = מיידי). Regular 400 לתיאורים ולטקסט עזר. Monospace לספרות בטבלאות — כדי שהיישור הורטיקלי יהיה מושלם.
מהווירפריים לעיצוב הסופי.
מ-Sketch אפור לממשק צבעוני ומוכן לפיתוח.
מסכי תשלום
סקירה כללית
המוצר עצמו.
Dashboard ראשי — B2B Financial Overview
Donut Chart: ₪22,500 מתוך ₪154,000 תקציב שנתי (14.6%). Bar chart ניכויים חודשיים (02/21–01/22). טבלת עסקאות עם סטטוסים (אושר / בוטל / דיווח). Mini-widgets: 4 עסקאות אחרונות + ₪22,500. Sidebar: 12 מודולים.
UX Wireframes — לפני ה-UI
5 מסכי Wireframe (skeleton UX) שהיוו את הבסיס לעיצוב ה-UI. ה-wireframes הגדירו את ה-IA: Dashboard → Receipts → Templates → Colors → Coupons. קיבלתי UX שלד ושיפרתי hierarchy, flow, ואת כל ה-visual system.
כל מסכי ה-UI — Design System Complete
Set מלא של מסכי UI: Receipts Templates (grid בחירת עיצוב), Color Customizer (24 אפשרויות צבע + Preview), Coupons Management (טבלה + filters + pagination). כל מסך נבנה כחלק ממערכת עקבית עם orange+blue Design System.
Overview — כל ה-Deliverables
View מלא של כל Deliverables הפרויקט: Main Dashboard, 4 מסכי Receipts (list, templates, colors, detail), Coupons Management, Reports, Inventory — כולם בפלטה אחת. Orange (#F59E0B) + Blue + White. תהליך UX→UI שלם מ-wireframe ל-product מוגמר.
איך ניגשנו לפרויקט.
העקרונות שהובילו אותי
Gestalt בכל החלטה
Proximity, Similarity, Figure-Ground — כל element מיוצב על-פי חוקי פסיכולוגיה חזותית, לא "כי זה נראה טוב".
Eye Flow מכוון
Donut Chart → KPIs → טבלה. המשתמש רואה "מצב כללי" → "פרטים" → "עסקאות". סדר קריאה מתוכנן.
כתום = Growth
B2B Finance בדרך כלל boring. כתום משדר אנרגיה ו-momentum — בעל העסק מרגיש שהכסף שלו בתנועה.
UX מוכתב → UI מוסיף ערך
קיבלתי skeleton UX, הוספתי hierarchy, Brand, ומערכת צבעים מלאה. הסיפור של "כיצד UI הופך UX ל-Product".
תהליך עבודה
תהליך מקיף שכלל מחקר משתמשים, הגדרת אסטרטגיה, יצירת מערכת עיצוב מקיפה, פיתוח ויישום סופי.
מה נמסר ללקוח.
Main Dashboard
Donut chart + 4 KPIs + טבלת עסקאות + mini-chart. Overview מיידי.
7 מודולים
Clients, Products, Coupons, Reports, Inventory, Deliveries — כולם ב-sidebar.
Brand System
כתום + כחול + אפור. Typography hierarchy. מערכת צבעים מלאה לפי Gestalt.