こんにちは、21年4月に新卒として入社しましたデザイナーの木下菜穂と申します。4月から新卒研修が始まり、社会人の基礎やデザインの基礎的な事柄を学びました。そして6月末から約1ヶ月間、研修の集大成として「Web版のブログサービスを作る」といった内容でエンジニアとの合同研修を行いました。
この記事では合同研修に取り組む中で主にデザイナー3人が担当したところとそこから得た学びを振り返ります。
目次
サービスの概要
私たちは愛犬家に向けたブログシステムを制作しました。
サービス名は「onewan」で、ユーザーは写真と文章で愛犬との日々の思い出を記録したり、細かいカテゴリー検索によって自分の愛犬と同じ犬種を飼う人の記事を見ることができ、よりリアルな情報を収集することができます。
こちらから今回制作した「onewan」のサイトが閲覧できるので是非ご覧ください。 https://onewan.dog/
開発の流れ
今回のサービス開発期間は約1ヶ月だったこともあり、より短期的に効果のあるサービスを開発したいと考え、UXデザインのプロセスに基づいて開発をしました。プロセスは主に5つの工程に分かれています。
基本的にエンジニアも含めたメンバー6人全員で既存のブログサービスを調査したり、ペルソナを検討するなどメンバー全員がユーザー視点で作れるように、サービス開発の上流から携わりました。その中でデザイナーである私たちが調査から評価・改善までの工程を主導に進めていきました。大まかな流れとしては次のようになります。
1.調査
ユーザーインタビューで実際に犬を飼っているメンバーに半構造化インタビューを行い、愛犬と暮らす中で抱く葛藤や不安を中心に聞き出しました。
2.分析
インタビューで聞き出した内容をカスタマージャーニーマップ(AS-ISモデル)で可視化し、そこからわかるユーザーの欲求を洗い出しました。その後、私たちが提供するブログサービスとユーザーの欲求のズレがないかバリュープロポジションキャンバスで確認し、象徴するユーザーの欲求とサービスの特徴を明らかにしました。そして明らかになったユーザーの欲求からペルソナを作成し、カスタマージャーニーマップ(TO-BEモデル)を用いてonewanを利用した理想的なユーザーの体験を可視化しました。
3.プロトタイプ
対象ユーザーやユーザーの欲求など、ユーザー視点で考えた後、そこからサービスに必要な機能を洗い出し遷移図を作成し、要件定義をしました。その後、デザインツール(figma)でプロトタイプやワイヤーフレーム、UIを作成しました。
4.評価、改善
メンバー内で検証ツールを使いユーザー視点で画面遷移や機能を改めて見たときに使いづらいと感じた画面や機能を何度も修正していきました。そして実装の工程に取り組むエンジニアにバトンタッチをしました。
学んだこと
・要件定義の曖昧さに気をつけること
今回は、ユーザーがサービスを利用する上で「愛犬と同じ犬種を飼っている人の記事を見たい」という欲求があり、「犬のカテゴリー検索」機能を増やすことで自身の愛犬と同じ犬種を飼っている人の記事を簡単に見れるようになります。このようにどのような機能を足すのか？をデザイナーが想像し、その機能は期間内に実装できるのか？をエンジニアとの検討を繰り返していくのですが、「検索機能」でもフリーワード検索、タグ検索、カテゴリー検索などの種類がたくさんあります。機能を具体的に絞れず、作業時間の遅れが出てしまったので、今後の業務では要件を明確してスピードアップを目指したいです。
・ワイヤーフレームはピクセル単位で作ること
それぞれの機能を1画面に見やすく配置するためにグリッドを利用して並べていきました。数字を意識してピクセル単位で機能を配置していくことで機能の変更があったときに、迅速に対応することができ、エンジニアとも円滑に作業を進めることができました。感覚的にデザインをするのではなくピクセル単位でデザインをすることをこれからも心がけたいです。
この新卒合同研修が終わり、8月から新卒メンバーそれぞれが本配属され、実際の業務に取り組みます。4月から約4ヶ月間さまざまな研修を通じて大きな学びを得ることが出来ました。
今後はアイスリーデザインのデザイナーとして働くことに責任をもち、初心を忘れず業務を頑張りたいと思います。
