איך נולד under.me

קצת מילים וכמה סקיצות "מאחורי הקלעים" להמחשת תהליך עיצוב חוויית המשתמש של אתר Under.me, שכנראה תמיד יישאר האתר שהכי נהניתי לעשות…

23 אפריל 2012

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

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

 

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

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

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

עמוד אחד

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

הקונספט הראשוני: inspector במרכז הקטלוג

עוד דבר שחשוב להבהיר על עמוד אחד – אם חשובה לכם מדידה (ובאתר קניות זה וואחד חשוב) – הקפידו להשתמש ב-Event Tracking, אחרת האנאליטיקס שלכם לא יידע מה המשתמשים עשו בעמוד.

סל קניות מובנה

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

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

הוספה והסרה בבודדים

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

קטעי וידאו של פריטים

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

ישירות במחירים

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

 

את התוצאה הסופית אפשר לראות באתר under.me.

הנה כמה תמונות נוספות של גרסאות מהתהליך

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

 

זו גרסה שהתקדמנו איתה די הרבה. הירוק זה לא בכפייה שלי :)

 

מינימליזם קיצוני

 

פה התחילה גישת הקוביות הישרות

 

 

אגב, אני גאה לספר שהאתר זכה ב-DesignAwards הישראלי.

 

 

 

תגובות