Scaling Wagtail for 100 Million Girls

This video features Codie Roelf and Lisa Adams at Wagtail Space US 2018 in Philadelphia, Pennsylvania, USA.

Scaling Wagtail for 100 Million Girls
0:26:25
Published June 21, 2018
249 views

Summary

Girl Effect and Praekelt use Wagtail to run Springster, a network of mobile sites for girls in 67 countries and 16 languages, with 16 million users to date. The speakers explain how they reduced 67 separate applications to a smaller multi-site setup, built multilingual content, community features, surveys, moderation tools, and sharing workflows, and are moving toward a headless CMS. Their experience shows Wagtail’s flexibility and accessibility, but also the cost of excessive customization; they argue for contributing reusable features to Wagtail and designing around the real constraints of content partners and users.

Key takeaways

  • Springster uses Wagtail to serve 16 million users across 67 countries and 16 languages, including profiles, comments, stories, polls, and surveys.
  • The team consolidated 67 applications into 15 multi-site applications and built tools to copy content across country sites and manage local settings.
  • They are moving toward a headless CMS so multiple apps and front ends can consume content from one shared Wagtail structure.
  • Wagtail’s flexibility helped support low-end phones, multilingual content, accessibility, and varied user experiences, but extensive customization became difficult to maintain.
  • The speakers urge Wagtail contributors to consider the needs, devices, connectivity, and workflows of content partners and moderators, not only the codebase.
  • Their reusable Molo projects and features, including profiles and advanced surveys, are open source.

Summarised automatically from the transcript.

Transcript

4,048 words · auto-generated Show

Automatically transcribed, so expect mistakes in names and technical terms.

0:00

Speaker 1: So uh the talk we'll be doing today is reaching 100 million girls through Wagtail. Uh as I mentioned I'm Cody. I am a back-end developer at Precult. org I've been at Pre Cult for four years now, and I'm specifically working on the Springster project.

0:21

Speaker 2: Cool, um Lisa and um I've been at precult. org for three years now. Um I'm currently a project slash product manager on the Girliff portfolio and specifically on the Springster project. Boom So Girlife and Prekel. org have a partnership. Really a technical partner. Girliffect started in 2015 as part of Nike Foundation's social enterprise. They now moved on to being an independent organization funded by multiple other organizations. Together we are experts in media, mobile, brand, and international

1:06

Speaker 2: development. um working where girls are marginalized and vulnerable. We build youth brands and mobile platforms. um that millions of girls and boys uh interact with on a daily basis. So anything from apps that bold skills to TV dramas that explore vital issues, magazines written and distributed by girls. Um so our joint mission is putting mobile technology in uh goal 's hands And this way girls can now find find things out. They can talk to others and express themselves in ways that they never could before. Um and we started by understanding the girls' lives and the challenges that they face

1:55

Speaker 2: and then design the mobile platforms to help them overcome um those specific challenges so they can build the confidence to create positive change in their lives. In the research that we conducted, we found that two-thirds of the global population have mobile phones. We also found that 200 million fewer women than men have mobile phones, and that two-thirds of new mobile subscribers will be female over the next five years So um with all of that that D search um we kicked off with um with so that this is basically Gullyffect is a portfolio and the portfolio has multiple projects underneath them.

2:40

Speaker 2: And the first one that we kicked off with was MobiSites and it's currently the largest portion of the portfolio. So um these uh mobile sites are mainly hosted on uh Facebook's free basics platform But they also have standalone sites. And Cody will talk a bit more about the TIC stack for that. So our our Biggest countries at the moment are South Africa with 1. 9 million users, Nigeria, 1. 8 million users, Indonesia, 1. 6, and Philippines 1. 1 Collectively we are in 67 countries with then 16 languages. Like I mentioned, each country has a standalone site.

3:26

Speaker 2: Um in total to date we have 16 million users collectively with an average of about 1 million users a month.

3:34

Speaker 1: And that's just for Springstar within Girl effect.

3:36

