ELEVATE · PROJECTS

כל פיקסל כאן הוא החלטה

זו לא גלריית תמונות יפות. כל כרטיס כאן לוקח אלמנט אחד מתוך אתר אמיתי שבנינו, ומראה את שלושת הדברים שאף אחד לא רואה מבחוץ: מה הייתה הבעיה, מה החלטנו לעשות, ולמה זה עובד מבחינה שיווקית. הצצה לתהליך ה־UI/UX שלנו, מבפנים.

01פרויקט
08החלטות מפורקות
∞שעות על הפרטים

(01) · JOB POWER HR

ג'וב פאוור גיוס והשמת משאבי אנוש · חדרה · מאז 2010

לקוח: Job Power HR
תחום: גיוס והשמת משאבי אנוש
מה עשינו: אסטרטגיה · UX/UI · פיתוח · נגישות · SEO · שתי שפות
איך זה בנוי: HTML, CSS ו־JavaScript. GSAP ו־Lenis. בלי מערכת ניהול, בלי תבנית.
אתר חי: jobpower.co.il ↗

THE BRIEF

לחברה יש שם מצוין בחדרה ובעמק חפר, ואתר משנת 2010 שלא סיפר את זה. באותו עמוד ישבו שני קהלים שונים לגמרי, מחפשי עבודה ומעסיקים, וכל אחד מהם רצה משהו אחר לגמרי. כל מה שלמטה הוא הדרך שבה פתרנו את זה, החלטה אחרי החלטה.

נקודת הפתיחה

אותו עסק, שני עשורים

הבעיה

האתר הקודם עלה ב־2010 ונשאר שם. עמוד יחיד בנוי על טבלאות, תפריט גרפי, תמונת סטוק, בלי גרסה לנייד ובלי שום דבר שאומר שהחברה הזאת רצינית. העסק עצמו התקדם חמש עשרה שנה קדימה. האתר לא זז.

הלוגיקה השיווקית

אתר של חברת השמה כמעט אף פעם לא הדבר הראשון שרואים. הוא נפתח אחרי שמישהו כבר שמע עליכם, בדרך כלל בטלפון. הוא לא הפרסום, הוא ההוכחה. כשהוא נראה ישן הוא סותר בשקט את כל מה שהממליץ הרגע אמר עליכם.

האתר הישן של ג'וב פאוור, צילום משנת 2018 — האתר הישן צולם מארכיון האינטרנט. לחצו על הכרטיס כדי להפוך אותו.

האתר החדש של ג'וב פאוור, 2026 — האתר הישן צולם מארכיון האינטרנט. לחצו על הכרטיס כדי להפוך אותו.

המסך הראשון

שלושה שדות, שני חתכים

הבעיה

לאתר יש שני קהלים שרוצים דברים הפוכים. מחפש עבודה רוצה לשלוח קורות חיים. מעסיק רוצה לקבל מועמדים על השולחן. עמוד שמנסה לדבר לשניהם באותו משפט לא מדבר לאף אחד מהם.

ההחלטה

חילקנו את המסך הראשון לשלושה שדות על שני חתכים אלכסוניים. הסגול, צבע המותג, מחזיק את המרכז ואת רוב המסך. שני הצדדים הם רצועות דקות שנושאות רק תווית וכותרת. מושיטים יד לאחת מהן והיא נפתחת: הטקסט והכפתור נפרשים, החתך מחליק, והסגול מתקפל לרצועה.

הלוגיקה השיווקית

ככה העמוד אומר קודם כל מי הוא, ועונה על "מה אתם צריכים" רק כשמושיטים אליו יד. מפריד אנכי היה נקרא כמו טבלה של שתי עמודות שוות. אלכסון מחייב את העמוד לכיוון, ונותן לעין לאן לנסוע.

ג'וב פאוור גיוס והשמת משאבי אנוש · חדרה

מגייסים עובדים העובד הנכון, בלי חודשים של חיפוש מאגר שמתעדכן מדי יום, מיון ואבחון מקצועי, ומועמדים מסוננים אצלכם על השולחן. לאיתור עובדים

מחפשים עבודה המשרה הבאה כבר במאגר שולחים קורות חיים, ואנחנו מתאימים אתכם למשרה שבאמת מתאימה, בליווי אישי עד היום הראשון. לשליחת קורות חיים

