Case Study · PMI Toys x Disney
איך מעצבים דףלקהל שכבר קנה.
PMI Toys ביקשה דף נחיתה גלובלי לקו MINI BLOCKBUSTER, וההערות של הלקוח חשפו שזה בכלל לא דף נחיתה: המבקר היחיד שמגיע לאתר הוא מי שכבר פתח את הקופסה. שינינו את תפקיד הדף מלהסביר ולמכור לתגמל ולהמשיך את האיסוף, הורדנו את דלת הכניסה, והפכנו את עמוד הסרט למוצר.
אסטרטגיית דףUX/UIעיצוב אינטראקטיביפיתוח Front-end
01The Brief
קופסה שלא מגלהמה יש בתוכה.
PMI Toys משיקה קו אספנות של דיסני ובלוקבאסטר: קלטת VHS אטומה, שש שקיות עלומות בפנים, וסרט אחד שהשם שלו לא מופיע בשום מקום על האריזה. הבקשה הייתה דף נחיתה גלובלי.
The Problem
שני מותגים שאי אפשר לערבב
בלוקבאסטר ודיסני הם שני עולמות ויזואליים שנלחמים זה בזה. בלוקבאסטר הוא כחול וצהוב, מדף, מדבקות, קוד מוצר. דיסני הוא האיור עצמו, והוא לא סובל שום פילטר מעליו. חיבור עצלן בין השניים נגמר בנוסטלגיית שנות התשעים גנרית, ניאון ורוד ורשת סגולה, שגם נראית כמו כל דבר אחר וגם נלחמת בחום של דיסני.
ומעל זה מוצר שהמכניקה שלו היא הסתרה: הקונה לא בוחר סרט ולא יודע מה קיבל עד שהוא פותח שש שקיות. דף מסחרי רגיל היה צריך להראות את המוצר, וכאן אסור להראות את מה שיש בו.
The Solution
חדר חשוך שהאור בו בא מהסרט
מה שמחבר בין בלוקבאסטר לדיסני הוא לא הנוסטלגיה ולא הצעצוע. זה הסרט: בלוקבאסטר היא איפה שלקחת אותו, דיסני היא מה שראית, והמשותף הוא הרגע שבו האור בחדר כבה.
מכאן נגזר כל האתר. החושך קבוע, והאור הוא הדבר היחיד שזז. שום דבר לא יושב על רקע, הכל מואר בתוכו. כחול וצהוב של בלוקבאסטר הם הרהיטים בחדר, לא התפאורה, ודיסני מספקת את התאורה.
One Way In
איך בכלל מגיעים לאתר הזה
אין קמפיין, אין חיפוש ואין לינק מהחנות. הכניסה היחידה היא קוד סריקה שמודפס על כרטיס בתוך הקפסולה, והוא פותח את העמוד של הסרט שיצא לקונה הזה. זו כל התשתית שצריך כדי לקרוא את שאר העמוד, והיא גם כל מה שנאמר עליה כאן.
02The First Build
חמישה ימים,אתר חי לאישור.
לא מצגת ולא קבצי עיצוב. בריף חזון כתוב שהוא מקור האמת העיצובי, ואתר אמיתי שעולה לאוויר בכל דחיפה, כך שכל סבב ביקורת הוא לינק שאפשר לגעת בו.
הרגע שלפני שהקלטת רצה
שדה שלג, שורת פתיחה, ואז התמונה נקרעת
הגלילה מנחיתה, הלחיצה פותחת
שתי עבודות שונות בכוונה, בסצנה אחת
קיר שמסתובב סביבך
14 הכותרים, והחדר מקבל את הצבע של מי שבמרכז
The Hinge
הקפסולה נפתחת על הציר האמיתי שלה
הזוג הראשון של הרנדרים היה שתי זוויות מצלמה שונות, ולכן שום דבר לא יכול היה לעבור ביניהם. הפתיחה הייתה חיתוך של המכסה מתוך הרנדר הסגור והזזה שלו הצידה, ומתחתיו בור כהה עם גרדיאנט. מומצא.
הזוג שהגיע מ-PMI צולם במצלמה אחת, ו-400 השורות התחתונות של שני הרנדרים זהות פיקסל אחר פיקסל. כלומר הגוף לא זז בכלל, רק המכסה, וגם הוא רק מסתובב סביב הקצה הרחוק שלו. מאותו רגע הבור הוא הפנים האמיתי של הקופסה, עם השקיות בתוכו.
The Furniture
הריהוט של העמוד בא מהקרטון
הכיתוב שרץ בעמוד הוא הדפוס האמיתי מהאריזה: CATEGORY, AGE GRADE, DATE CODE, BATCH CODE, ITEMS / PACK. שום טיפוגרפיה שהומצאה בשביל לקשט.
ומספר הכותרים בשורה הזאת נקרא מתוך רשימת הסרטים במקום להיכתב לידה, כך שהוא לא יכול לסתור את הקיר שמציג אותם. בפס התחתון רץ מונה קלטת שמראה 1:35 לאורך כל הגלילה, כי העמוד הוא קלטת אחת שרצה.
הפריים הראשון
מה זה, נאמר גדול ומילולית, בלי שצריך לעשות כלום
שישה פריטים, כרשימת מטען
רשימה ממוספרת, לא שישה כרטיסים זהים
03The Feedback
ואז הלקוח כתבאת המשפט שהפיל את הכל.
PMI חזרו עם מסמך הערות על המוקאפ. רובן היו קופי ותיקוני מוצר. שלוש מהן, כמעט באותן מילים, אמרו את אותו דבר על אזורים שונים בעמוד.
"This is redundant as you need to scan this QR code to get the website so they would have completed this process already."
בנינו דף שמסביר מה המוצר, איך הוא עובד ולמה כדאי. כל אחד מהדברים האלה נכון, וכל אחד מהם נכתב למישהו ששוקל לקנות. אבל אין מישהו כזה. הקונה כבר קנה, כבר פתח, כבר סרק, והוא עומד מול המסך כשהקופסה פתוחה לידו.
ההערה השנייה סגרה את זה מהכיוון ההפוך: מה שהאתר כן צריך לעשות היה קבור בעמוד.
"This digital aspect is the most important. Can it be more prominent? The idea is to scan the QR code and unlock your digital content, the rest of the stuff on the website comes secondary."
04The Turn
הדף לא צריך לשכנע.הוא צריך לתגמל.
אותו מוצר, אותה שפה ויזואלית, תפקיד אחר לגמרי. ברגע שהמבקר ידוע, אפשר היה למחוק חצי מהעמוד ולתת לחצי השני את המקום שלו.
- 01
Navigation
הורדנו את דלת הכניסה
ארבעה דברים בעמוד הצביעו על דף בית שהמבקר מעולם לא ראה: הלוגו בתפריט, הלוגו בפוטר, ו-Movies ו-Q&A בלינקים המהירים. כולם כבויים, ומתג אחד מחזיר את כולם.
- 02
Hierarchy
התוכן הדיגיטלי עלה לראש
הטריילר וההמשך לצפייה הם הדבר הראשון בעמוד הסרט, מעל תכולת הקפסולה. זה מה שהמבקר בא בשבילו.
- 03
Copy
הפסקנו להסביר את המנגנון
ההודעה על כותר נעול ירדה לשתי מילים ומשפט אחד. מי שמגיע לכאן סרק קוד מהקופסה שלו לפני חצי דקה, והוא מכיר את זה טוב יותר מכל פסקה.
- 04
Interaction
הקאברים עונים במקום לנווט
בתחתית עמוד כותר אותו קיר, אבל אטום: 13 הכותרים שלא קיבלת לא לוקחים אותך לשום מקום, הם אומרים לך שהם עדיין סגורים.
One Constant, Not Four Edits
החלטת מוצר לא מתחפשת להגדרת סביבה
אפשר היה לכבות את ארבעת הלינקים לדף הבית אחד אחד, בשני קבצים. ככה אתרים מגיעים למצב שבו שלושה כבויים והרביעי חי בשקט. במקום זה הם עונים לקבוע אחד, והדף עצמו ממשיך להיבנות ולהיות זמין: רק הפסקנו לפרסם אותו.
והוא קבוע ולא משתנה סביבה בכוונה, כי זו לא הגדרת דיפלוי. זו החלטה על מה המוצר הזה החודש, והיום שבו היא משתנה הוא יום שבו מישהו עורך שורה אחת ואומר את זה בהודעת הקומיט.
05The Product
עמוד הסרטהוא המוצר.
לא דף הבית. העמוד שאליו הקוד מנחית אותך הוא היעד האמיתי, ולכן הוא זה שנבנה כמו מוצר: נושא אחד שמוחזק במקום, וכל השאר נקרא סביבו.
Pinned Subject
מה שהעמוד מדבר עליו נשאר על המסך
בגרסה הראשונה זו הייתה ערימה של שלוש רצועות, והנושא של העמוד נעלם למעלה בזמן שכל השאר דיבר עליו. עכשיו זו פרישה של שתי עמודות: הנרתיק, השנה והשם מוצמדים, והטריילר, ההמשך לצפייה ותכולת הקפסולה נקראים לצידם.
One List, Not Two
אותם שישה חפצים, אותם שמות
רשימת התכולה כאן היא אותה רשימה של דף הבית, ולא מימוש שני שלה. קורא שפתח את הקופסה בדרך פנימה ואז נכנס לכותר צריך לפגוש את אותם חפצים מתוארים באותה צורה, ולא שתי רשימות שמספרות עליהם שני דברים.
Phone First, Really
כמעט כל מי שיגיע לכאן יגיע מטלפון
זה לא סעיף רספונסיביות, זה המכשיר הראשי. סורקים קוד עם מצלמת הטלפון, ולכן כל החלטה בעמוד נמדדה קודם שם: הסצנה המוצמדת מתפרקת לזרימה רגילה כי למהלך מוצמד אין לאן ללכת במסך של טלפון, והנרתיק קיבל גובה יחסי אחרי שבגודל קבוע הוא תפס ארבע חמישיות מהפריים והשם נפל מתחת לקפל.
גם פס המונה התכווץ. הוא הגן על יעד מגע באלמנט שמוסתר מקוראי מסך ואין בו מה ללחוץ, כלומר שילם שמונה אחוזים מגובה המסך על שלוש פיסות טקסט.
06The Colour Rule
החושך קבוע.האור הוא מה שזז.
ההתנהגות הכי חשובה באתר היא גם הכי שקטה: לכל כותר הילה משלו, והחדר מקבל את הטמפרטורה של הסרט שמסתכלים עליו. זה לא קישוט, זה מידע.
1955
Lady and the Tramp
#D98A22
הכרזה היא שדה זהוב אחד, ולכן האור שלה הוא הנייר ולא הכלבים.
Curated, Not Sampled
למה לא לתת למחשב לדגום את הכרזה
דגימה אוטומטית מחזירה את הצבע שתופס הכי הרבה שטח, וזה כמעט תמיד הרקע ולא הסרט: השמיים באלאדין, הים במלך האריות. כל אחת מ-14 ההילות נבחרה ביד מהכרזה של הכותר עצמו, ואז הורמה לתחום שבו הגרדיאנט של ההילה נקרא כמקור אור ולא כדיו.
התאורה הסביבתית מתחתן נשארת כחול בלוקבאסטר לאורך כל האתר ולא משנה גוון אף פעם, בדיוק כדי שהשינוי יישאר משמעותי: גוון כאן אומר "זה הסרט שאתה מסתכל עליו".
Snow White
אותו קיר, חדר אדום
Bambi
אותו קיר, חדר ענברי
Cinderella
אותו קיר, חדר כחול
A Notice, Not A Gate
גם ההודעה על כותר נעול מוארת בצבע שלו
לוחצים על כותר אטום, ומקבלים תשובה עליו בשמו. יש בה כפתור אחד והוא סוגר. לא מחיר ולא הרשמה: הסיבה שאי אפשר לפתוח את הסרט הזה היא שהוא בקלטת שעוד לא הגיעה אליך, וזה המוצר עובד כמו שתוכנן ולא קיר שהוצב מולו.
וההילה מאחורי הכרטיס היא הצבע של אותה כרזה, כדי שההודעה תרגיש שייכת לפוסטר שנלחץ ולא כמו הודעת מערכת שיכלה להגיע מכל מקום.
שתי מילים ומשפט אחד
הקורא מכיר את המכניקה טוב יותר מכל פסקה
07What We Took
מה שלקחנולפרויקט הבא.
הפרויקט הזה לימד אותנו שלושה דברים על דפי מוצר, וכולם התחילו מהערה אחת של לקוח שהייתה נכונה.
- 01
קודם מחליטים מי מגיע, אחר כך מה כותבים.
דף שלא יודע מי נוחת עליו כותב לכולם, ובפועל לא מדבר לאף אחד. ברגע שידענו שהמבקר היחיד הוא מי שכבר פתח את הקופסה, חצי מהתוכן הפך למיותר וחצי קיבל מקום.
- 02
כשהקהל מכיר את המנגנון, הסבר הוא בזבוז.
פסקה שמסבירה למישהו את מה שהוא עשה בעצמו לפני רגע לא מוסיפה ביטחון, היא מוסיפה חיכוך. קיצור אגרסיבי של הקופי היה השדרוג הכי גדול בעמוד.
- 03
כשהמותג נכנס דרך חפץ, מתחילים מהחפץ.
שפת הצורה של האתר נלקחה מהמוצר עצמו: הקפסולה שנפתחת, הדפוס מהקרטון, מונה הקלטת. שום צורה מופשטת, ולכן שום דבר שנראה כמו תבנית.
©Disney/Pixar
BLOCKBUSTER® and trademarks and/or trade dress are trademarks of Blockbuster L.L.C. Used under license.
Let's Talk
יש לך מוצרשהדף שלו מדבר לקהל הלא נכון?
בוא נבין מי באמת נוחת אצלך, ומה הדף אמור לעשות בשבילו.
Next Case
