At The Plant we work closely with international brands to solve complex business problems with cutting edge technology.
A common challenge for big business is producing large volumes of content for product releases, campaigns, events, promotions and easily manage and publish this content in a consistent and timely manner to global markets with support for multiple languages.
The Plant has created an enterprise level solution that solves this problem.
Working closely with business partners, we have developed a content management system that combines modern programming techniques with design theory — to ensure you are able to produce the content you need as efficiently as possible.
This article is a look into the journey we had and how our CMS has become what it is today.
Atomic Design and the changes The Plant made
Atomic design is a component based design approach popularised by Brad Frost which allows for a methodological standardised approach to design. This methodology is a perfect fit for how we approached the scope and design of our sites. Taking a page out of General Electric’s Playbook, The Plant made modifications to the approach to better suit our needs.
Atoms and Molecules
Enterprise clients often have style/brand visual guidelines, which map wonderfully to the Atoms and Molecule structure. This provides a fast track for ensuring that the components we build fit into any other related systems, existing pages, other content driven by other platforms, social media campaigns, etc.
This process can also help ensure that new pages we design don’t adopt inconsistencies that occurred with older pages and other systems, which also gives the client the opportunity to review their pattern library.
The distinction between Atoms and Molecules can afford us the flexibility needed when communicating with the client about how to prioritise good UI and UX and best integrate their branding in a way that won’t hurt the overall experience. For example, often Atoms are difficult to negotiate — things like fonts and colours are very important to a large brand’s identity and can’t be changed. However when it comes to adjusting a molecule, like a button, there is always room to increase the padding or font size for better usability and accessibility.
Containers
With these components (our Atoms and Molecules) signed off on, the real work begins to use these to build Containers. A concept appropriated from the work done by iA for The Guardian, a Container is defined as:
A container is a full width horizontal element which contains a collection of content.
Containers are self sufficient (hence the name) and as a result can easily appear in multiple locations in a variety of combinations.
As the screen size gets smaller or larger, the content inside adjusts to the width of the screen.
Containers are used as the building blocks for the entire website. Within The Plant’s content management system, containers have two primary distinctions:
- Editable containers where the content is populated by the end-user and is available to anyone using a page builder and;
- Containers tied to business concepts (such products, blog posts, etc) where the content is generated by the system.
While this article will focus on user edited containers, all the benefits derived from creating a website using containers applies to both types.
Planning and building a website using re-usable containers provides a number of key benefits for the developer, designer and client alike, which include:
Optimisation affordances
A new container should only be designed when there is a distinct need or requirement that can’t be met — the fewer containers the better.
In our experience even the more complicated websites we build are comprised of up to 20 or so containers, each of which appears dozens of times across a site. This means that optimisations for better usability, new designs and features for each container are considerably more valuable, and as the containers are improved over time, so too does the entire website. This is an especially important benefit in the context of a recent push by major brands for the more sites to be composed of “Evergreen” content.
Mobile First
In Japan as with many markets, smartphone use is the dominant method consumers use to engage with websites — and as a result we take a mobile-first approach to everything. Containers work well in this context as they have built-in rules for how they work in a responsive environment. By reducing the scope of features into containers and communicating with clients about how these features work, it becomes a lot easier to design and scale for mobile.
Global Containers
The content of a container can optionally be globally accessible and controlled from a single source. So for cases where a container design is not just recycled but the content itself needs to appear the same across a site (For example, a contact form), our clients can configure it once then re-use it without any additional setup. Which also means when changes occur in the future, the container only needs to be updated in the admin once to be consistent and updated across the entire site. The most common use for this feature is site headers and footers.
Maintainable and Consistent
Often with enterprise level business, changes come often and swiftly — anything from rebranding, new company directions to new business initiatives can require some or all of the content to shift focus. By reducing the scope of such changes to a handful of containers, the site can be maintained and remain consistent in a far easier way than if each page in the site was individually created.
Smoother Third-Party Relationships
Another problem unique to larger brands is building technology that can smoothly leverage services from a number of third party companies. From design partners building new campaigns to third party ecommerce consultants and security firms, containers make it clear what features are possible and what flexibility and scope is available for partners to leverage. This reduces the overall cost and effort required to support external services.
Great Balance Between Customisation and Expert Advice
In previous iterations of our CMS, a greater level of customisation was offered for each element. Discovering the majority of website content creators are translators or administrative staff (not designers or developers) our latest approach moves most of the decisions about how something functions (responsive design, best practice usability, and the overall UX) into the hands of our product team, while streamlining content entry and providing broader customisation options to our clients (dark/light mode, left or right aligned, as well as many optional fields that when left untouched the design will automatically adapt).
The Plant also uses the same concepts during the design phase of a project. Our deliverables with clients will almost always be designs founded on containers, or full page designs that behind the scenes use containers for each vertical block.
This approach lets us provide special assets and requirements to third party design companies to assist with their designs. Doing so ensures easier development and provides a clear set of guidelines for the functionality of each container as well the upper and lower limits for how they might expect the content inside to behave (E.g. “This design needs to support anywhere from 0 to 4 buttons, how does that scale in your design?”)
EVERYTHING COMING TOGETHER WITH OUR PAGE BUILDER
The final piece of the puzzle is combining all of our meticulously designed and constructed containers into the hands of our clients (or our staff) to build important, functional, attractive content pages to communicate their hard work to millions of customers.
Building a page
There are a number of interesting challenges and a broad spectrum of users that build pages with our software and we have compiled several features across our suite to best suit these needs.
- Container Based Design — Every page is constructed of containers, which can be re-arranged, labelled, duplicated and removed. Each container has a set of options ready to go, most of them optional, so you can dramatically change how a site comes together with very little development. In the events where customisation is required, the feature becomes available to every other container and page to make the site more robust.
- Live Preview — We generate a real-world example of how the content looks in real-time, so that our users can get a proper understanding of what each option does before applying any changes. Clicking on the live preview also acts as a shortcut that will take the user directly do theappropriate container for editing, so it acts as an easy to understand navigation tool. We also have the 3 major viewports — mobile, tablet and desktop so you can see how your content scales right from the admin.
- Default Templates — Whenever The Plant sets up our CMS for a new client, we typically share some default templates that we have designed that mirror common design patterns seen around the web, to expedite the process of getting started and share all of our best practice designs and findings.
What our system means for our clients
Ultimately our clients want the best value — great results for reasonable investment and here at The Plant we want to make great products that make our clients happy. The net result of all of the above means that over the life of a project:
- We teach our clients how to be efficient with their requirements and effectively communicate technical concepts across many departments, disciplines and partners.
- We only need to get our engineers involved in projects where new functionality is absolutely necessary in the form of a new container or container improvement.
- This adds permanent value to the platform for future projects and can improve existing content on the site.
- Getting new content onto the site is quicker, cheaper and of a higher quality.