Tern Bicycles: Empowering business teams to control their technology with Drupal 9

[00:00:02] We're about at time, so I'll get started, because we have so much to cover. Welcome to our case study on Tern Bicycles. We're going to show you how Drupal 9 is enabling Tern's business teams, their global distributors, and everyone at the organization to update and manage over 45 multilingual websites without developers. My name is Michael Meyers, I'm the managing director at Tag1 Consulting. Before I joined Tag1 I was a client for many years. I started working in Drupal over seventeen years ago, when I started the first venture-backed Drupal-based startup, the first top-100 website running Drupal, and I spent five years at Acquia as VP of developer relations and marketing before joining Tag1.

[00:00:58] For those who aren't familiar with Tag1, we work with many technologies and are the number two all-time contributor to Drupal, with the largest concentration of core contributors at any organization. We're an enterprise supporting partner of the Drupal Association, and we donate a full-time senior resource to help run and manage drupal.org and the infrastructure and tooling that enable the community to build Drupal. If your company profits from Drupal, please support the project financially, fund the Drupal Association or a module maintainer. It's really important for Drupal to thrive.

[00:01:41] Terry Chen, the brand director at Tern, owned and led the migration project and helped put together this presentation. She joined Tern in 2011 and leads their marketing and creative teams. She led Tern's team in building the most successful virtual product launch in bike industry history, and before Tern she was product marketing manager for Ulead Systems. Here she is to say hello.

[00:02:23] Hi, my name is Terry Chen and I currently live in Taipei, Taiwan. By the time you watch this video it'll be about 3:30 in the morning for me, which is why I'm unable to attend DrupalCon live. I'm the brand director at Tern Bicycles, a brand that designs and manufactures electric and folding bikes for everyday use. People all over the world use our bikes to commute to work, go grocery shopping, and take their children to school. I personally take my son to soccer practice on our bikes every weekend. We pride ourselves in designing bikes and accessories that help people drive less and cycle more.

[00:03:15] I'm excited to have Michael share how Tag1 helped us keep and maintain a fully functional website on Drupal 6 for about ten years, and how, with their assistance, we were finally able to upgrade and migrate our site to Drupal 9. Thank you very much, and I'll turn the presentation over to Michael.

[00:03:42] We're going to cover a lot. We'll start with an intro to Tern, why they first adopted Drupal ten years ago, and how they navigated Drupal 6 going end of life, which a lot of Drupal 7 users are wrestling with right now. We'll go over the business goals for the project and why they decided to continue using Drupal and migrate to 9. We'll show off a bit of the site, and I urge you to check it out yourself, along with some of the technical solutions we built. We'll touch on our approach to migrations and how we managed working a world apart. Put your questions in the chat; we'll save time at the end, and if we run out of time I'll be at the Tag1 booth. Here's Terry to tell you more about Tern.

[00:04:36] As I mentioned, Tern is committed to building a more sustainable future by designing bicycles that change the way people move around cities and in their daily lives. We were founded in 2011 and are headquartered in Taipei, Taiwan, with branch offices in Finland, the US, the UK, and China, and about 78 team members worldwide. Our product portfolio includes cargo bikes, electric cargo bikes, folding bikes, electric folding bikes, and stylish street bikes. Our bikes are distributed in over 45 countries, and we work with over 35 distributors that represent these countries.

[00:05:24] Each distributor purchases a unique product portfolio, whether an accessory they want to sell in their country or a bike model with a certain color or spec configuration. We needed a website that let them showcase their individual product lineup, translate pages, and control and maintain their individual country website without interfering with another country's website.

[00:06:10] So let's talk about why Tern first chose Drupal ten years ago. Tern was founded in 2011 as a new brand and needed a site really fast. The team had used Drupal before and was confident it would meet both their immediate and long-term needs. While Drupal has a steeper initial learning curve, its capabilities were well worth the upfront investment. No platform could match Drupal's low-code site-building features: creating a bicycle content type and its fields, building a page listing bicycles, translating them, all by pointing and clicking, with no code, no dependencies, and no developers required.

