ששת ימים
עיצוב UI עבור אפליקציית B2C
ששת ימים היא אפליקציה לאיתור בעלי מקצוע המשתמשת באנשי הקשר השמורים במכשיר של היוזר על מנת להציע לו בעלי מקצוע מתוך המעגלים החברתיים שלו.
האפליקציה מבוססת על הרעיון שאין כמו המלצה אותנטית מאנשים שאנחנו כבר מכירים, ולכן היא מציגה ליוזר קודם כל את אנשי המקצוע שהוא מכיר ואת אלו שקיבלו המלצות מהחברים שלו.
מצד איש המקצוע – האפליקציה מאפשרת לכל אחד להקים פרופיל עסקי שיכול לשמש ממש כמו דף נחיתה- פלטפורמה להציג בה כישורים וניסיון רלוונטיים, תיק עבודות, המלצות ואפשרויות שונות ליצירת קשר.
- UI על בסיס שפה גרפית ואפיון קיימים
האפליקציה פועלת כאפליקציית נייטיב, וגם בגרסת web, ולכן העיצוב נעשה תוך התייחסות מלאה גם לאפליקציית מובייל וגם לאתר רספונסיבי שמתפקד בצורה דומה (למעט הפונקציות העושות שימוש באנשי הקשר של היוזר).
העיצוב שיצרתי מתבסס על גרסת עיצוב ראשונית שקיבלתי ממעצב קודם שעבד על הפרוייקט.
Style Guide
פלטת הצבעים נגזרה מהמיתוג של האפליקציה. בחרתי להשתמש בכל אחד מהצבעים עבור תחום אחר באפליקציה, ויצרתי לכל אחד מהצבעים הראשיים צבע בגוון נמוך יותר לשימוש היררכי ומדוייק.
את הפונט (Google Assistant) ירשתי מהעיצוב הקודם ובחרתי להמשיך להשתמש בו.
User Card
עיצבתי כרטיס יוזר שישמש הן למובייל והן לדסקטופ. כדי שהכרטיס יראה מושלם בכל רוחב מסך עיצבתי אותו בצורה רספונסיבית. הכרטיס מעוצב תוך הדגשה של אלמנט ההמלצות שמשרת את התמה המרכזית של האפליקציה.
Icons
במהלך העבודה על בר הניווט עיצבתי סט של אייקונים עבור הקטגוריות כאשר עבור כל פריט קיים מצב idle ומצב selected.
מנוע החיפוש
מנוע החיפוש מאפשר ליוזר חיפוש חופשי לפי טקסט או חיפוש בתוך קטגוריה (כאשר תחת כל קטגוריה מוצעות ליוזר תגיות מתאימות).
בנוסף אפשר למיין את התוצאות בפיד לפי כמות מכרים משותפים עם הספק, מיקום פיזי או מספר המלצות.
כאשר היוזר גולש מהאתר ולא מהאפליקציה, תחת הלשונית ״כמות מכרים״ הוא יקבל הצעה להוריד את האפליקציה כדי להנות מהפונקציה המשמעותית הזו.
מנוע החיפוש דינאמי ומתאים את עצמו לבחירות היוזר.
הפיד במצב Idle
כשהיוזר בוחר קטגוריה הפיד מתאים את עצמו לקטגוריה שנבחרה, ובמקביל נפתחת תיבת התגיות למיקוד החיפוש
גם בזמן הקלדה בשדה החיפוש נפתחת תיבה של הצעות לתגיות - תיבה דינאמית שהתוכן בה מוצע בהתאם להקלדה של היוזר
מיון לפי כמות מכרים - בגלישה באתר.
בגרסת העיצוב הראשונית שקיבלתי שדה החיפוש הופיע בתוך האדר משני שמוצג רק בעמוד חיפוש.
במצב הזה שדה החיפוש, האלמנט הכי חשוב במערכת (!) בעצם מוסתר כמעט בכל עמודי האתר, ועל מנת להשתמש בו על היוזר לנווט אליו באמצעות התפריט.
נקודה נוספת שהפריעה לי בתפריט שקיבלתי: הלשונית חיפוש הביאה את הגולש לעמוד ״ארכיון״ כללי שמציג את כל הכרטיסים האחרונים שהתפרסמו באתר (ומכיל גם את שדה החיפוש), והרגשתי שהמינוח לא משקף לגולש בצורה מדוייקת את מה שהוא עומד למצוא בדף שאליו הוא מנווט.
כדי להפוך את חווית החיפוש לזמינה יותר החלטתי לוותר על ההאדר המשני, ולהציג את שדה החיפוש בתוך ההאדר העליון שמוצג ברחבי כל האתר.
בנוסף, בחרתי לשנות את הטרמינולוגיה ולקרוא לעמוד הארכיון בשם כל המומחים. כך יהיה יותר ברור לגולש איפה הוא עומד לנחות.
פאנל הסינון במצב idle - מוצעות ליוזר כל הקטגוריות, וגם תגיות פופולאריות באתר
פאנל הסינון אחרי בחירת קטגוריה - מוצגות תגיות רלוונטיות מתוך הקטגוריה שנבחרה
פרופיל ספק
כדי לתת מקום של כבוד לפרופיל הספק, ולאפשר למשתמשים העסקיים להנות מעמוד הפרופיל שלהם ממש כמו דף נחיתה שמייצג אותם – החלטנו להציג את תפריט הקטגוריות והתגיות (תפריט צד ימני) – רק במסכי הארכיון.
מסך הפרופיל
בזמן גלילה - ההאדר מתכווץ ומפנה מקום לתוכן
מתוך הרצון להעצים את עמודי הפרופיל ולאפשר למשתמשים העסקיים להשתמש בהם בצורה משמעותית – בחרתי במובייל להציג את הפרופיל על כל המסך (כך שהוא מסתיר את בר הניווט הרגיל של האפליקציה ואת מנוע החיפוש).
פרופיל ספק
פרופיל במצב גלילה
עריכת הפרופיל
התמקדות בהצגת כמות גדולה של מידע תוך התייחסות למצבים השונים של השדות (מצב דיפולטיבי והתנהגות בזמן עריכה).
תצוגה ועריכה של שדה טקסט
שדה טקסט במצב תצוגה
שדה טקסט במצב עריכה
תצוגה ועריכה של תגיות הספק
תגיות הספק במצב תצוגה
תגיות הספק במצב עריכה
חיפוש והוספת תגיות
סטטיסטיקות
מסך הסטטיסטיקות מציג ליוזר את התנועה בכרטיס שלו.
בחרנו להציג נתונים מתחילת הפעילות באפליקציה בתוספת חיווי על אירועים חדשים שהתרחשו בשבוע האחרון.
החלטנו להציג לכל יוזר תובנות או המלצות בהתאם לפעילות בכרטיס שלו – כמו לדוגמא הצעה לשתף את הכרטיס במידה ולא היתה תנועה מרובה.
על בר הניווט יופיע חיווי על מנת להזמין את היוזר להיכנס למסך הסטטיסטיקות או למסכים אחרים בהם יש חדשות חשובות עבורו.
תודה!
ביתא מחנכים
אתר תדמית עבור אירגון חינוכי ירושלמינ נועז הכולל מגזין תוכן ומערכת הרשמה לאירועים ותוכניות
אור התלמוד
אפליקציית web שמנגישה ללומדים כמויות עצומות של דאטה מתוך ארון הספרים היהודי