אתר מטרופולין | מירב שקד

מטרופולין היא חברת התחבורה הציבורית השנייה בגודלה בישראל, משרתת את האזור המטרופוליני במאות קווי אוטובוס. האתר הקיים הקשה באמת על הדבר היחיד שהמשתמשים היו צריכים: להבין איך להגיע למקום. הובלתי את הפרויקט הזה end-to-end ב-True Adv, ממחקר משתמשים וניתוח מתחרים, דרך ארכיטקטורת מידע, wireframes ל-desktop וגם ל-mobile, ועיצוב ויזואלי מלא.

האתגר

ספקית התחבורה המטרופולינית הגדולה בישראל

סוגי משתמשים נפרדים, כל אחד צריך חוויית חיפוש שונה

פלטפורמות עוצבו מחדש מאפס: דסקטופ ומובייל

מחקר משתמשים

Omer, 31

מפתח תוכנה, רעננה

החכמולוג

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

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

40 דקות לתל אביב?! רגע, בוא אבדוק אפשרויות אחרות.

Ruth, 55

מורה בדימוס, הרצליה

שאינו יודע לשאול

הראשון פעם

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

תיאור מסלול מלא מ-A ל-B
שלב אחר שלב: תחנה, הליכה, המשך
מפות, הסברים ברורים, מידע על תעריף

סליחה, איך מגיעים לבין-עירוני?

Dana, 24

סטודנטית, רעננה

המתעדכן

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

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

אני שונאת לבזבז זמן בהמתנה לאוטובוס מאוחר.

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

ארכיטקטורת מידע

מתכנן מסלול (לפי מוצא ויעד)

השלמה אוטומטית לשמות תחנות

חיפוש לפי זמן יציאה או הגעה

השוואת מסלולים עם/ללא החלפות

הגעה בזמן אמת לתחנה הקרובה

זמן הליכה + מפה לתחנה

ניווט breadcrumb לאורך כל הדרך

חיפוש לוח זמנים (לפי מספר קו)

השלמה אוטומטית למספר קו עם כיוון

צפייה בלוח זמנים יומי או שבועי

בחירת תחנה לאורך המסלול

עדכונים בזמן אמת לפי קו

לוח זמני יציאה/הגעה

ניווט לאוטובוס הקודם/הבא

מפת אתר

מערכת עיצוב

פלטת צבעים

#f5911e

#eb7d23

#faaf5f

#464646

#a5a5a5

#ebebeb

טיפוגרפיה

H1 / 20px Bold

כותרת עמוד

H2 / 18px Regular

כותרת חלק

H3 / 16px Regular

תת-כותרת

Body / 16px Regular

Open Sans Hebrew

אלמנטים אינטראקטיביים

תכנן מסלול תכנן מסלול (hover)

כפתורים: Open Sans Hebrew ExtraBold, 24px, radius 30px, #f5911e. מצב hover מוסיף צל פנימי 7px ב-#eb7d23.

אייקוני פרסונות

החכמולוג

הנוסע הקבוע

הראשון פעם

תהליך UX

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

Metropolin UX process: survey results and user personas

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

זרימת UX - חיפוש

זרימת המשתמש של דנה

עיצוב סופי

הדגמת אינטראקציה

תוצאה

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