Design QA – איך עזרנו לחברת Mend לשפר את הקונסיסטנטיות במסכי המערכת

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

רקע על התהליך

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

תהליך הבטחת האיכות שאנו מציעים כולל כמה שלבים מרכזיים:

  1. יצירת מסמך ניהול
  2. יצירת מסמך ייעודי ב-Figma
  3. השוואה ותיעוד
  4. טיפול בפערים

נתוני הפרויקט

  • משך הפרויקט: כחודשיים
  • מספר המסכים: כ-200 מסכים

להלן פירוט מקיף על שלבי העבודה –

QA design
מסמך ניהול QA

1. יצירת מסמך ניהול

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

  • רשימת כל המסכים וה-Flow השונים
  • סטטוס (בוצע, בתהליך עבודה, לא בוצע)
  • שם המעצב האחראי
  • תאריך יעד לסיום
  • קישור לעמוד בפיגמה
  • קישור לטיקט בג'ירה
  • הערות נוספות

שלב 2: יצירת מסמך ייעודי ב-Figma

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

בנוסף, הגדרנו 4 קטגוריות שונות שנתנו לכל עמוד:

  • QA in progress
  • QA Ready for Ticket
  • Ticket Created
  • Ticket Developed

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

Figma file QA
Design QA

שלב 3: השוואה ותיעוד

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

  • עיצוב
  • צבעים
  • ריווחים
  • פונטים
  • קומפוננטות
  • פרופורציות
  • רספונסיביות
  • השוואה ל-Design System
  • Workflows

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

במקרים שבהם נמצאו פערים, יצרנו Notes ייעודיים שמתעדים כל פער שנמצא, ועדכנו את מסמך ה-Google Sheets בהתאם.

שלב 4: טיפול בפערים

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

תהליך הטיפול בפערים כלל את השלבים הבאים:

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

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

העבודה המתואמת בין העיצוב לפיתוח הבטיחה שכל בעיה תטופל בצורה המיטבית.

Design QA 2

לסיכום

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

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

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

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

מעוניינים לשמוע עוד על שירותי ה-Design QA? צרו איתנו קשר

Cyber Security, Design System, Figma, Mend, QA Design, Saas, user testing, Wireframes, בדיקות משתמשים

פוסטים נוספים שאולי יוכלו לענין…