Redesign study:macaroni
UIデザイン

内容:自主制作

担当:リサーチ/要件定義/UI作成

期間:2週間

 

1.概要

 

1-1.macaroniについて

macaroniは「食からはじまる、笑顔のある暮らし」をコンセプトにレシピ動画とグルメや料理、暮らしに関する幅広い情報を配信しているライフスタイルメディアです。
Webサイトとアプリの両方ありますが、本制作物はアプリに着目しています。

 

1-2.リデザインの背景

興味のある記事がたくさんあり、「あとで読もう」とクリップ機能を使っていたのですが、読み返す時に記事の探しづらさを感じていました。サービスの方向性を踏まえて利便性を上げるため、iOSアプリの架空リデザインをさせていただきました。

 

○補足

・2021年12月時点の制作物です。

・クリップ機能は、ユーザー登録で利用できる機能です。

 

1-3.制作物

制作フローは後述に続きますが、まず完成品はこちらです。

 

※先に作業全体をチェックされたい方はコチラをご覧ください

 

Figma全体をみる

 

 

○課題1.記事をクリップした後、フォルダ分けしづらい

プロトタイプをさわる

 

 

○課題2.クリップした記事のカテゴリを絞り込みしづらい

プロトタイプをさわる

 

 

○追加:選択(フォルダ移動/削除)機能

プロトタイプをさわる

 

 

 

2.課題の仮説

 

2-1.リデザインする価値

まず、リデザインする価値があるかビジネス視点で考えます。
クリップ機能の利便性を改善することでユーザーの競合サービスへの移行防止が期待できると推測します。
なぜなら「見返しづらい」という感覚は、他サービス(例:Instagram,クラシルなど)の記事保存機能と比較して感じた問題点だったからです。
この時点の仮目標として、貢献への道筋を考えていきます。

 

2-2.ペルソナ

着目した問題点に対して、影響が大きいのはライトユーザーだと考えました。

他サービスの機能でメンタルモデルを構築しているユーザーがmacaroniに移行した場合、クリップ機能に感じる不満が大きいと思われます。

ライトユーザーに焦点を当て、課題・改善施策を検討する指針として仮のペルソナを定めます。

上記はブランドムービーやコンテンツ内容を参照し、具体的に以下の目的でペルソナを使用します。
・ユーザビリィティテストの対象者条件を明確にする
・ユーザーフローの仮説立案を行う

 

2-3.ユーザビリティテスト

自分以外の視点を取り入れ課題を明確にするため、ユーザビリティテストを行いました。


○協力いただいた方:ペルソナに近い3名(ただし1名はmacaroniの利用経験あり)

○方法:オフライン

○主な質問
1.極力ジャンル別に記事を5つ以上クリップし、クリップした記事を見返してください。
2.操作する際に感じたこと、なぜそこをタップしたのか?など、都度言葉に出して教えてください。

 

○ヒアリング内容を整理

 

2-4.課題を抽出

ヒアリングから機能の改善点を洗い出し、以下2点をリデザインの課題としました。

 

○課題1:記事をクリップした後、フォルダ分けしづらい

 

○課題2.クリップした記事のカテゴリを絞り込みしづらい

 

2-5.ユーザーフローの仮説

変化の目標を定めるため、ユーザーフローの仮説を立てます。

上記の流れから、目標を定めます。

 

○ユーザー面
最新記事だけでなく過去にクリップした記事も探しやすいため、日常にmacaroniの情報を取り入れて「楽しい」が増える(コンセプトの「笑顔のある暮らし」の実現)

 

○ビジネス面
1.ユーザーの競合サービスへの移行防止
2.アプリ利用継続率の低下防止
に貢献する。

macaroniは有料会員制度がないため、収益モデルは広告収入だと推測しますが、今回の改善点は直接的な収益向上ではなく、ユーザビリティの向上によるコアファンの醸成を目標とします。

 

3.UIビジュアル

 

3-1.参考リサーチとペーパープロトタイプ

参考アプリのスクショをFigmaに並べ、ペーパープロトタイプを描き出します。

 

3-2.パターン出し

ペーパープロトタイプを元にパターンを出します。

macaroniを利用したことの無い家族にfigma mirrorで操作してもらいながら、ブラッシュアップしました。

 

 

4.UI確定と仮設検証

前回のユーザビリティテストで協力いただいた1名とmacaroni初利用の新たな2名に改めてオフラインでテストを依頼しました。以下、リデザイン内容とテスト結果です。

 

 

※冒頭と同じプロトタイプです。

 

○課題1.記事をクリップした後、フォルダ分けしづらい

プロトタイプをさわる

 

