اُتیچر مارکت‌پلیسی برای کلاس‌های آنلاین و زنده‌ی زبان است. وب‌سایت و پنل تازه‌اش بر پایه‌ی سه سؤال کوتاه ساخته شده که زبان‌آموز را به استاد مناسبش می‌رسانند.
سایت قدیمی شلوغ بود، رزرو را در یک پاپ‌آپ جا داده بود و راه روشنی برای انتخاب استاد پیش پای زبان‌آموز نمیگذاشت؛ استادها هم ابزار کافی برای ادارهی کلاس‌هایشان نداشتند. استراتژی یک وب‌سایت و یک پنل تازه خواسته بود.
نقش
سینا طراح محصول بود و در کنار مدیر محصول کار کرد؛ از بررسی سایت قدیمی، ساختار و فلوها تا وب‌سایت، رزرو، پنلهای زبان‌آموز، استاد و مدیریت، سیستم طراحی و تست کاربردپذیری.
نتیجه
در سال ۲۰۲۳ منتشر شد. سه سال بعد، oteacher.org هنوز روی همین پایه کار می‌کند، با همان انتخاب استاد در سه قدم.
شکل 01
شکل 01صفحه‌ی خانه در موبایل، با انتخاب استاد در سه قدم.
01زمینه
استراتژی به محصولی تبدیل شد که مردم از آن استفاده می‌کنند
اُتیچر یک مارکت‌پلیس ایرانی برای کلاس‌های آنلاین و زنده‌ی زبان است. زبان‌آموزها استادشان را انتخاب می‌کنند، اغلب اول یک کلاس آزمایشی می‌گیرند و بعد کلاس رزرو می‌کنند. سینا و مدیر محصول استراتژی محصول را با هم نوشتند و نتیجه‌اش نقشه‌ی راهی با دو طرح بود: یک وب‌سایت تازه و یک پنل تازه. کار استراتژی را در مطالعه‌ی موردی خودش ببینید؛ این صفحه درباره‌ی طراحی است.
محصول فارسی و راست‌به‌چپ است؛ زیرنویس هر تصویر می‌گوید آن صفحه چه چیزی را نشان می‌دهد.
02مسئله
سایت قدیمی کجا مشکل داشت
مصاحبه‌های مرحله‌ی استراتژی نشان داده بودند هر طرف بازار چه کم دارد. زبان‌آموزها استادی می‌خواستند که با هدفشان جور باشد و مسیر یادگیری برایشان روشن نبود. استادها هم ابزار بهتری برای تدریس و درآمد بیشتری می‌خواستند.
در اسفند ۱۴۰۱ سینا ۶۹ صفحه‌ی سایت قدیمی oteacher.org را یکی‌یکی بررسی کرد و هر مشکل را با یکی از این برچسب‌ها مشخص کرد: بصری، ساختار، محصول یا متن. مهم‌ترین مشکل‌ها:
صفحه‌ی خانه شلوغ بود و یک CTA را چند جا تکرار می‌کرد.
انتخاب هدف یادگیری، نتیجه‌ها را به همان هدف محدود نمی‌کرد.
رزرو، یعنی مهم‌ترین قدم، در یک پاپ‌آپ جا داده شده بود.
صفحه‌های داخلی نه مسیر صفحه داشتند و نه راه برگشت.
پرسش‌های متداول به‌جای یک صفحه، در صفحه‌های زیادی پخش شده بود.
بیشتر این مشکل‌ها به دو لحظه برمی‌گردند: انتخاب استاد و رزرو کلاس. تصمیم‌هایی هم که در ادامه آمده‌اند از همین دو لحظه شروع می‌شوند.
کار در ۲۰۲۳ چطور پیش رفت
01
بررسیدی تا اسفند ۱۴۰۱: بنچمارک محصولات دیگر، بعد بررسی صفحه‌به‌صفحه‌ی سایت قدیمی و برنامه‌ی ردیابی کلیک برای صفحه‌ی خانه‌اش.
02
مفهوم‌هااوایل اسفند ۱۴۰۱: پنج ایده، بعد ۳۶ صفحه‌ی مفهومی از پنل، پروفایل، فهرست استادها و صفحه‌ی خانه. اولین اجزای سیستم طراحی پیش از این‌ها ساخته شدند.
03ساختار
ساختار پیش از صفحه‌ها طراحی شد
سینا معماری اطلاعات چهار بخش را طراحی کرد: وب‌سایت، پنل زبان‌آموز، پنل استاد و پنل مدیریت. یک بخش مدیریت نقش‌ها هم به نقش‌های تیم، مثل مدیر ارشد، ادمین، پشتیبانی، اپراتور و مالی، سه سطح دسترسی می‌دهد.
بعد برای هر قابلیت یک مستند کوتاه نوشته شد. هر مستند برای برنامه‌نویس‌ها به صفحه‌ی خودش در Confluence پیوند داشت و وضعیتش از «نیاز به بررسی» تا «انجام‌شده» دنبال می‌شد. مثلاً رزرو در شش قدم مشخص شد: درس، نوع کلاس، تاریخ، ساعت، تعداد جلسه‌ها و پرداخت؛ در کلاس گروهی، زبان‌آموزهای دیگر هم اضافه می‌شوند.
مسیرهای اصلی هم به شکل فلو کشیده شدند:
استاد درخواست می‌دهد: مشخصات، درس‌ها، گروه‌های سنی و مدارک، بعد بررسی کارشناس و مصاحبه پیش از اولین کلاس.
زبان‌آموز وارد کلاس می‌شود و در آن شرکت می‌کند.
کلاس لغو می‌شود: از طرف زبان‌آموز، از طرف استاد، یا چند جلسه با هم.
کاربر وارد می‌شود و هر نقش فقط چیزی را می‌بیند که اجازه‌اش را دارد.
پنل مدیریت برای هر درخواست پیوند مصاحبه، زمان و مصاحبه‌کننده را نگه می‌دارد؛ دلیلش همین فلوی درخواست استاد است.
04تصمیم‌های کلیدی
پنج تصمیم پشت طراحی
هر تصمیم جواب مشکلی است که بررسی سایت یا مصاحبه‌ها پیدا کردند. فصل‌های بعدی همین تصمیم‌ها را روی صفحه نشان می‌دهند.
01
پیش از نشان دادن استادها، سه سؤال بپرس
زبان‌آموزها نمی‌دانستند کدام استاد به کارشان می‌آید و صفحه‌ی خانه‌ی قدیمی شلوغ بود. با انتخاب زبان، هدف و سطح، فهرست قبل از باز شدن کوتاه می‌شود.
گزینه‌های دیگر
فقط یک فهرست استاد با فیلتر. این فهرست هنوز با یک قدم در دسترس کسانی است که ترجیح می‌دهند خودشان بگردند.
بده‌بستان
یک قدم بیشتر قبل از دیدن اولین استاد، در عوض فهرستی کوتاه‌تر و مناسب‌تر.
شواهد
انتخاب استاد هنوز روی صفحه‌ی خانه‌ی oteacher.org است.
05انتخاب استاد
صفحه‌ی خانه پیش از نشان دادن استادها سه سؤال می‌پرسد
صفحه‌ی خانه سه سؤال کوتاه می‌پرسد: کدام زبان خارجی، با چه هدفی (مصاحبه‌ی کاری، زبان عمومی، اسپیکینگ یا مهاجرت) و در چه سطحی، از مبتدی تا پیشرفته. جواب‌ها فهرستی از استادهای پیشنهادی همان زبان را باز می‌کنند.
فهرست استادها همین منطق را به شکل فیلتر نگه می‌دارد: زبان، هدف، کلاس آزمایشی، امروز، جنسیت استاد، تاریخ و ساعت روز. در موبایل فیلترها مثل برگه‌هایی از پایین باز می‌شوند. کسی که در انتخاب کمک می‌خواهد، روی فهرست پیوندی به مشاوره پیدا می‌کند. به زبان‌آموزی هم که هنوز کلاسی ندارد، در فهرست خالی کلاس‌ها یک استاد مناسب پیشنهاد می‌شود.
سه جواب کار یک پنل فیلتر بلند را می‌کنند. کسی که ترجیح می‌دهد خودش بگردد، فیلترها را هنوز در فهرست دارد.
دسکتاپ
موبایل
شکل 02انتخاب استاد در سه قدم روی صفحه‌ی خانه‌ی دسکتاپ و در موبایل.
06رزرو
بازدیدکننده آزادانه می‌گردد و رزرو صفحه‌های خودش را دارد
جدی‌ترین نکته‌ی بررسی درباره‌ی رزرو بود: رزرو مهم‌تر از آن است که در یک پاپ‌آپ جا شود، اما سایت قدیمی همین کار را کرده بود. در طراحی تازه، رزرو صفحه‌های خودش را دارد: انتخاب درس، نوع کلاس و بسته، یک ساعت از تقویم استاد، و بعد فاکتور و پرداخت. کلاس آزمایشی هم همین قدم‌ها را دارد.
بازدیدکننده بدون حساب کاربری هم استادها، دوره‌ها و تقویم‌ها را می‌بیند. پیام ثبت‌نام یا تکمیل مشخصات ناقص فقط وقتی می‌آید که بخواهد رزرو کند. پرداخت موفق و ناموفق هم هرکدام صفحه‌ی جداگانه‌ای دارند.
وقتی حساب کاربری فقط در لحظه‌ی رزرو خواسته شود، اولین بازدید بی‌مانع می‌ماند.
اول عضویت، بعد رزرو
07تقویم
تقویم به شکل هشت داستان کاربر نوشته شد
در یک مارکت‌پلیس کلاس، نشان دادن زمان از همه سخت‌تر است. برای همین تقویم استاد از داستان‌های کاربر شروع شد. هشت داستان روی هم حالت‌هایی را نام می‌برند که یک بازه از آن‌ها می‌گذرد: آزاد، انتخاب‌شده، قابل رزرو، رزروشده توسط زبان‌آموز، آماده‌ی حذف، در حال رزرو توسط یک نفر دیگر و بخشی از یک دوره.
همین حالت‌ها در تقویم خود استاد، در تقویمی که زبان‌آموز روی صفحه‌ی استاد می‌بیند و در مرحله‌های رزرو تکرار می‌شوند. منطقه‌ی زمانی هم همیشه نشان داده می‌شود.
هشت داستان، به صورت متن:
استاد باید بتواند زمان‌های خالی تقویم خود را ببیند.
استاد باید بتواند زمان‌هایی را که برای رزرو انتخاب کرده ببیند، پیش از آن‌که سیستم آن‌ها را قابل رزرو ثبت کند.
استاد باید بتواند زمان‌های قابل رزرو را در تقویم خود ببیند.
استاد باید بتواند زمان‌های ثبت‌شده توسط زبان‌آموز را ببیند و نتواند آن‌ها را حذف کند.
استاد باید بتواند زمان‌های قابل رزرو را از زمان‌های ثبت‌شده توسط زبان‌آموز تشخیص دهد.
استاد باید بتواند زمان‌هایی را که برای رزرو باز کرده است از تقویم خود حذف کند.
تا وقتی کاربر دیگری در حال رزرو یک ساعت است، استاد نمی‌تواند آن را برای رزرو کلاس انتخاب کند.
استاد فقط می‌تواند ساعت‌های رزروشده برای دوره‌های خود را ببیند و نمی‌تواند روی آن‌ها کاری انجام دهد.
در هشت داستان، هفت حالت مشخص شد. تقویم باید نشان می‌داد هر ساعت دست کیست: استاد، یک زبان‌آموز یا یک دوره.
تقویم استاد
شکل 05هشت داستان کاربر همان‌طور که کشیده شده‌اند، هرکدام با حالتی که اضافه می‌کند.
08استادها
استادها مرحله‌به‌مرحله درخواست می‌دهند، بعد کلاس‌هایشان را خودشان اداره می‌کنند
استاد شدن پنج قدم دارد: گروه‌های سنی، مشخصات فردی، دوره‌هایی که استاد می‌خواهد درس بدهد، مدارک هویتی و تحصیلی، و صفحه‌ی آخری که در آن منتظر زمان مصاحبه می‌ماند. بعد هر درخواست با پیوند مصاحبه، زمان و مصاحبه‌کننده‌اش به پنل مدیریت می‌رسد.
استادی که پذیرفته شود، کسب‌وکارش را از پنل اداره می‌کند: قیمت یک جلسه و بسته‌ها، ساعت‌های خالی، دوره‌ها، یک ویدیوی معرفی با نکته‌های ضبط، نظرهایی که باید جواب بدهد، و داشبوردی با درآمد و بازدید پروفایل. مستند قیمت‌گذاری نموداری هم پیش‌بینی کرده بود که میانگین قیمت استادهای دیگر را برای همان درس نشان دهد.
استادها قیمت، ساعت و دوره‌هایشان را خودشان تعیین می‌کنند. برای همین پنلشان نمی‌توانست فقط یک پروفایل باشد؛ باید مثل ابزار یک کسب‌وکار کوچک کار می‌کرد.
در انتظار مصاحبه
09سیستم طراحی
همه‌ی بخش‌ها روی یک سیستم طراحی ساخته شدند
نسخه‌ی اول سیستم طراحی ۳۴۵ جزء در ۲۴ مجموعه دارد: رنگ، تایپوگرافی، فیلدهای فرم، دکمه‌ها، مسیر صفحه، چک‌باکس و دکمه‌ی رادیویی، کلیدهای روشن‌وخاموش، مودال‌ها، پیام‌های کوتاه، بلوک‌های پروفایل، منوی کناری، سربرگ و پابرگ برای کاربر واردشده و واردنشده در سه عرض، نشان‌های برند، و حالت روشن و تیره.
این سیستم پیش از بیشتر صفحه‌ها ساخته شد؛ برای همین ثبت‌نام، قدم‌های رزرو و پنل‌ها مثل یک محصول واحد دیده می‌شوند.
رنگ
10دورهای طراحی
پنج ایده به دو دور پیش‌نویس رسید
کار با چند ایده‌ی مختلف شروع شد. پنج ایده برای وب‌سایت به ۳۶ صفحه‌ی مفهومی رسید. سه ایده به هفت نسخه از پنل کاربر تبدیل شدند که هرکدام با منوی کناری باز و بسته کشیده شد. پروفایل، فهرست استادها و صفحه‌ی خانه هم هرکدام چهار تا شش مفهوم گرفتند. پنل نهایی منوی سفید با نشانگر سرمه‌ای را از ایده‌ی اول نگه داشت.
بعد بیشتر صفحه‌ها دو بار کشیده شدند. تیتر صفحه‌ی خانه از یادگیری زبان همیشه و همه‌جا با استادی که دوست دارید، به کلاس با هر استادی که خودتان انتخاب کنید، و بعد به کلاسی که براساس نیاز شما طراحی شده رسید. ثبت‌نام استاد به‌جای یک تصویر لپ‌تاپ، برای هر قدم یک تصویر گرفت و صفحه‌ی آخرش از خوش‌آمد به انتظار برای مصاحبه تغییر کرد. صفحه‌ی ورود هم به‌جای یک خط موقت، پنج وعده‌ی کوتاه گرفت.
در سه نسخه‌ی تیتر، تمرکز از استاد به نیاز زبان‌آموز می‌رود.
ایده‌ی ۱: منوی سفید
پیش‌نویس اول: یادگیری همیشه و همه‌جا با استاد دلخواه
قبل
بعد
قبل
بعد
11تست
طراحی چطور سنجیده شد
طراحی با کاربرها تست شد. یک تست کاربردپذیری هدایت‌شده روی فهرست استادها، هم حضوری و هم از راه دور، با پروتوتایپ فیگما و در UsabilityHub انجام شد. از شرکت‌کننده‌ها خواسته شد یک استاد پیدا کنند، به او پیام بدهند، یک کلاس آزمایشی رزرو کنند و فهرست را بر اساس ساعت و جنسیت استاد فیلتر کنند. تست زمان انجام هر کار، خطاها، کامل شدن کار و رضایت را اندازه گرفت. یک تست ده‌ثانیه‌ای هم سنجید که افراد از صفحه‌ی اول چه چیزی به خاطر می‌آورند.
با هیت‌مپ‌های توجه، طراحی قدیم و جدید در پنج صفحه‌ی کلیدی مقایسه شد: صفحه‌ی خانه، فهرست استادها، صفحه‌ی یک استاد، فهرست کلاس‌ها و تقویم استاد. صفحه‌ی خانه‌ی جدید حدود یک‌چهارم کوتاه‌تر از قبلی است.
سینا برای صفحه‌ی خانه‌ی سایت قدیمی هم یک برنامه‌ی ردیابی کلیک چیده بود. این برنامه CTA اصلی، ترتیب زبان‌ها و پیوندهای سربرگ و پابرگ را پوشش می‌داد تا معلوم شود کدام بخش‌ها ارزش ماندن دارند.
12پنل‌ها
زبان‌آموزها یک پنل دارند و تیم یک پنل مدیریت
پنل کاربر هر چیزی را که زبان‌آموز بعد از ورود لازم دارد یک‌جا جمع می‌کند. کلاس‌ها با فیلترهای پیش‌رو، زمان‌بندی‌نشده، منتظر تعیین وضعیت، برگزارشده و لغوشده دسته‌بندی می‌شوند. کنارشان یک تقویم، کیف پول با موجودی، افزایش موجودی و تراکنش‌ها، گزارش مالی کلاس به کلاس، پیام‌ها و پروفایلی هست که زبان‌آموز در آن هدف و سطحش را تعیین می‌کند. برای هر کلاس می‌شود از یک پنجره نظر ثبت کرد، گزارش داد یا آن را لغو کرد، و فهرست کلاس‌ها حالت تیره هم دارد.
پنل مدیریت مجموعه‌ی کوچک‌تری است: فهرست کاربران با جست‌وجو بر پایه‌ی شناسه، نام، ایمیل و شماره‌ی همراه، کلاس‌ها با فیلتر نوع و وضعیت، و درخواست‌های استادها. نقشه‌ی معماری اطلاعاتش در ادامه آمده است.
کلاس‌ها
بخش‌های پنل مدیریت و آنچه در هرکدام هست
01
فهرست کاربران
جست‌وجو و فیلتر
نام
نقش
گزارش کلاس‌ها
گزارش پرداخت‌ها
پیام‌رسان
نام کاربری
بازنشانی رمز عبور
فعال یا غیرفعال کردن نقش‌ها
ویرایش اطلاعات
02
مدیریت تخفیف
ساخت تخفیف
فهرست تخفیف‌ها
مبلغ
سهم استاد
سهم اُتیچر
وضعیت
13نتایج
منتشر شد، و هنوز پایه‌ی کار است
وب‌سایت و پنل تازه در سال ۲۰۲۳ منتشر شدند. سه سال بعد، oteacher.org هنوز روی همین پایه کار می‌کند و انتخاب استاد در سه قدم هنوز روی صفحه‌ی خانه‌اش است، هرچند شرکت از آن زمان بخش‌هایی را تغییر داده است.
جزء در سیستم طراحی
۳۴۵
۲۴ مجموعه: رنگ، تایپ، فرم‌ها، دکمه‌ها، منوها، مودال‌ها، و حالت روشن و تیره
خروجی تحویل‌شده
صفحه در عرض دسکتاپ و موبایل
۲۲۰
۱۲۵ صفحه‌ی دسکتاپ و ۹۵ صفحه‌ی موبایل، هرکدام در عرض تبلت هم کشیده شده
خروجی تحویل‌شده
صفحه از سایت قدیمی که بررسی شد
۶۹
هر مشکل با برچسب بصری، ساختار، محصول یا متن، در اسفند ۱۴۰۱
خروجی تحویل‌شده
آنچه تحویل شد
↳وب‌سایت تازه
↳پنل تازه
14نقش من
سهم سینا
سینا طراح محصول بود و همه‌ی این بخش‌ها را در کنار مدیر محصول طراحی کرد.
مسئولیت با من
↳بررسی سایت قدیمی، بنچمارک و برنامه‌ی ردیابی کلیک
↳معماری اطلاعات، نقش‌های کاربری و فلوها
↳صفحه‌ی خانه، انتخاب استاد در سه قدم، صفحه‌های استاد و دوره
↳رزرو، با کلاس آزمایشی
↳ثبت‌نام استاد و ورود
↳پنل کاربر، تنظیمات استاد و مدیریت دوره
↳تقویم و داستان‌های کاربرش
↳پنل مدیریت
↳سیستم طراحی و مفهوم‌ها
↳تست کاربردپذیری و هیت‌مپ‌های توجه
مسئولیت مشترک
↳استراتژی پشت این طراحی، همراه با مدیر محصول: مصاحبه‌ها، پرسونا‌ها، جایگاه برند و نقشه‌ی راه
همکاری
↳مدیر محصول، در تمام مراحل، از جمله مستندهای برداشت وجه و قیمت‌گذاری
بسته‌های آیکون رایگان و تصویرهای سه‌بعدی داخل صفحه‌ها از مجموعه‌های دیگران هستند. طرح‌های مرجع و اسکرین‌شات‌های سایت قدیمی و محصولات دیگر در این صفحه نیامده‌اند.
15آنچه یاد گرفتم
چه چیزی را نگه می‌دارم و چه چیزی را عوض می‌کنم
01
سریع کار کن، از طراحی رابط کاربری تا استراتژی محصول
در حدود یک سال، کار از استراتژی محصول که با مدیر محصول نوشتیم شروع شد و به بررسی سایت قدیمی، ساختار و فلوها، یک سیستم طراحی و ۲۲۰ صفحه رسید. درسی که از اُتیچر گرفتم: خیلی سریع کار کن و کارهای زیادی را پیش ببر، از طراحی رابط کاربری تا استراتژی محصول.
02
سایت تازه را از روز انتشار ردیابی کن
برنامه‌ی ردیابی کلیک برای صفحه‌ی خانه‌ی سایت قدیمی بود. اگر همان برنامه از روز اول روی سایت تازه هم اجرا می‌شد، هم بازطراحی نقطه‌ای برای مقایسه داشت و هم این صفحه عددهایی برای نشان دادن.
03
پیش‌نویس‌های قدیمی را برای برنامه‌نویس‌ها بایگانی کن
صفحه‌ها دو بار کشیده شدند و هر دو نسخه کنار هم ماندند. اگر پیش‌نویس‌های اول به بایگانی می‌رفتند و اسم هر صفحه نشان می‌داد کدام صفحه و کدام حالت است، برنامه‌نویس‌ها از همان اول می‌دانستند کدام نسخه را بسازند.
16همه‌ی صفحه‌ها
همه‌ی ۲۲۰ صفحه، مفهوم‌ها و سیستم طراحی
دو فهرست زیر همه‌ی صفحه‌ها و حالت‌ها را در عرض دسکتاپ (۱٬۴۴۰ پیکسل) و موبایل (۳۶۰ پوینت) نشان می‌دهند: ۱۲۵ صفحه‌ی دسکتاپ و ۹۵ صفحه‌ی موبایل. از صفحه‌هایی که دو بار طراحی شده‌اند فقط نسخه‌ی نهایی آمده است. هر صفحه نسخه‌ی تبلت هم دارد که در این فهرست‌ها نیامده است. بعد از این دو فهرست ۳۶ صفحه‌ی مفهومی و ۱۷ بورد سیستم طراحی آمده‌اند.
هر دو فهرست به ترتیب مسیر یک زبان‌آموز چیده شده‌اند: پیدا کردن استاد، رزرو، ورود و صفحه‌های اطلاعاتی، و بعد پنل کاربر و تنظیمات استاد. فهرست دسکتاپ بخش مدیریت و صفحه‌های فرود را هم دارد. جزئیات شخصی در داده‌های نمونه، مثل شماره‌ی تلفن، ایمیل، شماره‌ی بانکی و نام یک همکار، پیکسلی شده‌اند.
تقویم‌ها، دوره‌ها و صفحه‌های فرودداستانهای کاربر تقویم، مدیریت دوره، صفحه‌های راهنما و یک صفحه‌ی فرود آیلتس آخر از همه آمدند.
02
بگذار بازدیدکننده بگردد، و رزرو را به صفحه‌های خودش ببر
سایت قدیمی رزرو را در یک پاپ‌آپ جا داده بود. حالا استادها، دوره‌ها و تقویم‌ها برای بازدیدکننده باز هستند و حساب کاربری فقط در لحظه‌ی رزرو خواسته می‌شود.
گزینه‌های دیگر
ثبت‌نام در اولین بازدید، که قبل از دیدن استادها یک فرم جلوی بازدیدکننده میگذارد.
بده‌بستان
رزرو باید هم برای زبان‌آموز تازه کار کند و هم برای زبان‌آموز قدیمی؛ برای همین دو پیام لازم شد: اول عضویت، یا اول تکمیل مشخصات.
شواهد
رزرو صفحه‌های خودش را دارد، با یک صفحه برای پرداخت موفق و یکی برای ناموفق، هم برای کلاس عادی و هم برای کلاس آزمایشی.
03
تقویم را اول به شکل داستان کاربر بنویس
یک بازه‌ی زمانی بیشتر از هر چیز دیگری در محصول حالت دارد. وقتی داستانها اول نوشته شدند، هر حالت به‌جای حدس یک قاعده شد.
گزینه‌های دیگر
اول کشیدن تقویم، و بعد نامگذاری حالتهایش.
بده‌بستان
طراحی و ساخت هفت حالت از همان اول، در عوض غافلگیری کمتر وقتی دو نفر یک ساعت را میخواهند.
شواهد
هشت داستان، مشترک میان تقویم استاد، تقویمی که زبان‌آموز می‌بیند و قدم‌های رزرو.
04
ثبت‌نام استاد را مرحلهای کن و در پایانش مصاحبه بگذار
در استراتژی، واحد آموزش خواسته بود با هر استاد طبق یک استاندارد مصاحبه شود. فرم درخواست همان چیزهایی را جمع می‌کند که مصاحبه لازم دارد، و پنل مدیریت پیوند مصاحبه، زمان و مصاحبه‌کننده را نگه می‌دارد.
گزینه‌های دیگر
ثبت‌نام آزاد، و سنجش کیفیت فقط بعد از اولین کلاس‌ها.
بده‌بستان
شروع کندتر برای استادهای تازه، در عوض فهرستی از استادهای سنجیدهشده.
شواهد
پنج صفحه‌ی ثبت‌نام، فلوی درخواست استاد، و بخش درخواست‌های استاد در پنل مدیریت.
05
پیش از صفحه‌ها، سیستم را بساز
یک وب‌سایت، دو پنل، یک پنل مدیریت و سه عرض صفحه در کار بود؛ یک مجموعه‌ی جزء مشترک از چند مجموعه‌ی جدا ارزانتر بود.
گزینه‌های دیگر
طراحی هر بخش جدا از بقیه، و هماهنگ کردنشان در آخر.
بده‌بستان
قبل از اولین صفحه زمان صرف ساختن اجزا شد، اما هر بار که صفحهای از آن‌ها استفاده کرد، این زمان جبران شد.
شواهد
۳۴۵ جزء در ۲۴ مجموعه، مشترک میان وب‌سایت، پنل‌ها و پنل مدیریت.
فاکتور و پرداخت
پرداخت ناموفق
شکل 03رزرو در دسکتاپ: پیام ثبت‌نام که فقط در همین لحظه می‌آید، فاکتور، و صفحه‌ی پرداخت ناموفق.
تقویم در صفحه‌ی استاد
شکل 04همان ساعتها از دو طرف: استاد زمان‌های خالی را باز می‌کند و زبان‌آموز یکی از آن‌ها را در صفحه‌ی استاد انتخاب می‌کند.
قیمت هر درس و بسته
داشبورد با راهنمای بار اول
شکل 06سمت استاد: آخرین قدم ثبت‌نام، قیمت هر درس و بسته، و داشبورد در اولین بازدید.
دکمه‌ها
شکل 07دو مجموعه از سیستم طراحی: رنگ، و دکمه‌ها در همه‌ی حالتهایشان.
ایده‌ی ۲: منوی سرمه‌ای
ایده‌ی ۲، نسخه‌ی سوم: منوی آبی روشن
شکل 08سه مفهوم از پنل: همان محتوا با منوی سفید، سرمه‌ای و آبی روشن. پنل نهایی منوی سفید را نگه داشت.
پیش‌نویس دوم: کلاس با هر استادی که خودتان انتخاب کنید
نسخه‌ی نهایی: کلاسی براساس نیاز شما
شکل 09تیتر صفحه‌ی خانه در سه پیش‌نویس.
شکل 10ثبت‌نام استاد، قدم اول، در پیش‌نویس اول و نسخه‌ی نهایی: یک تصویر لپ‌تاپ جایش را به یک تصویر برای هر قدم داد.
شکل 11ورود در پیش‌نویس اول و نسخه‌ی نهایی: یک خط موقت به پنج وعده‌ی کوتاه تبدیل شد.
کیف پول
شکل 12پنل زبان‌آموز: کلاس‌ها بر اساس وضعیت، و کیف پول.
03
فهرست استادها · فهرست زبان‌آموزها
نام
جست‌وجو و فیلتر
گزارش کلاس‌ها
گزارش پرداخت‌ها
پیام‌رسان
کلاس‌های استاد
کلاس‌های زبان‌آموز
04
گزارش کلاس‌ها · گزارشهای پرداخت و مالی
جست‌وجو و فیلتر
نوع گزارش
توضیح
وضعیت گزارش
فهرست پرداخت‌ها
کلاس‌های برگزارشده
کلاس‌های ثبتنامی
استادها
زبان‌آموزها
بانکها
05
تماس با ما
جست‌وجو و فیلتر
نام و نام خانوادگی
ایمیل
موبایل
موضوع
متن پیام
تاریخ
06
پیام‌رسان
متن پیام
فایل
فرستنده
وضعیت، دیدهشده یا خواندهشده
تاریخ دریافت
تاریخ ارسال
07
درخواست‌های استاد
دیدن درخواست
اطلاعات استاد
پیوستها
مدارک
درس‌ها
پیوند مصاحبه
زمان مصاحبه
مصاحبه‌کننده
وضعیت
08
مدیریت نظرسنجی
جست‌وجو و فیلتر در نظرسنجیها
نتیجهی یک نظرسنجی
نمودار
ساخت نظرسنجی
وضعیت
شکل 13۱۲۵ صفحه‌ی دسکتاپ، به تفکیک بخش. یک صفحه را باز کنید تا کامل ببینید.
شکل 14۹۵ صفحه‌ی موبایل، به تفکیک بخش. یک صفحه را باز کنید تا کامل ببینید.
شکل 15صفحه‌های مفهوم: ۳۶ نسخه‌ی مختلف از پنل، پروفایل، فهرست استادها و صفحه‌ی خانه.
شکل 16۱۷ بورد سیستم طراحی. یک بورد را باز کنید تا کامل ببینید.
