המשימה והאנשים
היעדים העסקיים, האנשים שישתמשו במוצר והמשימות שעליהם לבצע. יחד נגדיר את סדרי העדיפויות ואת היקף הגרסה הבאה.
תוצאה: מסמך אפיון מוצר, סדרי עדיפויות והשערות.
שירותיםעיצוב מוצר
עיצוב מוצר
עבודה שמתחילה לפני המסכים: המשימה, קהל היעד, מודל המוצר, התרחישים המרכזיים וממשק הליבה. SKARR.PRO מוסיף השערות שנבדקו ומודלים חלופיים של המוצר.
לפני המסכים.
המוצר עצמו.
ייתכן שאתם מתחילים מרעיון, משפרים מוצר קיים או בונים תכונה חדשה. אנחנו הופכים את נקודת המוצא למודל מוצר, לממשק ליבה, ואם כך סוכם — גם לקוד פעיל.
משאלה פתוחה
למוצר פעיל.
חשיבה על המוצר, עיצוב הממשק ופיתוח נשארים מחוברים. ההחלטות שנקבל יחד ימשיכו ללוות את התוכנה שבה אנשים משתמשים.
נסכם את היקף העבודה בתחילתה, נבחן יחד החלטות מרכזיות ונבדוק מחדש הנחות כשהעבודה מגלה דברים חדשים.
אם המוצר כבר מוגדר וזקוק למסכים, למסלולים ולמצבים שלו, כדאי לבדוק את עיצוב UX/UI.
על מה נעבוד
יחד איתכם.
כל חלק הופך שאלה פתוחה להחלטה שאפשר לבנות עליה.
מודל המוצר והתרחישים המרכזיים
מהו המוצר, כיצד הוא יוצר ערך ואילו מסלולים חשובים ביותר. נארגן את המידע שאנשים צריכים בכל שלב ואת ההחלטות שהם מקבלים בדרך.
תוצאה: מסלולי משתמשים והבסיס המבני של המוצר.
ממשק הליבה
המסכים שבהם המוצר מספק את ערכו: האופי החזותי וההיררכיה שלהם, והמצבים הנלווים לכל פעולה. ב-SKARR.PRO בודקים השערות ומודלים חלופיים באמצעות אבות־טיפוס לפני שמתחייבים לכיוון.
תוצאה: ממשק ליבה שסוכם במסכים אמיתיים.
המערכת שסביבו
רכיבים, טיפוגרפיה והתנהגויות שמתחברים לכל אורך המוצר. SKARR כולל את הליבה; SKARR.PRO מרחיב את המערכת כדי לתמוך בתכונות עתידיות.
תוצאה: מערכת עיצוב בהיקף שהמוצר צריך.
לקוד, אם כך סוכם
אפשר לעצב את הליבה ישירות ב-React: כאב־טיפוס אינטראקטיבי לבדיקת תרחישים, או כממשק פעיל עם ההתנהגות שסוכמה. Figma אינו שלב ביניים הכרחי.
תוצאה: אב־טיפוס אינטראקטיבי ב-React או ממשק React פעיל, בהתאם להיקף העבודה שסוכם.
מבט רחב יותר.
צעד הבא ברור יותר.
משימה מהירה בנייד וסביבת עבודה של צוות דורשות דרכים שונות לארגון המידע.
אפליקציית בריאות.
סטטוס, פרטים ופעולות במבנה אחד.
באפליקציות אינטרנט ובלוחות בקרה, אנחנו מרכזים סטטוס, פרטים ופעולות במבנה ברור אחד. הצוות רואה מה דורש תשומת לב, פותח את ההקשר ומקדם את העבודה.
קונספט חזותי עם נתונים לדוגמה עבור מוצר שנמצא בתהליך פיתוח. אפליקציית הבנקאות למעלה מציגה את אותה חשיבה במסך קטן.
לצפייה בתהליך העבודהמבנה מוצר.
ליבה שאפשר לבנות עליה.
תקבלו מודל מוצר ברור, את התרחישים המרכזיים ואת ממשק הליבה: כקובצי עיצוב או, אם כך סוכם, כאב־טיפוס אינטראקטיבי ב-React או כממשק React פעיל.
איטרציות נוספות, מערכת עיצוב רחבה יותר ופיתוח של תכונות נוספות יסוכמו כשלב הבא.
כך מתנהל
תהליך העבודה.
ארבעה שלבים, שבסוף כל אחד מהם מתקבלת החלטה שאפשר לבנות עליה.
01
ניתוח ומחקר
נבחן את העסק, את האנשים ואת ההקשר שבו נעשה שימוש במוצר: ניתוח עסקי וניתוח מוצר, מחקר משתמשים, השוואת מתחרים וביקורת מוצר — לפי השאלות החשובות. התוצאה היא מסמך אפיון מוצר, סדרי עדיפויות והשערות.
02
מבנה ואבות־טיפוס
ארכיטקטורת מידע, ניווט, היררכיית תוכן ומסלולי משתמשים. אבות־טיפוס מאפשרים לנו לבחון את התרחישים המרכזיים ואת ההיגיון שמאחורי האינטראקציות החשובות לפני העיצוב המפורט. ב-SKARR.PRO בונים אבות־טיפוס למודלים חלופיים של המוצר ומשווים ביניהם.
03
קונספט חזותי וממשק הליבה
נבדוק כיצד המוצר צריך להיראות, להרגיש ולהתנהג, נציג את הכיוון במסכים מייצגים ונפתח את ממשק הליבה עם תוכן מציאותי, גדלי מסך שונים והמצבים הנלווים לכל פעולה.
04
פיתוח, בדיקה ומסירה
אם הפיתוח נכלל בהסכם, נפתח את היקף העבודה ב-React, נבדוק את המסלולים והמצבים המרכזיים ונשווה את הפיתוח לעיצוב. תקבלו את הקבצים, קוד המקור והערות ההתקנה שסוכמו.
בחרו את עומק העבודה
שהמוצר שלכם צריך.
שתי האפשרויות כוללות עבודה חודשית על המוצר. בטבלה מפורט מה כוללת כל רמת עבודה.
| מאפיין |
SKARR
מסכים בעיצוב אישי. שפה חזותית משלכם.
$7,000 / לחודש
לכל חודש עבודה
רכישת SKARR
תשלום מאובטח באמצעות Stripe |
SKARR.PRO
יותר עומק ותשומת לב לפרטים לאורך כל החוויה, בכל נקודת מגע.
$12,000 / לחודש
לכל חודש עבודה
רכישת SKARR.PRO
תשלום מאובטח באמצעות Stripe |
|---|---|---|
| על מה עובדים | ||
| נקודת התחלה | נקודת התחלה מוצר עם כיוון ברור. המשימה, קהל היעד והיקף הגרסה הבאה מוגדרים יחד. | נקודת התחלה מוצר שהמודל שלו עדיין פתוח. בוחנים כמה כיוונים לפני שמתחייבים לאחד מהם. |
| מודל המוצר והתרחישים | מודל המוצר והתרחישים מודל מוצר אחד והתרחישים המרכזיים הדרושים לו. | מודל המוצר והתרחישים השוואה בין מודלים חלופיים של המוצר, ובחינת התרחישים המרכזיים עבור המודל שנבחר. |
| ממשק הליבה | ממשק הליבה מסכי הליבה, המעוצבים עם ההיררכיה, המצבים והאופי החזותי שלהם. | ממשק הליבה מסכי הליבה, עם השערות שנבדקות באמצעות אבות־טיפוס לפני העיצוב המפורט. |
| עומק העבודה | ||
| מחקר | מחקר ניתוח עסקי וניתוח מוצר, מחקר משתמשים וביקורת מוצר, לפי השאלות החשובות. | מחקר אותם מחקרים, בתוספת השוואת מתחרים ומחקרים נוספים כשנדרשת תשובה לשאלות פתוחות. |
| מערכת עיצוב | מערכת עיצוב רכיבים, טיפוגרפיה והתנהגויות עבור ממשק הליבה. | מערכת עיצוב מערכת מורחבת, המוכנה לתמוך בתכונות עתידיות. |
| איטרציות | איטרציות החלטות מרכזיות נבדקות יחד בכל שלב. | איטרציות איטרציות נוספות על המודל, התרחישים ופרטי הממשק. |
| עבודה משותפת | ||
| עבודה חודשית | עבודה חודשית עבודה על המוצר במהלך החודש. היקף העבודה והתוצרים המיועדים יסוכמו לפני תחילתה. | עבודה חודשית עבודה על המוצר במהלך החודש ברמת העומק שנבחרה. היקף העבודה והתוצרים המיועדים יסוכמו לפני תחילתה. |
| עיצוב בקוד | עיצוב בקוד הליבה כקובצי עיצוב או, אם כך סוכם, כאב־טיפוס אינטראקטיבי ב-React. | עיצוב בקוד הליבה כקובצי עיצוב, כאב־טיפוס אינטראקטיבי ב-React או כממשק React פעיל, בהתאם לסיכום. |
| מה תקבלו | מה תקבלו מסמך אפיון המוצר, מסלולי המשתמשים, ממשק הליבה וחומרי המסירה שסוכמו. | מה תקבלו אותם התוצרים, בתוספת ההשערות שנבדקו, המודלים שהושוו והמערכת המורחבת. |
לפני
שמתחילים.
האם אנחנו צריכים קובצי Figma, או שאפשר לעצב את המוצר בקוד?
אפשר לעשות את שניהם. אפשר לעצב את הליבה ב-Figma או ישירות ב-React כאב-טיפוס אינטראקטיבי. בתחילת הדרך נסכם על הפורמט, בהתאם לאופן שבו הצוות שלכם יבחן את העבודה וימשיך בה.
במה זה שונה מעיצוב UX/UI?
עיצוב UX/UI מתבצע בתוך מוצר שכבר הוגדר: המסכים, הזרימות והמצבים שלו. עיצוב מוצר מתחיל מוקדם יותר, במשימה, בקהל ובמודל המוצר, ומהם מעצב את ממשק הליבה.
האם עיצוב מוצר כולל פיתוח?
אפשר לממש את הליבה ב-React, בהתאם למה שסוכם: כאב-טיפוס אינטראקטיבי או כממשק עובד. פיתוח מלא של האפליקציה, צד שרת ואינטגרציות מוגדרים כהיקף נפרד.
האם זה מחליף מחקר שוק?
לא. אנחנו מנתחים את העסק, את האנשים ואת ההקשר שבו נעשה שימוש במוצר, כדי לקבל החלטות לגביו. מחקר שוק פורמלי אינו חלק מהעבודה הזו.
מה קורה אחרי החודש?
נבחן יחד את התוצאות ונסכם על הצעד הבא: איטרציות נוספות, מערכת רחבה יותר או פיתוח של תכונות נוספות.
עדיין יש לכם שאלות?
דיון על המוצר שלכם