ask me
happinesscat777@gmail.com
Kita-ku, Tokyo
株式会社トラストバンク パブリテック事業部 自治体用カレンダー・掲示板ツール「LoGoチャットPlus」デザイン改善 制作期間:3年 担当領域:UIデザイン 使用ツール:illustrator /Adobe XD / Figma プラットフォーム:Web・App
・すでにWeb版・App共にリリース済み
・Backlogチケットの進捗により、カレンダー機能、掲示板機能の同時並行でデザイン改修作業に着手
・自治体職員のユーザーインタビュー結果から、抽象度の高いデザインは受け入れられづらい状況
・バグ頻発のため安定稼働がチーム最優先事項、開発に負担がかかる極端なデザインリニューアルは厳しい状態
・開発・PdMと検討、既存メニューの動線を整理
・大きな機能変更はしない、情報の出し方を工夫する、操作性・視認性向上のためマイクロインタラクション追加を方針としてスタート
・一度に大幅なUI変更は不可(自治体職員が既存UIに慣れているため)
・iOSのスケジュール管理機能、掲示板機能のUIデザイン改善による操作性の向上
(ログイン画面はOEMにより改修不可能)
・ログイン画面は変更不可(OEMのため)
・下部固定タブに「表示設定」「設定」と設定に関する機能が重複している
・下部固定タブアイコンが全て同じ濃さのカラーでステート表示としての機能を果たせていない
・予定リストの情報の優先順位づけができておらず、末尾に予定開始・終了時刻が配置されている
・すべての画面が運用ありきのデザインになっている→機能整理し直感的に利用できるよう改善可能な箇所もある
・ユーザーヒアリングとチーム内協議の結果、ユーザーがプライベートで最もよく使用するというGoogleカレンダーをベンチマークとすることに決定
・Appleのhuman interface guidelinesをふまえた設計
・UIを1からすべて作成するとコストが大きすぎるため、FigmaやXDのマテリアルテンプレートなどでデザインカスタムし工数の短縮をはかりました
iOSエンジニアとボタン押下時の画面挙動を確認するための資料の一部です
・ユーザーがプライベートでGoogleカレンダー最もよく使用するというリサーチ結果を参考に以下のUI変更を実施
・下部固定タブで現在使用中の機能にはステートカラー(濃緑)を表示(他はグレーアウト)
・日別の予定がリスト形式で確認できる
・スケジュール詳細表示が「予定タイトル→日時」だったが、日時の情報優先度を上げ「日時→予定タイトル」に変更
・予定なしの場合、エンプティステートを表示することでユーザーにとって意味不明な余白を避ける
・ユーザーが画面リフレッシュを目的とした下向きスワイプを行った際、そのジェスチャーを画面上に表示、画面に操作結果を反映させる(「読み込み中」)
・アイコン差し替え用資料
・コンポーネントガイド
・Web版スケジュール機能 UI変更提案書
デザイン修正前に、アイコンをマテリアルデザインに統一し、アイコンサイズを揃えたいという依頼があり作成したもの
主にボタンのプライマリ、セカンダリといったコンポーネントの考え方について解説した資料。開発エンジニア、ディレクター、CS全体の認識合わせ用に作成したものです。(パーツサイズのガイドラインは別途作成)
Web版、LG-WAN版はiOSエンジニアとは別のチームが開発を行なっていたため、Backlogチケット作成用に機能改善提案書類を作成。
・カレンダー週表示を日別表示に切り替え時に発生する、縦スクロール→横スクロールに変化するなどユーザーが操作に違和感を覚えるもの(驚き最小の法則)のレイアウトの統一
・予定比較機能におけるユーザーアイコンの追加
・端末利用制限時にユーザーがどのような操作を行えばよいかを明示したモーダルの実装提案
・認証コード入力後、ログイン画面へ戻り再ログインすることをマイクロコピーで案内