Mobile editing at Wixעריכת מובייל ב-Wix

Wait, my site has a mobile version?רגע, לאתר שלי יש גרסת מובייל?

A first-visit intro that brought small business owners into the Wix Mobile Editor, and showed them what to change first.היכרות לביקור הראשון שהכניסה בעלי עסקים קטנים ל-Mobile Editor של Wix, והראתה להם מה לשנות קודם.

Roleתפקיד UX designerUX designer
Teamצוות Sole designer in the
Mobile Editor group
מעצב יחיד בקבוצת
ה-Mobile Editor
Periodתקופה 2016 - 2017
Platformפלטפורמה Wix Editor (web),
for mobile sites
עורך Wix (ווב),
לאתרי מובייל

Overview

A site owner, not a web designer

Most people who build a site on Wix are not web designers. They are small business owners and individuals who spend weeks on the desktop version and expect the phone version to look after itself. Wix did build a mobile version of every site automatically. To change it there was the Mobile Editor, and fewer than one in five users ever opened it.

I was the only designer on the Mobile Editor group. This case study follows one part of that work: the intro that brings an owner into the Mobile Editor for the first time, and shows them what to change first.

Diagram: the owner's path through the Mobile Editor in four steps: discover it from the desktop editor, enter it with a welcome and a short video, the intro with 3 to 5 steps picked for this site (highlighted), then edit and publish. Below, what I designed along the way: access point, welcome video, intro wizard, optimise layout, hidden elements, mobile-only content, header on scroll, animations, quick action bar, mobile menu and the mobile tab in app settings
The owner's path, and what I designed along it. The intro sits between the first visit and the editing.

My role. I owned the owner's whole path, from finding the Mobile Editor, through every edit inside it, to leaving it. I worked with a product manager, a tech lead, four to five developers and a UX content writer, and reported to the editor's UX manager. The intro is the part I have research, prototypes and numbers for.

47%
of owners completed the intro
60%
kept the options they chose when they published
500%
more owners added a quick action bar

The problem

A fragile first visit

An owner's site was usually live before they thought about phones. Then their own visitors used it on mobile, and they found things to fix. By then the desktop site felt finished, and touching mobile felt like a risk to it.

BI and product analysis showed under 20% of users ever visiting the Mobile Editor. The product manager brought three problems:

I built an emotional journey map from support tickets and interviews. It follows a new owner who has just finished the home page and wants to see it on a phone. The lowest point is the moment they enter: "This is not what I expected. Where is my menu?"

Emotional journey map titled Mobile Editor first time emotion experience: eight stages from a moment before entering to editing the page, with a face for each stage on a curve from positive to negative, and rows for expectations, actions, what the user thinks or says, and ideas for improvement. The lowest point is first entering the Mobile Editor.
The journey map: eight stages, from curious before entering to stressed and confused on arrival. The ideas row along the bottom marks what the first visit needed. Click to open full size.

How I worked

The concept from UX, the goals from product

The goals came from product. The concept was mine: a short intro on the first visit, before the full editor. Before choosing its shape:

A spreadsheet comparing mobile onboarding in nine products by business market, editor exposure, first entrance, completion process, navigation and content, beside a research deck slide about introducing the flow
The benchmark sheet and research deck.
Paper sketches on a desk: a walk-through for the mobile menu, scroll effects, action bar and back to top, with arrows between screens and illustration tests
Sketches of the walk-through, feature by feature.

Design decision 1

Only what matters for this site

The full Mobile Editor showed everything at once, and the journey map showed owners scrolling up and down, looking for somewhere to start.

The decision

Show each owner 3 to 5 steps: the changes with the most impact on their mobile site. For a site nobody had touched yet, the steps came from the template category. Once the owner had made changes, they came from their own edits.

  • One choice per step. How the menu opens, how the header scrolls, where the quick action bar sits.
  • Built to grow. Later, the same steps could introduce new features or what mattered most for one site.
Intro step: This is your mobile menu. Choose how your menu opens: on the left, in the center or on the right. The owner's site is shown on a phone with the menu open.
The menu: one choice, shown on the owner's own site.
Intro step: This is your header. Set how it looks when visitors scroll: scroll, fixed, disappears or fades out, beside the owner's site on a phone.
The header: four ways it can behave when visitors scroll.

Design decision 2

Safe to touch

The fear in the tickets was specific: "Does changing the mobile affect the desktop?" An intro that asked owners to change things had to answer that before anything else.

The decision

Make every step say it, and make it true. The intro opens with "Changes you make won't affect your site on desktop", and the owner's own site sits on a phone beside every choice.

  • Nothing goes live on its own. Choices reach visitors only when the owner publishes.
  • Skip, and come back. The intro can be skipped and reopened later.
  • New sites first. It launched for new sites, then rolled out slowly to sites already published.
The intro's first screen: Meet your site on mobile. You can start customizing it here. Changes you make won't affect your site on desktop. Buttons: Let's go and Skip this. The owner's site is shown on a phone on the right.
The first screen answers the fear before asking for anything.

Design decision 3

A full page, not a pop-up

The same steps could live in very different shells. I prototyped four in Axure and tested them with real users: a dialog over the editor, a full page, a suggestion card inside the editor, and a list of steps down the side.

The decision

The full-page intro won. Each step gets the whole screen: the choice on one side, and the owner's site on a phone, at the size visitors will see it, on the other.

