UI/UX DesignWeb Development

Goal connect K.K.'s Password System Redesign

Streamlined authentication flow with 2FA and password complexity redesign for Goal connect K.K.'s enterprise password management system serving 300+ users across 10+ web applications.

Goal connect K.K.'s Password System Redesign

Role

UI/UX Designer, Web Developer

Timeline

4 months

Tools

Figma, OutSystems, CSS, JavaScript

Category

Web Design, Web Development

Design Brief and Overview

  • Business Context: Goal connect K.K. is a software development startup serving the Japanese electricity and virtual power plant (VPP) sector. With an ecosystem of 10+ web applications and 300+ end users, the company needed an account management system to reduce admin burden and improve user autonomy.
  • Strategic Goal: Design and implement an account management system within 4 months

Deliverables

  • UI/UX improvements for enhanced usability
  • Front-end development and implementation

The Challenge

  • While initially brought on as a UI developer for the password reset flow, I identified usability issues in 4 existing UI components. Through design critique and proposal, 2 improvements gained implementation approval from the Design team lead.
  • Due to NDA restrictions, simplified visual demonstrations and problem-solving processes are presented below.

Problem Solving

Improvement 1: Two-Factor Authentication

Original Design: 4 separate input fields for verification code with unrestricted reissue option

Original Design
Original Two-Factor Authentication Design

Design Critique:

  • 4-digit codes posed security vulnerabilities as user base scaled
  • Unlimited code reissues risked system overload and code duplication

Improvement 1: Solution

  • Upgraded to 6-digit verification system with additional input fields
  • Implemented 30-second cooldown for code reissue with clear messaging
  • Standardized input field heights across the design system
Solution
Improved Two-Factor Authentication Design

Improvement 2: Password Complexity Indicator

Original Design: Color-coded bar showing three password strength levels:

  • Red: Weak (unacceptable)
  • Orange: Good (unacceptable)
  • Green: Strong (acceptable)
Original Password Complexity Indicator Design Variants - Image 1
Original Password Complexity Indicator Design Variants - Image 2
Original Password Complexity Indicator Design Variants - Image 3
Original Password Complexity Indicator Design Variants

Design Critique:

  • Contradictory UX writing: 「良い」(Good) implied acceptability despite rejection
  • Lacked actionable guidance for password improvement
  • Redundant classification when only “Strong” passwords were acceptable

Improvement 2: Solution

  • Eliminated the misleading “Good” tier
  • Replaced color bar with dynamic policy checklist showing specific unmet requirements
  • Provided real-time, actionable feedback for password creation
Solution
Improved Password Complexity Indicator Design

Outcomes

  • Both improvements successfully deployed to production
  • 90%+ of system testers reported faster, more confident navigation through the password management flow
300+
End Users
90%+
Tester Satisfaction
6-Digit
Security Upgrade
10+
Web Applications
Key metrics from the password management overhaul

Lessons Learned

  • Balancing dual roles as designer and engineer taught me to harmonize user delight with system functionality
  • Deepened understanding of Japanese UI/UX nuances, particularly in microcopy and user guidance patterns
Back to homepage