brifl is an open-source, collabrative form building tool for creators across all disciplines such as designers, developers, illustrators, content writers, photographers, etc. Users can use brifl to create surveys, brief forms, quizzes, and polls for any audience, automatically analyze results, and access powerful analysis features via over 20 integrations with other tools.
brifl provides answers to creators' specific queries in addition to meeting the fundamental form requirements by offering more than 30 different block types and third-party connectors. brifl forms are created with unique links that allow both the sender and the responder to communicate with one another.
As a side hustle, I worked on brifl for the past year. I tried to follow every important step because brifl is also a product design exercise for me. Because a good product necessitates iterations, some of the steps are taken into account repeatedly. Unlike the typical product design process, I began working on the design system right away because I had already decided to use a large and powerful ui library to create a better workflow for both developers and designers.
The form tool industry is a highly competitive one, with dominant brands such as Typeform, Jotform, Google Forms, and SurveyMonkey providing various types of mechanics to users. There are also open-source alternatives such as Ohmyform, kinto, and form.io, each with a different level of functionality. Because I want to build an industry-level tool, I focused on three leading products: Typeform, Jotform, and SurveyMonkey.
When it comes to features, selected tools for benchmark analysis are very rich because they offer powerful ones such as legal sign, conditional logic, a large set of third-party integrations, widgets, and pre-made templates. Because brifl focuses on communication between both parties within a form tool, an advanced tool set would be excluded for at least MVP process. The following analysis summarizes potential future improvements for the brifl application.
brifl's primary target users are from the creative industries, where they can work freelance, project-based, or full-time. Because brifl aims to address various user needs from various disciplines, I used archetypes rather than personas and focused on four archetypes: designers, developers, content writers, and photographers. I reviewed comments where creators share their pain-points and conducted short interviews with my friends to ask what their needs were that could not be met by other form applications in order to understand where I should focus my efforts while designing brifl.
These archetypes' core needs are as follows:
Following an examination of the above needs, I have identified the following outcomes:
I began the user experience design process by combining and summarizing research data, followed by drafting information architecture and defining user journeys. I diverted the regular form build journey by adding recipients and comments features after experimenting with various approaches. The majority of forms are shared with public links, and respondents are anonymous. brifl enables users to create unique form links to share with specific recipients in order to maintain continuous communication.
We can use information architecture to demonstrate how a user would navigate through our application. The schemes below depict possible and main flows within the brifl interface. Furthermore, information architecture enables us to comprehend the density of various web elements such as tabs, modals, notifications, and actions.
To provide an effective service to its users, the brifl application has two major and three minor user flows. These include the following: creating forms and recipients, sharing forms, reviewing feedback, and communicating with form comments. Below two schemes shows two major user flows.
Sketching is essential before moving on to lo-fi design because it is where the majority of the discovery occurs. I test various layouts to find the most useful and promising user interface. Dashboard sketches do not take long for me because I did another sketch process for the design system.
I tried to keep a light style when designing hi-fi screens in order to relieve users and allow them to spend their time as efficiently as possible. Using a component-based design system allowed me to quickly complete the hi-fi screen. Working on components also makes revising components much easier. Another advantage of using components is that we can create a sustainable chain by incorporating Zeplin, Storybook, and VSCode.
Having a design system simplifies the development process by shortening the building infrastructure. Component based interface also decreases the front-end effort and gives chance to update interface when it is required. Aside from that, the design system enables a collaborative work environment with different time zones and the creation of a cohesive development cycle among developers and designers. As a result, I created the brifl design system to assist brifl crafters.
brifl is divided into three main sections: the User Dashboard, the Form Builder, and the Form Viewer, all of which use the same component library to create a consistent user interface. If I may summarize the use cases for these components, the user dashboard is the main screen from which the end user can create, share, and manage forms and recipients. Second, the form builder enables users to create and share forms, surveys, and polls with recipients. Finally, communication begins in the form viewer section. Both the sender and the responder can communicate and discuss the question blocks.
Would you like to see this project on
behance