Speaker 2: Yeah, so that's one portion of this portfolio and mission to uh reaching as many goals as we can. So with that said, Springster specifically, um which is the the project via the mobile sites, encourages users to register on the platform so they have profiles. And that enables them to comment on articles and submit their own stories and participate in surveys. We've also expanded our surveys to include kind of logic to them. so that we can select different kinds of users based on their gender, their age, and kind of where their activity is on the site. So Springster Girls benefit from reassurance and advice generated by

4:22

Speaker 2: shared stories and experiences from other girls like them. And so it's very community driven. So to date we have 71,000 registered users On this platform, uh 30,000 comments. Comments was something that we just launched um a couple of months ago, so that's fairly new, and six thousand users submitted their own stories. These community features are currently only open to our 4A market sites, so that's Indonesia, Philippines, South Africa. and Nigeria. Um so this is not available on the remainder of the 63 sites. Yeah Cool. And I'll hand over to Cody to talk a little bit about our

5:07

Speaker 2: technical journey with this platform.

5:10

Speaker 1: Cool. So before I give you an example of how that looks on the front end and how the admin for that looks, what we started off with was 67 applications and each application had a front end, it had a CMS, and within each CMS there was a site that pointed to a root page, which is the tree of content. And I can just show you how one of those looks on the front end. So this is a Springster site Um this is currently in uh Bahasa, so I don't really actually understand. Um But this is all the contents, these are polls that we do. Um yeah, this is how the site looks.

5:58

Speaker 1: And all of the content that's on this site is managed by Wagtail. So this is how our admin looks. This is the root page. We have we've built sort of index pages here and then we've gone into let's say sections And this is an article. Something that we've also done is like Lisa mentioned, we needed this in quite a lot of languages. So we've had to build our own implementation of internationalization. And how we did that was we display an article in it's um in the main language and any sub language will be displayed as a button.

6:44

Speaker 1: You can then click on that button and it will open up

6:49

Speaker 3: Unbelievable.

6:50

Speaker 1: It will open up a uh sort of boiler page for a translation. Um this is a live site. So I will not actually be doing anything. And there are so many things that we've added to just articles, more than subtitle images. We use stream fields for the body. We added commenting settings, social media uh tags, things like questions that are reaction questions. So you can add a question and they will populate it with emojis and they can react how they felt towards the article. recommended articles in related sections and promotion for how things get promoted on the homepage. some metadata and um schedule publishing which is

7:36

Speaker 1: standard um and then you know we've we've got we've using the um models we've created comments And so this is how our moderators can go through all the comments that were made on articles and can add replies to them. They can see whether, you know, um how many times something's been reported, which site it's come from. We can also view surveys. We can create surveys and view survey responses on the admin And we can even turn these responses into articles or download it as CSVs. And particularly something with the languages that we've done is we've made it, we've made languages the same thing as a site setting

8:23

Speaker 1: But because this is just a single instance, I will show you a little bit later on how that works with a multi-instance. So we've got Indonesian as the main language and English as a secondary language So as you can see, we've added a lot to our to our to our admin and all of that results in what this looks like here on the front end. I mean th even things like these banners, everything is is managed on our admin So we started off with 67 individual in 67 individual applications that each had its own CMS site and root page. But this was very difficult to maintain. And so what we did was we used the Wagtails

9:10

Speaker 1: implement implementation of a multi-site CMS. And we so I just need a sip of water. And we created um we went down from 67 to 15 um applications that had a front end and had multiple sites and each of these sites would point to its own root page. And that made things a little easier because we were able to copy between root pages So we could sort of upload once on one page on one tree and then just copy it over to um the rest of them.

9:46

Speaker 2: Yeah, and uh another reason that we did this was because the um so the way that those are grouped are into language um language groupings. So we have like an English cluster, a Spanish cluster, and the idea is that the content is kind of like generic um for for for the like in within those clusters and so it we needed to find a way to easily share content um between them as opposed to uploading something sixty seven times is what we were initially doing and that was just the English translation and then we'd need to do it another 67 times to put it in the translated version. So this reduced the the the time that it was taking for our front-end uploaders to actually get the content on the site.

10:25