Prototype A: a set-up dialog over the editor, choosing a header effect, with a phone preview
Prototype B: a full-page mobile wizard asking where social links should go, with a phone preview
Prototype C: a small mobile suggestion card inside the editor, next to the design panel
Prototype D: a list of steps down the side, with a phone carousel in the middle

The four directions tested: a dialog, a full page, a suggestion card and a side list. The full page won.


Design decision 4

The intro worked, the handover didn't

In testing, people liked the intro. They called it clean and simple. Then they finished it, landed in the full Mobile Editor, and felt overwhelmed.

What I missed

I had designed the intro as an ending. For the owner it was a beginning: the real work was in the editor behind it.

The fix was a clear last step: what else the owner can do on mobile, and one button that continues into their Mobile Editor.

The intro's last screen: Good job! Check what else you can do to look great on mobile, a welcome video, and a button: Go to my mobile editor
The last step points forward, into the editor.
The Mobile Editor after the intro: the owner's site on a phone, with the mobile tools on the left: background, mobile tools, hidden elements and page layout optimizer
Where it leads: the Mobile Editor and its tools.

How it was built

From Sketch to Zeplin to the build

This was 2016 and 2017. I designed in Sketch and Photoshop, prototyped in Axure, and worked out the intro's motion in Principle. Final screens and specs went to Zeplin, which was the reference for the developers.

I worked in one-on-one sessions with the front-end developer, and reviewed each piece once it was built. I wrote the first copy in my own words, and the UX content writer finalised it.

Spec board for the intro: content structure at 1280 by 800 with labelled text styles, buttons and thumbnails, content spacing with measured paddings, the last screen, and maximum spacing from the centre at 1460 and wider
Part of the spec: structure, spacing and how the layout holds on wide screens. Click to open full size.

The work also reached past the Mobile Editor. The intro's progress bar went into the editor's design system, and app settings panels gained a mobile tab that sent owners to the Mobile Editor.


Outcome

Yes, and here's what to change first

Measured with an A/B test against no intro, a before and after comparison and BI dashboards, after three months:

The first visit, before and after

After I moved to another group at Wix, the intro stayed. As far as I know, it kept showing different steps by template and by the owner's own edits.

What I would do differently

Test the handover as hard as the intro. Next time I would run an A/B/C test of the wizard against a walkthrough or a recommendation checklist inside the full Mobile Editor, aimed at the moment owners felt overwhelmed.

סקירה

בעלי אתר, לא מעצבי אתרים

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

הייתי המעצב היחיד בקבוצת ה-Mobile Editor. הפרויקט הזה עוקב אחרי חלק אחד מהעבודה: ההיכרות שמכניסה בעל אתר ל-Mobile Editor בפעם הראשונה, ומראה לו מה כדאי לשנות קודם.

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

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

47%
מבעלי האתרים השלימו את ההיכרות
60%
שמרו את האפשרויות שבחרו כשפרסמו
500%
יותר בעלי אתרים הוסיפו סרגל פעולות מהירות

הבעיה

ביקור ראשון שביר

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

נתוני BI וניתוח מוצר הראו שפחות מ-20% מהמשתמשים נכנסו אי פעם ל-Mobile Editor. מנהל המוצר הביא שלוש בעיות:

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

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

איך עבדתי

הקונספט מחוויית המשתמש, היעדים מהמוצר

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

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

החלטת עיצוב 1

רק מה שחשוב לאתר הזה

ה-Mobile Editor המלא הציג הכול בבת אחת, ומפת המסע הראתה בעלי אתרים גוללים למעלה ולמטה ומחפשים מאיפה להתחיל.

ההחלטה

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

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

החלטת עיצוב 2

בטוח לגעת

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

ההחלטה

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

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

החלטת עיצוב 3

עמוד מלא, לא חלון קופץ

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

ההחלטה

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

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

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


החלטת עיצוב 4

ההיכרות עבדה, המעבר לא

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

מה פספסתי

עיצבתי את ההיכרות כסוף. בשביל בעל האתר היא הייתה התחלה: העבודה האמיתית חיכתה בעורך שמאחוריה.

הפתרון היה צעד אחרון ברור: מה עוד אפשר לעשות במובייל, וכפתור אחד שממשיך ל-Mobile Editor של בעל האתר.

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

איך זה נבנה

מ-Sketch, דרך Zeplin, ועד הפיתוח

זה היה 2016 ו-2017. עיצבתי ב-Sketch וב-Photoshop, בניתי אבות טיפוס ב-Axure, ועבדתי על התנועה של ההיכרות ב-Principle. המסכים והאפיונים הסופיים עברו ל-Zeplin, שהיה המקור של המפתחים.

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

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

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


תוצאות

כן, והנה מה לשנות קודם

נמדד בבדיקת A/B מול היעדר היכרות, בהשוואה של לפני ואחרי ובדשבורדים של BI. אחרי שלושה חודשים:

הביקור הראשון, לפני ואחרי

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

מה הייתי עושה אחרת

לבדוק את המעבר באותה רצינות כמו את ההיכרות. בפעם הבאה הייתי מריץ בדיקת A/B/C של האשף מול סיור מודרך או רשימת המלצות בתוך ה-Mobile Editor המלא, שמכוונים לרגע שבו בעלי האתרים הרגישו מוצפים.