הסבר על קונספט פיתוח חדשני באמצעות דמויים אינטראקטיביים
לקוח
FlyCode
תעשייה
כלי מפתחים / SaaS
שירותים
עיצוב אתרים, פיתוח ב-Framer, דמויים אינטראקטיביים, והצגת אינטגרציות
ארסנל טכנולוגי
פריימר, רכיבי קוד מותאמים אישית, מערכת ניהול תוכן (CMS)
שנה
2023
כיצד AGR Studio עיצבו ב-Framer את אתר השיווק של FlyCode, הכולל דמו אינטראקטיבי והצגת אינטגרציות, כדי להציג קטגוריה חדשה של כלי מפתח.
FlyCode created a new category in developer tooling: managing UI copy and feature flags through a visual interface that non-developers can use. The concept was powerful but unfamiliar, developers are naturally skeptical of tools that abstract away code control, and product managers didn't know this solution category existed.
The website needed to accomplish something difficult: explain a novel concept clearly enough that two very different audiences (developers and product managers) both immediately understand the value proposition and feel confident enough to try it.
אתגר יצירת קטגוריה חדשה
כשאתם יוצרים קטגוריית מוצרים חדשה, אי אפשר להסתמך על השוואה ("אנחנו כמו X רק טובים יותר"). אתם חייבים להתחיל מהבעיה, לא מהפתרון. בנינו את כל הנרטיב סביב נקודות הכאב ששני קהלי היעד חווים מדי יום: מפתחים המתוסכלים מבקשות בלתי פוסקות לשינויי טקסט בממשק המשתמש (UI), ומנהלי מוצר המתוסכלים מצווארי בקבוק של פיתוח על שינויי תוכן פשוטים.
ארכיטקטורת המידע עוקבת אחר רצף שכנוע מוגדר: זיהוי הבעיה ← הצגת הפתרון ← איך זה עובד ← הוכחת אינטגרציה ← הוכחה חברתית ← קריאה לפעולה להתנסות (CTA). כל שלב נשען על קודמו, ומבטיח שלעולם לא נרוץ קדימה להצגת תכונות המוצר לפני שהבעיה מבוססת במלואה.
עיצוב קהל-יעד כפול
השפה החזותית מגשרת בין עולמות המפתחים ועולמות המוצר. אלמנטים בסגנון קוד (גופני monospace, צביעת סינטקס, ממשק משתמש דמוי ترמינל) מייצרים לגיטימיות טכנולוגית, בעוד שפריסות נקיות, צילום חם וקופירייטינג נגיש מונעים מהאתר להרגיש מרתיע עבור מבקרים שאינם טכנולוגיים.
הדגמות אינטראקטיביות הן לב העיצוב: המבקרים יכולים לראות סימולציה חיה של חווית העריכה, ולצפות כיצד שינוי טקסט בממשק של FlyCode משתקף באופן מיידי בממשק אפליקציה מדומה. האינטראקציה היחידה הזו מעבירה את הצעת הערך המרכזית בצורה יעילה יותר מכל הסבר כתוב.
תצוגת אינטגרציות
אינטגרציות הן קריטיות לאימוץ של כלי פיתוח. בנינו ספריית אינטגרציות הניתנת לסינון כאוסף CMS פנימי, כאשר כל אינטגרציה מציגה את שלבי ההגדרה, קטעי קוד ומידע על תאימות. הספרייה בנויה עם סימון סכמה (schema markup) לטובת קידום אורגני (SEO), ומכוונת לביטויי חיפוש זנב ארוך (long-tail) כגון "ניהול פיצ'ר פלאגס ב-React ללא פריסת קוד".
תהליך ההצטרפות (onboarding) מהאתר למוצר הוא לחלוטין seamless: התחברות באמצעות GitHub OAuth, זיהוי מאגרים (repositories) אוטומטי, ואשף הגדרה מודרך שמביא מפתחים משלב ההרשמה לעריכה ראשונה בפחות מ-5 דקות. ה-CTA באתר מוביל ישירות לתהליך זה תוך שמירה על הקשר (context) המוגדר מראש.
u05d4u05d2u05d3u05e8u05ea u05e7u05d2u05d8u05d5u05e8u05d9u05d4 u05d7u05d3u05e9u05d3u05e9u05d4
u05d4u05d0u05eau05e8 u05d4u05e6u05dcu05d9u05d7 u05dcu05d4u05d7u05d3u05d9u05e8 u05e7u05d5u05e0u05e1u05e4u05d8 u05d7u05d3u05e9 u05dcu05e9u05d5u05e7 u05d4u05deu05e4u05eau05d7u05d9u05dd. u05dbu05deu05d5u05ea u05d4u05d4u05e8u05e9u05deu05d5u05ea u05dcu05d2u05e8u05e1u05ea u05d4u05e0u05e1u05d9u05d5u05df u05deu05eau05d5u05da u05d4u05d3u05deu05d5 u05d4u05d0u05d9u05e0u05d8u05eactiveu05d9 u05e2u05d1u05e8u05d4 u05d0u05ea u05d4u05e1u05e3 u05d4u05deu05e7u05d5u05d1u05dc u05d1u05d4u05e9u05e7u05d5u05ea u05dbu05dcu05d9 u05e4u05d9u05eau05d5u05d7, u05d5u05d0u05d9u05e9u05e8u05d4 u05e9u05d4u05e6u05d2u05d4 u05d5u05d9u05d6u05d5u05d0u05dcu05d9u05ea u05e2u05d5u05d1u05d3u05ea u05d4u05e1u05d1u05e8u05d5u05ea u05e4u05d7u05d5u05ea u05d8u05d1u05d5u05ea u05dbu05e9u05deu05d3u05d5u05d1u05e8 u05d1u05deu05d5u05e5 u05d8u05dbu05e0u05d5u05dcu05d5u05d2u05d9. u05d0u05d9u05e0u05d3u05e7u05e1 u05d4u05d0u05d9u05e0u05d8u05d2u05e8u05e6u05d9u05d5u05ea u05d4u05e4u05da u05dcu05e0u05dbu05e1 u05d4-SEO u05d4u05d7u05d6u05e7 u05d1u05d9u05d5u05eau05e8 u05e9u05dc u05d4u05d0u05eau05e8u05d1u05dbu05da u05e9u05dbu05d1u05e9 u05eau05e0u05d5u05e2u05d4 u05d0u05d5u05e8u05d2u05e0u05d9u05ea u05e9u05dc u05deu05e4u05eau05d7u05d9u05dd u05e9u05d7u05d9u05e4u05e9u05d5 u05e4u05eau05e8u05d5u05e0u05d5u05ea u05d1u05d3u05d9u05d5u05e7 u05dcu05d1u05e2u05d9u05d5u05ea u05e9-FlyCode u05e4u05d5u05eau05e8u05ea.
סימולציה בזמן אמת
דמויים אינטראקטיביים
פחות מ-5 דקות
הרשמה ל-First Edit
5 שבועות
ציר זמן
