לחזרה למעלה לחצו כאן

כמה (הרבה) מילים על Design System

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

05/11/2019

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

מיום שהתחלנו להתעסק ב- Design System הבנו כי לא מדובר בפרויקט חד פעמי או ביצירת תוצר המתאר שפה עיצובית או מאגר קוד (Repository) אלא בראש ובראשונה כהקמת גוף אופרטיבי המלווה פרויקטים הקשורים בחוויית המשתמש על פני מגוון ערוצים ומנחה ומכוון אותם במטרה להעניק למשתמשים חווית שימוש מיטבית.

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

אז לאחר ההצהרה הזו ננסה להציג במאמר זה את עקרונות המתודולוגיה שלנו ל- Design System ולחלוק התנסויות מיטביות (Best Practice) שחווינו בפרויקטים שביצענו עבור לקוחותינו.

Profile-Design-System-Examples

למי מתאים Design System?

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

החזר ההשקעה (ROI)

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

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

מתודולוגיית ה- Design System של פרופייל

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

  • לבחון כיצד הפרויקט משתלב במכלול המערכות/מוצרים (במטרה להעניק למשתמשים שונים אשר נדרשים למספר מערכות מסע לקוח מיטבי ביניהם).
  • לוודא שבמסגרת הפרויקט איננה כוללת רכיבים שאמורים להיות ממומשים במסגרת מערכות אחרות (במטרה למנוע פיתוח כפילויות מחד ושימור מרכזי התמחות מאידך).
  • להגדיר הנחיות למימוש חווית המשתמש (במטרה ליצור חווית משתמש אחידה החוצה את המערכות/מוצרים השונים).
  • להגדיר שימוש רכיבי UI קיימים לגמישות בכדי לענות צרכים ייחודיים (במטרה לצמצם השקעות כפולות בפיתוח רכיבי UI והקדשת משאבי הפיתוח לפיתוח לוגיקה עסקית).
  • להגדיר את הטכנולוגיה באמצעותה יתבצע הפיתוח וסטנדרטים נדרשים (כדוגמת סוגי דפדפנים וגרסאות, רזולוציות ורספונסיביות)
  • לחלוק ספריית קוד משותפת בין פרויקטים (וליהנות מ- Code reuse).

אלמנטים המייצגים אינפורמציה

תכולת Design System

ניתן להקים Design System במספר רמות עומק בהתאם לצרכי הארגון:

  1. שכבת מסע הלקוח אשר תשען הגדרת סוגי הלקוחות, אופי השירותים וכללים להגדרת חווית המשתמש המתאימה עבורם כולל גבולות הזירה בין סוגי המוצרים הדיגיטאליים ואחריות מימוש השירותים הנדרשים.
  2. שכבת המיתוג המרכזית למכלול מוצרי הדיגיטאל במשרד כולל Style Guide מלא ברמת צבעים, רזולוציות, סוגי פונטים, צלמיות וסמלילים וכדומה.
  3. שכבת חווית משתמש אשר תכלול רובד משותף לכל סוגי המוצרים הדיגיטאליים ורובד נפרד לכל סוג מוצר (אתר שיווקי, פורטל, מערכת תפעולית, אפליקציה וכדומה).
  4. שכבת אחידות טכנולוגית אשר מגדירה שימוש בטכנולוגיות אחודות למגוון המערכת במטרה להשיג מיקוד ידע טכנולוגי ארגוני ואף ליצור.
  5. שכבת פיתוח משותפת אשר תפקידה לאפשר פיתוח רכיבים באופן מרכזי וביצוע Code Reuse במערכות השונות.

תגיות למילוי וטוגלים לבחירה

צבעים של דיזיין סיסטם

תשתית ה- Design System

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

  • מסייע לצוות ה- Design System, באמצעות תרשימי מסע לקוח ותרשימי מיפוי המערכות הארגוניות מסייע לצוות ה- Design system, לבחון את הפרויקט בראיה ארגונית רחבה ולוודא כי תחומי הגזרה המתאימים נשמרים ולשמר מסע לקוח על פני מגוון מערכות ותוצרים דיגיטאליים בארגון.
  • מסייע לאנשי ניתוח המערכת להבין את הקשר הפתרון למול המערכות האחרות בארגון.
  • מסייע לאנשי אפיון ועיצוב ממשק המשתמש להכיל את תפישת ה- Design system החל מהבנת ספר המותג (Brand Book) וכללי העיצוב (Style Guide) ועד לספריות ה- UI, פריסות המסכים והשימושים ברכיבים ובמסכים ברמת Best Practice וזאת בכדי להבטיח אחידות בתוצרי הדיגיטאל השונים.
  • מאפשר לאנשי הפיתוח לבצע את הפרויקט בהתבסס על ספריות קוד ארגוני מוכנות ולהרחיבם כאשר חלק מתוצריהם "יאומצו" לסביבת ה- Design System וירחיבו את תשתית הקוד המשותף.

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

מצב רגיל ומצב הובר

התראות המערכת

 

פנו אלינו למידע נוסף

טלפון:
מידע כללי:
מכתבים ל:
הגיא 131, הר אדר 9083600