How the Planet 4 Design System has come to life
Why and how we built the design system (and a snapshot of the improvements it will soon bring)
At the beginning of the project, the Planet 4 team mainly focused on implementing the platform across 45 Greenpeace National and Regional Offices (NROs) and setting up the crew and ship to build what Planet 4 aims to become, an engagement platform that empowers people to take action.
As Planet 4 evolved, we concentrated our efforts on improving our processes and workflows, — conducted user research and analysed data to better understand users’ needs, — built a community strategy and an architecture of participation to deepen engagement with our stakeholders, but a crucial piece of the puzzle was missing to complete the construction of the ship before setting sails: a design system that unites the product around a consistent visual language and user experience.
Since both the team and the community kept growing and changing frequently , the need for a design system became obvious, to improve not only the product design process, but also to provide a single source of truth to all collaborators.
And here we are, finally and officially launching the Planet 4 design system! 🎉
What is a design system?
“[…] a library of visual style, components, and other concerns documented and released by an individual, team or community as code and design tools so that adopting products can be more efficient and cohesive.” — Nathan Curtis — Founder of EightShapes.
A design system unites product teams around a common visual language. It reduces design debt, accelerates the design process, and helps prevent errors and inconsistencies across the product.
Simply put, a design system is a collection of reusable components for a product (or for an ecosystem of products), the single source of truth for product teams to keep designers, developers, and other collaborators aligned on a consistent user experience.
You may be thinking: “ great but isn’t that just a style guide?”
Nope. Because (quoting again Nathan Curtis): “A style guide is an artifact of the design process, whereas a design system is a living, funded product with a roadmap & backlog, serving an ecosystem.”
Why build a design system?
With no common design language to unite the product in a coherent way,both UX and workflow break down. The ones below are just some of the issues that pushed the team to create the design systems:
- The UX/UI design has slightly evolved on certain aspects since the product launch ( 2017) but has not been reviewed or improved overall.
- A lot of design inconsistencies were present across the product.
- There was no existing place to document how the components, blocks, and styles should look like and behave. Although we had the Planet 4 Style Guide, updating designs was not really handy and there were a lot of missing elements (components and blocks). We also have the Planet 4 Handbook, but its purpose is to document the use of the platform, gather ideas, and publish updates.
- Unclear on how a block or a component is supposed to look and react on multiple devices and screen sizes, or and why these choices were made over time.
- The initial design was created in Adobe Illustrator — a software not really appropriate to design web interfaces — which made it impossible to reuse the mockups with any other design tools.
Benefits
“The challenge we face today is that tools don’t communicate to each other very well, details fall through the cracks, there is a huge gap between design and engineering and we need to do a lot of manual work to make sure we are always on top of everything.” — UX Bootcamp
The advantages of the design systems span across multiple areas, from reduction of complexity to increase in effectiveness, alignment, and transparency:
- Reduced design debt — design inconsistencies are fixed and the user experience is improved and consistent.
- Reusable components — making Planet 4 Design scalable.
- Increased collaboration and alignment between the product team and the Planet 4 community.
- Improved design workflow — automate design tasks allowing us to have more time to focus on solving user problems.
- A shared single source of truth — one place to manage UI/UX components, coded elements, and detailed documentation so the product team & web admins/editors can stay in sync and have clear guidelines to follow.
- Publicly available — any stakeholder or collaborator can access, preview and use design and code.
How we built the Planet 4 design system
Selecting the right tool
The first thing the design team looked into, was to find a platform to host the design system and all its documentation.
After benchmarking and assessing several design system products, we decided to give a go with zeroheight, mainly because the free version includes most of the features we needed to start this piece of work: Sketch / Figma integration, unlimited style guides, inspect components, design tokens, to mention a few.
Once we determined that zeroheight was the right tool, we decided to adopt the Company plan to manage versioning and releases, get a custom domain, and allow collaborators to leave comments.
At this point, we were ready to start building the design system.
The foundations: Planet 4 design principles
First, in order for the whole product team to have clear directions when it comes to the decision-making process, we needed design principles to guide those decisions that should represent what we believe in and what we want to achieve with Planet 4.
- Empowering people
- Hopeful and bold
- Meaningful and easy to use
- Flexible
- Open & collaborative
- Accessible
- Design for all
- Global & local
- Trustworthy
The inventory of the existing design
After defining the design principles we started with a UI inventory of the styles, colors, components, and blocks used in Planet 4.
This resulted in spotting all the existing design inconsistencies across the product:
- We had a lot of unused colors in our code base.
- Some components didn’t have the same style depending on the block or the page they were displayed, such as the form elements and controls.
- Links and buttons had inconsistent behaviors and missing states (e.g: “focus” and “visited” states)
- The uppercase text was still present on certain components and pages although we decided to switch to the lowercase text, in line with our accessibility standards.
- Icons were different from one page to another.
- Some blocks still had inconsistent components, styles between each other, and their functionality and behaviors were unclear.
The challenge was then, to find a compromise between fixing current inconsistencies and improving the design of the current blocks that need to be reviewed as well.
We had to start small since we work in an agile workflow with an iterative process, so we decided to first fix design inconsistencies by redesigning some of these components and aligning the styles across the product, to plan a bigger UX review of the Planet 4 blocks later.
However, we needed to show the current blocks as they are so we had to re-create them in the design software we use, which took us a lot of time.
Coming soon — The first impacts of the design systems!
You’ll probably notice that some sections in the design system have a “coming soon” label such as the navigation bar, the footer, the cookies bar, the covers block, the take action box out block, etc.
That means that the design in these sections is ready to be implemented but is not live on the Planet 4 websites yet. So worth keeping an eye on, as they will soon be appearing!
Rather than the classic version numbering (V1.1 / V1.2, etc.), we decided to use these labels to facilitate consumption and avoid confusion for the official launch of the design system.
Next steps
Build as we go
A design system is a living document, so since the work is never done and constantly evolving, we’ve decided to start small and build as we go.
As we iteratively work on our projects, we will design with components in mind and will implement them in an iterative and agile way according to the product team’s priorities and objectives.
Design tokens
“[..] a way of storing design decisions (most commonly variables like colour, typography, spacing and effects, but also combinations of these to make up component styles), that can then be read by all platforms. In an ideal way, this would mean that tokens are synced across the code, the design tools, and the documentation.” Luke Murphy — zeroheight
Long story short, the design tokens will further reduce manual work and save the product team’s time when doing design iteration or building new components.
We are not there yet but we’re definitely heading towards it.
A two-way relationship with the Planet 4 Roadmap
Other key objectives of the Planet 4 Roadmap, such as redefining a new information architecture and navigation, reviewing all Planet 4 blocks and page templates, building new engagement features as well as implementing the new Greenpeace identity coming this year, will for sure impact the design system and its iterations.
The idea is that in the future the P4 design system should also benefit other products across the Greenpeace network, so we can totally say this post is just the beginning of the story!.
We hope that in the future this first design system will also benefit other products across the whole Greenpeace organization and that is just the beginning of the story.
So stay tuned for further updates 👂👀
A massive thank you to William Morris-Julien, Matthew Hinders-Anderson, and Houssam Saleh for their contribution to the design system as well as the rest of the Planet 4 team for their support.