העבירו עכבר על אחד הצדדים הקישו על אחד הצדדים

המנגנון האמיתי, נבנה כאן מחדש כדי שתוכלו לשחק בו.

הרעיון האחד

במקום להצהיר, להראות

הבעיה

בגרסה הראשונה כל סקשן אמר בדיוק את אותו משפט: תווית ממוספרת, כותרת, תת־כותרת, גריד. שש פעמים ברצף, שתיים מהן גריד של שישה אריחים זהים. זה מה שנקרא בסיסי. לא הצבעים, לא הגופן.

ההחלטה

בנינו סקשן אחד שהוא הרעיון של האתר. שני זרמים נעים בכיוונים הפוכים, מועמדים בזרם אחד ומשרות בשני, והגלילה שלכם היא מה שגורר אותם זה על פני זה. הזוג שחוצה את קו האמצע ננעל יחד ומדליק אותו.

הלוגיקה השיווקית

זו העבודה של החברה בתור מנגנון, לא בתור טענה. אף אחד לא באמת מאמין למשפט "אנחנו מתאימים בין אנשים למשרות", כי כל חברה בענף כותבת אותו. כולם מאמינים למשהו שקורה מול העיניים שלהם, בקצב שהם שולטים בו.

מועמדים

מהנדס תוכנה7 שנות ניסיון מנהלת חשבונותסוג 3 טכנאי אחזקהמוסמך רכזת גיוסאקדמאית חשמלאי מוסמךרישיון הנדסאי מזכירה רפואיתדוברת 3 שפות

מפעל תעשייהחדרה משרד רו״חפרדס חנה מרכז לוגיסטיקיסריה חברת סטארטאפהרצליה בית מלוןנתניה מרפאה פרטיתחדרה

משרות פתוחות

גללו את העמוד. הזרמים נעים לבד, והגלילה מאיצה אותם.

צבע

צבע הוא שילוט, לא קישוט

ההחלטה

הפלטה נשארת במשפחה אחת. פוקסיה בצד אחד, אינדיגו בשני, והסגול של המותג ביניהם. בלי כחול, בלי טורקיז, בלי צבע "מדגיש" שנכנס בגלל שהיה חסר משהו.

הלוגיקה השיווקית

שני המסלולים מובחנים לפי צבע עוד לפני שקוראים מילה אחת. ברגע שהעין למדה שהצד הפוקסיה שייך למחפשי עבודה, היא כבר לא צריכה לקרוא את התווית הזאת שוב בשום מקום אחר באתר. זה חוסך לקורא עבודה בכל גלילה.

העבירו עכבר להתקרב

#C9B8FFv5 #A78BFAv4 #8B5CF6v3 #6D3FF0v2 #4321A0v1 #06050Dbg

חמישה גוונים של אותה משפחה, ורקע אחד. כל האתר בנוי מזה.

כפתורים

חומר, לא סגנון

ההחלטה

לכפתורים יש שפה משלהם: קצה מבריק בשוליים העליונים, נקודת אור שנמשכת מלמעלה, קצה כהה בצד המרוחק, וטשטוש שמרים ומרווה את הווידאו שעובר מאחור.

הלוגיקה השיווקית

הרדיוס הוא חלק מהחומר, לא העדפה עיצובית. לפינה של שתי נקודות אין עובי שאור יכול להישבר בתוכו. כל שאר האתר כמעט מרובע, והכפתורים הם המקום היחיד שבו השפה נשברת, כי הם הדבר היחיד בעמוד שאמור להיראות כמו משהו שלוחצים עליו.

הרקע זז מאחור בכוונה. חומר נמדד לפי מה שעובר מתחתיו.

מובייל

בטלפון אין ריחוף

הבעיה

כל מצבי הריחוף פשוט לא קרו בטלפון. כרטיסי השירותים, היתרונות, שורות הקשר וקיר ההמלצות היו שטוחים לגמרי שם, וזה בדיוק המקום שבו רוב המבקרים נמצאים.

ההחלטה

להפוך אותם למטרות נגיעה היה שגוי, כי רובם קישורים ונגיעה בהם מנווטת. במקום זה, כל אלמנט נדלק כשהוא חוצה פס דק מעט מעל אמצע המסך. הגלילה עצמה היא הסמן.

