הפוסט נכתב על ידי עמרי אוירי, VP Product ב-Hippotec המתמחה בפיתוח אפליקציות מובייל.
מאחורי כל מוצר עומדים אנשים, שיטות, ומספר לא מבוטל של שעות עבודה. לכל פרויקט יש את ההברקות שלו, הכשלים שלו, ואת הפיצה ב-2 בלילה שלו. בפוסט הזה אציג 6 כלים ושיטות שאימצנו במחלקת ה-Product שלנו ב-Hippotec, כדי לייעל ולשפר את תהליכי האפיון והעיצוב שלנו, לשפר את העבודה מול הלקוחות וכמובן מול צוות הפיתוח שלנו, בעיקר כדי שיהיו קצת פחות פיצות ב-2 בלילה.
#1 – Random User
כל פרויקט מתחיל באפיון UX, ואפיון UX תמיד סובב סביב הפרוסנות. מיהם המשתמשים? מה אנחנו יודעים עליהם ועל ההרגלים שלהם? וכיצד אנחנו יכולים להתאים להם את המוצר שאנחנו מאפיינים בצורה האופטימלית? כדי להתחבר לפרסונות לפעמים צריך קצת יותר מ״ישראל ישראלי״, ובדיוק בשביל זה אימצנו את randomuser.me. רנדום יוזר מאפשרת לנו לבנות פרסונה עם שם, סיסמא, טלפון, מייל ויום הולדת בקליק אחד. הפרסונות שיצרנו משמשות אותנו בהמשך גם בתהליך העיצוב במידה והמסכים מכילים תמונות ופרטים על משתמשים.
#2 – Balsamiq
אנחנו תמיד מתחילים עם דף ועפרון, לא מצליחים להשתחרר מזה, אבל מהר מאוד כשיש קונספט, העניינים צריכים לתפוס תאוצה ופה נכנס Balsamiq לתמונה. כל מי שמתעסק באפיון ועיצוב ממשקים מכיר את Balsamiq, המאפשרת ליצור אבי טיפוס לממשקי מובייל ו-web ביעלות רבה. אנחנו בחרנו לעבוד עם בלסמיק למרות שקיימות לא מעט אופציות אחרות כמו Axure, Omnigraffle ואפילו Visio שישרתו את אותה מטרה. לכל אחת מהן יתרונות וחסרונות משלה. אנחנו מקפידים לשרטט כל מסך בכל וריאציה אפשרית. זה בדרך כלל עוזר ללקוח להבין שאין לו ״אפקליציה קטנה של עשרה מסכים״, שה-Onboarding Experience חשוב לא פחות ושחייבים למצוא פתרון מתאים למסכים ריקים מתוכן.
#3 – Design Duet
כשלקוח מקבל עיצוב למסכי האפליקציה שלו אנחנו תמיד מדגישים לו: ״אל תסתכל על זה במחשב, תשמור את זה בסמארטפון שלך ותסתכל שם״. המנטרה הזו שלנו מלווה גם אותנו בתהליך העבודה. אנחנו אף פעם לא מקבלים החלטה או אפילו מביעים דעה על עיצוב אלא אם הוא מוצג בפלטפורמה אליה הוא מיועד. Design Duet הוא פלאג-אין קטן וגאוני ל-Photoshop אשר עובד יחד עם אפליקציה תואמת לאייפון (בקרוב גם לאנדרואיד), אחרי הגדרה ראשונית וסינכרון על גבי רשת ה-WiFi, כל מה שאתם עובדים עליו בפוטושופ, יוצג באפליקציה התואמת בסמארטפון בסנכרון מושלם. זה עוזר לנו לבדוק אופציות, להציג מצבים שונים של כפתורים ומסכים והכל בזמן אמיתי מבלי ליצא אינספור קבצי JPG שאחר כך יש להעביר לסמארטפון ולבדוק.
#4 – PNG Express
כשמגיע השלב המיוחל וקיבלנו אישור על כל מסכי האפליקציה מגיע השלב החשוב ביותר, הגשת כל החומרים לצוות הפיתוח. החלק הכבד והמורכב ביותר בדרך כלל הוא מסמך האפיון, באופן טבעי רוב האנרגיה מושקעת במטרה לתאר כל פינה ומקרה קצה על גבי המסמך. אבל מלבד מסמך האפיון, המפתחים צריכים לקבל גם את האלמנטים הגרפים חתוכים על מנת להטמיע אותם.
חיתוך ידני של כל אלמנט ושכבה יכול לקחת שעות עד ימים (תלוי בגודל הפרויקט), ומלבד זאת, מדובר בשלב שכל מעצב אוהב לקטר עליו. PNG Express פותר בדיוק את הבעיה הזו, מדובר בתוסף לפוטושופ המבצע חיתוך אוטומטי ויצוא הקבצים בכל הפורמטים הדרושים לכל הפלטפורמות יחד עם היכולת לייצר Design Specs למפתחים תוך דקות בודדות.
#5 – invision
התנהלות מול לקוחות דורשת רגישות מיוחדת והרבה סבלנות. ללקוח תמיד יש הערות, תמיד יש בקשות, ומה לעשות, הוא גם תמיד צודק, לא בגלל שהאפיון או העיצוב לא טוב, אלא בגלל שזה לא מה שהוא רצה. כאן נכנסת לתמונה invision וחוסכת לנו אינספור טלפונים ארוכים ובמקביל אינספור מיילים עם רשימת הערות שבקלות יצאו משליטה.
invision מאפשרת לנו להעלות את כל מסכי האפליקציה וליצור מהם mockup מתפקד אותו יכול הלקוח לנסות ב-mobile וב-desktop (לאחרונה השיקו invision גם פיצ׳ר שיודע לשאוב אוטומטית את המסכים מתוך הפוטושופ ובכך חוסכת לנו גם את יצוא המסכים ל-JPG), הכל מאפשר ללקוחות לייצר הערות על כל אלמנט במסך ולנו את האפשרות לנהל איתם דיון נפרד על כל הערה.
תמורת כ-100 דולרים בחודש, קיבלנו את גרסאת הצוות של המוצר, המאפשרת לנו גם להעביר הערות בתוך הצוות מבלי שהלקוח יהיה חשוף אליהן, ובכך הפכנו את התהליך וניהול הגרסאות של כל מסך למסודר ונגיש לכל אחד מאנשי הצוות.
#6 – חביב הקהל – Adobe Kuler
ישנם דברים שלא באמת נחוצים, ולא באמת משפרים את הפרודקטיביות שלנו, אבל בגלל היותנו הגיקים שאנחנו, אנחנו פשוט אוהבים להשתמש בהם. Adobe Kuler הוא בדיוק כזה, במיוחד בגרסאת האייפון שלו. פשוט תנו למעצב לכוון את המצלמה לכיוון מסויים, והאפליקציה תדגום את הצבעים בפריים ותרכיב עבורו פלטת צבעים.
