mako קשת

T5 - מיתוג, UI UX ופיתוח פלטפורמה דיגיטלית

23 אוגוסט 2017 www.t-5.co.il

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

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

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

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

תהליך חווית המשתמש ושלבי העבודה
תהליך חווית המשתמש ושלבי העבודה

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

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

תהליך המיתוג עד לבחירת הלוגו והשפה הגרפית
תהליך המיתוג עד לבחירת הלוגו והשפה הגרפית

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

28 מליון דפים נצפים תוך שנה

קודם כל קליינט וחווית משתמש

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

גרסת הדסקטופ של T5

הסטיקים שאיירנו והנפשנו, המשתמשים יכולים להוסיף סטיקרים לתמונות
הסטיקים שאיירנו והנפשנו, המשתמשים יכולים להוסיף סטיקרים לתמונות

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

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

 

ממשק יצירת רשימה חדשה ב- T5
ממשק יצירת רשימה חדשה ב- T5

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

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

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

התמודדות עם טראפיק במינימום משאבים

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

מיתוג T5, הנפשת הלוגו

טכנולוגיה

קליינט - react js

צד שרת - node js

עטוף ב- docker על סביבת AWS

Rabbi Interactive Agency 2004-2019 ©