FRONT-END.AI

Service
UX/Product DesignVisual DesignDesign SystemWeb DesignB2BSaaS
Date
Jan 2019 - Oct 2022
Client
Tsunagu.AI
Visit site

01 / Introduction

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のリードUX/UIデザイナーとして、デザイン構成(JPEG、PNG、JSONファイル)をコードに自動変換するサービスを開発しました。このサービスは、デザインページの準備に必要な時間と労力を大幅に削減し、1~5年の経験を持つコーダーのワークフローを効率化することを目的としています。

02 / Overview and hypothesis

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.


FRONT-END.AIは、ジュニアからミッドレベルのコーダー向けに効率的なツールを提供し、デザインからコードへのワークフローにおける課題を解決するために設計されました。

このサービスは、日本とアメリカで特許を取得したAI技術を活用してデザイン構成を分析し、自動的にコーディング提案(例:HTML、CSS)を生成します。その結果、初期コーディング時間を85%削減し、これを導入した企業は、外部委託を削減することで年間最大1,000万円のコスト削減を実現しました。

さらに、FRONT-END.AIは業界で以下のような認知を獲得しました:

  • 2021年: 日本スタートアップ支援協会主催「The JSSA Online Startup Pitch Award」にて、審査員賞および東海東京証券賞を受賞。

  • 2019年: 福岡で開催された「B Dash Camp Fall 2019」のピッチアリーナにて、さくらインターネット賞を受賞。

仮説

  • デザインからコードへのプロセスを自動化することで、作業負荷を大幅に削減し、時間とコストを節約できる。

  • ユーザーフィードバックを収集し、それを反映することで、コーダーの実際のニーズに沿った機能を提供し、満足度を向上させる。

  • 明確で直感的なUI/UXデザインシステムが、採用率を高め、機能性を向上させる。

03 / Solution

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.


ユーザー中心のデザインアプローチ

  • サービスの機能性と使いやすさを評価した上で、UI/UXおよび全体的なデザインシステムを設計。

  • デザイン構成をコードに変換するプロセスを簡略化するため、直感的なインターフェースを開発しました。

フィードバックを活用した反復改善

  • ローンチ後にユーザーフィードバックセッションを実施し、機能性やユーザーの好みについての洞察を収集。

  • フィードバックに基づき、ユーザーニーズを効果的に満たすために必要な機能を導入しました。

迅速な機能開発

  • ユーザーテストの結果を活用し、サービスの実用性、使いやすさ、機能性を強化しました。

04 / Impact and Learning

  • 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.



インパクト

  • 初期コーディング時間を85%削減し、コーダーの生産性を大幅に向上。

  • 外部委託コストの削減により、企業は年間最大1,000万円を節約。

  • 継続的な改良と特許取得済みAI技術により、ユーザー満足度を向上。

  • 業界での認知: 「The JSSA Online Startup Pitch Award」と「B Dash Camp」で受賞。

学び

  • 直接的なユーザーフィードバックは、必要な機能を特定し、製品の機能性を改善する上で重要である。

  • 反復的なデザインと迅速な機能更新は、実用的でユーザーに適合したツールを作る鍵となる。

  • 明確で直感的なUI/UXデザインシステムは、採用率と満足度を向上させるために不可欠。

このプロジェクトは、AI駆動のツールがワークフローを効率化し、コストを削減し、ユーザー体験を向上させる可能性を示しました。ユーザー中心のデザインと継続的な反復を通じて、実用的かつ価値のあるプロダクトを生み出すことを証明しました。

Send an E-mail