פינטק · אתר מותג ומוצר
קא-צ׳ינג
נאובנק לצעירים שרוב הקהל שלו בורח מהמילה "בנק". בניתי מסע גלילה תלת-ממדי שמוכר את התחושה לפני המוצר — ואז נוחת על מהות, עם ארבעה מוצרים ברורים ומחיר.
מוצר פיננסי לצעירים נמצא בעמדת פתיחה גרועה: הקהל שלו כבר החליט שהנושא משעמם עוד לפני שנחת על העמוד. אתר בנק רגיל — מסך כחול, גרף עולה, זוג מחייך מול מחשב — מאשר להם את ההחלטה. קא-צ׳ינג הוא נאובנק קונספט, והבריף היה להפוך את הרגע הראשון לחוויה שאי אפשר לגלול ממנה בשוויון נפש: מסע תלת-ממדי שבו הגלילה עצמה היא הדבר שמחזיק, והמותג נבנה מהתחושה ולא מרשימת יתרונות.
המטרהשמישהו שברח מכל אתר בנק שראה בחייו יגלול עד הסוף — ובסוף גם יודע מה לעשות.
האתגר
ראווה לבדה לא מספיקה. משוב חיצוני על הגרסה הראשונה סימן בדיוק את הפער: "חוויית הגלילה מטורפת" — ומיד אחריו, "יותר מדי גדילה מגניבה, פחות מדי מידע פונקציונלי". המשתמש נהנה ולא ידע מה לעשות. האתגר האמיתי היה למצוא את נקודת האיזון: לשמור על המסע שגורם לאנשים להישאר, ולתת לו נחיתה — רגע שבו החוויה נעצרת ואומרת בפשטות מה המוצר, כמה הוא עולה ומה הצעד הבא.
הרעיון
מסע במקום עמוד
הגלילה מזיזה את המבקר בתוך סצנה תלת-ממדית — אובייקטים מתקרבים, חולפים ונשארים מאחור. זה לא אפקט על עמוד; זה מבנה העמוד.
מסקוט במקום אייקון
מטבע שקל עם משקפי שמש מוביל את המסע. דמות אחת עושה למותג הפיננסי מה ששום גרף לא עושה — היא נזכרת.
ליים על סגול
סגול עמוק כרקע וליים חשמלי כאקצנט. פלטה שנמצאת רחוק ככל האפשר מהכחול הבנקאי, ועדיין קריאה ונגישה.
נחיתה על מהות
אחרי המסע — ארבעה כרטיסי מוצר לבנים ונקיים על הרקע הכהה, עם מחיר התחלה ומשפט אחד לכל אחד. הראווה מובילה למידע, לא מחליפה אותו.
מבט מהאתר
”חוויה שמחזיקה אנשים היא חצי עבודה. החצי השני הוא לדעת מתי לעצור אותה ולהגיד להם מה לעשות.“
החלטות עיצוב מרכזיות
הסרת אפקט הפנס
היה אפקט תאורה שעוקב אחרי העכבר על כרטיסי המוצר. הוא היה מהנה — ובדיוק הוא מה שהמשוב סימן כ"משחקיות עודפת". הסרתי אותו כדי שהכרטיסים ייקראו כמידע.
כרטיסים לבנים על כהה
אחרי מסע סגול ארוך, לבן נקי הוא עצירה ויזואלית. פס צבע עליון לכל כרטיס נותן הבחנה בין המוצרים בלי להוסיף רעש.
חלון קריאה ארוך יותר
הטקסטים במסע נעלמו מהר מדי בגלילה. הרחבתי את חלון הקריאה כמעט פי שניים — התנועה נשמרה, אבל אפשר לקרוא בלי לעצור.
גובה נעול במובייל
סרגל הכתובת בנייד משנה את גובה החלון בכל שינוי כיוון גלילה, והסצנה קפצה. נעלתי את הגובה כך שרק שינוי רוחב מרענן אותו.
איך זה נבנה
- שלב 01
מיצוב ושפה
הגדרתי את קא-צ׳ינג כהיפוך של בנק — "הכסף שלכם, בלי שיעמום" — ומשם נגזרו הסגול, הליים, המסקוט והטון.
- שלב 02
מנוע הגלילה
בניתי מנוע עומק שממפה את מיקום הגלילה לציר Z של הסצנה, עם Lenis לגלילה חלקה ו-GSAP לתזמון. כל האובייקטים חיים על אותו ציר.
- שלב 03
נכסים ומסקוט
סט איורים מלא — מסקוט בכמה תנוחות, מטבעות, כרטיס, קופת חיסכון — כולם WebP מוקטנים ל-720px, כ-30% הפחתת משקל.
- שלב 04
משוב ותיקון
המשוב החיצוני הוביל לשלושה תיקונים: זמן טעינה, חלון קריאה, ורגע נחיתה. שני הראשונים טכניים; השלישי שינה את מבנה העמוד.
התוצאה
- אתר פיננסי שאנשים גוללים עד הסוף — המשוב החיצוני על חוויית הגלילה במובייל היה "מטורפת".
- מסע ראווה שנוחת על מהות: ארבעה מוצרים, מחיר התחלה וצעד הבא ברור.
- ירידה של כ-30% במשקל התמונות הכבדות, שקיצרה את הטעינה בסלולר חלש.
- שבעה עמודים, RTL מלא, הצהרת נגישות ומדיניות פרטיות — לא רק עמוד ראווה אחד.
מה כלול בפרויקט
- מיצוב ושפת מותג
- שפה ויזואלית (צבע, טיפוגרפיה, מסקוט)
- קופירייטינג בעברית
- עיצוב ובניית 7 עמודים
- מנוע גלילה תלת-ממדי מותאם אישית
- RTL מלא, רספונסיביות ונגישות