Product Designer @Papaya Global
Creating an Atomic Design System
רקע
הגעתי ל-Papaya Global בנקודת זמן בה הם עשו תהליך של מעבר מסטרטאפ קטן לחברה מבוססת. בתחילת הדרך מי שהיה אחראי על עיצוב המערכת היה פרילנסר מחו״ל שעבד לבד ולכן לא הקפיד על בניה מסודרת של הקבצים.
לאחר שהעיצוב עבר להיות In-House נוצר מצב שממשיכים לרוץ על קבצים מבולגנים.
הצורך
כשהתחלתי לעבוד לקח לי הרבה זמן להבין מה קורה בכל מקום, ולאחר שהבנתי את מקור הבעיה, רציתי ליצור מצב שבו יש ״מקור אחד״ ללמוד ממנו את השפה של העיצוב ולבנות באמצעותו עמודים חדשים במערכת.
בנוסף רציתי לשמור על אחידות בעיצובים בין המעצבים הקיימים, לקצר את האונבורדינג של מעצבים חדשים, למקד את העבודה של המעצבים ב-UX ולחסוך זמן בעבודה על UI, וליצור שפה משותפת בין המעצבים לצוות הפיתוח.
1
אטוֹמים
התחלתי באטומים, בשכבה של אלמנטים אבסטרקטיים: גוונים, צללים, גופנים, אייקונים.
העבודה על הגופנים עזרה לנו להוריד ולמקד את כמות המשקלים שהשתמשנו בהם לפני כן, בשביל לעצב עמודים ברורים יותר ועקביים יותר.
ריכוז האייקונים במקום אחד עזר לנו לפתור בעיות באחידות חלק מהם וליצור עיצוב עקבי יותר.
2
מוֹלֵקוּלוֹת
משם המשכתי למולקלות, אלמנטים קטנים:כפתורים, שדות, התראות.
היה לי חשוב ליצור תמונה מלאה לכל State של כל כפתור או שדה, בשביל ליצור שפה משותפת עם המפתחים.
3
אוֹרְגָּנִיזְם
ומשם ל-Organisms, יחידות מורכבות יותר: פופאפ, הדר, פוטר, ועוד.
אם משקיעים פעם אחת באלמנטים מורכבים, חוסכים את הזמן הזה בעיצובים עתידיים, ומקלים גם על מעצבים קיימים וגם על מעצבים חדשים.
4
Templates
5
התוצאה: Pages
מה למדתי מהעבודה על יצירת Design System?
כשעבדתי על הפרויקט הזה, חשבתי על הערכים של Lean UX בנושא הזה: עיצוב מהיר יותר; עיצוב אחיד; הוזלת עלויות של עיצוב ופיתוח.
כמה שבועות לאחר שסיימנו את הבסיס לעבודה עם ה-Design System הצטרפה אלינו מעצבת מוצר נוספת. כשראיתי את המהירות בה היא נכנסה לעניינים בזכות ה-Design System לעומת מה שאני הייתי צריך ללמוד, הבנתי שעשיתי משהו טוב.