כל הגרסאות המפורטות

03 / 03

sidurofe

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

Creative Labs · UI/UXפרוטוטייפדמו פרטיאפיון מוצרבנייה בעזרת AI

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

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

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

החלק שלי בפרויקט
אפיון, לוגו ואנימציית פתיחה, וניהול הבנייה בעזרת Claude Code.
תחום
Creative Labs · UI/UX
מצב המוצר
פרוטוטייפ · דמו פרטי

01

איפה זה עומד

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

  1. רעיון
  2. ויירפריים עובד
  3. עיצוב ויזואלי
  4. צד שרת לייצור
  5. ניסוי מבוקר
  6. בשימוש שוטף

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

עובד היום

  • שלושה תפקידים עם התחברות אמיתית: רופא, אחמ״ש ואדמין

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

  • דרישת איוש לכל שעה, עם רצפות התמחות ששומרות מקומות

    הזמינות נקבעת ברמת המשמרת בלבד; שיוך ליומן ולתור וירטואלי הוא תכנון לאדמין ואינו משפיע על הזמינות.

  • אפליקציית רופא למובייל: משמרות פתוחות, הסידור שלי, החלפות וזמינות לתגבור

  • הפרדת מידע בשרת: רופא אינו מקבל שמות של רופאים אחרים

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

  • החלפות עם שש בדיקות לפני אישור

    לכל בדיקה מדיניות: חוסמת או אזהרה בלבד.

  • ביטול הפעולה האחרונה, והתראות על שינויי משמרת בחלון זמן שאפשר להגדיר

  • ערכת Figma מוכנה: טוקנים, רכיבים ומדריך בנייה

נדרש כדי שיהיה fully functional

  • עיצוב ויזואלי ב-Figma, לפי ערכת הטוקנים והרכיביםעיצוב

    שבעה שלדי מסך מרכזיים; השאר מורכבים מהם. הוויירפריים נשאר המפרט האינטראקטיבי לצד Figma.

  • שכבת נתונים לייצור: טבלאות רלציוניות במקום מסמך אחדפיתוח

    היום תחום הרופאים נשמר כמסמך JSON אחד שמנוהל ב-reducer — מספיק לאב־טיפוס. המודל כבר מוגדר, וצריך לנרמל אותו.

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

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

  • התראות אמיתיות לרופאים בדוא״ל, וקובץ אקסל שנוצר באמתפיתוח

    היום הדוא״ל מדומה, והייצוא לאקסל הוא תצוגה מלאה (עמודות, פורמט, פיצול לפי שיוך) בלי קובץ.

  • אירוח עם אחסון קבוע, גיבוי ויומן ביקורתמערכות מידע

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

  • שש שאלות מוצר פתוחותהנהלה

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

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

02

מכאב אל מוצר

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

  1. הכאב

    שירות שפועל סביב השעון, ושיבוץ שנעשה בעבודת יד

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

  2. הגישה

    לא מציירים מסכים — בונים ויירפריים שעובד

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

  3. האמת

    היחידה האמיתית היא רופא־שעה

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

  4. הכללים

    דרישה לכל שעה, ורצפות שמורות מקום

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

  5. השרת

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

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

  6. המיתוג

    לוגו, אנימציית פתיחה וערכת עיצוב

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

  7. היום

    ויירפריים עובד, ממתין לעיצוב ולהחלטות

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

03

איך המערכת עובדת

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

רצפת התמחות שומרת מקומות. בדוגמה של 10 מקומות עם מינימום 2 רופאי ילדים: ברגע ש-8 רופאי משפחה נרשמו, המקומות שנותרו מוצעים רק לרופאי ילדים, ולרופא שהרצפה שלו עוד לא התמלאה תמיד שמור מקום.

  1. כניסה

    דרישה לשעה

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

  2. שלב

    זמינות

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

  3. שלב

    הרשמה

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

  4. שלב

    שיוך פנימי

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

  5. שלב

    החלפה

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

    • התאמת התמחותבדיקה 1

    • מכסת שעות יומיתבדיקה 2

    • מכסת שעות רצופותבדיקה 3

    • זמינות אישיתבדיקה 4

    • חפיפה עם שיבוץ קייםבדיקה 5

    • השיוך הפנימי מותר למחליףבדיקה 6

  6. תוצאה

    התראות וביטול

    שינוי בחלון הזמן שהוגדר (ברירת מחדל 36 שעות קדימה) מקפיץ התראה לאדמין ולאחמ״ש. ביטול מחזיר את הפעולה האחרונה, ונחסם אם מישהו אחר פעל אחריה.

04

מי רואה ומי עושה מה

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

יכולתרופאאחמ״שאדמין
דרישות איושלאצפייה (תצוגת איוש)עריכה
שמות של רופאים אחריםלא — אנונימיכןכן
שיוך פנימילאצפייהעריכה
הערות אחמ״שלאיצירה וצפייהצפייה
הערות רופאשלו בלבדברמת "אדמין ואחמ״ש"שתי הרמות
משמרת תגבורלאכןכן
אישור או דחייה של החלפותלאלאכן
ניהול רופאים, משתמשים וחוקיםלאלאכן

