スクラム開発におけるUI／UX設計〜フロントエンド実装協力

【Keywords】
UXデザイン/コミュニケーションデザイン/デザインシステム/クリエイティブ開発/HRtech

===
■Project
あしたのチーム SaaS型プラットフォーム開発協力

■Clients
株式会社あしたのチーム

■Released
2020.6
===

【背景】
人事評価や社員情報の管理、組織図の作成といった企業の経営者や総務担当者の業務をオンラインで管理・サポートするSaaS型のプラットフォーム「あしたのクラウド」の機能拡張プロジェクトです。

他社エンジニアやデザイナーと協業するスクラム開発体制でUI／UX設計〜フロントエンド実装担当として参加しました。

【設定した課題】
ユーザー調査・分析によって提起された課題からの、ニーズに対応する社員情報の管理機能の追加開発およびUI改善。

【プロセス】
■要件定義
本プロジェクトはアジャイル型で、スクラム開発体制で参画しています。

新しい機能実装が多いため結合する既存の複雑な基幹システムを正しく理解し、その仕様を前提とした要件定義や仕様策定に時間をかけました。

■UX設計
新機能の組織図アプリケーション設計・実装に際して、インタビューを実施し、ペルソナとカスタマージャーニーマップを作成。
これをもとにユースケース図やUML図を作成、既存仕様といかに折り合いをつけて要求を達成するかの設計に取り組みました。

■UIデザイン
今回の機能拡張のタイミングで、兼ねてから導入が検討されていたアトミックデザインが採用され、Vue.jsを使用した実装レベルのコンポーネント管理を前提としたUIを設計することになりました。既存仕様と採用するライブラリの制約を踏まえたUI設計に取り組みました。

また、以降の運用で参加するデザイナーやエンジニアたちがパフォーマンスを発揮しやすいように、UX原則やUI原則に言及したデザインガイドを弊社デザイナーが作成しました。

■開発
最終的なシステムとインターフェースの完成に至る途中で、動的なデータを扱う共通モジュールの大量作成・管理が必要でした。

設計と実装には通常のフロントエンド開発よりも配慮や工夫が必要とされ、ソースコードのレビューと修正はかなり入念に実施されることになりました。