brifl: Empowering Creators with Collaborative Form Building

Brifl Dashboard
brifl: Empowering Creators with Collaborative Form Building
An open-source tool designed for designers, developers, writers, and photographers to create, share, and analyze forms seamlessly.
My Roles
Product Designer
User Researcher
Methodologies
Double Diamond
Timeline
January - December 2022
Toolstack
Figma
maze
brifl is an open-source, collaborative form-building tool tailored for creators across various disciplines such as designers, developers, writers. It enables users to design surveys, briefs, quizzes, and polls, facilitating seamless communication and feedback.

Problem

Creators often struggle with generic form tools that lack customization and fail to address specific needs, leading to inefficient workflows and miscommunication.

Approach

Develop a form-building application that offers unique blocks, communication channel between form creators and respondents, and recipient management.

Brifl Sample Blocks

brifl offers a range of customizable niche blocks, including typography, color palettes, and board.

Market Analysis: Learning from the Big Players

To shape brifl's product direction, I studied popular form-building tools with a strong foothold in professional workflows. The goal wasn't to replicate their feature sets, but to understand how they solve (or fail to solve) problems for creatives — especially in the early stages of project communication.


While tools like Jotform, SurveyMonkey, and Typeform offer comprehensive and enterprise-grade features, they often fall short in creating a streamlined and empathetic space for creative collaboration. For brifl's MVP, I made a conscious decision to deprioritize complexity and instead focus on shared understanding between creatives and their clients.


The benchmark analysis also reveals opportunities for future improvements — features that could be layered into brifl thoughtfully and gradually, as the product evolves.

Jotform

  • Multiple layout options (classic, card-based)
  • Drag-and-drop builder with strong UI flexibility
  • Powerful widget and plugin ecosystem
  • Digital signature field (legal sign)
  • Easy form importing from existing URLs or PDFs
  • Deep integrations with payment systems, CRMs, and productivity tools
  • Ecosystem of other products (Jotform Tables, Apps, Approvals)

SurveyMonkey

  • Integrated audience recruiting for surveys and research
  • A/B testing and performance analytics
  • Drag-and-drop editor with conditional logic
  • Form-as-conversation option for surveys
  • Smart suggestions for question types
  • Customizable layouts for branded feel

Typeform

  • Conversational, humanized form experience
  • Strong visual hierarchy and minimal UI
  • Theme and layout customization
  • Logic jumps and conditional paths
  • Gamified UX keeps engagement high
  • Redirect options after form submission

Features

Brifl empowers creators with versatile forms built from over 30 different block types and seamless third-party integrations, all while fostering communication through unique sender-responder links. It simplifies recipient management and benefits from a community-driven, open-source platform.

Diverse Form Blocks

Over 30 customizable blocks catering to various creative needs.

Recipient Management

Efficiently organize and manage form recipients.

Third-Party Integrations

Seamless integration with over 20 tools for enhanced functionality.

Open-Source

Community-driven development promoting transparency and collaboration.

Understanding the Users: From Personas to Archetypes

Unlike traditional form tools that target narrow user personas, brifl was designed for multidisciplinary creatives who often juggle multiple roles or work across different industries. To reflect this diversity, I took an archetype-driven approach rather than relying on rigid personas.


By researching online communities and conducting interviews with creative professionals, I identified four key archetypes that brifl aims to support: Designer, Developer, Writer, and Photographer.


Each of these archetypes has specific workflows and pain points that current form tools fail to address — particularly around client onboarding, brief gathering, and scope alignment. brifl's design decisions were rooted in surfacing and solving these unmet needs.

01
🖌️ Designer
02
💻 Developer
03
✍️ Content Writer
04
📷 Photographer

Design Process

Information Architecture
Structured the application for intuitive navigation and usability.
User Flows
Mapped out scenarios ensuring a seamless user experience.
Sketches & Wireframes
Developed low-fidelity prototypes to visualize layout and functionality.
High-Fidelity Designs
Created detailed designs incorporating feedback and usability testing results.
Brifl infoarch
Brifl user flow
Brifl sketch
Brifl wireframe 1
Brifl hifi
Brifl builder Palette
Brifl builder Typography
Brifl view Palette
Brifl infoarch thumbnail
Brifl user flow thumbnail
Brifl sketch thumbnail
Brifl wireframe 1 thumbnail
Brifl hifi thumbnail
Brifl builder Palette thumbnail
Brifl builder Typography thumbnail
Brifl view Palette thumbnail

Outcome: What I have learned?

Although brifl was never launched — primarily due to the lack of a developer and my limited knowledge of JavaScript at the time — the project became one of the most formative experiences in my product design journey. What started as a side hustle grew into a meaningful learning process, and a clear step forward in my transition toward systems thinking and user-centered design.

🧭 Problem-first approach
brifl was born out of a recurring pain I noticed among creatives — the messy, inconsistent ways they communicate with clients. It taught me that even niche, everyday problems can become the foundation of impactful product ideas.
🤝 First touch with the open-source community
While I couldn't develop the product myself, my intention to make it open-source connected me with like-minded people from the open-source space. It planted a seed for future collaborative projects.
🧱 My first Design System
I designed a full-fledged atomic design system with foundations like typography, color, spacing, and grid — plus 30+ core components, each with necessary states and variants. This became my starting point for systems thinking in UI design.
🗣️ Real interviews with real creatives
I conducted short-form interviews with friends and colleagues across various creative disciplines. These conversations helped me form clear archetypes instead of personas and gave the product a sharper focus.
🖌️ Figma fluency
brifl was the first full product I designed entirely in Figma. I learned how to structure pages, components, and workflows professionally — a skill that became foundational in my later projects.
🧩 Understanding diverse user flows
Designing for designers, developers, writers, and photographers pushed me to think beyond a single use case. It helped me embrace complexity and learn how to distill it into intuitive flows.

This story ends here yet the journey continues...

🎉 Thanks for Reading!

Thanks for taking the time to explore this project. I hope you enjoyed the deep dive into the process, challenges, and learnings behind it.

🌍 Also Published On

Behance
Dribbble