Coastal Digital Group
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.
Projects
WYSIWYG Advertisement Builder Platform
Coastal Digital Group approached DivNotes in the Winter of 2020 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
In order to engineer this Advertisement WYSIWYG Builder, DivNotes first had to determine the Product Development roadmap in order to establish an effective execution strategy.
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.
Stack Used
Amazon S3
Redux
ReactReact-moveableReact-dndAmazon S3ReactReact-moveableReact-dndReduxFrontend 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.
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!
DivNotes has successfully created a strong foundation for our proprietary technology, Neptune. It was important to us to have the right foundational pieces in place in order to build on them in the future. DivNotes handled our project like true professionals, making sure every detail was thoroughly covered. We were impressed with the experience, the great quality of work, and how easy it was to communicate and work with the DivNotes team. It was a pleasure to work with the DivNotes team on our project and we are looking forward to working on more features with them in the future.
