Back

Formli・Ongoing

Formli is a powerful software tool for creating and managing online forms. With Formli, users can easily create a wide range of form types, including surveys, quizzes, and sign-up sheets.

I joined Formli to spearhead the development of new form customization features. My responsibilities included leading the design process and implementing new design guidelines and principles.

Design System · Product Thinking · UX Thinking · Visual Design
  • Industry

    Software as a service

  • Company size

    Small (11-50 employees)

  • Company founded

    2020

  • Company website

    https://formli.com

Overview

Formli, a mobile-driven form app inspired by the interactivity of social platforms like TikTok and Instagram, empowers users to create and manage a wide range of forms. When I joined the team in 2022, the app was at an early stage with only essential form-building features and a minimal design system.

My mission as Lead Product Designer was to establish a scalable design framework and introduce powerful customization features that would set Formli apart in a competitive market.

Examples of forms designed with Formli!

The challenge

With the rise of highly customizable WYSIWYG CMS platforms and a shift towards personalized user experiences, form-building tools like Formli face high expectations.

Initially, Formli offered only basic customization—users could change backgrounds, fonts, and buttons, but options were limited. To stay competitive, Formli needed an upgrade that provided users with a more versatile and engaging design experience.

Designing for efficiency

To quickly meet market demands, our approach needed to fit seamlessly within Formli’s existing framework.

The challenge was to create impactful new features without disrupting current functionality. This required designing with precision, enhancing consistency, and maximizing flexibility, all within a low-impact approach.

Getting to work

1. Organizing the Figma Workspace

I began by organizing and cleaning up the Figma files. This included creating a thumbnail system to help team members easily distinguish library files from design files, as well as implementing a standardized naming convention for assets and pages. This organization laid the groundwork for faster collaboration and hand-offs.

Example of early Figma file organization, establishing structure for efficient collaboration.!

2. Setting Clear Objectives

Working closely with the CTO, we established clear objectives, adopting a two-week sprint cycle to allow for iterative progress. By defining goals collaboratively, we ensured alignment across design and development.

3. Implementing Text Customization and MUI Integration

Our first feature-focused sprint centered on text customization, which also opened the door to integrating the MUI design library used by our developers. This integration allowed us to develop the initial version of a design system that was both robust and technically aligned.

Our integration of the MUI library allowed for streamlined, consistent customization across the app.!

The results

After several months, our dedication and systematic approach yielded a transformative outcome. Formli’s users gained extensive customization capabilities—allowing for detailed control over font styles, paddings, and margins. This functionality has not only enhanced user satisfaction but also empowered users to create more engaging and personalized forms. Moreover, our work established a scalable design system that ensures consistency across the app, reducing design debt and simplifying future feature development.

New customization options in action, providing users with extensive control over form appearance.!

What's next?

This project reinforced the value of a user-centered, low-impact approach to design iteration. As we continue to expand Formli’s capabilities, I look forward to evolving our design system and enhancing customization options to meet the dynamic needs of our users.