JPG.co.il – המהפך

למי שמכיר ולמי שעדיין לא – JPG.co.il הינו אתר המספק שירות העלאת תמונות.
במשך כשנתיים, שבמהלכן בוצעו בו שינויים מינוריים בלבד, הוא היה נראה ככה:

עמוד הבית:
JPG - Old Main Page

עמוד התצוגה:
JPG - Old View Page

אז נכון, לא קשה לראות שהוא נראה גרוע, מאוד גרוע אפילו, ואני מרשה לעצמי להגיד את זה בעיקר כי אני זה שעיצב אותו (או ליתר דיוק – לא עיצב אותו).

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

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

לפני כמה חודשים, החלטנו שנמאס לנו מהבינוניות – JPG לא יהיה עוד אתר העלאת תמונות, הוא יהיה האתר להעלאת תמונות, אנחנו רוצים להוביל את הנישה הזו בארץ בגאווה ובכבוד ולא עם אתר שנראה כאילו החזרנו אותו משנות ה- 80, אז התחלנו לעבוד על זה.

הגדרת יעדים

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

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

תוצר ראשוני

לאחר לא מעט מחשבות, התלבטויות, התייעצויות וכד', הגענו לאיפיון הבא: http://s5uemp.axshare.com.

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

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

מה עושים עם זה הלאה

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

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

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

מה עשינו

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

עמוד הבית:
JPG - New Main Page
JPG - New Main Page Extended

עמוד התצוגה:
JPG - New View Page

כל סוף הוא התחלה חדשה

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

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

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

כך זה נראה:
JPG - Heatmap

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

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

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

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

לסיכום

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

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