スタディサプリ/Quipper(オンラインビデオコーチングサービス)モバイルアプリデザイン

meyco🇩🇪 インディーゲーム
Game Developer/UX designer
OVERVIEW

元々、WEBアプリケーションで存在していたものを、7ヶ月でiOS/Androidアプリに移植しました。その後は、リニューアルに向けてブランドチームと調整、UI設計、スケジュール設計を行いました。

YEAR 2015 - 2017

Distributors of Wisdom【世界の果てまで、最高の学びを届けよう】

Quipperは2010年に、イギリスロンドンで創業。「Distributors of Wisdom」- 国境や貧富の差を超えて、世界中で誰もが学びたいものを好きなだけ学べる”知の流通革命”の実現を目指す、オンライン学習サービスです。2015年よりリクルートマーケティングパートナーズの仲間入りをしました。日本、インドネシア、フィリピン、メキシコにて、日々新たな価値を提案・創造し、教育サービスの新たな幕開けに貢献できるよう挑戦を続けています。

プロジェクト概要

元々、WEBアプリケーションで存在していたものを、モバイルアプリに移植しました。

入社した当初から、「Quipper」ブランドのAndroidアプリが存在していました。しかし、こちらは基本的な機能のみであって、ビデオコーチングサービスとしての仕様は存在していませんでした。そこで、既存のWEBアプリの導線を考慮しつつ、モバイルアプリに最適化したUX導線を設計しました。

また、同時に、国外ブランドである「Quipper」の方にも影響が出ないように、導線を瀬系する必要がありました。

また、初回リリースでは、バグが起きないような設計をまず行い、そこから機能を確実に増やしていくスケジュール設計を設定しました。その結果、アプリストアでも安定的に高評価を得ることが出来ました。

ミッション

1年目2名、2年目4名のデザイナーチームに所属していました。以下の仕事に集中しました。

  • iOS/Androidモバイルアプリ設計
  • ペーパープロトタイピングと検証
  • ワイヤーフレーム/sketchによる本番デザイン
  • UI/ビジュアルデザイン
  • ガイドライン作成
  • 他部署とのブランディング連携
  • ユーザーインタビューの調査
  • カンファレンスや講義への登壇

iOS/Androidモバイルアプリ設計

テレビCM配信に合わせてリリースする必要がありました。7ヶ月の期間でiOS/Androidアプリに移植しました。チーム構成はモバイルデザイナー1人、モバイルエンジニア6-7人でした。

ペーパープロトタイピングと検証

アプリフローを見直すために、ペーパープロトタイプを行いました。要件や画面遷移、表示する内容など決め、提案しました。

また、現行で公開されていたWEB版のアップデートを加味して都度、フローを修正しました。

sketchによる本番デザイン

ペーパープロトタイプを終え、必要な機能がリストアップされ、フローも固定されたあとに、Sketchによるグレーのワイヤーデザインに入ります。

ワイヤーデザインで、さらに機能やフローの確認をします。また、個々のデバイスによる差異なども確認します。情報が出揃ったら、本番のデザインに入ります。

UI/ビジュアルデザイン

初回リリースアプリケーションから、スタディサプリとしてデザインを統一するため、アプリケーションの全体ブラッシュアップを行いました。これにより、一貫したデザインの提供、エンジニアの開発スピートアップ、メンテナンスやテストをが行いやすい環境を構築することが出来ました。

ガイドライン作成

モバイルガイドラインと開発用Sketchテンプレートを開発し、デザイナー/エンジニアのの開発速度が上がりました。

また、チームメンバーが効率的に、そして一貫性をもったデザインをするために、デザインシステムを構築しました。

iOS,Android双方へ臨機応変に対応したガイドラインを作成しました。また、その後モバイルガイドラインと開発用Sketchテンプレートを開発し、デザイナーの開発速度が上がりました

他部署とのブランディング連携

ブランドデザインを一貫して保つために、基本カラーを定め、他部署のブロダクトのデザイナーと連携し、スタディサプリブランドとしてデザインを統一しました。プロダクトガイドラインを各部署のデザイナーと相談&通達/基本ガイドラインとして表記する業務を行いました。

ユーザーインタビューの調査

スタディサプリのリリース後、一般ユーザー（高校生）に向けてユーザーインタビューを数名行いました。インタビューの主な質問は以下です

  • アプリインストール済みのデバイスを用意
  • 実際の登録、もしくは利用をしてもらう
  • ユーザーが迷ったところなどをメモ
  • こうしてほしい、こうだったらいいのに。を質問する
  • 受験状況や、友人との関係、会話

また、小中学校で公式に利用されはじめることとなりました。実際の学校での利用現場に同行し、ユーザーが実際に利用する現場、画面の様子などを見て調査を行いました。

リリース後のユーザーの反応

アプリストアでも安定的に高評価を得ることが出来ました。また、試験合格の手紙なども、時々届き、開発部隊へのモチベーション上昇につながりました。

また、利用者は私が在籍していた時にはスタディサプリのユーザーは約25万人、Quipperと合わせて320万人のユーザーが利用していまいした

カンファレンスや講義への登壇

2つの大きなカンファレンスと、招待を受けて勉強会で登壇を行いました。

  • iOSDCの登壇　来場者数500人規模
  • Droid Kaigiへの登壇　来場者数800人規模
  • その他、講義や勉強会への登壇