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 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.
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.
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:
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:
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.
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.
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.
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.
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.
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?”)
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.
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.
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: