Portfolio ChenYuhShyang by yuhshyang chen

P O R T F O L I O KYOTO INST.OF DESIGN

CHEN YUHSHYANG

Hi! チンユウショウです。台湾生まれ。京都に住む京都芸術デザイン専門学校の学生です。普段の趣味は写真を撮る事です。新しいことに挑戦し、創造性を発揮する事が好きです。自分の想像力とデザインに関する知識を含めて様々な視点で客観視できる UI/UX デザイナー目指します。 080-7626-3804 y-chen2566@kid.kyoto-art.ac.jp

User Story ユーザーをとしてソシアルアプリのホーム画面を操作ができるように簡単に登録したい。

Research 多い人が複雑なインタフェースと操作流れが多いアプリは苦手だった。メインの画面前には諦めた人も多いので使いたい気持ちはなくなると思う。生活の中には似てるようなソシアルアプリはたくさんある。でも使い方と操作の方法は全然違うと思う。アプリと商品などよく多い便利な機能が付いてるって商品のメリットとして宣伝したけど機能がたくさんついてるのは選択ボタンと情報も多いと思う。普段こんなアプリと商品を使ってない人は分かり辛いと思うので自信が持ってない人も簡単に使えるようにしたい。

Challenge 複雑なソシアルアプリのログインプロセスを改善したい。見るとすぐわかるシンプルな画面でもっといいユーザーエクスペリエンスを作りたい。

How to solve • ちゃんと機能をまとめて整理する • ユーザー普段の経験を理解する • 初心者でもプロな人でも簡単に操作できるのバランスを取る

Features list

ログインボタンは簡単に探せるユーザーは登録したいので一番重要なのはログインのボタンだと思って目立つにした。

パスワードを自動に保存する機能ユーザーはたくさんのソフトを使ってるのでシステムから自動にパスワードを保存するのが便利。

クッキーの機能ユーザーの利便性の向上ため、快適なオンライン操作が可能になっている。

Persona01

山田達也 21 歳学生

ニーズ

若い世代毎日携帯を触ってる学生。流行って

新しいアカウント作らなくてもよく使う

るアプリは毎日違う。いろいろ使ってみたから

Facebook でログインできる。

アカウントとパスワードはたくさん持ってる。

ゴール

どちらはどなんアプリのアカウントは知らなかった。

はやくホーム画面を入ってアプリを使える。

Persona02

Wang yenting 33 歳エンジニア

ニーズ

ソフトに関係ある仕事をしてる。毎日は最新

便利な機能がついてるログインページが

のテクノロジーを学んてだ。複雑な機能とイン

いいそしてすぐわかる画面がほしい。

タフェースはすぐ慣れて操作できるけどもっと

ゴール

時間を節約できる効率があるインタフェースが好き。

考えせずに感覚で使える。

Persona03

Chen guang 56 歳サラリーマン

ニーズ

チンさん携帯などはあまり触ってない。アプ

シンプルな画面デザインとわかりやすい

リの方はラインと新聞など基本的なアプリを

使い方。

使ってる。新しい機能を学ぶ時には時間をたく

ゴール

さんかかるのでチンさんにとって十分だ。

使い方は簡単に学べるので達成感がある。

User Journey 今回は３世代のペルソナに対してログインの UI デザインしたが一番近いターゲットユーザーは学生の山田達也だ。山田達也のユーザージャーニーを基づいてユーザーとのタッチポイントを洗い出し、適切な場所・タイミングで適切な情報を伝える。 Facebook でログイン

楽しんでアプリを使ってる

アプリを開く（携帯）

Touchpoint

最新のアプリを利用したい

Facebook のアクセス権を許可する

ログインの方法を選ぶ

Thinking

使ってみたい

画面は綺麗

一番苦手なところ

やりたい方法がある

また完成しなか

速い使える

Feeling

ワクワクけどちょっと不安

楽しみ

悩んでる

嬉しい

不安

楽しい

Opportunity

重要な機能は目立つにする

もっと詳しく紹介する

User Story & Flow

山田達也

Wang yenting

Chen guang

学生

エンジニア

サラリーマン

学生が Facebook でログインでき、

エンジニアがパスワードを探した

サラリーマンが新しいアカウント

はやくホーム画面を飛べるように

い、元のアカウントでログインす

を作りたい、ホーム画面を利用で

なるからだ。

るようになるからだ。

きるようになるからだ。

アプリを開いて

ログイン画面

アプリを開いて

コードを入力

ログイン画面

パスワードをリセット

アプリを開いて

ログイン画面

アカウントを作成

Facebookでログイン

パスワードを忘れた場合

アカウントでログインメールとパスワードを設定する

アクセス権を許可する

パスワードを探す

ホーム画面サインアップ

メールアドレス

ホーム画面

ログイン画面

アカウントを作成

Facebookでログイン

アカウントを入力

パスワードを忘れた場合

メールを入力

アクセス権を許可する

登録する

パスワードを探す

パスワードを設定するパスワードは当てる？サインアップ

YES

電話番号またはメールアドレス

メイン画面当てる？

YES

メールは当てる？ YES 確認コードを受け取る

コードを入力

コードは当てる？ YES パスワードをリセット

User flow

Information architecture

ログイン画面メイン画面タイトル

アカウントが見つかりません

アカウントを入力

パスワードが正しくありません

パスワードを入力登録ボタン

パスワードを探す画面

パスワードを忘れた場合アカウントを作成 Facebookでログイン

次へボタンメールまたは電話番号の入力

コードを送信する画面

有効なメールではありませんヘルプ

コードを入力次へボタン

アカウントの作成画面

ヘルプ

リセットパスワード画面

コードが間違えっています新しいパスワードを入力確認ボタン

アカウントの設定パスワードの設定代わりにログイン次へ

ヘルプ

Low-Fidelity Prototype

Usability tests このテストはログインのプロトタイプを使って 3 人のテストしてみた。実際を利用してもらい、課題を実行する過程の行動を観察し問題点を発見したら改善する。使いやすいか / 使いにくいかといった問題が明らかになり、貴重な指標を得た。

Chen guang 操作方法はわかりやすい。アカウントの新規作成も速い。

山田達也レイアウトが綺麗で見やすいと思う。簡単に Facebook でログインできる。

Wang yenting パスワードを忘れた場は心配する必要がない。

松本翔太使う時に全部の機能は探しやすい。間違った時の説明は詳しい。

三谷知子画面はシンプルで可読性がある。

Dark & White このログインの UI 画面はユーザーに使いやすさを意識して良い体験をもらえるために朝の時だけにはなくて夜も目に優しく使えるので二つムードを作った。

Visual Design Light mood

Visual Design Dark mood

Furniture E-commerce

About the Project / プロジェクトこれは自分の UI/UX の能力を高めるために考えたプロジェクトです。今回は EC サイトのホームページと商品の詳細ページをデザインした。自分にとってはいいチャレンジだと思った。自分の知識で問題をきちんと理解して解決する。

User Research / ユーザーリサーチデザインする前に最初はちゃんと目的、ユーザーの問題、習慣など理解するために調査のプロセス何回も振り返って考えた。ユーザーのニーズをわかったらいいプロダクトが作れると思う。調査した内容は以下のリスト書いている。

Interview & Observation / インタビューと調査今回私は 10 人くらいインタビューした。その 10 人は普段よくオンラインショッピングする人達です。一部分は若い人で年齢は大体 20 代くらいです。 40 代くらいの主婦も聞いた。聞いた質問は普段オンラインショッピングする時一番難しい事、使いにくい機能はなんですか？どんなサイトを使いたいとみんなそれぞれの好みを聞いた。

Problems / 問題まず商品の種類が多いっていうことはユーザーにとって困ることだと思う。探したい商品はどんな分類の中にあるのかそれは問題のひとつです。ユーザー手に入れたい商品が簡単に探せるようにしたいです。もう一つは商品の詳細ページの情報が多い。ユーザーに商品魅力が伝えられない、重要なポイントはなにか？そういう問題が出てくる。

Solution / 解決方法今回のインテリア系家具と雑貨の通販サイトは綺麗で見やすく手軽な操方法があることを認識してもらいたい、簡単に商品を探せるようにした。おすすめ一覧とカテゴリーとコーディネート、様々な探し方法から探せる。綺麗にまとめた。詳細ページは商品がベースに最低限の基本情報を出す。すぐカートに追加できるボタンは分かりやすいした。

Personas 01 / ペルソナ個人情報佐藤は 23 才の大学生です。毎日学校を終わってからバイトをしてる。買い物したい時あまり時間がない、バイトをおわった時に店はもう閉めたのでオンラインショッピングすることが多い。通販サイトの操作は詳しくて家族と友達がほしい物をよく買ってくれた。趣味は料理をすることと手作りことです。

佐藤誠二

ニーズ日本

フラストレーション ●

自分の部屋を改造したい。

●

