Iris Ibekwe & Kevin Walsh
Component-driven Content Strategy�for doctorswithoutborders.org
A bit about MSF
“Our mission is to provide lifesaving medical care to those most in need.”
Business goals for www.doctorswithoutborders.org
Why component-driven?
Why component driven?
Agile
Development can happen one slice at a time.
Why component driven?
Lean, Flexible Code
Reduces complexity and encourage re-usability. Components can be plugged into different frontend frameworks which are typically modular by design.
Why component driven?
Consistent Branding
Works better with modern design systems to create cohesive, consistent experiences.
Why component driven?
Separation of concerns
Helps enforce a separation between the presentation layer and the content.
Why component driven?
Best Practices
Helps enforce code quality and site-wide best practices eg. optimizing for accessibility.
Why component driven?
Improve Velocity
The UX-design-developer cycle works hand-in-hand and encourages a shared vocabulary
A Lean, Mean Content Model
One of our main business goals was to empower content creators to unleash their story-telling powers
Agile content strategy
So where to start?
Agile content strategy
Lean, Mean Content Model
Agile content strategy
Small is beautiful.
Lean, Mean and Elegant.
Agile content strategy
Small along two axes
Agile content strategy
Don’t build this
Agile content strategy
DRY (Don’t repeat yourself)
If you see the same set of attributes in more than one place, it’s a good sign that that overlap can be considered its own “thing”. �Look for reusable chunks of content.
Smaller bundles
(Block types, paragraph types, etc)
Less bundles
using form and view modes
in Drupal to group attributes
Big, overlapping bundles
that are expensive to maintain
Higher level, “stand-alone” content - Node types, Vocabularies, Stand-alone Media
Lower level content entities
Node type 1
Node type 2
Node type N
Vocab 1
Vocab 2
Vocab N
Custom entity type 1
Custom entity type 2
Custom entity type N
Paragraph type 1
Paragraph type 2
Paragraph type N
Custom block type 1
Custom block type 2
Custom block type N
Agile content strategy
You’re going to get
the content model
wrong the first time.
Agile content strategy
Fail Fast...
Know that at some point you will refactor your content model. Make sure your design & development process can handle it, and surface those problems ASAP.
Agile content strategy
You want to learn from your CMS users. �Take a human-centered approach to designing an editorial experience, and build feedback loops to the content model.
Agile content strategy
For www.doctorswithoutborders.org, we defined an MVP hypothesis around a lean content model, to be tested after 3 sprints, around a component-driven content model and its associated authoring and editorial experience.
The Minimum Viable Content Model
The Minimum Viable Content Model
We used the 80%/20% rule by building out 80% of our content model quickly, in a way designed to get the maximum feedback.
Higher level, “stand-alone” content - Node types, Vocabularies, Stand-alone Media
Lower level content entities
Node type 1
Node type 2
Node type N
Vocab 1
Vocab 2
Vocab N
Custom entity type 1
Custom entity type 2
Custom entity type N
Paragraph type 1
Paragraph type 2
Paragraph type N
Custom block type 1
Custom block type 2
Custom block type N
| D7 | D8 |
Node types | 16 | 11 |
Taxonomy vocabularies | 15 | 0 |
Field Collections (d7) → Paragraphs & custom block types (d8) | 15 | 28 |
Fields | 187 | 100 |
Fields on nodes | 150 | 20 |
Fields on field collections/paragraphs | 20 | 43 |
Building with Components
The typical project is built to fit a rigid set of requirements, one feature at a time.
Source: Atomic Design by Brad Frost (http://atomicdesign.bradfrost.com/chapter-4/ )
Using components, we introduce flexibility and expand the scope of items that can be built from the same set of tools
Source: Atomic Design by Brad Frost (http://atomicdesign.bradfrost.com/chapter-4/ )
Structured Components
The Hero Components
Reusing one component with different variations.
The Address Component
Other components
Expanding possibilities
By creating flexible components we empowered Editors by giving them tools to create a rich story-telling experience.
The initial design for the FAQ page was supposed to restrict all FAQ’s to a couple of pages
Component-driven content strategy supports an agile development process
Iris Ibekwe
FrontEnd Practice Lead
Github: iris-i
Drupal.org: irisibk
Kevin Walsh
UX Lead & Drupal engineer
Github: kevwalsh�Twitter: @kev_walsh
Drupal.org: kevinwalsh
Thank you!
Join us for
contribution opportunities
Friday, April 12, 2019
9:00-18:00
Room: 602
Mentored
Contribution
First Time
Contributor Workshop
General
Contribution
#DrupalContributions
9:00-12:00
Room: 606
9:00-18:00
Room: 6A
What did you think?
Evaluations please!
https://events.drupal.org/seattle2019/sessions/component-driven-content-strategy-doctorswithoutbordersorg
Take the Survey!
https://www.surveymonkey.com/r/DrupalConSeattle
Our Component-driven approach: �1) content strategy �2) development