Content modeling: practice makes perfect

1. 1 Content modeling: practice makes perfect How Clover’s content infrastructure works for both editors and developer October 9, 2019 1
2. Housekeeping • This webinar is being recorded; we will share the recording and slide deck with all registrants shortly -- keep an eye on your inbox! • Please add your questions in the Q&A box, we will answer them after the presentation during the live Q&A session at the end • To get in touch, write to us at team@contentfulmail.com • Join the conversation on Twitter with #CTFwebinar Before we dive in...
3. Introductions 3 Rachel Church Sr Software Engineer Amelia Winger-Bearskin Developer Evangelist
4. 4 1. Content modeling - what are we talking about? 2. Three Projects: Public Site, Help Center, Marketing Site ▪ Business Drivers ▪ Process + Example ▪ Challenges 3. Key learnings Agenda 4
5. Digital teams (devs and editors) want to move fast Both with and without each other 5 Build & Deliver Features Create & Manage Content • Create landing pages • Localize a microsite • Launch a campaign • Run A/B tests • Update homepage promos • Tweak signup page copy • Launch a new app • Integrate with a DAM • Iterate a feature • Update a design system • Update a content model • Test/QA new features • Import legacy content • Ship bug fixes Developers Editors
6. Content platforms create agility at scale Reusable architecture & processes allow teams to move fast across an organization 6 Marketing website and mobile app Ecommerce website Operate & Scale Help center
7. Basic Contentful Architecture 7
8. 8 Reusable content means “structured” content Content Types
9. 9 Contentful Content Modeling Methodology Create a Pool of Sample Designs • Conduct an audit of existing content • Create prototypes of future content • Assemble screen shots into a slide deck Create a draft model based on visible fields • Create a list of visible fields from instances of each content type • Reconcile similar fields to create a master list • Group fields into content types of appropriate size & define relationships Revise model for functionality & best practices • Add invisible “meta” fields (for queries, workflow, webhooks, etc.) • Optimize for content creators • Optimize for developers • Implement naming conventions QA: Validate with actual content • Try to “break” the content model by using it to build diverse instances or real world content Test with Content Creators • Watch authors use the content model (usability test) • Create documentation, help and job aids Test with Developers • Have developers QA the model against front-end, migration scripts, etc. Test with Designers • Have designers test the content model by creating a variety of designs Assemble key stakeholders to define strategy • Clarify business objectives • Agree on required functionality • Make strategic content architecture decisions STEP 1 STEP 2 STEP 3 STEP 4 STEP 5 STEP 6 STEP 7 STEP 8 9
11. 11 www.eu.clover.com
12. 12 www.eu.clover.com
13. Technology stack 13
14. getPageForUrl(locale, url) { return this.getRouteForUrl(locale, url).then(route => { let pageId = route.pageReference.sys.id; return this.getClient().getEntries({ 'sys.id': pageId, include: route.contentDepth || this.DEFAULT_CONTENT_DEPTH, locale: this.formatContentfulLocale(locale) }).then(entry => ({ route, entry: entry.items[0] })); }); }, 14
15. 15 contentful.createClient https://contentful.github.io/contentful.js/contentful/7.10.0/contentful.html#.createClient getRouteForUrl(locale, url) { if (!this.cache.routes[url]) { this.cache.routes[url] = this.getClient().getEntries({ content_type: 'route', 'fields.routeUrl': url, locale: this.formatContentfulLocale(locale) }).then(routes => routes.items[0].fields); } return this.cache.routes[url]; },
16. 16 getPageForUrl(locale, url) { return this.getRouteForUrl(locale, url).then(route => { let pageId = route.pageReference.sys.id; return this.getClient().getEntries({ 'sys.id': pageId, include: route.contentDepth || this.DEFAULT_CONTENT_DEPTH, locale: this.formatContentfulLocale(locale) }).then(entry => ({ route, entry: entry.items[0] })); }); },
17. 17 That’s a long content model
18. 18 Avoid having new content models for variations of the same thing What is clear to the person setting up the content models may not be clear to everyone else What we learned 18
19. 19 www.clover.com/us/en/help
20. 20 www.clover.com/us/en/help
21. 21 www.clover.com/us/en/help
22. Technology stack 22
24. 24 Title Devices Intro Section Title TOC
27. 27 Content team NEEDS a quick and easy way to see their changes within the app’s layout The content model will most likely change What we learned 27
28. 28`
29. Technology stack 29
30. 30 Topics and Assemblies More information here
31. 31 Topics and Assemblies More information here Image Carousel
34. 34 Keep things as simple as possible Keep open lines of communication early and open What we learned 34
35. #1 Prioritize the needs of the primary user; the content creator. #2 Find the balance between reusable content types and overly specific content models. 35 35
36. Audience Q&A 36 Rachel Church Sr Software Engineer Amelia Collins Winger-Bearskin Developer Evangelist
37. Thank you! Keep an eye on your inbox for the slides and video