פעולות גרירה (הזזת משמרת, שינוי שיוך) שמורות לאדמין, ותמיד מלוות בחלון אישור.

05

האדמין: דרישות, איוש וניהול

צילומי מסך מהוויירפריים הרץ עם נתוני ההדגמה. לחצו על מסך כדי לגלול בתוכו.

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

06

האחמ״ש: ציר זמן, טבלה וזמינות לתגבור

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

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

07

הרופא: מובייל תחילה

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

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

08

פיצוחים ופתרונות

החלטות עיצוב ולוגיקה שנולדו מבעיות ממשיות של מערכת תפעולית.

  • הבעיה

    "משמרת" פירושה דברים שונים במסכים שונים.

    הפתרון

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

  • הבעיה

    הרשמה חופשית יכולה להשאיר את המקומות האחרונים להתמחות הלא נכונה.

    הפתרון

    רצפות התמחות שומרות מקומות: ב-10 מקומות עם מינימום 2 ילדים, אחרי 8 רופאי משפחה המקומות הנותרים נפתחים לרופאי ילדים בלבד.

  • הבעיה

    מספרי התכנון (יומן ותור וירטואלי) יכולים לסתור את סך המשמרת.

    הפתרון

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

  • הבעיה

    רופאים לא אמורים לראות שמות של רופאים אחרים.

    הפתרון

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

  • הבעיה

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

    הפתרון

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

  • הבעיה

    אישור החלפה צריך יותר מ"נראה בסדר".

    הפתרון

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

  • הבעיה

    טווחי שעות בעמוד עברי יצאו הפוכים (16:00–21:00).

    הפתרון

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

  • הבעיה

    ירוק המותג עלול להיקרא "הכול בסדר".

    הפתרון

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

  • הבעיה

    מסד הנתונים בשכבה החינמית של המארח מתאפס.

    הפתרון

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

09

מיתוג, ספלאש ותנועה

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

פתיחה, פעם אחת בכל טעינה מלאה של העמוד, ומדולגת למי שביקש פחות תנועה
  • ירוק המותג#008C47זהות, ניווט ופעולות ראשיות
  • ירוק כהה#00713Aמצב לחוץ והדגשה
  • דיו חם#231F20טקסט
  • רקע#F5F8F5רקע האפליקציה
  • תקין#0D9488טורקיז, בכוונה שונה מירוק המותג
  • חוסר · עודף#DC2626ועוד #d97706 לעודף ו-#2563eb למידע

כתב

  • Assistant כתב ממשק עברי; בערכת העיצוב מומלץ לבחור כתב מותג עם ספרות טבלאיות

כללי העיצוב

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

10

כלים ושילוב בתהליך

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

  1. 01

    אפיון

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

    • Claude Codeשיחת אפיון על בסיס מסמך האפיון, בנייה ותיעוד
    • Figmaשלדי מסך (wireframe)
  2. 02

    בנייה

    שרת וממשק באותו פרויקט, בלי ספריות ממשק חיצוניות.

    • Next.js · React · TypeScriptממשק ושכבת API
    • Tailwind CSSעיצוב, כל הרכיבים נבנו מאפס
    • SQLite (node:sqlite)מסד נתונים מובנה, בלי תלות native
  3. 03

    מיתוג ותנועה

    הלוגו והאנימציה של סטיב, מוטמעים בממשק.

    • Illustratorיצירת הלוגו
    • After Effectsאנימציית הפתיחה
    • Lottieהרצת אנימציית הפתיחה
    • SVGהלוגו
  4. 04

    מסירה לעיצוב

    כך שהשכבה הוויזואלית תהיה הרכבה, לא ציור של כל מסך.

    • Figmaמדריך בנייה, ותוסף שבונה טוקנים, סגנונות טקסט וקומפוננטות מקושרים למשתנים
    • html.to.designמוצע לייבא את המסכים הרצים כשלד
  5. 05

    שיתוף

    לצוות הפיתוח ולהנהלה, בדרכים שונות.

    • Gitמאגר פרטי לצוות הפיתוח
    • Renderתיאור פריסה שמעלה הדגמה חיה בלחיצה אחת

11

מה נדרש כדי שיפעל באמת

מי שצריך להחליט או לספק, ומה. ושש שאלות המוצר שנשארו פתוחות.

עיצוב

לתת לוויירפריים שפה ויזואלית.

  • טוקנים, רכיבים ושבעה שלדי מסך ב-Figma, מתוך הערכה שכבר קיימת.
  • כתב עברי לממשק עם ספרות טבלאיות.
  • בדיקת RTL ונגישות על תוכן אמיתי ושמות ארוכים.

פיתוח ומערכות מידע

להפוך את האב־טיפוס לשירות.

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

הנהלה ותפעול

לענות על שש שאלות שהאב־טיפוס לא יכול להכריע.

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