Speaker 1: Yeah, and just to show you how that looks on our um admin side is this is our English cluster, which is our biggest cluster. It currently has 31 countries, which are each represented here by its own road page, and each of these 31 countries Essentially each of them have the same content. So something that we would did to sort of make things easier. Wagtail gives you a copy functionality. and we can copy whole sections or even um a whole a whole root page as you as you as you call it. But something that we added was a copy-to-all feature. So we could click copy to all and it will copy to all the countries

11:11

Speaker 1: under the same section with all the settings since all of the since all of the countries have the same content. And we we made use of the site settings feature quite nicely and we added a few of our own here. So for the languages one We could on the side click between countries. Obviously these all have English, but we could click between countries here and it will show us the different language for that country. We used uh site settings to put things like um Google Analytics codes and and content rotation times and social media um sharing buttons so that each country can still have its own its own links on that. Um and the the importance that the reason why each country ha needs its own link is because of free

11:59

Speaker 1: basics which is what we use to to get our sites out to the goals for free. And so FreeBasics requires that each site has its own URL, which causes a lot of complexity But yes, this is how this is one of our multi-site implementations and how that looks on a site level is we have all of these sites and they each point to its own root page Which was the next iteration, but this still meant that it's great that you can copy to all countries. Um but things like deleting from all countries, you know what what happens if you made a mistake and now you need to go and edit it and then redo it, you then need to go delete again and then copy again.

12:44

Speaker 1: Um And it it would just still was uh so much of a hassle. So something I did uh we actually got the opportunity to attend the previous Wagtail Sprint uh Wagtail space in Arnhem in the Netherlands and I got to work with one of the the members of the team and create uh make it possible so that we have multiple sites pointing to one root page. This this is this was previously possible with Wagtail , but it it there were some difficulties there with um what's what's the default site and and the correct settings and the correct site pulling through when you when you're selecting um a URL.

13:30

Speaker 1: So what we're busy what we're working on now is getting this uh This implemented where we have multiple sites pointing to one root page and then even though we'd still have 15 applications, we would no longer have 67 root pages And so we've we've really been on a journey with our infrastructure with Wagtail. We actually started out our journey with Django CMS. But we soon realized that in order to to effectively edit content on a on a on Django CMS, you'd you'd need to understand the the back end behind it and which made it very difficult for our content partners

14:10

Speaker 2: And um in combination with that we also had a mission and engaging with girls and allowing them to engage with each other and so we needed to look for something that was more flexible. As you can see on the left hand side, there were no profiles available. There were no community features like surveys and polls. And that's where our our journey with Wattel

14:34

Speaker 1: Began. Yeah, and as we've as as we've changed implementations of Wagtail or CMSs, our our front end has also changed quite a bit. And this is the current the one on the on the right, Springstays, how it currently looks. But Springsted is not the only project that we've used Wagtail on. Another one was minted to go. Yeah, so

14:59

Speaker 2: Mentor2Go falls under the Golif portfolio as well. Um Mentor2Go launched in January 2017 And this mobile mentorship Android app builds on the activities on existing local programs to reach goals between the ages of 15 and 18, particularly in rural and semi-urban areas in India. The program basically connects girls in in these rural areas to female mentors and it builds on an existing local in-person mentoring service. So we partnered with uh what's mentored to go to build out the application. So vulnerable girls basically enroll in the program and are expected to um at the end of it demonstrate and and increase

15:46

Speaker 2: self-confidence and yeah. So the Android app for the mentor connects them to the mentee via a free call and is supported by an open source uh back end. Uh Cody will tell us a little bit more about that. And the program offers a flexible schedule to accommodate um the mentors' responsibilities and professional obligations as well as the girls' uh school timings. And and part of this was having a curriculum that the the mentor could work from to help them guide the kind of content that they wanted to work through and and and kind of go through these activities and and basically also have a feedback loop to say how did it go and something that we could actually track um and engage with.

16:31

Speaker 1: Cool. And how the how that looked was we had an Android app that we pretty much had a CMS with uh one set of content and it just made API calls between the app and the CMS. And so in using Wagtail in these many different ways and having so many things that we've sort of built on top of it and customized, we've gotten to a point now where we're actually trying to use Wagtail in a new way. And that is using it as a headless CMS. So with all of these countries, with all of these all of these different projects Um

