איך בניתי לוח בקרה רפואי מורכב תוך שימוש בכלי בינה מלאכותית
בפרויקט הזה המטרה שלי הייתה לבחון את היכולות של לאבבל ולהתנסות בעבודה עם בינה מלאכותית. רציתי לראות איך אפשר לקחת רעיון וממשק שלי ולהפוך אותם למערכת עובדת בעזרת וייב קודינג. את התהליך התחלתי בפיגמה, שם עיצבתי את המסך הראשון. המסך הזה קבע את השפה העיצובית ואת הסגנון של כל שאר הממשק. אחרי שהיה לי בסיס עיצובי מוכן, עברתי לעבוד עם לאבבל ונתתי לה לייצר את שאר המסכים על בסיס העיצוב המקורי שלי. בתיק העבודות הזה אציג את שלבי העבודה שלי ואיך הגעתי לתוצאה הסופית
Flow+Wireframe - שלב ראשון
תכנון רעיוני של הממשק והפיצ׳רים שהוא יכלול, שימוש בג׳מיני לסיעור מוחות
ולאחר מכן תכנון ידני של מבנה הממשק, ושימוש בג׳מיני כדי לג׳נרט אופציות לארגון התוכן
וויירפריים ראשוני ידני לממשק
שלב שני - יצירת הבסיס בפיגמה
השלב השני היה לייצר את הבסיס של המערכת. עיצבתי בפיגמה את מסך הדשבורד המרכזי כדי לקבוע את השפה הויזואלית: בחרתי בצבעים כהים שמתאימים לעולם הרפואי-טכנולוגי, הגדרתי את סוגי הגרפים וקבעתי את הסדר של האלמנטים על המסך. המטרה הייתה ליצור מסך אחד מושלם שיהווה דוגמה לכל שאר המערכת
קצת על הממשק
המערכת שתכננתי היא לוח בקרה המיועד לצוותים רפואיים, למאמנים או לתזונאים במרכזי שיקום. המטרה שלה היא לרכז נתונים ממספר מכשירים חכמים כמו שעון חכם, מד דופק ובקבוק מים חכם - לממשק אחד ברור. במקום לעבור בין אפליקציות שונות, הרופאים והתזונאים יכולים לראות את כל המדדים במקום אחד, לעקוב אחרי מגמות ולהבין איך המטופל מתקדם. הפיצ'רים המרכזיים כוללים תצוגה כללית של מצב המטופל, עמודים מפורטים לכל מכשיר בנפרד, ומרכז התראות חכם שמפריד בין מצבים דחופים לבין בעיות טכניות
שלב שלישי - המעבר ללאבבל (הנחיות ופיתוח)
הנחיה באלומה רחבה (הבסיס)
התחלתי עם "אלומה רחבה" - הנחיה ארוכה ומפורטת מאוד שהסבירה ללאבבל את כל המעטפת של הפרויקט. פירטתי את מטרת המערכת, מי קהל היעד (צוותים רפואיים), מהם המכשירים השונים שהיא מנטרת ומה המבנה המדויק של כל עמוד. צירפתי את צילום המסך שעיצבתי בפיגמה וביקשתי ממנה לייצר את הבסיס של כל המערכת על פיו, תוך שמירה על השפה העיצובית וההיררכיה שהגדרתי
הפרומפט
צור פלטפורמת לוח בקרה רפואי בשם 'קייר-ספייר' על בסיס עיצוב המסך המצורף. שמור על שפה עיצובית עקבית, היררכיה וסגנון ויזואלי בכל המסכים
מטרת המערכת: ניטור חכם למטופלים בשיקום על ידי ריכוז נתונים ממכשירים שונים (בקבוק מים חכם, שעון, מד דופק ומד סוכר) לממשק אחד המציג מגמות ותובנות לאורך זמן
קהל יעד ופעולות: המערכת מיועדת לרופאים וצוותי שיקום. עליה לאפשר בחירת מטופל, מעבר בין מכשירים, ניתוח גרפים, סינון לפי תאריכים וניהול התראות חכמות
מבנה הפרויקט: המערכת תכלול מסך כניסה, לוח בקרה כללי, פרופיל מטופל, עמוד לכל מכשיר, מרכז התראות ועמוד ניתוח נתונים מתקדם. בלוח הראשי יוצגו מדדי ליבה, גרפי מגמות ומרכז דיווח על תקלות
דגשי עיצוב: סגנון רפואי כהה, מודרני ונקי. דגש על קריאות גבוהה של נתונים, היררכיה ברורה, ריווח נדיב ומבנה המותאם לכל סוגי המסכים. הממשק צריך לשדר אמינות ומקצועיות, תוך שימוש בגרפים בעלי ניגודיות גבוהה
הנחיות באלומה צרה (הדיוק)
התוצאה הראשונית הייתה טובה כבסיס, אבל היא לא הייתה מספיק מדויקת לעיצוב שלי. בשלב זה עברתי לעבוד בשיטת "אלומות צרות" - הנחיות ספציפיות וממוקדות מאוד. בכל פעם לקחתי חלק קטן בממשק (למשל: מבנה הגרף המרכזי, הצבעוניות של ההתראות או הריווחים בתפריט) ונתתי הנחיות לתיקון ודיוק. התהליך הזה של סבבי שיפורים ממוקדים הוא שאפשר לי להגיע לתוצאה סופית שנראית ועובדת בדיוק כפי שתכננתי
תיקון של אנימציית המעבר בין מכשירים
התוצאה הסופית
לאחר סדרה של דיוקים, הגעתי לתוצאה סופית שהייתה נאמנה באופן מלא לעיצוב המקורי שלי. ברגע שהמסך הראשי היה מדויק, השתמשתי בו כבסיס ליצירת שלושת המסכים הנוספים עבור המכשירים האחרים: מד סוכר, קוצב לב ושעון חכם. בכל אחד מהמסכים האלו דאגתי להתאים את סוג התוכן והנתונים שמוצגים בלוחות המידע, כך שיהיו רלוונטיים ומדויקים ספציפית לכל מכשיר. כדי להוסיף רובד נוסף של חוויה ויזואלית, שילבתי בממשק תמונות של המוצרים עצמם ויצרתי ביניהן אנימציית מעבר חלקה, שמעניקה למוצר מראה דינמי, מקצועי ומוגמר