הלוגיקה השיווקית

רוב הפניות מגיעות מהטלפון. אתר שכל החיים שלו נמצאים במצבי ריחוף הוא אתר שרוב הלקוחות שלכם רואים כשהוא כבוי.

היתרון של ג'וב פאוור

חיסכון בזמן ובכסףבלי סינון מועמדים ובלי מודעות דרושים.

מועמדים מתאימיםאיתור מקצועי במינימום זמן תגובה.

טיפול אישיליווי צמוד לשני הצדדים לאורך התהליך.

מאגר מתעדכן יומימאגר גדול ואיכותי לכל תחום.

משוב תקופתיבודקים שביעות רצון לאורך זמן.

ניסיון של 15+ שנהמאז 2010, בענפים מגוונים.

גללו בתוך המסך. בדיוק כרטיס אחד דולק, זה שחוצה את הפס.

ביצועים

מה שלא נטען, לא מאט

הבעיה

שלושה דברים ירדו לדפדפן לפני שהעמוד יכול היה לסיים להיטען, ואף אחד מהם לא היה צריך להיות שם.

ההחלטה

הלוגו היה קובץ מאסטר של 2826 על 2311 פיקסלים, והוא הדבר הראשון שנצבע על המסך. שום מקום באתר לא מציג אותו גדול מ־170 פיקסלים. ספריית הווידאו שוקלת יותר מכל שאר הקוד ביחד, והיא פוליפיל שספארי ואייפון הורידו ומעולם לא קראו לו. היום היא נטענת רק אם הדפדפן באמת לא יודע לנגן את הסטרים לבד, ורק אחרי הצביעה הראשונה.

הלוגיקה השיווקית

אתר של חברת השמה נפתח בטלפון, ברחוב, על חבילת גלישה. שנייה של טעינה היא לא נתון טכני, היא אנשים שלא הגיעו לטופס.

לוגו

288KB 57KB

hls.light.js

296KB לפי דרישה

527KB ירדו מהטעינה הראשונה

כל מספר כאן נמדד לפני ואחרי, לא הוערך.

שפות ונגישות

עברית ורוסית, לא חצי תרגום

ההחלטה

157 מפתחות תרגום. כל מחרוזת בעמוד, כולל ההמלצות ותוסף הנגישות. העברית נשארת מקור האמת ונשארת בתוך ה־HTML, וקובץ השפה נושא רק את מה שמתרחק ממנה, כך שחזרה לעברית מחזירה את המקור ולא עותק שני שלו שיכול להיסחף.

הלוגיקה השיווקית

בחדרה ובעמק חפר יש קהל דובר רוסית גדול, גם בצד המועמדים וגם בצד המעסיקים. תרגום חלקי גרוע מכלום, כי הוא אומר "חשבנו עליכם עד חצי הדרך".

נגישות

האתר מונגש לפי תקן ישראלי 5568 ולפי WCAG 2.1 ברמה AA, עם תפריט נגישות מלא: גודל טקסט, ניגודיות, הדגשת קישורים, גופן קריא ועצירת אנימציות. גם כפתור השפה עצמו מציג את השפה שאליה עוברים, כי דגל או שם השפה הנוכחית שניהם נקראים כמו "אתם כאן".

הגרסה העברית של האתר, פריסה מימין לשמאל — אותו עמוד, שני כיווני קריאה. שימו לב שהכול מתהפך, לא רק הטקסט.

הגרסה הרוסית של האתר, פריסה משמאל לימין — אותו עמוד, שני כיווני קריאה. שימו לב שהכול מתהפך, לא רק הטקסט.

(03) · RESULT

ככה זה נראה כשיש תהליך

כל אחת מההחלטות למעלה נראית קטנה כשהיא לבד. ביחד הן ההבדל בין אתר שנראה טוב לאתר שעובד: כזה שאומר מי אתם בשנייה הראשונה, מוביל כל קהל למקום שלו, נטען מהר בטלפון ברחוב, ומדבר בשפה של הלקוח. זה מה שאנחנו עושים בכל פרויקט.

לאתר החי של ג'וב פאוור ↗ רוצים כזה? דברו איתנו →