17:09

Speaker 2: and the content being our biggest asset.

17:12

Speaker 1: Yeah. Um having one CMS with one uh tree structure that holds all the content for all these different apps and then having these apps or front ends just feed from the CMS. Uh which you know would seem like why didn't we do this from the start? Um, you know, when we started with four countries going on to five, going on to six, then going on to sixty-seven, these things don't really seem obvious in the beginning. Um But one thing that we've d really tried to do as a company is not stay uh is to not stay loyal to all tech and and continuously try and change the approach that we are taking in order to bring the the best or most benefit to the girls. But on the on on the on the journey

17:58

Speaker 1: we've learned many lessons I think the biggest lesson that we've learned is that number one, Wattel is very customizable. But with that You know, with that said, we we we went and we we created all sorts of things and we customized and we created internationalization. We we did so much to the point where We've realized that it's becoming uh it's not manageable and it's not sustainable. And instead of taking Wagtail and customizing it so much, we've now gotten to the point where we actually as an organization want to um contribute more to Wagtail and use more of a vanilla version of Wagtail than than um than customize things on our own

18:44

Speaker 1: And so during this process, you know, we have asked ourselves why Wagtail? You know, why not uh a different one? And I think Wagtail speaks to our uh core values as a company. So these are our values as a company. And I've just put a a sentence down there around what Wagtail brings us, uh what Wagtail adds to those values. So Wagtail allows us to customize our users' experience uh our users have a lot of um there's a lot of challenges with that so our users uh access our sites from phones that um that don't uh that are not compatible with JavaScript. So we needed we needed a way we can create content and and um easily from an admins

19:31

Speaker 1: point of view but get it to a very simple format to the end user's point of view and make it personal. We needed a CMS that was scalable. We also needed a CMS that was co-designed and that took into account the the system users uh needs. And another big reason why we went with Wagtail is because it's accessible. And I think one thing that I definitely sh uh saw in the in the last Wagtail space was that Wagtail is accessible to many people with a with a range of disabilities, which makes it a lot easier to upload content.

20:10

Speaker 2: Cool. And so with that said, we believe that Weartil provides us with the technical flexibility which allows for diversity and directly safeguards our users' dignity because we are able to um give them the kind of experience that they need um and meet them where they at.

20:30

Speaker 1: But with great flexibility comes great responsibility, which is something which is our biggest takeaway from from our our journey with Wagtail And so Lisa is going to speak a little bit about some of the things that that we can do as members of the Wagtill team to make sure that we are taking the responsibility seriously.

20:52

Speaker 2: Yeah, so at the last um whack table space I spoke a little bit about the idea of personas um and in reaching uh under million girls we also rely on a team of content partners within those areas. Um and so we we really need to focus on the kind of access that they have as well. Um and so I came up with this is like really just a mock-up. Um and myself in the core team or meant to collaborate more on this. But the idea was just to show a little bit like um what who the user is um their role as maybe like a content chief editor, the languages that they speak, because that needs to be taken into account their location. And then just a little bit about it this individual's goal. So this one she's deter the fill with, sorry, she's determined to drive a content team

21:39

Speaker 2: to deliver tailored content for all the girls. And some of her challenges are things take a lot of time to get done. Our team struggles to sometimes understand the structures of the CMS And then I also thought it was important to have some kind of view on what her technological access looks like. So looking at both her mobile device and then also her computer Um and we've realized that those two things have become important for us on the project that we're working on in trying to safeguard our our users and we've tried to implement things like two-factor authentication And I had to come back and reiterate on that because we realized that there's they don't have the kind of cell phones that can support the application needed for for us to do that. Um and then it's also important to understand how long

22:26

Speaker 2: they are spending their time on CMS, the kind of activities that they use um their devices for. and then what their internet access looks like and where they act what they access in. So I kind of just did the the same thing for kind of like the moderator point of view, also unpacking um the similar kind of goals and challenges and tech um this specific uh uh system user Has um limited internet access, but she's a moderator, and sometimes things take long to load because there are so many comments on the site, and that's the kind of thing that we need to take into account when we are building for comments And then the same thing again from a content writer perspective.

