For DragNDrop, we partnered with Merixstudio to deliver a scalable solution using React and Python. Our services included UX/UI design, backend development, and API integration, resulting in a seamless drag-and-drop editor for creating custom marketing templates. AI-Powered design solution for ambitious brands to streamline marketing.
dragNdrop is a web application for small and medium businesses allowing them to use ready-made templates in an intuitive way to create branded marketing materials for social media. Its main goal is to help its target users create high-quality digital content for social platforms without being overwhelmed by a plethora of options.
The idea behind creating the app was to make it possible for small and medium businesses to easily create aesthetic branded content for social media without hiring a graphic designer. The client decided to collaborate with Merixstudio after following up on a referral from another party that had previously collaborated with us.
The scope of work executed by Merixstudio’s team included:
The dragNdrop solution heavily utilizes third-party integrations. We used the Stripe API to integrate payment options across the back-end and front-end. The Mailchimp Marketing API allowed us to synchronize the e-mail marketing activities with the database. We also integrated the Google Fonts Developer API and Google and Facebook for logging in. The Unsplash API’s photo engine allowed users to upload high-quality images for their designs.
The product also benefited from our DevOps engineers’ support. We set up an AWS Lambda function to relieve the EC2 instance (on which the app is built) from resources, thus allowing for a greater task volume and better execution velocity. This way, the serverless solution also contributed to optimizing the infrastructure costs. We also containerized the app using the AWS Elastic Container Service to address the need for independent, easily maintainable services. The Merixstudio team used CI/CD pipelines in GitLab and the Terraform-based Infrastructure as a Code to deploy new features fast and write the infrastructure code quickly.
As far as Quality Assurance goes, we used several test strategies. We relied on automated functional tests at the beginning of the project to ensure that the API works as intended. Then, our team tested the app manually to determine whether it acts in accordance with the pre-defined requirements. GUI testing, in turn, gave us the confidence that the interface functions well.
From the product design perspective, we put much thought into making this product different visually from the existing tools for creating designs and making it usable for the target audience. The client envisioned it with two types of users in mind: employees of small and medium businesses and graphic designers. The customer tool is specifically crafted to prevent users from misusing the templates.
On the other hand, the designer tool allows for creative freedom and provides extensive template creation possibilities. This way, the templates look professional and accentuate the user’s brand. Catering to user needs wouldn’t be possible without preliminary user tests that we conducted and a comprehensive UX analysis. We also developed a design system based on repeatable components thanks to which the product is cohesive, and the developers’ work is much easier.
“They’re very interested in pushing the project forward by bringing their knowledge to the table.”
After 13 months of rewarding work hand-in-hand with the client, we created a solution ready to compete in the market. The final product lives up to the promise of providing a low entry threshold for customers that seek to use highly aesthetic marketing designs but lack the designer’s skills. They can easily apply top design practices in their brand marketing materials thanks to dragNdrop designers’ creative output. The dragNdrop web app addresses the demand for accessible branded design that’s even more imminent now, with the increased popularity of social media.
The heart of the product is the template editor — a space where a dragNdrop designer prepares the beautiful templates that the end user will use.
Brand Toolkit is a space where the end-user uploads the most important materials about their brand (logotypes, font, and colours).
This feature holds the customized designs recently developed by the user and a library of previous projects.
It is a tool for editing the designs — in it, the users can change the photo, edit elements, insert their marketing slogan, save the designs, and post them on social media.
.svg)
