UI/UXデザインWeb開発

Goal connect(株)パスワードシステム改善

Goal connect(株)の10以上のWebアプリケーションと300人超のユーザーを支える企業向けアカウント管理の安全性・操作性向上プロジェクト。

Goal connect(株)パスワードシステム改善

役割

UI/UXデザイナー、Webデベロッパー

期間

4か月

使用ツール

Figma、 OutSystems、 CSS、 JavaScript

カテゴリ

Webデザイン・Web開発

デザイン概要と背景

  • ビジネス背景: Goal connect株式会社、日本の電力・仮想発電所(VPP)分野向けにサービスを提供するソフトウェア開発スタートアップです。10以上のWebアプリケーションと300以上のエンドユーザーを抱えて、管理業務の負担を軽減し、ユーザーの自律性を高めるアカウント管理システムが必要とされていました。
  • 目的: 4か月以内に、アカウント管理システムを設計・実装すること。

成果物

  • 使いやすさ向上のためのUI/UX改善
  • フロントエンドの開発・実装

課題

  • 当初はパスワードリセット機能のUI開発担当として参画しましたが、既存の4つのUIコンポーネントに使い勝手の課題を発見しました。デザインの批評・提案を通じて、2つの改善案がデザインチームリードから実装承認をることができました。
  • NDAの関係上、以下で簡略化したビジュアルデモと課題解決プロセスを示しています。

問題解決

改善1: 二段階承認

  • 元のデザイン: 4つの独立した入力欄による認証コード入力、再発行は無制限
Original Design
オリジナル二段階認証の設計

デザイン批評:

  • 4桁コードでは、ユーザー数増加に伴うセキュリティ上の脆弱性
  • 無制限の再発行により、システム負荷やコードの重複リスク

改善1:解決

  • 6桁コードにアップグレードし、入力欄を追加
  • コード再発行に30秒のクールダウンと分かりやすいメッセージを実装
  • デザインシステム全体で入力欄の高さ統一
Solution
強化された二段階認証の設計

改善2:パスワード強度表示

元のデザイン: 色分けバーで3段階の強度を表示:

  • 赤: 弱(不可)
  • オレンジ: 良い(不可)
  • 緑: 強(可)
オリジナルパスワード複雑度インジケーターの設計バリエーション - Image 1
オリジナルパスワード複雑度インジケーターの設計バリエーション - Image 2
オリジナルパスワード複雑度インジケーターの設計バリエーション - Image 3
オリジナルパスワード複雑度インジケーターの設計バリエーション

デザイン批評:

  • 「良い」が可と誤解されるUX表現で矛盾
  • パスワード改善の具体的な指針ガ不足
  • 「強」のみが許容される場合、分類が冗長

改善2:解決

  • 誤解を招く「良い」ランクを廃止
  • 色分けバーを動的なポリシーチェックリストに置き換え、未達成条件を明示
  • リアルタイムで具体的かつ実効可能なフィードバックを提供
Solution
強化されたパスワード複雑性指標の設計バリエーション

結果

  • 両方の改善案を本番環境に無事導入
  • システムテスターの90%以上が、パスワード管理フローをより速く、自信を持って操作できると回答
300+
エンドユーザー
90%+
テスター満足度
6桁コード
セキュリティ向上
10以上
Webアプリケーション
パスワード管理フロー刷新で達成した主要指標

学んだこと

  • デザイナー兼エンジニアリングという二重の役割を通じて、ユーザー体験とシステム機能の調和の重要性を学んだ。
  • 日本のUI/UXにおけるマイクロコピーやユーザー誘導パターンへの理解を含めた。