 We're really excited to be talking about a partnership that we have between Teach for America and Blue State Digital and we are going to be talking about personalizing the Teach for America applicant journey and My name is Sim, and I'm a product manager a non-technical product manager at Teach for America I've been there for about eight years Right before I started that I was down the road in Seattle at an agency called Blink Interactive And I'm Andrea Powell. I'm a UX designer at a digital agency called Blue State Digital We're based in New York although we have offices around the country, and we focus on fundraising engagement and Website and platform builds for organizations that are mission-driven So thank you all for being here during this sleepy lunch Day, we really appreciate it Okay, so I think the most appropriate way to start out the story is with the mission of Teach for America so TFA Seeks to end educational inequity by recruiting recent college grads and professionals to become teachers for two years in low-income communities and many of those teachers stay on in the classroom after their two years are up and Many pursue other careers that are in adjacent sectors that still have Impacts in the community tackling the same problem of inequity So whether you're a doctor whether you're a lawyer whether you go into tech leadership You will have that experience in the classroom as kind of the baseline for everything that you do in your career in the future And that is how Teach for America Describes submission and how we operate And just to give you a sense of scale The program is very competitive. So this year we had 56,000 Applicants and from that we expect about 3,500 teachers all across the US this year So as you can probably guess we have a pretty complex application for somebody joining the core It's both complex in terms of mindset. So what we're asking people to do is pretty hard It is also a complicated application in terms of the number of steps and the platform Setup is complicated as well. So I'm going to be talking about each of those difficult challenges so first of all in terms of mindset so Without being offensive to anyone who has an e-commerce site out there What we're asking people to do our is Reorient their life to a life of impact and that is our sales funnel And so the things that come with that are pretty challenging So first of all, we're asking people to potentially move into move to a new place We're asking them to do a big long Application and send us a lot of their personal info so we can do background checks And so ultimately they can interview in a school district and in school and get placed in that school so our performance indicators on our website are the number of people who register on the site and the number of people who submit applications the people who show up at first day of school and then ultimately the people who have Long-lasting impact beyond their two years in the classroom. So those are kind of our key performance indicators So getting a little bit into more detail about the platform setup so this is the old state we were on Drupal 7 now we're on Drupal 8 and the Participant would sign up for an account on Drupal and Through a bit of a service that information that they sign up with get sent over to the Teach for America application which is a separate application built in Java and Then the participant would do things that you would normally expect in an application like uploading transcripts filling out short answer questions doing some essays and if they are to be Move forward to the next steps. They do an in-person interview ultimately if they are accepted they'll be hired by a school district and Eventually attend day one in school. So it's a pretty long funnel lots of area for friction Lots of places where people could potentially drop out of the funnel so we had quite a challenge and What part of this challenge is that because the application was a Java app and Because we were on Drupal 7 they were sort of separate systems that weren't talking to each other So that was like a challenge when someone was visiting the public site. It didn't have a Personalized experience that was reflecting what we already knew about them because they already filled out their application And they already gave us some of their information and we know Where where they're progressing through the application, but the public site had no notion of that So that's one of the things we were hoping to fix second thing is we wanted to really provide a better sense of progress so if you can see here the UI element at the top was a progress bar that wasn't doing It justice quite quite as we wanted it to and as I was saying before Even if you are logged in on in the old experience There wasn't sort of a reflection that we knew who you were that TFA like already has your information and We know something about what you're experiencing inside of the application So that was something we were also hoping to fix in addition TFA operates in 51 different regions and As you can imagine teaching in an inner city school district in New York For example is much different than teaching on a reservation in New Mexico So we wanted a space where these 51 independent regions could tell the story about their impact in ways that were meaningful to that region But also were sort of connected in a sense to the larger brand story of teacher America By giving it like a common thread and This this would only serve to help those people who are applying to teach for America So at this point that's sort of the problem space that we were operating in and at this Moment in time we kind of kicked it over to blue state digital and said here are our goals Good luck with that and we partnered with them throughout the process to Build the new experience which Andrea is going to be talking about a little bit So one of the challenges that we were dealing with in addition to the digital spaces that you just saw Was the timeline so we started this project in this redesign in the spring of last year So a little bit over a year ago And it had to be up and running and ready to go by the time the next application cycle started in the fall So it was a pretty ambitious ask. So one of the first things we had to do was to really strictly prioritize what are most important Experience things that we need to fix in order to in order to update this System of platforms in a way that would help those applicants have a more seamless and more useful experience So we kind of brought it down to about three main goals The first was you know, just stating the obvious We wanted to make it feel like all of these different Websites and platforms felt like that they were part of the same entity or that at the very least that they were representing the same organization so Fleshing out the visual system Updating it and making sure that it was being applied consistently across all these different sites Another bit of feedback that the Teach for America team had been gathering for some time Was that the idea that a lot of people who come in to join the core are not always completely aware of all of the nuances and challenges of going through the application and training process Just because there's so much detail about what they're going to have to do We wanted to take the information that was already being provided Fill in any gaps and just make it as clear as possible What they were going to need to be doing at each stage of the user journey and then finally we really narrowed our focus again As we've been saying to applicants as our primary audience group because they are The ones that are going to be joining the core This is the the best way to Improve the experience for all core members is to start with their first interactions with Teach for America and also this is where the Digital platforms are going to have the most impact on that experience versus once I get into the classroom Where it's really about the in-person interactions So I'm going to talk about the design Stream and then kick it back over to sim to talk about the technical solutions that we are technical approach that we took so as I mentioned earlier the first thing was to update the visual system to take TFA's branding Make it feel a little bit more more modern and make sure that it was Expandable enough to be able to grow with Teach for America over time since they are Attempting to tackle the very large problem of educational inequity around the country Their their work is always growing so we wanted to make sure this this visual system could grow with them and We wanted to see if there are opportunities to simplify the actual number of steps that users have to go through in the Application before we started trying to you to go to design solutions We were able to do that a little bit, but I'm not going to talk about that very much because it was very much Very much limited by the types of educational requirements that are existent across the 50 states So there's only so much we could do with the actual steps of the application Next we wanted to find more ways to provide Personalized targeted action prompts that reflected what we knew about that user and where they were in the application process And then also just to again kind of reinforce the information about what the process was going to be like by providing a more nuanced set of Reminders of where they were in the process what was still coming up and to help help them get ready Earlier on as they started their application So here's the grand reveal. These are the two Two primary parts of the experience the main public site and the application Center So as you'll see We so in updating the visual system We were able to kind of give a lot of cues across these two different platforms that you were again In a space represented by the same organization We were able to make the navigation consistent so that it was more seamless as you were going from one Site to the next and it felt more like you're part of the same experience Clearly our typographic system and our color system is consistent across both But one thing that we came to as we were starting to work on all these platforms Was that we still wanted the logged in Space the application Center in this instance to feel like something special So we did look to find ways to build out clear Visual differences between the two again without without breaking that idea of of the connection in the same entity so the public site was really focused on Photography on a bold typographic statements Whereas the application Center It was supposed to feel like more of a detailed kind of private space where you're working You're getting your work done and you are progressing through a more detailed set of pages. So it's more focused on Graphic elements and typography and not really bringing in much photography Also, we came to the realization through working on these 51 regional Micro sites that it actually from kind of a higher level architectural standpoint would make more sense if they were Rather than separate individual micro sites if they felt more like Detail pages and sections within the main site itself So this would allow us to again ensure consistency across all of them You'll see they have the same navigation as the rest of the site It may look a little bit different because this is the scroll down state But they all have the same navigation and matches the rest of the site They're located in a section of the main public site rather than scattered on their own micro sites And we were able to systematize the content and the subsections a little bit more So you see the same for subsections under each state and each region name and this way We were making sure that each of the regions were providing similar you know Comparing similar types of information across all these different sections So then we ended up needing to rely a lot more on the photography on on these landing pages to really do that work of Demonstrating kind of the individual character Of each of the different regions where teacher America works So we really leaned into that beautiful Photography to do that work for us on these on these new sections So just a moment on the navigation one thing I wanted to pull out in more detail was that we also Were doing a lot of the work of kind of organizing the information that we were providing on the public site Using the two different levels that you see here in the navigation So in the main line on the bottom close to close to the logo We trimmed down the main sections of the site to just the three main stages of the teach for America core experience Which is how to join that's the application life in the core Those that's the training that goes into your first year teaching and then your two years in the classroom And then life as an alum. What does it like to be part of this community of educators? For everything else so we had some other secondary audiences outside of applicants We had people who might choose to be a local partner in one of these regions where teach for America works You have people who want to Find ways to get involved And also just members of the general public who want to understand what the mission is So we kept this information still in the navigation still easy to find but we really wanted to make sure that it wasn't distracting from the information that an applicant would need and We really wanted to give them space in the navigation to be able to find the information that was relevant to them And we were okay with having everyone else have to dig a little bit more because because it was most important to get applicants their information and speaking of personalization as Sim was mentioning earlier. We also really leaned into this idea of a CTA button that would change Its language depending on where you were in the process. So if you are just a new visitor It's trying to encourage you to apply to join to the core If you're in the middle of the application it could shift to reflect some of the key deadlines that are coming up and It would stay ever present Even as you're scrolling down the page and the navigation gets a little bit a little bit smaller as you can see up at the top So this is what the full home page looks like as you can see from top to bottom. Again, we're really leaning into the storytelling aspect of positioning what problems teach for America is attempting to solve and How they go about their work? We tried to pull in other personalization Moments and calls to action in the denser parts of the text So let's say we have a detail page on, you know, who is eligible to teach and how do you know if you are going to be eligible and should apply? We also had these contextual modules with the text reflecting, you know, what is the most what is the most? Pending application deadline and it could be personalized if you are logged in and are already on your way to applying to join the core So so yeah, we have those kind of bold personalized Components like the the CTA button and then also ones that are deep into the text Over on the application center, this is just a zoom in on the dashboard what we are calling the the applicant center dashboard So the idea with this is to make sure that we are able to kind of draw their eye and Point them to what stage of the application process they're in there for main stages And then within that you can see all the different steps So we expanded that really great timeline that was in the original version and just really leaned into it So that you're rather than just showing the top level Let's say six most important moments of the application process. We said let's just show them everything We're still going to provide those high-level Buckets, but we're going to show you and give you a chance to just know what to what to expect and also if you can see in the Small iconography next to it We have pie charts and check marks for you to be able to see what what you've completed Or what you still need to complete before you can submit that section of the application Similar to the main part of the site We also just made sure to have these indicators on the detail pages themselves as well in the form in this case of Subnavigation and sidebar navigation Again to show you okay within again within your bucket of Steps what do you still have left to complete so we're trying to make sure that the kind of the landing pages and the Navigation and the detail pages are all working concurrently To provide you up-to-date information about where you are in the application process okay, so I'm going to talk a little bit about the technical approach here and So first of all I would just say that in terms of the button states that Andrea was talking about That was a very simple API call from Drupal to the applicant center getting Sort of where the user is in the application and presenting that back to Drupal so we can customize the button for the particular state that the user is in in terms of technical or in terms of a mindset that just required really course close collaboration between the developers working on the public website and the developers working on the application obviously So that's not so much a technical approach as more of a mindset As part of this project, we also went from hosting the site internally at TFA and we moved over to Pantheon We also in the process shifted from D7 to D8 So there was quite a bit of learning that happened from a developer perspective And actually one of our developers is in the audience so she can probably speak to that We also developed a shared Atomic design vocabulary So that we could approach this in a way that the design worked both for the application and for D8 and so I'll talk about that approach that we used and We use pattern lab to do that specifically and and twig so a little bit of why we shifted from D7 to D8 and As we learned from keynote this morning We still have more than two years of support left on D7, but as a little bit of future-proofing We thought it was a good time. There's a lot more available Out of the box with D8 as well We have a definite focus on accessibility and that is front and center in D8 with quite a few aria attributes for adaptive devices and Just a lot more available in core So if you are not familiar with atomic design, the principle is really simple It's basically just building up to really complex things from really simple things. So you start with Things that are atoms you build up to molecules. You then go into organisms and templates and Roughly speaking a little bit of hand-waving here But if you're thinking about this in the Drupal way Templates are sort of like page templates organisms are like your paragraph components and multiple molecules Make up organisms and multiple atoms make up molecules. So to get a little bit less abstract there We can talk about and you can actually follow along if you want our pattern lab is public and You can see all the patterns that we use there. I'll just leave that up for a second if you are trying to get there Right here on the screen. Those are teach for America's brand colors The nice thing about pattern lab is very deeply integrated into Drupal So let's say you wanted to change the color of a button You change it in pattern lab and it changes everywhere across the site. So that's really nice Sorry, I'll leave that up for one more second if people are still trying to get there so the Atoms are the most basic building blocks of the design system You have things like a button or a color or a text block things that are simple and can be described pretty easily Next up you have molecules, which are basically combinations of atoms. So in this case, there's a CTA There's some copy and there's a link. So there's a notion of That you're combining atoms to make an element here One step up from that is an organism. So this organism is that modal box that we just looked at before and a map overlay of teach for America's different regions and Finally, we have our templates. So in this example, there is a header. There's a footer There's top navigation. There's CTA at the top There's side navigation There's a text block and there is they the region map that we showed before and There are other sessions about Using pattern lab. I'm not going to go into a whole lot detail about this But the nice thing is that you can see the visual representation and for a developer This is super nice because then you can see the code behind each of the elements all right, so Now moving along to our sort of takeaways or what we learned about moving from d7 to d8 and doing this whole projects with blue state So I think the first thing that we are Are proud of is that we had 56,000 of people people apply to the core this year, which is the second highest applicant pool in teach for America's history was which is amazing and especially Because of the headwaters we're facing we have a good economy that is a really good number of people who applied and We were able to have a higher conversion rate for site registrants and A much a vastly improved experience for not only our site visitors But all of the authors in the 51 regions who need to tell the story about impact in their particular region So this was our first project using pattern lab as an agency And it was really awesome. We really enjoyed using it It was great to help ensure brand consistency across these different platforms and sites Because of how integrated pattern lab is with Drupal you make a change as some were saying you make a you say you change a button color It proper it just kind of changes all of the other Locations where that button is it's easier for front-end developers to kind of prototype and iterate and be Experimental without having to rely on something being pre-built by the back-end developers or having to Spend a lot of time with with the visual designers They could experiment a bit more on their own and be a bit more autonomous in that way And it just makes it easier to maintain a single source of truth then say a design UI library Separate from you know separate from the front-end code. So overall easier to have that central source Okay, and a few of our learnings for moving from D7 to D8 I'm sure there are more than on this list But number one not all modules were available in D8 So those required us to maybe write some custom code do some workarounds a lot of the documentation is relatively Light especially for our setup. We were not running decoupled and I think that's getting more mature as time progresses so that seems like it'll be less of a problem in the near future and I think Speaking for our developers there was a steep learning curve In terms of getting comfortable with our new stack. So not only going from D7 to D8 but also learning twig pattern lab all at the same time felt like kind of a big big shift all at once so Definitely not for the faint of heart but it is very possible and We think that if you have the opportunity to do that this kind of work you should definitely do it There's a little bit of a learning curve as there is with any kind of new space or new platform in particular in terms of aligning on terminology for across designers and developers and product managers because we all had to kind of learn to define some of the middle categories like like molecules and Organisms in the same way which was a little bit harder than say the templates or the atoms So you just need a you know plan to have a little bit of ramp up time to align on that If you're trying to get your team started on pattern lab And one of our I guess most salient points is we think that Investing the time now will result in time save later So we invested a lot in professional development In new technology, but this is going to really help teach for America long term And it's definitely worth it And don't be afraid and I think that's sort of what we will leave you with So Thanks so much for joining us. I realize we used up all our time But we are gonna go camp out outside of the room right after this session If you have any questions come up and and give us a shout also feel free to reach out using email Thank you so much and have a great rest of your Drupal con And you can definitely come up and ask questions if you have any as well