OTeacherのプラットフォーム再設計：ウェブサイト、講師選び、各パネル

01背景

戦略から、人が使うプロダクトへ

OTeacherは、ライブ形式のオンライン語学レッスンを扱うイランのマーケットプレイスだ。学習者は講師を選び、多くは体験レッスンから始めて、予約する。Sinaがプロダクトマネージャーとまとめた戦略は、2つのプロダクト施策、つまり新しいウェブサイトと新しいパネルを掲げたロードマップに行き着いた。戦略には、それ自体のケーススタディがある。こちらはデザインを追う。

プロダクトはペルシャ語なので、画面は右から左へ読む。各画面が何を示しているかは、キャプションで説明している。

02課題

旧サイトのどこがまずかったか

戦略のインタビューで、それぞれの側に何が足りないかはすでに見えていた。学習者は目標に合う講師を求め、学習の道筋がわかりにくいと感じていた。講師は、教えるためのよりよいツールと、より多くの収入を求めていた。

2023年2月、Sinaは旧oteacher.orgを画面ごとに、計69画面レビューし、問題ごとにビジュアル、構造、プロダクト、文言のいずれかのタグを付けた。主なものは次のとおり。

ホームページは情報が多すぎ、同じCTAを何度も繰り返していた。
学習目標を選んでも、結果がその目標に絞り込まれなかった。
いちばん大事な予約が、ポップアップに押し込まれていた。
下層ページには、パンくずリストも戻る手段もなかった。
よくある質問が、1ページにまとまらず、多くのページに散らばっていた。

ほとんどの問題は、講師を選ぶ場面とレッスンを予約する場面の2つに集まっている。下の判断も、そこから始まる。

2023年の仕事の進み方

01
レビュー1月と2月：ほかのプロダクトのベンチマーク、続いて旧サイトの画面ごとのレビューと、そのホームページのクリック計測計画。
02
コンセプト2月下旬：5つのアイデア、続いてパネル、プロフィール、講師一覧、ホームページの36のコンセプト画面。デザインシステムの最初のパーツは、それより前にできていた。
03
構造3月：ウェブサイト、2つのパネル、管理パネルの情報設計、ユーザーロール、主なフロー。
04
最初の案ウェブサイト、予約、講師登録とログイン、ユーザーパネル、管理パネル。
05
講師の側講師の設定、料金、レッスン一覧、学習カレンダー。
06
2つ目の案ホームページ、講師の設定、登録、ログイン、予約の新しい版。
07
カレンダー、コース、ランディングページカレンダーのユーザーストーリー、コース管理、ヘルプ画面、IELTSのランディングページが最後に来た。

03構造

画面より先に構造を

Sinaは、ウェブサイト、学習者パネル、講師パネル、管理パネルの4つの領域について情報設計をまとめた。ロール管理によって、チームには3段階のアクセス権が与えられる。対象は、経営層や管理者から、サポート、オペレーター、経理まで。

次に、機能ごとに短い仕様書を書き、開発者向けにConfluenceのページへリンクして、「要レビュー」から「完了」までステータスを追った。たとえば予約は、レッスン、レッスン形式、日付、時間、回数、支払いの6ステップで定義され、グループレッスンではほかの学習者が加わる。

主な流れは、フローとして描いた。

講師が応募する：情報、レッスン、年齢層、資格証明。続いて専門家による審査と、最初のレッスン前の面接。
学習者がレッスンに参加する。
レッスンをキャンセルする：学習者から、講師から、または複数回分をまとめて。
ユーザーがログインし、各ロールは許された範囲だけを見る。

この講師応募フローがあるから、管理パネルは応募ごとに、面接のリンク、時間、面接担当者を保持している。

04主要な意思決定

デザインを支える5つの判断

それぞれが、レビューかインタビューで見つかった問題に答えている。続く章で、画面の上に示す。

01
講師を見せる前に、3つの質問をする
学習者はどの講師が自分に合うのかわからず、旧ホームページは情報が多すぎた。言語、目標、レベルで、一覧が開く前に絞り込む。
代替案
フィルターだけの講師一覧。自分で見て回りたい人のために、1ステップ先に残してある。
トレードオフ
最初の講師が出るまでに1ステップ増える。その代わり、一覧は短く、よく合ったものになる。
根拠
講師選びは、いまもoteacher.orgのホームページにある。