部屋と合う飾り商品など椅子などを買いたい。

ゴール

部屋と似合うスタイル商品はなにかあまり知らない。

●

商品が多くて探すのは大変だった。

●

自分部屋は好きなスタイルになりたい。

●

商品が簡単に探せる。

Personas 02 / ペルソナ個人情報 FU MEIYING は主婦です。家にいる時間が多い。毎日同じことの繰り返しけどそれでも毎日やることが減ることはない。最近からパソコンの使い方を学んで初心者ですが時間がある時にはいろいろ見たりオンラインで買い物もする。

ニーズ FU MEIYING フラストレーション目が悪いのでサイトの情報量が多くて見に

●

くい。買いたい物があるけど使い方わからない。

●

シンプルで使いやすいサイト。

●

情報がわかりやくて目にとって優しいサイト。

台湾

ゴール ●

買いたい商品が簡単に購入できる。

●

目が疲れないようにする。

User ﬂow / ユーザーフローホームページ

アカウントは持ちでしょうか

ない

新規登録

メインページ

ある

ソファ

ログイン

Information architecture / 情報アーキテクチャホームページ

メニュー

ファーストビュー

ロゴ

カートに追加ボタン

検索機能

おすすめ一覧

気になる商品

おすすめの商品画像

カート

おすすめの商品画像をもっと見る

アカウント登録

おすすめの商品画像を左、右スライドボタン

ALL

カテゴリーの商品画像

チェア

カテゴリーの商品をもっと読み込む

ソファ

コーディネート

ベッド

シンプル部屋スタイル

ランプ

ヴィンテージ部屋スタイル

詳細ページ

メニュー

商品名

ロゴ

商品情報

検索機能

商品サイズ

気になる商品

商品価額

カート

商品数量

アカウント登録

カートに追加

パンくずリスト

フッター

商品画像

詳細ページ

カートに追加

Wireframes / ワイヤーフレーム

Typography / タイポグラフィ

Color / カラー #f2f2f0

#bfbfbd

#d9430d

Home page / ホームページ

Product page / 商品詳細ページ

プロジェクトについて今回は株式会社本田味噌本店と産学連携するプロジェクトです。プロモーションツールとしてはウェブサイトを制作し。プロモーション商品は本田ん味噌本店にとても人気な西京の白味噌です。味噌は日本の文化でありその中で本田味噌本店が培ってきた歴史や、すでに親しんでいただいているお客様への思いも含めて理解し、サイトを見る時には「買いたい」という気持ちにさせたい。

問題宣伝する CM と広告などは少ないので認知度が低い。今ははスーパーで買いに行く人が多いそして本田味噌本店の店舗はほかの店より店舗数がすくない。商品のいい点と商品の強みと特徴はみんなに伝えられないのは一番大きな問題点だと思う。

解決する方法今回はインターネットの活用してウェブサイトを強化したくさん商品の情報を発信していきたいと思う。もっと商品の魅力を伝えるために商品の記事ページと商品のおすすめレシピページを作って商品実際の良さを伝え、身近に感じレもらえるようにサイトの構成を考えた。

リサーチ本田味噌本店は約 200 年で歴史ある店舗。味噌汁＝塩分量が多い、そんなイメージを抱いて人が多いけど本田味噌本店の「西京白味噌」は米麹を大豆の約 2 倍使って仕込みます。塩分約５％と、味噌の中でも最も低塩。栄養価が高く体に良い健康なこだわり味噌です。毎日お味噌汁などにしてる人が多いです。味噌は日本人の食生活を支えてきた食品なので需要が高くなる。

人気な味噌麦麹と米麹の合わせ味噌

麦の粒が残っているので、食感もある風味豊かな味わい、どんな料理にもあう万能味噌です。

生味噌無添加だから生きた酵母がたっぷり。粒感があるので、米麹の食感も楽しめます。

雑穀味噌雑穀で作られた新しい味噌で、半液状タイプなのでお湯で溶かすだけで簡単に栄養満点のスープを作ることができます。

減塩味噌標準品とくらべ塩分を 20％カット、米麹 20 割で、減塩でもコクのある味わいです。

味噌消費量ランキング

長野県

信州味噌で知られる長野県で 8,085 グラム。塩分

の取り過ぎに注意したいですが、発酵食品を多く摂取していることも健康につながっているようです！

高

低

岩手県

岩手県で 7,803 グラム。雪が多く干物の消費量が

多いところで味噌の消費量も多い。雪国は保存食の材料として味噌になじみがあるようだ。

