Sugoyose

WebアプリWebサイトtoC

オンライン寄せ書きプラットフォーム「スゴヨセ」の二人目のデザイナーとしてチームに参画した。このサービスはこのサービスを発案した広告代理店自身初の自社事業であったため、画面だけでなくデザインシステムやコンポーネントの作成など、 UX/UIのノウハウを社内のメンバーにレクチャーしつつ、ナレッジを蓄積していく必要があった。

期間

2021/03 - 2021/12

クライアント

iUM株式会社

役割

UX Design、 Project Planning、 Web Design、 UI Design

チーム構成

UIデザイナー　2名、アートディレクター　1名、コンテンツディレクター　1名、エンジニア　2名

Overview

サービスのきっかけは「オンライン寄せ書き」「寄せ書き　オンライン」といったワードでSEO1−２位を、自社サービスのキュレーションサイト：meechooが獲得していることと、さらにmeechoo上でのyosetti（最大手競合他社）へのアクセス及び誘導数が多いので「自社で代替サービスを作ったらシェア１位をとれる可能性があるのではないか」というところにビジネスチャンスを見出したところから始まった。
またオンライン寄せ書きの競合他社の多くは、印刷物サービスを色紙 / かつデザイン性に優れたものというよりはキャラものや一般的であまりデザインに拘りの無いテンプレートが多かったことから、

・同じ値段で色紙よりも手のこんだ冊子が作れる
・広告代理店が運営しているため、競合にはないような洗練されたデザインのテンプレートが用意されている

という点を訴求することにより、競合差分を埋めていけるよう考えた。

Objectives

まず最初に、ユーザーの認識のすり合わせにデモグラをベースに人物像を考え、以下のセグメンテーションが生成された。

サービスは発案基軸ではなくマーケ基軸のサービスであること、またmeechooに流入してきているユーザー属性がGAで取れていることから、カスタマージャーニマップなどの制作は行わなかった。なので、

競合サイトの調査（テンプレートの傾向や、サイトUXなど）
競合サービスを実際に使い導線チェックや、タッチポイントの想定

など、これらのリサーチを基軸に徐々にデザイントーンを詰めていった。

Visual Design

上記のターゲットに刺さりそうなトーンをADと相談しながら探り、当たりをつけながら選定していった。
結果として、「表紙のデザインが豊富な事を全面に押し出したデザイン」「イラストを使ったコミカルなデザイン」「Notion、slackのような社会人向けアプリらしいデザイン」などが最終的な候補として絞られた。

トーンのラフ

決定されたデザイン

協議の末、上記で選出された3つの案のうち「表紙のデザインが豊富な事を全面に押し出したデザイン」が採用され、下記のデザインで進めていくことになった。
そしてADが作成した細かいあしらいをコンポーネント化し、チームへのレクチャーを交えながら開発チームが一眼見てわかるようなデザインシステムを構築していった。ウォークスルー画面

アプリ・webどちらでも使えるウォークスルー画面を作成した。サービス概要・プロダクトが電気式の原付バイクであるということを最初に理解してもらえるようなデザインを心がけた。

Edit function

次に、ユーザーがオンライン上で寄せ書きが編集でき、かつデザインを自動生成できる編集画面の設計を行なった。この機能を作る上で必要となってくる仕様書は主にこの二つ。

・編集画面の設計
・寄せ書きデザインのテンプレート作成

この二つの仕様書を同時並行して作成していった。

編集画面の設計

まず、開発側へ向けた編集画面の設計を行なった。最初に試作として実際にブックの寄せ書きを作成し印刷段階まで持っていき、web上で自由に編集できるために必要なパーツを選定した。

そしてそれを元にメッセージの個数の最大値と最小値の組み合わせで出るパターンを洗い出し、コンテンツディレクター・開発側と相談しながら必要なページごとに配置のレギュレーションを決めていった。

開発チームに渡した仕様書

編集画面のためインタラクティブな機能が多かったので、「メッセージを追加した際にどのように繰り上がるのか」「メッセージの入れ替えをした際はどのような挙動になるのか」など、複雑な挙動の説明をする際はXDでプロトタイプを活用しプレゼンした。

ユーザビリティの向上

ある程度画面が固まってきた段階で、UXを意識して画面や機能を改修していくフェーズに入った。
リリースの少し前からテスターに挙動やユーザビリティの確認をしてもらい、吸い上げた改修案をサイト内のQ&Aページに蓄積していった。
テスターからの意見を吸い上げながら、UXを改修していく中で意識していたのは以下の二つ。

・ユーザーが使いながら覚えていく機能
・最初に説明しておかないと分からない機能

この二つを切り分けて考え、後者と判断した導線にはチュートリアルの吹き出しを設置していった。
また、このプラットフォームには写真とメッセージという、二つの編集コンテンツが存在しているためユーザーが覚えていくことが他の編集系サービスと比較しても多い。
そのため「ユーザーが使いながら覚えていく機能」にカテゴライズされたものも、画面上にヘルプへの導線を追加し、いつでもユーザーが編集画面で分からないことがあったら検索できるような仕様にした。