Japanese
Japanese

サインアップフローの再設計

Memo'dは、クリエイターコミュニティによって共有されたインスピレーションやアイデアを見つけることができるノート共有アプリです。

タイムライン:

2022年7月〜2022年11月

チーム:

MCTEKK

プラットフォーム:

ウェブ&iOS

My Role

シニアプロダクトデザイナー

コアチーム

  1. UXUIデザイナー

  2. プロダクトマネージャー

  3. プロダクトオーナー

  4. ウェブエンジニア(2名)

  5. iOSエンジニア(2名)

デザイン手法

  1. アイデア創出

  2. 製品発見

  3. 製品デザイン

  4. プロトタイピング

  5. ユーザビリティテスト

プロジェクト概要

12

12

デザインページ数

デザインページ数

3

3

デザインの反復

デザインの反復

テックシステム

テックシステム

ウェブアプリ

ウェブアプリ

ウェブアプリ

iOSアプリ

iOSアプリ

iOSアプリ

デザイン成果物

The Challenge

オンボーディングにおける摩擦を見つけよう。

複雑なサインアップフローは新規ユーザーを苛立たせ、始めるのが難しくなり、その結果、アプリの成長の可能性が阻まれました。具体的には、ユーザーの離脱率が52%から60%に達しています。

複雑なサインアップフローは新規ユーザーを苛立たせ、始めるのが難しくなり、その結果、アプリの成長の可能性が阻まれました。具体的には、ユーザーの離脱率が52%から60%に達しています。

My Mission

サインアップフローにおける摩擦の解決策を探りましょう。

私のミッションは、サインアップフローでの問題点を解消し、ユーザーのオンボーディングとコンバージョンを助ける体験をデザインし、UXUIデザイナーにデザイン戦略を委ねることでした。


以下に集中しました:

  • アイデアセッション。

  • ペルソナデザイン。

  • モックアップ。

  • ペーパープロトタイプ。

  • Figmaでのクリック可能なプロトタイプ。

  • ユーザビリティテストの計画とデザイン。

  • A/Bテストのデザイン。

  • 高精細デザイン。

シニアプロダクトデザイナーとして、私はユーザーニードレベルでのデザインと体験の原則を担当しました。高級なビジュアルデザインに注力するのではなく、プロトタイプを使った実験を通じてこの課題に取り組みました。

以前のフロー

ユーザビリティテスト

ユーザーの痛みを明らかにする

Mazeを通じてリモートユーザビリティテストを実施し、24人の参加者にフローをテストしてもらいました。

全体の結果:

  • ユーザーはどこをクリックし、どこをナビゲートすべきかを見つけるのに苦労しました。

  • CTAの配置が悪く、見つけるのが困難でした。

  • 低コントラストにより、重要なアクションが見えづらくなり、アクセシビリティ基準を満たしませんでした。

シニアプロダクトデザイナーとして、私はユーザーニードレベルでのデザインと体験の原則を担当しました。高級なビジュアルデザインに注力するのではなく、プロトタイプを使った実験を通じてこの課題に取り組みました。

デザイン戦略

プロダクトデザインのビジョンを実現するための実験的アプローチをサポートする

ユーザビリティテストから得た洞察に基づき、いくつかのアイデアセッションを実施し、以下に集中しました:


  • エンパシーと集中のためのデザイン思考セッション。

  • イベントストーミングとユーザビリティ監査を行い、欠けている部分や改善できる点を明確にしました。

  • 不要なステップを削減するためのSCAMPER演習。

シニアプロダクトデザイナーとして、私はユーザーニードレベルでのデザインと体験の原則を担当しました。高級なビジュアルデザインに注力するのではなく、プロトタイプを使った実験を通じてこの課題に取り組みました。

Product Design

プロダクトデザインのビジョンを実現するための実験的アプローチをサポートする

これらのステップを経た後、私とUXUIデザイナーは協力してインサイトを集め、作業を分担しました。


私はUXデザインと高精度デザインの初バージョンに集中しました。一方、UXUIデザイナーはUIビジュアルデザインの向上に集中し、パイロット版を制作しました。

シニアプロダクトデザイナーとして、私はユーザーニードレベルでのデザインと体験の原則を担当しました。高級なビジュアルデザインに注力するのではなく、プロトタイプを使った実験を通じてこの課題に取り組みました。

私たちのソリューション

リデザインとUX戦略の成果

  1. ユーザーが主なCTAを認識できるように、CTAの階層を整えました。

  2. オンボーディングのフローを簡略化し、必要のないステップを削除し、ビジュアルを更新してアクセシビリティ基準を達成することで、摩擦を軽減しました。


  3. 二次的なユーザビリティテストを実施した後、ポジティブな結果を得て、サインアップフローの再設計されたローンチの加速を促進しました。

  4. 影響を受けたメトリクス:

    1. 作業時間が35%減少。

    2. タスク成功率が22%向上。

    3. 76%のユーザーがプロセスを直感的だと感じました。

ポイントと学び

  • スタートアップ製品として、Memo’dはプロダクトデザインと開発に非常に興味深い課題を提供します。

  • これらの課題は非常に凝縮されているように思えますが、ユーザーとビジネスステークホルダーの双方への配慮と思いやりを持てば、問題は解きほぐすことができます。これが、私がまずサインアップセクションに取り組むことを決めた理由であり、それが実行可能で望ましい出発点だったからです。

  • ビジネスステークホルダーと直接連絡をとることができましたが、デザインの決定事項に影響を与えるのは難しいものでした。しかし、これによってレジリエンスが身につき、デザインの決定を説明する新しいスキルを得ることができました。

クレジットと謝辞

パイロットおよび最終UIデザインは、UX/UIデザイナーのエステファニア・ファリアスにより制作されました。

ツールとサービス

Figma Logo
Figma Logo

フィグマ

Notion Logo
Notion Logo

ノーション

Figma Logo
Figma Logo

アドビ イラストレーター

Figma Logo
Figma Logo

アドビフォトショップ