What is “Upload Fields Plugin “For WPForms?
Upload Fields for WPForms is a WordPress plugin designed to enhance the file upload feature of WPForms, a popular plugin for creating online forms. With Upload Fields for WPForms, users can easily upload and manage files through their forms with drag-and-drop functionality, progress bars, and the ability to attach multiple files to a single form submission. This plugin was developed to address the frustration expressed by WPForms users regarding the limited options for file uploads and to improve the overall user experience of the WPForms plugin.
Our Goal
Our goal was to design new upload field features that would make it easier for users to upload files through WPForms.
My Role
As the product design lead for the Upload Fields for the WPForms plugin, my role was to design a coherent file upload experience that was consistent with the existing WPForms design.
I was responsible for designing the upload fields, including drag-and-drop functionality, progress bars, and the ability to attach multiple files to a single form submission.
As a Designer, I worked closely with the development team to understand technical requirements and ensure that the new feature integrated logically with the current design.
Finding User Pain point
To design an effective upload fields feature, I have first conducted extensive research to understand the market, and user needs. I was trying to find out from existing WPForm Plugin reviews. Because Designers can analyze reviews of their products to solve problems or research competitors’ products to identify opportunities.
Target audience
I design Upload Fields plugin for WPForms specifically to provide user-friendly file uploader features for WPForms users. WPForms users can use the upload field to integrate their google drive storage for collecting data using the upload field features in this plugin.
So, new & existing 5+ million users are the target audience for this upload files plugin who like to use Upload Fields features with WPForms Plugin.
Start with Sketch & Wireframe
Starting with a rough sketch has become an integral part of my design process. I am always trying to go with a rough sketch before the final UI. Because It allows me to experiment with different layout styles and element implementations, and to quickly iterate and make changes to the design as needed. By taking the time to sketch out my ideas before moving on to the final UI, I am able to create interfaces that are both visually appealing and user-friendly for end users.
Based on the user’s pain point I found user want:
- Add multiple file formats in one upload field
Then I propose this solution by rough sketch & wireframe
Again, I found user wants:
- Connect their Google Drive to attach multiple files.
- Use Separate fields in one uploader.
Then I propose this solution by rough sketch & wireframe
I propose this solution only for images uploader
After completing the sketch & wireframes, I was going to design the user interface.
I created high-fidelity wireframes and UI then, I discussed them with the development team. However, I ultimately decided not to use them, as they did not align with the current design styles of WPForms. Because the style of the plugin can be taken from your website theme or existing design.
The plugin has limitations in terms of customization options, which prevent wordpress.org contributors Form implementing the original UI that I designed using Figma. Specifically, the existing plugin is already approved by other contributor profiles.
So, We build the upload field plugin based on WPForm plugin current design.
Aha, let’s see the Result
Throughout the design process, I focused heavily on creating an intuitive and user-friendly interface that would be easy for even non-technical users to understand and use. I conducted 3 rounds of user testing with the development team to ensure that the plugin met the needs and expectations of our target audience.
The goal is always to get as many users as possible. However, it’s important to keep in mind that growth doesn’t always happen overnight. In fact, it’s much more common for products to experience a slow and steady increase in downloads and users over time.
Conclusion
In conclusion, as a product designer, I had the opportunity to work on a project that involved developing a custom upload field plugin for the popular WordPress form plugin, WPForms. I enjoy lots of things with the development team.
We will continue to listen to users, private or public feedback and iterate on the plugin to ensure that it remains a value for our target audience.
Meet Our Talented Team.
As a product designer, I had the pleasure of working alongside a talented team of marketing & developers on this project. Each member brought unique skills and perspectives to the table, contributing to the success of the project as well.
Israil Ahmed Prince ( Sr. Software Engineer )
Akash Ahmed ( Frontend Developer )
Ashikur Rahman ( Product Design lead )
Naziur Rahaman ( Digital Marketing Executive )
Upload Fields for WPForms — Click to check live