05講師ファインダー

講師一覧の前に、3つの質問

トップページは3つの短い質問をする。どの外国語か、何のために学びたいか（就職の面接、日常での使用、会話、移住）、そしてどのレベルか。レベルは初級から上級まで。答えは、その言語の講師のおすすめ一覧につながる。

講師一覧にも、同じ考え方がフィルターとして残っている。言語、目標、体験レッスン、今日、講師の性別、日付、時間帯だ。スマートフォンでは、フィルターは下からシートとして開く。講師選びの相談へのリンクが一覧に置かれ、まだレッスンのない学習者には、空のレッスン一覧から、合う講師が提案される。

3つの答えが長いフィルターパネルの役目を果たし、自分で見て回りたい人のために、一覧にはフィルターが残る。

デスクトップのトップページにある3ステップの講師ファインダー：言語、目標、レベルを選び、おすすめの講師を表示するボタン — 図 02デスクトップのトップページとスマートフォンでの、3ステップの講師ファインダー。

スマートフォンでの3ステップの講師ファインダー：言語、目標、レベルのチップを選び、おすすめの講師を表示するボタン — 図 02デスクトップのトップページとスマートフォンでの、3ステップの講師ファインダー。

06予約

自由に見て回り、予約は専用のページで

レビューでいちばん厳しい指摘は、予約に関するものだった。旧サイトは予約をポップアップに押し込んでいたが、予約はそれで済ませるには大事すぎる。新しいデザインでは、予約に専用のページを用意した。レッスン、レッスン形式とパッケージ、講師のカレンダーからの時間、そして請求書と支払い。体験レッスンも同じステップをたどる。

訪問者は、アカウントなしで講師、コース、カレンダーを見られる。登録や、足りない情報の入力を促す案内は、予約しようとしたときにだけ出る。支払いの成功と失敗には、それぞれ専用の画面がある。

アカウントを求めるのを予約の瞬間だけにすると、最初の訪問が開かれたままになる。

デスクトップでのOTeacher — 講師を探す：予約の案内：先に登録してから予約

07カレンダー

8つのストーリーを持つカレンダー

時間は、レッスンのマーケットプレイスでいちばん見せにくいものだ。そのため講師カレンダーは、ユーザーストーリーから始まっている。ストーリーは8つあり、合わせて、ひとつの時間枠が通る状態を示す。空き、選択中、予約可能、学習者が予約済み、削除可能、他の人が予約中、そしてコースの一部だ。

同じ状態が、講師自身のカレンダー、講師のプロフィールで学習者が見るカレンダー、予約のステップに共通して使われ、タイムゾーンは常に表示される。

8つのストーリー（ペルシャ語から翻訳）：

講師は、自分のカレンダーの空き時間を見られる。
講師は、予約用に選んだ時間を、システムが予約可能として登録する前でも見られる。
講師は、自分のカレンダーの予約可能な時間を見られる。
講師は、学習者が登録した時間を見られるが、削除はできない。
講師は、予約可能な時間と、学習者が登録した時間を見分けられる。
講師は、予約用に開けた時間を、自分のカレンダーから削除できる。
他のユーザーが予約している間は、講師はその時間をレッスン用に選べない。
講師は、自分のコース用に確保された時間を見るだけで、操作はできない。

8つのストーリーに、7つの状態。カレンダーは、それぞれの時間を誰が押さえているのかを示さなければならなかった。講師か、学習者か、コースか。

デスクトップでのOTeacher — 講師を探す：講師プロフィール：時間を選ぶカレンダー

講師カレンダーのための8つのユーザーストーリー。それぞれに、時間枠が移り変わる状態が添えられている — 図 05描かれたままの8つのユーザーストーリー（ペルシア語）。それぞれが加える状態を添えている。

08講師

講師はステップを踏んで応募し、その後は自分でレッスンを運営する

講師になるには5つのステップがある。年齢層、個人情報、教えたいコース、身分証明と資格の書類、そして面接の時間を待つ最後の画面だ。その後、応募はそれぞれ、面接のリンク、時間、面接担当者とともに管理パネルに届く。

