Blog
Ebr 23, 2025 - 8 MUNUD O DDARLLEN
O'r Mockup i'r Farchnad: Fy Mhroses Dylunio Cynnyrch o'r Dechrau i'r Diwedd

O'r Mockup i'r Farchnad: Fy Mhroses Dylunio Cynnyrch o'r Dechrau i'r Diwedd

Dadansoddiad manwl o fy methodoleg ddylunio iterol, o'r ymchwil gychwynnol i'r trosglwyddo terfynol, gydag awgrymiadau ymarferol i ddylunwyr ym mhob cam.

Jay Ho Oh

Jay Ho Oh

成功するデジタルプロダクトの作成は、厳格な公式に従うことではありません。各プロジェクト独自の課題に適応できる、柔軟なフレームワークを構築することなのです。数十のプロダクトを通じてアプローチを洗練させた結果、創造性と反復の余地を残しながら、一貫して結果をもたらすプロセスを確立しました。

この記事では、最近のEcoTrackアプリケーションの開発をケーススタディとして用い、初期のディスカバリーから開発者へのハンドオフに至るまでの、エンドツーエンドのデザインプロセスを解説します。

フェーズ 1: ディスカバリー & リサーチ

優れたプロダクトはすべて、解決しようとしている課題を理解することから始まります。EcoTrackにおける課題は、ユーザーが罪悪感や複雑なデータに圧倒されることなく、自身の環境への影響を追跡できる魅力的な方法を構築することでした。

ユーザーインタビュー

Dechreuais drwy cynnal cyfweliadau gyda 12 defnyddiwr posibl ar draws demograffegau gwahanol, gan ganolbwyntio ar eu harferion a'u haniaethau presennol tuag at gynaliadwyedd. Datganodd y sgwrsiau hyn wybodaeth hollbwysig: roedd y rhan fwyaf o bobl eisiau gwneud dewisiadau sy'n gyfeillgar i'r amgylchedd ond roedden nhw'n teimlo'n anogaeth oherwydd cymhlethdod cyfrifo eu heffeithiau.

「環境のことは大切に思っていますが、紙袋を使うことが本当にプラスチックより良いのか、あるいはマイボトルを使うことに意味があるのか、全く分かりません」 — インタビュー参加者

競合分析

次に、既存のサステナビリティアプリを分析し、機能比較マトリックスを作成して、不足している要素や機会を特定しました。ほとんどの競合他社はカーボンフットプリントの計算に重点を置いていましたが、実行可能なガイダンスやポジティブな動機付けを提供できていませんでした。

成功の定義

Figmaを開く前に、ステークホルダーと協力して、明確な成功指標を定義しました。

  • Eychwiddu defnydd cyfrif treiddiol am 40%
  • 環境への影響に関するユーザーの理解度を向上させる
  • 少なくとも2つのサステナビリティカテゴリにおいて、測定可能な行動変容を促す

フェーズ 2: アイディエーション & コンセプチュアリゼーション

課題領域をしっかりと理解した上で、プロセスのクリエイティブな段階へと進みました。

スケッチ

私は常にペンと紙から始め、デジタルツールの制約を受けることなく、さまざまなアプローチを素早く探索します。EcoTrackでは、ゲーミフィケーション体験からデータ重視のダッシュボードまで、さまざまなコンセプトで3冊のスケッチブックを埋め尽くしました。

情報設計

リサーチの洞察に基づき、シンプルさと実行可能な情報を優先した、ユーザー中心の情報設計を構築しました。

  1. Dashboard — Trosolwg personol gydag mewnwelediadau effaith ar unwaith
  2. Daily Tracker — Cofnodi gweithgareddau'n syml gydag adborth ar unwaith
  3. Impact Journey — Delweddu cynnydd dros amser
  4. Action Center — Argymhellion wedi'u haddasu yn seiliedig ar ymddygiad defnyddwyr

デザイン原則

すべての意思決定の指針となる、4つのコアデザイン原則を確立しました。

  • Symleiddio cymhlethdod — Trosi effaith amgylcheddol yn unedau dealladwy
  • Dathlu cynnydd — Canolbwyntio ar atgyfnerthu cadarnhaol yn hytrach nag euogrwydd
  • Galluogi dewisiadau gwybodus — Darparu cyd-destun ar gyfer gwneud penderfyniadau
  • Dylunio ar gyfer ffurfio arferion — Creu dolenni rhyngweithio boddhaol