新潟県

新潟県で 7,605 グラム。新潟県の農産物といえば

「米」が一番ですが新潟県味噌醤油工業協同組合と

連携し、県産大豆を使った味噌と醤油の PR を行いました。

同業他社についての分析こちらは本田味噌本店の西京白味噌と同業他社のいろいろ比べて分析した結果です。自社商品の強みとメッリトを見出して自社今後の課題と弱みもきちんと理解した。「どのようにすれば買ってもらえるのか？」が大前提のテーマになっている。

商品名

直接闘争

有機白みそ見返り美人

信州こうじ味噌

詳細塩分濃度は赤味噌と比べて低く、まろやかな麹の甘味が特徴です。モンドセレクション 2008~2016 年で最高金賞を受賞しています。標高が高い信州、大豆に対する米麹の割合を高くし、甘口に仕上げているのもこの商品の特徴です。

間接競争

矢場とん

味噌カツ専門店である、名古屋名物みそかつの老舗。八丁味噌が染みたしっとりしたとんかつで味は濃いめ。

美噌元

味噌汁専門店です。栄養満点でお客様にキレイになって欲しいという思いから付けられたそうです。

西京白味噌

上質な米麹を大豆の 2 倍使い、麹の円やかな甘みと塩分の低さ、美しい淡黄色の色合いが特徴です。

web サイト

レシピページ

記事ページ

低塩

スーパーで買える

オンラインショップ

ターゲット

ゴール

店の構え方が高級感があって老舗でもブラン

●

ドができるのでブランドを重視で、健康志向な

●

人。年齢は若い人から年配人まで幅を広くする。

●

商品の最新情報と記事のページ商品のおすすめ料理方法とレシピ商品の詳細ページまとめ

内部環境

Weaknesses

Strenghs 商品の強み

商品の弱み

商品の高級品がある。品質が高い。

●

歴史や商品に対するこだわり。

●

地域性や製法に強みのある調味料を使える。

●

国産原料使用、塩分が低い健康な味噌。

●

認識度が低い。普通の味噌よりちょっと高い。買いに行くにくい。味噌以外の商品がない。

外部環境

Opportunities

Treats

機会

脅威

海外の開発。

●

味噌のフェスを参加する。

●

番組と CM などを紹介する。

●

ライフスタイルの雑誌に登載する。

●

他社の安くて美味しい味噌。スーパーで簡単に購入できる。海外毎日味噌を食べる習慣がない。新しい技術革新の進度。

ペルソナ 01

ニーズ

個人情報 Zhuo さんは華道家です。 23 歳。平日は生徒達に生け花を教えてる。休日は自分の実力を高めるために研修センターへ行く。趣味は料理をすることで時間があれ

「オンラインショップで買い物する時に商品の良さと評価がわからない。」

ば自炊する。

ゴール

オンラインショッピング

Zhuo Yujung

商品の具体的な紹介がわ

●

かる。

華道家

評価による自分理想な商

●

75%

品が買える。普段知らない情報を参考

●

ができる。

ペルソナ 02

ニーズ

個人情報 Lei さんは銀行員です。 2５歳。普段仕事以外の時間は家で休んでいる。本を読んたり音楽を聞いたりオ

「簡単に購入できる見やすいサイトを探している。」

ンランで買い物するのが多いです。

ゴール

オンラインショッピング

Lei TongAnn

商品の魅力がわかる。

●

効率が高くなる。

銀行員

●

購入の手続きと方法など

●

90%

がわかりやすい。

ユーザーストーリーとフロー

ユーザーをとして

西京白味噌を買いたい。

商品についての内容を知りたい。

オンラインショップ

ユーザーをとして西京白味噌を買う時に料理の方法を知りたい。

オンラインショップ

おすすめの商品

記事おすすめの商品商品画像

最新記事商品画像最新記事のご紹介数量を選ぶ

カートに入れる

画面を閉じる

料理レシピ

試食インタビュー

数量を選ぶ

カートに入れる

情報アーキテクチャ

記事

オンラインショップオンラインショップ

商品画像

料理レシピ

商品カテゴリ

記事

おすすめの商品一覧

ロゴ

売れてる商品一覧

ログイン

お支払い方法について

検索

クレジット

カート

郵便振替

フッター

代金引換

オンラインショップ

記事の内容

料理レシピ記事

料理レシピオンラインショップ

なす田楽のレシピ

料理レシピ

なす田楽の画像

記事

なす田楽の作り方

カバー画像

お問い合わせ