○リデザイン
・クリップするとスナックバー表示、フォルダわけのフローを作成
・追加後に「フォルダを見る」導線をつけて過去にフォルダわけした記事を見返すキッカケを作る。各記事の閲覧性を高め、アプリの利用向上が狙い
・スナックバーの「フォルダに追加する」の赤色について、現在のプライマリーカラーはユーザー層向けのくすみカラー中心で情緒面で魅力的だが、アクセシビリティを考慮してコントラスト比を高めるカラーに変更

 

○テスト結果
・2/3名が迷いなく「フォルダに追加」ボタンをタップした
・2/3名が迷いなく「フォルダを見る」ボタンをタップした

 

 

○課題2.クリップした記事のカテゴリを絞り込みしづらい

プロトタイプをさわる

 

○リデザイン
①カテゴリ絞り込み機能をハンバーガーメニューから選択ボタンに変更
②視認性を上げるために「フォルダ」の文字色を変更
③カテゴリごとに記事を絞りやすくするため、タブバーを追加
クリップ記事が少ない場合、無駄にスライドしないよう記事数をバッジで表記
④直感的にわかりやすいように、ナビゲーションとカードラベルを日本語に統一
(ホーム画面のカテゴリは日本語表記なので、ブランドイメージとして違和感は無いと判断)

 

○テスト結果
・3/3名が迷いなく「レシピ」の記事を絞り込みできた

 

 

○追加:選択(フォルダ移動/削除)機能

プロトタイプをさわる

 

○リデザイン
①現在:各フォルダの右上「…」ボタンから追加/消去/並び替えを行う
変更:クリップ一覧画面に「選択」ボタンを配置
②操作の負荷軽減のため、「すべて選択」機能を追加
③アクションコンテンツを最小限にしてユーザーの誤操作を防止するため、選択操作時は検索フォーム/カテゴリのタブバー非表示
④視認性アップのため、チェックボックスの位置を変更
⑤タップしやすいように移動/削除ボタンをフッターに配置
・記事を読み返すよう誘導するため「フォルダへ移動(●)」のみ選択件数を表記
・画面左側に配置しているチェックボックスをタップする流れでタップしやすいよう「フォルダへ移動」は左側に配置
・「並び替え」機能は、ヒアリング結果から利用頻度が低いと判断し、排除
・色の多用を避けるため「削除」の赤色は「課題1:記事をクリップした後、フォルダ分けしづらい」と同じ#C5231Aを使用

 

○テスト結果
・1/3名が迷いなく記事をフォルダに移動した
・2/3名が迷いなく記事を一括削除できた

 

 

改めて、作業全体をチェックされたい方はこちらをご覧ください

 

Figma全体をみる

 

 

テスト結果まとめ

○全体を通して
2/3名が実際のアプリと比較し、「リデザインの方がわかりやすい」と回答してくれました。
『カテゴリの絞り込みで記事が探しやすくなった』
『全体的に馴染みのある操作になったから、空いた時間にクリップ記事を読み返そうって気持ちになれる』
といったコメントをいただき、リデザインによる目標に歩み寄れたかなと感じました。

 

テスト結果

貴重な指摘をいただいたので、次項で再検討します。

 

5.テスト結果からUI再検討

 

指摘1:フォルダ追加のスナックバー表示速度

スナックバーの表示時間のテストまで至りませんでしたが、実務であればマテリアルデザインの推奨「最小4秒〜最大10秒経過」を元にテストし、ユーザーにとってのベストタイムを分析すべき重要箇所だと考えます。
(参照:マテリアルデザイン

 

指摘2:クリップ記事の選択ボタン

今回のテスト結果では必ずしも改善すべきとは考えませんでした。
理由は他2名は迷わず「選択」ボタンをタップできたこと、画面において「選択」ボタンの優先順位は高くない(目立たせて誘導する必要はない)ことです。
実務であれば、より多くの方のヒアリング結果から定量/定性の両方を踏まえて判断したい箇所だと感じます。

 

指摘3:クリップ記事の削除ボタン

多くの方の誤タップを招くと感じたので、改善案を3パターン作成しました。
指摘してくださった方から「Bが一番わかりやすい」とコメントをいただきました。

 

6.まとめ

 

○学び
・仮説→検証→修正をスピード感もって取り組むことで、限られた工数の中で目的に近づけることを体感しました。実務ではチームメンバーの意見から多くのヒントをいただき、デザインの力を最大限活かして目的達成までつなげていきたいと思います。
・今回は私が感じた「記事の探しづらさ」を起点にプロセスを辿りましたが、次は他ユーザーの意見 × 事業ビジョンを元に課題解決に取り組みたいと考え「Redesign study:食べチョク」を制作しました。是非ご覧ください。

 

○お礼
日頃素敵な情報を届けてくださるmacaroniの運営の方々と、ヒアリングに協力いただいた方々に感謝いたします!
最後まで読んでいただき、ありがとうございました。