For business stakeholders
This read is interesting for you when you are a Platform Manager, Product Manager, Project Manager, Product Owner, Digital lead. Chameleon aims to help you create great and scalable experiences across many brands, efficiently.
What is a Design System
Most enterprises use a design system today: IBM, Atlassian, Github, Decathlon, Spotify. The list is endless...
Mediahuis has the extra complexity however, that its Design System needs to service multiple brands, just like many other media groups: Condé Nast, Schibsted, News UK, ...
But before diving in to the details, let's take a moment to define what the heck a design system is: A design system is a set of standardized components and guidelines that allow teams to build scalable, consistent interfaces, faster. Both in Figma, and in code. It is a living system that evolves and adapts alongside our product and business needs.
Why use Chameleon?
Like every mature Design System, Chameleon brings a number of benefits:
- Design and development work can be created and replicated quickly and at scale.
- It alleviates strain on resources to allow focus on larger, more complex problems.
- It creates a unified language within and between crossfunctional teams.
- It creates visual consistency across products, channels, and siloed departments.
- It can serve as an educational tool and reference for junior-level designers and content contributors.
- It embeds best practice UX designs, and accessibility standards.
Source:
Nielsen Norman Group
Chameleon's Anatomy
- Foundations apply your brand's specific styles like fonts, colors, shades, border-styles, illustrations, icons ... using tokens, and assets served from our CDN.
- Components are the reusable building blocks of our design system. Each component meets a specific interaction or UI need, and has been specifically created to work together. (e.g. Branded Heading). Using our components, you can virtually build everything.
- Patterns are a combination of components, that solve common user problems. These best practice solutions enhance the user experience by ensuring consistency. (e.g. article teaser)
Each layer builds on top of the previous one. So Components are built using the tokens and assets from the Foundations layer, and the Patterns layer is built using elements from the Components layer.
On top of the foundations, components and patterns offered by Chameleon, you can create specific patterns & components which serve only your platform. This allows you to:
- create your own consistency layer for recurring patterns within your platform because for example a specific technoligcal constraint (e.g. podcast teasers)
- be free. Chameleon aims to provide scalable components & patterns which can be applied across the entire Mediahuis Group, and which should be sufficient to create a top notch news experience. But in some cases there might be well founded reasons to deviate. This layer, which is under your control allows that.
When to use Chameleon?
The short aswer is: For every public app & website 😉 ...
The long answer depends on the case:
- Long living structural products like news apps & websites: You should be using the design system.
Shaping product iterations cost time. While doing so you can figure out how to construct your design and which components/tokens/... to use. And whether a Chameleon component might need an adjustment. - Short living things like a campaign page: Things usually need to move very fast, so you might not have the time to properly think over your design architecture, thus forcing you to go 'rogue' or maybe there's a technical limitation because of which you cannot use ChameleonLegacy.
Either way, because of the perishable nature of these things, it is perfectly fine to not use Chameleon in these cases.
While the focus for Chameleon is customer facing apps and websites, nobody will stop you from using Chameleon for internal applications.
Which stacks are supported?
Chameleon makes life easier for both designers & developers:
- Figma: There are libraries available for web, iOS & Android design (Reach out for access)
- React: Both tokens & components can be used.
- Swift (iOS): Currently only tokens are available.
- Kotlin (Android): Currently only tokens are available.
When browsing trough our components you’ll see usage guidelines, customisation attributes and code snippets for each one of them, for all supported platforms.
Overall, the current state for support looks like this:
| Figma | React | iOS | Android | |
|---|---|---|---|---|
| Foundations | ✓ | ✓ | ✓ | ✓ |
| Components | ✓ | ✓ | Planned for 2024 | Planned for 2024 |
| Patterns | ✓ | ✓ | Not planned yet | Not planned yet |
Maintained by a dedicated team
A design system is only as effective as the team that manages it. Chameleon requires continuous maintenance and oversight to ensure it doesn't become outdated, obsolete, or overcrowded with redundant entries or submissions.
FAQ
Can I contribute a change or a new component/pattern to the design system?
Familiarize yourself with the existing components, patterns, and guidelines. This understanding is crucial for ensuring that your contribution aligns well with our system’s philosophy and structure. Once you have an idea, prepare a detailed proposal. Your proposal should include the rationale behind your suggested change or new component/pattern, its potential benefits, and any other relevant details. Be as clear and concise as possible to convey your concept effectively. You can submit your proposal to us either via or through our dedicated Slack channel. After submission, our team will review your proposal. We thoroughly evaluate each submission for its feasibility, alignment with our design principles, and potential impact on the system.
How long does it take for a requested change to be implemented?
The timeline for implementing changes in our design system varies depending on the complexity and scope of the request. We categorise requests into three main types, each with its own estimated timeframe. Small features or minor tweaks to existing components or functions. Examples include color changes, font adjustments, or minor layout modifications. We aim to implement these changes fairly quickly. Introducing new components or design patterns is a bit more complex. This process involves design, development, testing, and integration with the existing system. For substantial changes, such as introducing completely new features or overhauling significant parts of the design system, the timeline is more extended. These changes are typically planned and implemented on a quarterly basis.
Does using a system mean all our brands become rigidly uniform?
Chameleon is designed to maintain both consistency and flexibility. While it ensures consistent behavior across components for a seamless user experience, it also employs design tokens. These tokens allow for stylistic customisation, enabling brands to retain their unique identity within a cohesive framework. This approach strikes a balance between uniform functionality and individual brand expression.