כסלו פה

חווית ממשק בסגול

מירי ראוונער

"People ignore design that ignores people" הוא עקרון המנחה אותי בכל אפיון ועיצוב מערכת, ואכן, עיצוב שיחמיץ את המשתמש לא יגשים את מטרתו. כל פרויקט חדש הוא עולם לא מוכר, וכדי לגלות אותו לעומק חיבים לצאת למסע. הפרויקט הזה היה בשבילי מסע מרתק, ונתן לי להבין שככל שנכיר את המשתמש טוב יותר, נחווה את החוויה שלו ונקשיב לצרכיו, התוצאה תהיה מוצר מדויק, וטוב הרבה יותר.

מאחורי הקלעים של השדרוג.

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

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

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

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

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

מפילוח הנתונים הבנתי מהר מאד כי קיימים כאן שני עולמות עיקרים:

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

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

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

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

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

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

הצצה לפרזנטציה של המחקר, המסקנות והתובנות

תכנון מסע משתמש לחדשים וגם לאלו שמכירים

חלק מהסקיצות הממוחשבות של האופציות למבניות האתר

ui/ux

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

וכאן ה Design System והחוקיות הברורה

מיקרו קופי של כלל ההודעות במערכת

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

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

"מוצר טוב נבנה מתוך הקשבה – למשתמשים ולצרכים שלהם."

איך זה קורה בשטח ומה עשינו עבור המשתמשים החדשים?

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

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

מכירה לדוגמא באתר התדמית: מה שיעזור לכל מי שמעדיף לקבל התרשמות מקדימה לפני שמזין נתונים ופרטים.

המשכנו הלאה, אל המשתמשים הותיקים. מה הם יקבלו?

התחברות נוחה: ניתנת למשתמש אפשרות לכניסה מהירה אפילו מבלי שצריך לזכור סיסמא

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

וזה עוד לא הכל… מעבר לכל אלו יצרנו עוד המון תוספים בינהם גם את:

"טוב לדעת": פיזרנו עדכונים באזורים שונים ובמקומות הרלונטיים באתר שבהם ניתן למצוא את כל התשובות לשאלות נפוצות וללמוד על המערכת בדרכים הכי פשוטות וברורות.

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

ui/ux

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

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

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

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

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

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

תדמית האתר הסופית

יש לנו את זה, המסכים הסופיים

נשמח לשמוע, מה יש לך לומר.

22 תגובות

  1. עבודה מטורפת! כלקוחה החויה היא אחרת ממש!
    לא שיערתי כמה עבודה יש מאחורה! כל הכבוד!
    והמיקרו קופי עושה טוב. שדרג את כל החויה:)

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

    האם יש אפשרות להוסיף אופציה של דיווחים על מוצרים חסרים – דרך האתר?

    1. תודה איידי! איזה כיף לשמוע!

      את מתכוונת בשביל לקבל זיכוי?
      או דיווח על מוצר חסר בהזמנה שלא אספת עדין?

      כי הכנסנו את האפשרות לדעת לפני יום האיסוף מוצרים שיהיו חסרים במכירה 🙂

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

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

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

  6. כל הכבוד מדהים מדהים מדהים!!!!
    אשמח שתעשי לי את הux לאתר העתידי שלי!
    רואים שאת ממש מעמיקה ונושמת את המקצוע!
    וואו!!!!!

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

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

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

  9. מדהים, מרתק לקרוא את התהליך!
    בתור משתמשת, עוד בלי להבין מה עומד מאחורי –
    מרגישים שדרוג מטורף באתר, וההזמנה כל כך מהירה, נעימה ונוחה
    לא מכירה את זה בשום אתר אחר!

  10. איזה עבודה!!
    כשתנקלתי בה בלייב- כל כך נהנתי, מורגש כל חלק שחשבו עליו!

    מחכים ומרתק לפגוש את מי שעומדת מאחרי – זה פשוט מיוחד!

  11. עבודה מדהימה! יפיפיה ומושקעת!!!
    מדהים לראות את החשיבה על כל פרט ופרט…
    מיד שראיתי את האתר לראשונה התעמקתי והתלהבתי מהעבודה המדויקת והיסודית.

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

המגירה החודשית

הרשמה לקבלת 'המגירה'

נשמח לשמוע אותך
מה השאלה?

נשמח למשוב

מה דעתך על האתר?

אודות
המיזם

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

אידיאלים ומטרות

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

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

פונט דיסקורדיה: בחסות הפונטיה

המגירה החודשית

הרשמי לקבלת 'המגירה' החודשית

המגירה החודשית

הרשמי לקבלת 'המגירה' החודשית