採用された講師は、パネルから自分のビジネスを運営する。1回分とパッケージの料金、空き時間、コース、撮影のコツ付きの紹介動画、返信すべきレビュー、収入とプロフィール閲覧数を示すダッシュボード。料金の仕様には、同じレッスンにほかの講師がつけている平均価格のグラフも盛り込まれていた。

講師は料金、時間、コースを自分で決める。だからそのパネルは、プロフィールにとどまらず、小さなビジネスのツールとして働く必要があった。

デスクトップでのOTeacher — 講師の設定：料金：提供レッスンごとの料金とパッケージ

09デザインシステム

すべての画面に、ひとつのデザインシステム

デザインシステムの最初のバージョンには、24セット、345のコンポーネントがある。カラー、タイポグラフィ、フォームフィールド、ボタン、パンくずリスト、チェックボックスとラジオボタン、トグル、モーダル、トースト、プロフィールブロック、サイドメニュー、ログイン前後のユーザー向けの3つの幅のヘッダーとフッター、ブランドアイコン、ライトモードとダークモード。

ほとんどのページより先につくられたので、登録、予約のステップ、各パネルがひとつのプロダクトとして読める。

10反復

5つのアイデア、そして2回の案出し

仕事は幅広く始まった。ウェブサイトの5つのアイデアから、36のコンセプト画面が生まれた。3つのアイデアはユーザーパネルの7つのバージョンになり、それぞれサイドメニューを開いた状態と閉じた状態で描かれた。プロフィール、講師一覧、ホームページには、それぞれ4〜6のコンセプトがある。最終的なパネルは、最初のアイデアと同じく、白いメニューに紺のマーカーを残した。

その後、ほとんどのページを2回描いた。ホームページの見出しは、好きな講師といつでもどこでも語学を学ぶ、から、自分で選んだ講師とのレッスン、そして、あなたのニーズに合わせて設計されたレッスン、へと移った。講師登録は1枚のノートパソコンの写真をやめてステップごとのイラストにし、最後の画面は歓迎から面接待ちに変わった。ログインページは仮の一行を、5つの短い約束に置き換えた。

見出しの3つの版は、焦点を講師から学習者のニーズへと移している。

OTeacherのコンセプト画面 — パネルのコンセプト：パネルのコンセプト1.1、サイドメニューを開いた状態

OTeacherのコンセプト画面 — パネルのコンセプト：パネルのコンセプト2.1、サイドメニューを開いた状態

トップページのヒーロー、初版：好きな講師と、いつでもどこでも外国語を学ぶという見出し

ログインページの最初の案：ノートパソコンの写真と、ここに広告が入るという仮の一行

11テスト

デザインをどう確かめたか

デザインは人を相手にテストした。講師一覧のユーザビリティテストを、モデレーター付きで、対面とリモートの両方で、FigmaのプロトタイプとUsabilityHubを使って行った。タスクは、講師を探す、メッセージを送る、体験レッスンを予約する、時間と講師の性別で絞り込む、の4つ。タスクごとの時間、エラー、完了、満足度を測り、10秒テストで最初の画面から何が記憶に残るかを確かめた。

アテンション・ヒートマップで、旧デザインと新デザインを5つの主要ページで比べた。ホームページ、講師一覧、講師のプロフィール、レッスン一覧、講師のカレンダーだ。新しいホームページは、旧版より約4分の1短い。

旧サイトについても、Sinaはホームページのクリック計測を計画していた。メインのCTAから、言語の並び順、ヘッダーとフッターのリンクまでを測り、どの要素に残す価値があるかを見るためだ。

12パネル

学習者にはパネルを、チームには管理パネルを

ユーザーパネルには、ログイン後のすべてがある。レッスンの一覧（予定、日程未定、ステータス待ち、実施済み、キャンセル済みのフィルター付き）、カレンダー、残高・チャージ・取引を備えたウォレット、レッスンごとの財務レポート、メッセージ、そして学習者が目標とレベルを設定するプロフィール。レッスンは、ダイアログから評価、報告、キャンセルができ、レッスン一覧にはダークモードがある。

