Image

これはカクテルレシピを紹介するウェブサイトで、多角的なフィルター、詳細なレシピ、道具の説明、そして作成動画を提供し、ユーザーに総合的なバーテンディング体験を提供します。

Image
TIME 1ヶ月
Image
DATE 2024年12月
Image
ROLE UI/UX designer
Image
AGENCY Google UX Design Course

問題定義

挑戦

初心者から経験豊富なミクソロジストまで対応し、直感的なナビゲーション、詳細なレシピ、インタラクティブな機能を通じて、ユーザーが簡単にカクテルを発見し、学び、作れるウェブサイトを設計する。

対策

このサイトは、多角的なフィルター(ベース酒、味、道具)を使ってさまざまなカクテルを探し、ステップバイステップのレシピを確認し、必要なバーツールについて学び、作り方動画を視聴できるカクテルレシピサイトです。これにより、ユーザーに総合的で魅力的なミクソロジー体験を提供します。

リサーチ

ペルソナ

Image

吴さん

28歳

マーケティング専門員

Image

家でカクテルを作ってリラックスしたいけど、どこから始めたらいいかわからない。

Image
Image

吴さん

28歳

マーケティング専門員

Image

やることがなくて、家でテレビ見たり寝たりしてるよ。

Image

ペイン

Image Image

デザインプロセス

デザイン目標

ユーザー体験を向上させる

ユーザーが直感的に操作できるインターフェースを設計し、必要な情報を素早く見つけられるようにする。

詳細な作り方のガイドを提供する

初心者でも簡単に作れるように、詳細な手順説明とビデオチュートリアルを提供する。

ユーザーフロー

Image

ユーザーはあるカクテルの作り方を知りたいです。

Image

ユーザーはカクテルを作り始める前に、どのような道具を準備すればいいか知りたいです。

デザイン

ワイヤーフレーム

Image

最適な解決策を見つけるため、複数のワイヤーフレームを作成し、それぞれ異なるレイアウトを試して、可能性を広げました。

プロトタイプ

Image

エントリーアニメーション

エントリーアニメーションには年齢確認機能が組み込まれており、20歳未満のユーザーは自動的に離脱します。20歳以上のユーザーは、ウェルカムアニメーションに進み、お店が開店するような雰囲気を体験できます。

Image

回転インタラクティブカクテル展示エリア

ホームページのカクテル展示エリアは円形レイアウトを採用しており、ユーザーが任意のカクテル画像をクリックすると、すべての画像が中央に回転し、右側に詳細なテキスト説明が表示されます。没入感のあるインタラクティブな体験を提供します。

デザイン全体の展示

Image
Image
Image Image
Image Image

ほかのプロジェクト

图片
架空

SceneMap

好きなアニメの舞台を探し、現地で写真を撮ってシェアできる巡礼アプリ。

view more
图片
実案件

不動産サイト

不動産会社の業務内容と事例を紹介する企業サイト。

view more
图片
架空

シニアのひろば

中高年向け、コミュニティ活動を探して参加できるリマインダー付きのレスポンシブカレンダーアプリ・サイト。

view more
图片
実案件

易米易货

イ·べイ·イ·か

物品を交換し、無駄なく生活を楽しむための、簡単で便利な物々交換アプリ。

view more
图片

OTHERS

GRAPHIC DESIGN, ILLUSTRATION,SHORT ANIMATION

view more
图片 view more
图片 view more
图片 view more
图片 view more
图片 view more