Page Builder

Off-the-shelf content management systems are great, but they aren’t right for every situation. We built a fully-fledged, custom CMS right alongside an existing enterprise application to deliver a calibrated feature set and a fluid admin experience.

The Challenge

Seamlessness is an important objective of any software design. By minimizing friction, we minimize cognitive overhead, thereby increasing the likelihood that a user will successfully complete a desired goal – this is true for external end-users and equally true for internal administrators.

This company had two distinct needs: a large enterprise application to support the core business function, and a website to market that service. The same team members would be managing content in both. In our opinion, asking those users to log into two separate systems to execute similar tasks would add seams in their experience. So, rather than standing up a separate off-the-shelf CMS to power the marketing site, we needed to build a custom content management system right inside the primary application.

System Design

Co-located content management

This bespoke content management system is co-located alongside the app’s other admin functionality and leverages that same core stack and decoupled architecture: a Laravel backend handles all of the core application logic, and a Vue frontend provides a beautiful interface for interacting with the data. It’s a beautiful, seamless experience – the internal team doesn’t have to worry about mastering multiple systems and can instead focus on crafting exceptional content for end-users.

System Feature

Version control

One of the most important (and overlooked) features of a CMS is version control. This was a fun little challenge to tackle in the context of our app: a page is made up of section blocks; when a user modifies or adds blocks, a new version should be created representing the exact state of the page but without recreating the unchanged blocks in the database. Additionally, you have to be able to revert to previous versions, return the page to a draft, restrict available actions based on user permissions, etc. In the end, it’s all wired up and working beautifully.

UI Elements

Building blocks designed for humans

Because the UI was 100% greenfield, we had a unique opportunity to consider the authoring experience top to bottom, and then structure the interface accordingly. We wanted to create something with minimal learning curves and maximum ease-of-use. To that end, some of the features we came up with include: a custom media picker, an intentionally-minimal WYSIWYG input, drag and drop support for easy re-ordering, collapsible panels to reduce clutter, and a visual block picker. Plus, everything matches their brand aesthetic perfectly.