ゼロからデザインシステムを作成する

コンテキスト: Fanflareは、ファンがビルボード広告、誕生日イベント、慈善プロジェクトのためにキャンペーンを資金提供し、VTuber、コスプレイヤー、研修生などの独立したアーティストを支援するモバイルアプリです。このアプリは、透明性のある寄付、ファンエンゲージメント、コミュニティの交流を優先しています。

目標の定義

ユーザーのニーズと組織の目標に沿ったデザインソリューションを確保するために、プロジェクトを3つの主要目標カテゴリに基づいて構成しました。

問題の理解

市場をより良く理解し、機会を特定するために、3つの異なるカテゴリにわたる8つのアプリケーションの競合分析を行いました:
ファンコミュニティ&ソーシャルネットワーキングアプリ(例:Weverse、Amino)
イベント&スケジュール追跡ツール(例:TimeTree、Meetup)
ファンエンゲージメント&ニッチプラットフォーム(例:Patreon、Ko-fi)
この研究は、ベストプラクティス、機能のギャップ、そしてユーザーエクスペリエンスのパターンを明らかにするのに役立ちました—特にコミュニティの相互作用、イベントの調整、そしてクリエイターのサポートに関して。これらの洞察は、アプリの機能セットとインタラクションモデルを形成する上で重要な役割を果たしました。

ユーザー調査

私はK-pop、VTuber、およびコスプレコミュニティの12人のファンとのユーザー調査とインタビューを実施し、ファン活動、クラウドファンディング、およびファンアプリに関する彼らのニーズを探ります。

目標:

  1. 現在のプラットフォームの問題点を明らかにする。

  2. ファンがどのように自分のバイアスや互いに接続したいかを理解する。

結果:

92%が透明な寄付追跡を「非常に重要」と評価しました。

83%が貢献のためのランキングとバッジを望んでいました。

75%がキャンペーンを見つけて参加するのに苦労していました。

ユーザーペルソナ

redesignが実際のユーザーのニーズを反映することを確保するために、私は調査データ、ユーザーインタビュー、クライアントやショッパーコミュニティからの洞察に基づいて、3つの詳細なペルソナを作成しました。

これらのペルソナは、次のことを捉えました:

  • 主要な動機

  • 痛点

  • 意思決定行動

    コンテンツ構造、機能の優先順位付け、全体的なウェブサイト体験を導く明確で人間中心の基盤を提供しました。

情報技術

アプリの明確な構造を確立するために、オンボーディングからコミュニティ機能までのすべての主要なユーザージャーニーを概略したサイトマップを作成しました。

ユーザーフロー

重要なインタラクションを検証し、シームレスな体験を確保するために、詳細なユーザーフローをマッピングしました。

ローフィデリティモックアップ

私はアプリのコア体験がどのように組み合わさるかを迅速に視覚化するために、低忠実度のモックアップを作成しました。私は主要な画面に焦点を当てました:ホームページ、クラウドファンディングの確認ページ、および短い寄付フローをテストして、レイアウト、階層、初期の使いやすさを確認しました。これらのドラフトは、中・高忠実度のデザインに移行する前に、主要なインタラクションを検証するのに役立ちました。

中程度の忠実度

私は中忠実度のモックアップを開発して、構造を洗練し、ユーザーエクスペリエンスをより詳細かつ明確に示すことに集中しました。私はホームページ、クラウドファンディング確認ページ、寄付フローに焦点を当て、低忠実度段階からのフィードバックを取り入れてヒエラルキー、インタラクション、視覚的バランスを改善しました;ワイヤーフレームと洗練されたUIの間のギャップを埋めています。

デザインシステムの作成:

デザインシステムを開発する際、私は異なる機能全体でスケーラブルでありながら、ファンダム空間に対して表現力豊かで文化的に関連する一貫した柔軟な基盤を作ることに焦点を当てました。

女性的な美的感覚とファン文化の深く個人的で感情的な性質にインスパイアされ、私は柔らかさ、エネルギー、そしてコミュニティの誇りを祝うビジュアル言語を受け入れました。丸みを帯びた形、パステルトーン、そして繊細なタイポグラフィの選択は意図的なものでした。

ハイファイモックアップ

主な改善点:

  • デザインシステムのアップグレード: 一貫したスペーシング、カラーパレット、およびタイポグラフィスケールを確立しました。コンポーネントは再利用性とアクセシビリティのために再構築されました。

  • 視覚的階層: フォントのペアリング、カードレイアウト構造、および明確なCTAの配置を改善することにより、読みやすさを向上させました。

  • ブランディングの一貫性: アイコノグラフィとトーンを洗練させ、ファンコミュニティの情熱とエネルギーをよりよく反映しながら、グローバルなオーディエンスにとって使いやすいものにしました。

学び

このプロジェクトを通じて、UIとビジュアルデザインのスキルを大幅に向上させました。ブランドとユーザーのニーズに沿った、より意図的なレイアウト、色、コンポーネントを作成する方法を探求しました。

一つの重要な学びは、高忠実度のスクリーンに飛び込むのではなく、完全なデザインプロセスに従うことの重要性を理解することでした。これは、私がインターンシップ中によく急いでしまったことです。リサーチ、ワイヤーフレーム作成、反復に時間をかけることで、はるかに強力でユーザー中心の結果を得ることができました。

また、影響力のあるデザインは常に大規模なオーバーホールを意味するわけではないことも学びました。実際の洞察に根ざした小さくて思慮深い変化が、正しい問題を明確に焦点を合わせて解決する際に、体験を劇的に改善することがあります。

さらにプロジェクト

私のお気に入りのプロジェクトや最近のプロジェクトをチェックしてください。

Create a free website with Framer, the website builder loved by startups, designers and agencies.