[00:06:59] The hardest decision for Tern wasn't whether to use Drupal, but which version. Drupal 7 was scheduled to go live later in 2011, but some key modules wouldn't be ready for about another year, so Tern chose Drupal 6 to launch quickly on a stable platform with all the features they needed. They rarely needed developers to update or manage the site after launch. Drupal's site-building capabilities delivered, and their business and marketing teams were in complete control.

[00:07:43] About five years later, in 2016, Drupal 6 reached end of life, which is what Drupal 7 users are going through now: figuring out what to do after your platform is no longer supported by the community. Tern's Drupal 6 site was exceeding expectations, so from a business and functionality standpoint they didn't need or want to migrate. Migrations are time-consuming and expensive, and there were better places to invest that money to grow the business. Even if they'd wanted to migrate, the key modules weren't mature enough yet, so it would have been expensive compared to waiting.

[00:08:37] A big reason Tern adopted Drupal was freedom from being held hostage by technology, independence from reliance on developers, and business people being in control. They didn't want to be forced to upgrade, and with Drupal's extended support that's exactly what they achieved. Tag1's extended support enabled Tern to securely run and manage their Drupal 6 site for another five years after end of life, a ten-year return on investment. If you're running Drupal 7, know that you can extend and run it for at least another seven years using the Drupal 7 extended support program, and make a business decision to upgrade when you need to.

[00:09:28] Speaking of business decisions, let's talk about what Tern wanted from their new website. All their stats had been growing since inception, with noticeable jumps. In 2017 traffic increased around 30 percent when they launched their GSD electric cargo bike, which was hugely successful. With increased interest in cycling during the pandemic, monthly unique users went up 130 percent this time last year. Tern's traffic is highly global and distributed, and they're seeing explosive growth, over 240 percent, in many markets. They'd long wanted a major website revamp, and with less travel and events during the pandemic, they had the opportunity to focus marketing budget on their online presence.

[00:10:30] Some of the key reasons for upgrading: they wanted a faster site, more relevant information for users, and an easier experience for consumers and distributors. Distributors were a top priority, since that's how they get bikes out into the world, so they wanted to make translations and content management much easier for them. There were tons of feature requests, and site building had to be even easier for non-technical people. They wanted more control than before, and they didn't want developers needed for day-to-day management, only for enhancements and new functionality.

[00:11:29] A big part of this was limiting proprietary code. It was really important to Tern that we either use Drupal's built-in capabilities or enhance them, so they weren't saddled with a lot of proprietary code. And Tern didn't just lead this project, they were heavily engaged in it, because a big goal was for them to learn the technology and make sure they could own and control it independently.

[00:12:02] Tern considered all their options and chose to rebuild on Drupal. From a development standpoint, Drupal 9 is an entirely different platform than 6 and 7, so it behooves companies to do that in-depth analysis, but they chose Drupal for many of the reasons they originally did. All that no-code and low-code functionality had matured. New tools like Layout Builder give them and their distributors more control over the layout and content of pages. With over 45 international websites, there have been massive improvements in internationalization and translation workflows. And while the underlying technology was different, a lot of the terminology and concepts were the same, which made it easier for the people actually using the site to migrate.

[00:12:53] One exciting thing about Drupal 9 is the smooth upgrade path from 9 to 10 to 11, so Tern expects to get another decade out of Drupal with this investment, gaining more functionality over time. And I think this is really important for organizations: we'd worked together a long time, so Tern had confidence in a partner that could deliver. An upgrade is time-consuming and expensive, and it's important to know your technology partner will deliver.

[00:13:50] Let me give you a sneak peek of the new site; I really suggest you check it out. It's designed by Terry and it's beautiful, rich with imagery that puts the focus on the products, the culture of Tern, and the people who ride their bikes. When you hit the site, you're directed to your country in its default language. The site has six main sections. I'll touch on the bike section: it shows off all of Tern's platforms and the individual bike models, with a filter to find the bike that best matches your interest, a new comparison feature, and detailed pages where you can learn about a bike's accessories, technology, and reviews.

