Role
Lead Product Designer

Project Space
AI Design-to-Code Tool
0-1 Projects
B2B
SaaS

As the Lead UX/UI Designer for FRONT-END.AI, I developed a service that automates the conversion of design compositions (JPEG, PNG, or JSON files) into code, aiming to streamline workflows for coders with 1-5 years of experience by drastically reducing the time and effort needed to prepare design pages.

FRONT-END.AI was designed to offer an efficient tool for junior and mid-level coders, addressing pain points in the design-to-code workflow.

The service leverages patented AI technology in Japan and the U.S. to analyze design compositions and automatically generate coding suggestions (e.g., HTML, CSS), reducing initial coding time by 85%. Companies using this tool reported annual cost savings of up to 10 million yen by eliminating external outsourcing.

Additionally, FRONT-END.AI received industry recognition, including:

• 2021: Jury Award and Tokai Tokyo Securities Award at The JSSA Online Startup Pitch Award, hosted by the Japan Startup Support Association.

• 2019: Sakura Internet Award at B Dash Camp Fall 2019 in Fukuoka’s Pitch Arena.

Hypothesis

• Automating the design-to-code process will significantly reduce workload, save time, and lower costs.

• Collecting and incorporating user feedback will ensure alignment with actual coder needs, increasing satisfaction.

• A clear, intuitive UI/UX design system will drive adoption and improve functionality.

User-Centered Design Approach

• Assessed the service’s functionality and usability before designing the UI/UX and overall design system.

• Developed an intuitive interface to simplify the process of converting design compositions into code.

Feedback-Driven Iteration

• Conducted user feedback sessions post-launch to gather insights on functionality and preferences.

• Introduced essential features based on feedback to meet user needs effectively.

Rapid Feature Development

• Leveraged user testing results to enhance the service’s practicality, usability, and functionality.

• Reduction in Coding Time

  85%

• Annual Cost Savings

  ¥10M+

• Awards

  2

Impact

• Reduced initial coding time by 85%, significantly improving coder productivity.

• Enabled businesses to save up to 10 million yen annually by cutting external outsourcing costs.

• Enhanced user satisfaction through continuous refinement and patented AI technology.

• Gained industry recognition with awards from The JSSA Online Startup Pitch Award and B Dash Camp.

Learning

• Direct user feedback is crucial for identifying essential features and refining product functionality.

• Iterative design and rapid feature updates are key to creating a practical, user-aligned tool.

• A clear and intuitive UI/UX design system is vital for driving adoption and satisfaction.

This project demonstrated how AI-driven tools can streamline workflows, save costs, and enhance user experiences through user-centered design and continuous iteration.