フェーズ 3: プロトタイピング & テスト

コンセプトの枠組みが固まったところで、プロトタイピングとテストの反復サイクルに入りました。

ローファイ・ワイヤーフレーム

ユーザーフローと情報の階層に焦点を当てたワイヤーフレームを作成しました。フィードバックを機能性と構造に集中させるため、あえてビジュアルデザインは最小限に抑えました。

ユーザーテスト (ラウンド 1)

8人の参加者によるワイヤーフレームのテストから、いくつかの重要な洞察が得られました。

  • ユーザーは活動の記録時に、より即時的なフィードバックを求めていた
  • ほとんどのユーザーにとって、インパクトの可視化が直感的ではなかった
  • 専門的な環境用語に混乱するユーザーがいた

ミドルファイデリティ・プロトタイプ

テストのフィードバックに基づき、コンセプトを洗練させ、より詳細なビジュアルを備えたインタラクティブなプロトタイプを開発しました。具体的には以下の点に注力しました。

  • 親しみやすいメタファーを用いた、簡素化されたデータ可視化
  • 記録した活動に対する即時的なポジティブ・リインフォースメント
  • より複雑な環境情報の段階的な開示

ユーザーテスト (ラウンド 2)

2回目のテストでは、ユーザビリティに大幅な改善が見られましたが、新たな課題も浮き彫りになりました。

  • ユーザーは自身のインパクトを友人やコミュニティの平均と比較したいと考えていた
  • 日次統計よりも週次サマリーの方がモチベーションにつながった
  • オンボーディングプロセスが長すぎると感じられた

フェーズ 4: ビジュアルデザイン & ブラッシュアップ

コア体験の検証が完了したため、ハイファイなビジュアルデザインへと移行しました。

ビジュアル言語

親しみやすさと信頼性のバランスが取れたビジュアル言語を構築しました。

  • 機能的なカラーコーディングを備えた、自然にインスパイアされたカラーパレット
  • 複雑な概念を簡素化するカスタムアイコン
  • デバイスを問わず読みやすさを優先したタイポグラフィ
  • 満足感と達成感を与えるマイクロインタラクション

デザインシステム

To ensure consistency and facilitate development, I created a comprehensive design system including:

  • Component library with documented states and behaviors
  • Responsive layout guidelines
  • Animation specifications
  • Accessibility standards

Final Prototype

The final prototype brought together all elements into a cohesive experience, which we tested with a broader user group before moving to development.

Phase 5: Implementation & Iteration

The design process doesn't end when development begins—it evolves.

Developer Collaboration

I worked closely with developers throughout implementation, participating in code reviews and adjusting designs to address technical constraints while preserving the core experience.

Analytics Implementation

We integrated analytics to track our success metrics, setting up dashboards to monitor key interactions and user journeys.

Post-Launch Iteration

After launch, we established a regular cycle of analysis and iteration:

  • Weekly reviews of user feedback and behavior data
  • Bi-weekly design sprints to address emerging issues
  • Monthly feature planning based on usage patterns

Results & Learnings

Six months after launch, EcoTrack has exceeded our initial success metrics:

  • 52% cynnydd mewn defnydd actif dyddiol
  • 78% o ddefnyddwyr yn riportio dealltwydd well o'u effaith amgylcheddol
  • Mae defnyddiwr cyfartalog wedi mabwysiadu 3.4 arfer cynaliadwy newydd

The most valuable lesson from this project was the importance of making abstract concepts tangible. By translating complex environmental data into personal, actionable insights, we created an experience that not only educated users but empowered them to make meaningful changes.

Conclusion

Effective product design is never a linear journey—it's a continuous cycle of learning and refinement. By staying focused on user needs while maintaining a flexible approach to problem-solving, we can create products that not only meet business objectives but genuinely improve people's lives.

I'd love to hear about your own design process and how you approach similar challenges. Feel free to reach out with questions or share your experiences in the comments below.

Wedi'i adeiladu gyda Nuxt UI • © 2026