[00:15:01] Here's where it gets complicated: the 45-plus multilingual websites you're not necessarily seeing. As Terry mentioned, each distributor exclusively owns one or more country-specific sites, and it's up to them which bicycles and configurations they offer in a country. They can add pages, remove pages, and change layouts, and Tern controls what they can and can't do. Even a distributor with one country like Canada, with French and English, is juggling a lot of content. If you have multiple countries, or you're Tern managing all of these distributors, that's a lot to deal with, so we built some tools to manage it.

[00:16:06] Here are some solutions we built to meet Tern's goals, all of them open source, so you can benefit too. You're all familiar with Layout Builder, which gives you tremendous control over what's on the page. I'm logged in here, and I can edit the bike page just by clicking Layout. Say a new accessory launches and I want to feature it at the top of the page; I can add a new block, add photos or videos, and move or remove content easily. Again, no code, no deployments.

[00:16:50] But while Layout Builder is impressive, it offers little control over the theme or style, and Tern's site is beautiful, which matters a lot to them and to many organizations. There are ways around this, like embedding HTML and CSS directly into content, but that's a bad practice, hard-coding things all over. So on this project we extended Layout Builder's capabilities to address that gap. We added components to Drupal, a concept popular in other frameworks like Laravel. A component can be anything on a page. In this simple example, under the cargo basket, there's a simple component we call the tagline.

[00:17:59] Using our new system, you can control its CSS and styles through configuration. In this basic example you can change the classes for how the tagline looks on different devices. This will be open sourced in the near future so you can use it too. It gives you a lot of control over the look and feel, but it doesn't yet go that last bit to complete control; you can't edit the classes without editing code. I'll come back to that. First, remember that country selector in the top right corner? That's a component too, and the cool thing is components can have actions. This one has an on-click action that shows a dropdown of all the country and language options.

[00:18:32] For another client project we're working on now, we're extending this capability to give site builders complete control: the ability to add or edit styles, and create or modify actions, as configuration with no code. It's low-code and intuitive; you don't even need to know CSS to make simple changes. We also use the Alpine.js framework to make adding and editing actions simple, so you don't need to be a JavaScript developer. In this example I remove the word uppercase and change the text from gray to black, with a real-time preview so you see exactly what it'll look like. This will be open sourced in the near future, once we're further along on that other project.

[00:19:56] There's a great talk on components coming up Thursday with Peta and Fabian, so please check it out. You can also learn more about components in our Tag1 Team Talks podcast and vlog, where we cover things like adding real-time collaboration to Drupal and performance and scalability with our open source Goose load testing framework.

[00:20:06] I talked about managing translations across so many websites and how time-consuming that can be. We added the ability to granularly bulk-copy translations across websites. It's similar to Views bulk edit: you select the content and languages you want to update, hit synchronize, and sort and filter to get at just the content you want. You pick the language to copy from and choose the individual fields to sync, so you can take a Spanish translation you mastered, copy it across Uruguay and Paraguay, then update it for individual local changes. Again, minimizing proprietary code and improving Drupal as a platform, this is open source, so you can use it today.

[00:21:04] For the same reason we've been talking about, not wanting to be held hostage by technology, Tern wanted to minimize their technical debt as part of this project, so we managed that carefully. A small investment up front to make simple changes that made the site more Drupal 10 compatible will reduce their future effort. Drupal 10 is almost a year away, so their upgrade process will be really easy. We patched over 60 contributed modules to make them more Drupal 10 ready, which helps the whole community. There were only six issues we couldn't address because they couldn't yet be deprecated in Drupal 9, but we have a list and we're managing that technical debt.

[00:22:07] For example, core's jQuery cookie library is being removed in Drupal 10, so we switched that code to the core js-cookie library. Any modules using the jQuery cookie, we changed to js-cookie. Very simple. Let's talk about data migrations. Anyone who's done a large platform upgrade knows the data migration itself is one of the most time-consuming and challenging parts of a project, so I want to touch on some things we did in our approach.

[00:22:48] We always have migration resources working in parallel; they start early and need a clear sense of what has to get done. In this case, migration was led by a single developer working part-time, with others helping along the way. We split things up for granular control, so on a migration run you could include or exclude specific data sets and only process what you needed. The migration system could also support multiple sources. The main source was their existing Drupal 6 site, but we also enabled them to work in spreadsheets, which made handling their large amount of data much more efficient, and we set up a stable version of the development site so they could work manually in the new system, independent of the constant change in the background. The system could pull from any or all of these sources in a run, insert into any environment, and it also supported exception handling.

