Coastal Digital Group
Neptune - WYSIWYG Advertisement Builder Platform
Premier Canadian advertising partner
About the App and the Company
Coastal Digital Group sets itself apart from other agencies by providing creative and strategic services. They make sure we put digital ideas at the forefront. They guide their clients through all phases, from strategy to creation to marketing.
Whether it’s advertising, design, web, or video they tackle it differently by expanding the boundaries of technology and creativity.
Client Testimonial
Thanks to DivNotes, our editor was completed and launched. Overall, the team managed the project effectively and responded promptly to our needs. They are incredibly knowledgeable and have skills across many disciples, languages, frameworks, etc.
They also built a solid foundation for future upgrades. We have a product that has been iterated on since then and still has the ability to add on. Overall we are very happy.
Aaron Merlino
CTO
The Ask
Coastal Digital Group approached DivNotes to build a new proprietary platform. This platform would be called “Neptune” and the purpose of this project is to enable Coastal Digital Group’s clients and internal staff to be able to build Campaign Advertisements using a custom-built What-You-See is What-You-Get (WYSIWYG) Advertisement Builder.
Product Development
For this particular build, the software application had to work with an existing backend solution. We adopted the backend code that was built by the Coastal Digital Group backend development team and worked closely with them during the Frontend Software Implementation process in order to provide direction on the required application programming interface (API) Calls for the Frontend Application.
Technical Feasibility Assessment
During this Product Development process, the technical team evaluated various available off-the-shelf software solutions that could be leveraged for this project based on the consideration for future project iterations and backlogged features in the pipeline. The technologies leveraged were then only determined feasible if time, and therefore development costs, could be saved from this project’s phase. From there, with the requirements and technical stack concluded, the Design Team contributed to the User Experience (UX) discussion alongside the Coastal Digital Group UX Designer to form the User Interface (UI) around the functionality.
Frontend Software Development
For this particular build, the software application had to work with an existing backend solution. We adopted the backend code that was built by the Coastal Digital Group backend development team and worked closely with them during the Frontend Software Implementation process in order to provide direction on the required application programming interface (API) Calls for the Frontend Application.
Authentication
The platform would also require an authentication system that would connect with the aforementioned API. In order to do this, we implemented a token-based authentication to retrieve and modify a User’s campaign that was established from the original website platform.
Drag and Drop Functionality
In order for the User’s to be able to perform certain actions, the
platform would need to possess Drag and Drop (React-dnd)
functionality, along with a Z-Indexing layering management system in
order to administer the layer placement and layer order of the
creative advertisement components that was being fabricated by the
User, not that much different than the familiar Adobe Photoshop
software.
The Z-Index is defined by the position of a layer within
a nested layers list. The layer list itself was also drag-and-droppable
in order to enable users to rearrange the layer’s placement. This feature’s
component happened to be quite difficult and initially posed as a potential
challenge for the team. However, with some resilience, the functionality
now performs as intended and users are able to drag layer elements onto
the canvas as well as reorder the Z-Index of these said layers in order
to arrange which layer appears “on top” or behind other layers.
Responsive React Frontend Elements
From the onset, it was pre-determined that the software application would be a desktop-friendly interface that would be responsive to various monitor sizes with scalable elements or components that exist within the canvas of the ad creation area. For example, for responsive ad types, the user’s creative area would require text scaling to present the advertisement in dynamic environments.
To add another level of complexity to be factored into this project, Users would also be given the ability to Customize their User Interface (UI). The users are able to define which creative panel tabs they would like to keep open and to which side of their campaign canvas they would like to assign their unique set of creative panel tabs. Of course, the user would be able to intuitively accomplish this by leveraging the Drag and Drop feature.
Overall, the web creation flow was modeled over a combination of Adobe suite tools to follow the best UX standards. It was necessary to port over familiar tools such as the layer masking feature and the ability to group related layers in order to provide a familiar User Interface experience that Coastal Digital Group’s users within the advertising industry would recognize.
Multiple Page Advertisement States
Another layer of sophistication with the project was that users would require the ability to manage multiple pages or advertisement sheets that would make presenting the various advertisement states depending on the end-user’s interaction with the campaign. Thus, we developed a custom page management tool to handle the various states that each advertisement possessed. For example, if an end-user interacted with the ad in a certain way, it would need to present the visual elements differently depending on the action and how it was triggered.
Asset Uploading & Management
No advertisement would be complete without interesting and engaging
visual assets. Advertisements could potentially consist of multiple
asset types, including embedded videos - both user- uploaded and
linked from YouTube or Vimeo, user-uploaded images, custom text-string
boxes, customizable buttons and much more.
In order to make that possible,
we first had to determine the best path forward for asset management - we
utilized external tools such as Amazon’s Simple Storage System, or S3 as
it’s called, for asset uploading. Subsequently, we closely collaborated
again with the Coastal Digital Group’s Backend Development team to be certain
we implemented the best long-term strategy solution.
Technology Stack
Actions & Automatically Triggered Events
In addition to the base UI functionality above, users would also require the ability to assign events that would be triggered by end-users that interact with the advertisement. For example, a Click/Tap would trigger the opening of a custom URL whenever an End-User clicks on a designated area or “hotspot” within the advertisement.
This would mean that the team would need to implement a custom event and action based function which was based over a state management system of elements, pages, and layers used to create the ad. Ultimately, the event and actions functionality had to be able to control the elements added on top of the ad, as well as having the ability to control them.
Conclusions & Next Steps
Once the aforementioned was established, the core of the Neptune Advertisement Builder was finalized and deployed iteratively to a secure staging environment whereas the DivNotes Inc. development team was able to perform Quality Assurance Testing and identify any remaining loose-ends or bugs that were eradicated before a final release of the build was pushed to production.
The DivNotes team will return to the Coastal Digital Group’s Neptune Advertisement Builder in the not-so-distant future to implement new features and functionality. Stay Tuned!
Looking for Reliable Software Solutions?
No matter your software development needs, we’ve got you covered. Whether you're building a new application, optimizing an existing system, or looking for expert guidance on your next big project, we’re here to help. Let’s start with a free discovery session. Tell us what you need, and we’ll explore the best possible solutions tailored for you. No commitments, just a friendly chat to help you understand what to do.
More Projects like this
Inspect-IQ - Asset Inspection Management Platform
