Yuriko Kikuchi | Portfolio

Members:

Yuriko Kikuchi

Rafael Ferreira

Moon Young Lee

Cecilia Lopez Sisterna  Shane Yap

Sidney Kai

YJ Hsu

Roll:

Product Manager / Lead Designer

Duration:

14 weeks (8 weeks for the Design part / Jan - Apr 2024)

Skills:

Branding
UX Research
Wireframe
Mockup

Prototype

Design Tool:

Figma / Illustrator / Photoshop

Takeaways:

ワイヤーフレームを通じたデザイナー間の共通認識の重要性

Webアプリはレスポンシブ対応で設計されたため、デスクトップのデザインスペースを効果的に活用するのが難しいという課題がありました。

また、可読性を確保しながらダークテーマを実装することも可能でした。

Demo:

https://filmchaser-capybara.vercel.app

Prototype:

Desktop / Mobile

Source Code:

https://github.com/rafaelmfer/FilmChaserPWA

Project Overview

Problems

観たTV番組や映画を覚えておくのが難しい

友人とコンテンツを共有し、つながりたい
検索プロセスに満足できない

Difficulty remembering watched TV Shows and Movies
Wanted to connect and share content with friends
Unsatisfied with the search process

Challenges

どのようにすれば、ユーザーにとって動画管理をより便利にできるか？

Feature 01

視聴中・視聴済み・今後のコンテンツを整理

FilmChaserは、ユーザーが現在視聴中の作品、過去に観た作品、これから観たい作品を一括管理できるようにします。

Feature 02

友人と楽しみを共有

視聴中の作品をFilmChaser上で直接友人と共有でき、他のプラットフォームでリンクを送る手間を省きます。

Feature 03

パーソナライズされたおすすめ

ユーザーの好みのジャンル、俳優、監督、視聴履歴に基づいて、最適な作品をレコメンドします。

Research

Research & Design Process

Competitive Research

競合調査を実施し、各サービスのターゲットを分析することで、自社サービスの独自性を明確にしました。

User Flow

Sitemap

Branding

FilmChaserのビジュアルアイデンティティは、「冒険」「銀河」「インスピレーション」の3つのコンセプトを軸に構築されています。これらの要素は、視聴体験をよりシームレスで魅力的なものにするというアプリの核心的なミッションを反映しています。

Logo

ロゴは「冒険」「銀河」「インスピレーション」という3つの要素から着想を得ており、ビデオの再生ボタンの形をベースにデザインされています。また、3本のバーは、友人からインスピレーションを得ることを象徴しています。

Colours

デザイン全体はダークモード（背景色: #0F1A20）を採用し、映画やTV番組のポスターが引き立つシネマティックな雰囲気を演出しました。また、2024年のデザイントレンドに沿い、ブルー（#2E5DF3）とオレンジ（#EC764F）のグラデーションをプライマリーカラーとして採用。ブルーは「冒険」、オレンジは「銀河」を象徴し、ユーザーのインタラクションを強化します。

Typography

フォントはAmikoとOpen Sansを選定。可読性と洗練されたデザイン性を重視し、異なる画面サイズでも読みやすく、視覚的に美しいバランスを実現しました。

Components

各コンポーネントの角を丸めることで、スムーズで親しみやすいデザインに仕上げています。ボタンやナビゲーションにはグラデーションを使用し、奥行きを持たせることで、ユーザーの操作を直感的に促すデザインにしています。