[00:24:04] Handling data migrations has a lot of challenges. The sheer amount of data, over half a million record sets built up over ten years, with formatting changes leading to a lot of variability. We needed to account for all the new functionality just in going from 6 to 9. While about 80 percent of the entities mapped one-to-one, the remainder needed considerable remapping. Permissions were critically important: when you introduce features like Groups that change access control, you need to be careful in conversion and testing so you don't give people access to things they shouldn't have.

[00:24:52] Multilingual changed a lot from 6 to 9. In 6, every node and every translated node had its own NID, but in 9 there's only one ID for all of a node's translations. With over 45 multilingual sites and multiple languages per country, that was a lot to pull together. Another big thing was data validation. We created migrate plugins to validate different things. For instance, we checked dealer addresses; every country has hundreds or thousands of dealers, and we wanted to make sure their state and country codes mapped perfectly to ISO standards. Any exceptions were exported via spreadsheet so Tern could manually review and fix them, then re-import just that data.

[00:25:47] Another challenge was that in the Drupal 6 site, a lot of data was in a single string. All the bike specifications, in some cases, were stored as one block of text, so the distance from the seat post to the handlebar was all in one field. We had to write a lot of regular expressions to split that info into individual values, so we could support things like enhanced search, metric conversions, and that bike filter we showed off.

[00:26:30] The last thing I want to touch on is working a world apart. There was a fifteen-hour spread between a lot of the resources, which limited our overlapping hours, so we relied heavily on collaboration tools and did as much as possible asynchronously, using recorded sprint demos and stand-ups in Slack. Planning was critical: we tried to identify time-consuming things in advance and start early so we didn't hit blockers or big schedule slips. But a big goal was to work together as one team so Tern could own the technology, so everyone went out of their way to accommodate each other, with a lot of 6 a.m. and 10 p.m. meetings on weekends for months.

[00:27:34] Ultimately this project wouldn't have been successful without the team's dedication. Terry is inspiring and insanely prolific; she and her team are amazing, and I want to thank them for the opportunity to work together. I also want to thank the Tag1 team for all their help. Thank you all for joining us. We should have a few minutes for Q&A, which we'll do via chat, and if we run out of time we can hop over to the Tag1 booth.

[00:28:36] (Question from the audience.) Any idea where we might see updates on these open source components? Yes, check our blog; we'll announce them there. Fabian will talk more about that in his presentation, and some of the work we're doing on that other client project is months away because it's a big project in its early phases, but some things are coming sooner rather than later.

[00:29:00] (Question from the audience.) You have 45-plus multilingual sites, using a setup something like the Domain module? In the past it used Domain Access on Drupal 6. The new site is handled via translation, so each individual country-language combination is a translation. Uruguay Spanish, or Canada English and Canada French, are separate translations, and each is considered a site.

[00:29:38] (Question from the audience.) Are components a custom type of entity? Aaron, I'll have to defer you to Fabian for that. I'd recommend checking out his talk or the info on our blog. I don't want to misspeak; it goes into a level of detail I'm not familiar with.

[00:30:11] We're about at time. I really appreciate you joining, and I loved the questions. I'm going to move over to the Tag1 booth and take the rest of your questions there.

[00:30:22] (Question from the audience.) You mentioned regex for migration; did you still find a lot of manual cleanup? Yes, we definitely had exception handling. Getting those regexes right is why we had that granular control, repeatedly processing information over and over. There was so much data that we couldn't do it manually, so we relied on a lot of automated systems, but as with that ISO example, it wasn't always practical or cost-effective to automate everything, so we segmented some out and did them manually. I'd say almost everything was automated, with some exceptions handled manually for practical reasons.

[00:31:15] We're over time, and I see more questions. Please join us at the Tag1 booth if you want to keep the conversation going. Thank you all for joining us. Please remember to support Drupal and Drupal developers, and enjoy the rest of your DrupalCon. Take care, everybody.