23:15

Speaker 1: And so one one of the things that we are really uh trying to to get at is that um when you as a contributor to the to Wagtail when you contribute to Wagtail you not only contribute to the code base of a CMS but you contribute to the well-being of millions of girls. And that's something that we try to take into account whenever we we're building a feature or or trying to um trying to to get something out there is that it's not just code, it's not just the a CMS, it's actually it's actually a gateway to the well-being of a hundred million girls. Um thank you.

24:09

Speaker 2: Um are there any questions?

24:12

Speaker 4: Can you hear me? Can you hear me?

24:14

Speaker 2: Yes.

24:14

Speaker 4: Okay, I'm just saying that was amazing and I'm sorry the camera's facing the wrong way so you can't see the room full of people uh who are applauding you I'm afraid you cut out the three minutes, which was our fault, but uh the whole thing was was recorded, so uh we can watch those the missing three minutes later. Uh if anyone has questions I can pass them on

24:34

Speaker 1: Cool. Languages aren't

24:41

Speaker 4: a question about the amazing uh multilingual implementation and uh and how much of that is open source

24:48

Speaker 1: Um so all of all of our code is actually open source and Springster so uh as pre cult we developed something called Molo which allows uh which allows us to basically um Create these different projects that use Wagtail. So Springs is one of them. Tune me. There's a whole bunch, but we've got Molo, which is like this cookie cutter app that can create these projects for you, and all of that is available. Um via Molo. And there's there's things like Molo profiles and Molo surveys, advanced surveys, all of that is actually open source.

25:23

Speaker 4: Cody, maybe you could share the could you share the link to that on the Slack, the the US Vectors base Slack?

25:30

Speaker 1: Sure, I can. We are currently uh in the space of revamping all of that Um and doing it in much better ways than iterating over that, but I can definitely make what's there available.

25:49

Speaker 4: Can you say something about deployment with all the languages, with all the the main sites? How do you handle that?

25:55

Speaker 1: Yeah, so we uh we use Spinnaker to deploy to all of our sites. Um I'm not sure if there was a sp a specific question around there, but we pretty much just um We use one code base and we make those changes, which gives us a tag that we can then just deploy to all of these sites.

26:17

Speaker 4: Yes. That's it for now. Thank you very much. It was great. Thank you.

Questions this talk answers

How does Springster handle multilingual content in Wagtail?

The main-language article is shown with buttons for its alternate languages; selecting one opens a translation page. Languages are also managed as site settings so each country site can use its appropriate language.

Discussed at 5:58

How did Springster reduce the complexity of running 67 Wagtail sites?

They consolidated 67 separate applications into 15 applications containing multiple sites, then added tools to copy content between country trees. They were further working toward having multiple sites share one root page, eliminating the need for 67 separate root pages.

Discussed at 9:10

What did the Springster team learn from heavily customizing Wagtail?

Wagtail is highly customizable, but their extensive customizations eventually became difficult to manage and unsustainable. They now want to contribute more to Wagtail and rely more on its standard, or “vanilla,” functionality.

Discussed at 17:58

Why did Springster choose Wagtail?

Wagtail gave them a scalable, accessible and flexible CMS that content partners could use while producing simple, personalized experiences for girls on low-capability phones. It also supported their need to co-design tools around system users’ needs.

Discussed at 18:44

What open-source tools did the team build for Wagtail projects?

Their code is open source through Molo, a reusable application framework for creating projects built on Wagtail. It includes components such as profiles, surveys and advanced surveys, and is used by Springster and other projects.

Discussed at 24:48

How does the team deploy the same changes to all of its country sites?

They use Spinnaker and a single codebase: changes produce a tag that can then be deployed across all the sites.

Discussed at 25:55

Note: We understand that names change, people change, and bodies change. We respect each individual's journey and privacy. If you have any concerns about a video or need us to remove content, please don't hesitate to contact us. We will handle your request with care and promptly address any issues.

More videos from Wagtail Space US