קפה ג'ו
E-COMMERCE · UX/UI · 2024-2025אתר ספציאלטי לקפה איכותי עם 3 קטגוריות עיקריות: קפסולות, פולים, ומכונות. עיצוב מחדש של חוויית הקנייה — מ-discovery ועד checkout — תוך שמירה על תחושה פרמיום ומכירות B2B במקביל.
30 שניות, אם אתה ממהר.
אתר קפה עם 3 קטגוריות (קפסולות, פולים, מכונות) + ערוץ B2B. הסיכון: navigation מבולבל, חוויית קנייה לא ברורה, ושני קהלים שונים (בית + עסקים) שמתחרים על אותו עמוד הבית.
מחקר שוק והבנת ההיררכיה הוויזואלית של מתחרים, יצירת מערכת באנרים מודולרית לכל קטגוריה, עיצוב כרטיסי מוצר עם נתוני טעם ויזואליים (חוזק/גוף/חמיצות), והפרדה ברורה בין ה-flow של לקוח פרטי ל-B2B.
3 באנרים ראשיים בעמוד הבית — אחד לכל קטגוריה. עמוד מוצר מפורט עם profile flavor wheel. סקשן B2B נפרד עם CTA למסעדות ובתי קפה. בלוג חינוכי מובנה (מדריכים לקפסולות, סוגי משקאות).
איך הופכים קפה לחוויית קנייה.
הלקוח רצה אתר שלא רק "מוכר קפה" — אלא חינוך טעם, סיפור מותג, ומסלול לעסקים. כל החלטה עיצובית נגזרה מהבנת השלוש שכבות הללו.
מהמתחרים אל ההיררכיה
שלב ראשון היה ניתוח מתחרים מקומיים ובינלאומיים בתחום הספציאלטי — Nespresso, Blue Bottle, ערומה. ראיתי דפוס: כל אחד מהם מציב באנר אחד מרכזי בעמוד הבית עם המסר "המוצר החדש". זה עובד למותגים שיש להם 1-2 שורות מוצר. אבל ל-Joe יש 3 שונות — ולקוחות שמחפשים פולים לא מתעניינים בקפסולות, ולהפך.
הפתרון: 3 באנרים בעמוד הבית, אחד לכל שכבת קוני (פולים / קפסולות / מכונות). כל באנר עם "כניסה ישירה" לקטגוריה. במקום fold יחיד עם תוכן כללי — fold ראשון שמסנן את הקהל מיד.
בנוסף, B2B הוא קהל שונה לחלוטין. הם לא קונים 10 קפסולות — הם קונים מבחר רחב לבית קפה. עיצבתי סקשן נפרד "קפה לעסקים, בתי קפה ומסעדות" עם CTA נפרד וטון שונה לחלוטין: לא "קנה עכשיו" אלא "צור קשר לקבלת הצעה".
מבחינת אבחון user flow, מיפיתי 3 משימות עיקריות: (1) "אני רוצה קפסולה ספציפית" → באנר → קטלוג קפסולות → סינון → PDP. (2) "אני רוצה ללמוד על קפה" → בלוג → מאמרים. (3) "אני בית קפה" → סקשן B2B → טופס יצירת קשר.
חום-קפה ופלטת טעם
בחירת הצבעים יצאה מהזהות הקיימת של Joe — חום, נחושת ולבן. אבל החום הקיים היה כבד מדי. הקלתי אותו לכיוון חום-בז׳ חמים שיוצר תחושה של "סלון בית קפה" ולא "אתר ישראלי כבד".
החדשנות העיצובית הגדולה היתה ה-Flavor Profile של כל קפה: 3 פסי progress (חוזק / גוף / חמיצות) שמופיעים בכל כרטיס מוצר. זה מאפשר ללקוח להחליט בלי לקרוא 5 שורות תיאור — סריקה ויזואלית של 2 שניות.
הטיפוגרפיה היא Heebo במשקלים 800/600 לכותרות ו-400 לתיאורים. הכותרות חזקות ומסחריות — "מכונת קפסולות Deluxe לבנה" — כי במסחר אלקטרוני, הכותרת חייבת להגיד מיד מה זה.
הקלפים ב-PDP בנויים בהיררכיה: תמונה גדולה של הקפסולה → שם מסחרי → flavor wheel → תיאור קצר → כפתור הוספה לעגלה. הכל ב-fold אחד — בלי גלילה. החלטה זו הגדילה את ה-conversion ב-PDP.
המוצר עצמו.
עמוד הבית — 3 באנרים, 3 קהלים
קפסולות / פולים / מכונות. כל באנר עם CTA נפרד לקטגוריה. מתחתיהם — "המוצר הבולט החודש" ובלוק B2B ייעודי לבתי קפה ומסעדות.
גריד מוצרים + מבצעים
כרטיסי מוצר עם Flavor Profile — 3 פסי progress (חוזק/גוף/חמיצות). סריקה ויזואלית של 2 שניות במקום קריאת 5 שורות תיאור.
דף קטגוריה — קפסולות קפה
24 SKU עם סינונים לפי טעם, חוזק, מחיר ומארז. כל קפסולה עם תמונה, שם, ו-Flavor Profile — החלטת קנייה בשנייה.
PDP — מכונת Deluxe
תמונה גדולה, שם מסחרי, Flavor Profile ויזואלי, תיאור קצר, CTA חזק — הכל ב-fold אחד. עלייה ב-conversion rate.
בלוג חינוכי + Footer
12 מאמרים על סוגי קפה, מדריך קפסולות, והיסטוריה — מתפקדים גם כ-SEO וגם כחינוך לקוח לפני קנייה.
איך ניגשנו לפרויקט.
העקרונות שהובילו אותי
3 באנרים, 3 קהלים
במקום באנר ראשי אחד — שלושה. כל אחד לקטגוריה: קפסולות, פולים, מכונות. הסינון מתחיל מהשנייה הראשונה.
Flavor Profile ויזואלי
3 פסי progress (חוזק/גוף/חמיצות) בכל כרטיס מוצר. סריקה של 2 שניות במקום קריאת 5 שורות.
B2B כסיפור נפרד
סקשן ייעודי לבתי קפה ומסעדות — טון שונה, CTA "צור קשר" במקום "קנה עכשיו".
בלוג חינוכי
מאמרים על "קפסולות לפי טעם", "מקיאטו vs לאטה", "צריכת קפה" — מתפקדים גם כ-SEO וגם כחינוך לקוח לפני קנייה.
תהליך עבודה
תהליך מקיף שכלל מחקר משתמשים, הגדרת אסטרטגיה, יצירת מערכת עיצוב מקיפה, פיתוח ויישום סופי.
מה נמסר ללקוח.
עמוד הבית
3 באנרים ראשיים + מוצרים מומלצים + סקשן B2B + הבלוג. ניווט מסונן לפי קהל יעד.
דפי מוצר (PDP)
24 דפים — 8 קפסולות, 12 סוגי פולים, 4 מכונות. כל אחד עם flavor profile וגלריה.
דפי קטגוריה
3 קטגוריות ראשיות עם סינונים: לפי טעם, חוזק, מחיר, מארז.
אזור עסקי
דף ייעודי + טופס יצירת קשר + מחירון מותאם. נפרד לחלוטין מה-flow הצרכני.
בלוג חינוכי
12 מאמרים: מדריך קפסולות, סוגי משקאות, היסטוריית קפה. מובנה ל-SEO.
גרסת מובייל
כל המסכים מותאמים — 65% מהמשתמשים גולשים מהטלפון.