管理パネルは小さめのセットだ。ID、名前、メールアドレス、電話番号で検索できるユーザー一覧、種類とステータスで絞り込めるレッスン、講師からの応募。その情報設計は、下のマップに示す。

デスクトップでのOTeacher — ユーザーパネル：レッスン：予定、サンプルの個人情報を隠している

管理パネルのエリアと、それぞれに入るもの

01
ユーザー一覧
- 検索とフィルター
- 名前
- ロール
- レッスンのレポート
- 支払いのレポート
- メッセンジャー
- ユーザー名
- パスワードのリセット
- ロールの有効化・無効化
- 情報の編集
02
割引マネージャー
- 割引をつくる
- 割引の一覧
- 金額
- 講師の取り分
- OTeacherの取り分
- ステータス

13成果

リリースされ、いまも土台に

新しいウェブサイトとパネルは2023年にリリースされた。3年経ったいまも、oteacher.orgはこの土台の上で動き、ホームページには3ステップの講師選びがある。ただし、会社はその後いくつかのセクションを変えている。

デザインシステムのコンポーネント: 345; 24セット：カラー、タイプ、フォーム、ボタン、メニュー、モーダル、ライトとダークのモード; 納品物
デスクトップとスマートフォンの幅の画面: 220; デスクトップ125ページ、スマートフォン95画面。それぞれタブレットの幅でも描いてある; 納品物
レビューした旧サイトの画面: 69; 問題ごとにビジュアル、構造、プロダクト、文言のタグ。2023年2月; 納品物

納品したもの

新しいウェブサイト
新しいパネル

14私の役割

Sinaの担当範囲

Sinaがプロダクトデザインを担い、プロダクトマネージャーとともに、そのすべてをデザインした。

担当

旧サイトのレビュー、ベンチマーク、クリック計測の計画
情報設計、ユーザーロール、フロー
トップページ、3ステップの講師ファインダー、講師とコースのページ
予約（体験レッスンを含む）
講師登録とログイン
ユーザーパネル、講師の設定、コースマネージャー
カレンダーとそのユーザーストーリー
管理パネル
デザインシステムとコンセプト
ユーザビリティテストとアテンション・ヒートマップ

共同担当

プロダクトマネージャーと共同で進めた、このデザインの背景にある戦略：インタビュー、ペルソナ、ブランドポジション、ロードマップ

協働

プロダクトマネージャー。全体を通して、出金と料金の仕様も含む

画面内の無料アイコンパックと3Dイラストは、第三者のセットによるもの。参考デザイン、そして旧サイトやほかのプロダクトのスクリーンショットは載せていない。

15学んだこと

残したいこと、変えたいこと

01
速く動く。UIデザインからプロダクト戦略まで
およそ1年で、仕事はプロダクトマネージャーとまとめたプロダクト戦略から、旧サイトのレビュー、構造とフロー、デザインシステム、220の画面にまで広がった。OTeacherで得た教訓は、とにかく速く動き、たくさんの仕事を進めること。UIデザインから、プロダクトの戦略まで。
02
新しいサイトは、リリース初日から計測する
クリック計測の計画は、旧ホームページを対象にしていた。新しいサイトでも初日から同じ計画を動かしていれば、リデザインには比較の基準があり、ここに示せる数字もあったはずだ。
03
古い案は、開発者のためにアーカイブする
ページは2回描かれ、両方の版が並んだまま残った。最初の案をアーカイブに移し、すべての画面をページと状態の名前で呼んでいれば、開発者はどれをつくるべきか、すぐにわかったはずだ。

16すべての画面

全220画面、コンセプト、デザインシステム

下の2つのインデックスには、すべてのページと状態を、デスクトップ幅（1,440ピクセル）とスマートフォン幅（360ポイント）で載せている。125ページと95画面だ。2回描かれたページは最終版だけを載せ、どのページにもあるタブレット幅は省いた。続いて、36のコンセプト画面と、デザインシステムの17のボードを載せる。

どちらのインデックスも、学習者の流れに沿っている。講師を探す、予約する、ログインする、情報ページ、そしてユーザーパネル、講師の設定、デスクトップではさらに管理とランディングページ。サンプルデータの個人情報、たとえば電話番号、メールアドレス、銀行の番号、同僚の名前は、ピクセル加工で隠してある。