Kauffman Foundation Real World Learning

February 1, 2024

In 2022, LGND was contracted to design and build a stand-alone site for the Kauffman Foundation‘s Real World Learning initiative. The project was very dear to my heart for several reasons.

• It is an initiative from my hometown of Kansas City
• My high school, Fort Osage, is one of Real World Learning’s success stories
• My sister is a teacher (in the Fort Osage district)
• My daughter is a teacher (in Tennessee)
• I think it is a great program that I am behind 100%
• I don’t think other opportunities like the building trades are valued on the same level as a college degree. Our society has long failed our young people by only touting a college education, which shackles most young people with crippling debt, as the only path to a successful career.
• I enjoyed building and animating a site for Real World Learning in 2019

The Kauffman Foundation is named after Ewing Kauffman, who was the owner of the Kansas City Royals. I attended many games at the stadium that is now named after him. Real World Learning seeks to connect students to real-world experiences. These experiences will help students recognize how to connect their interests to future employment opportunities and help them as they choose paths through higher education to prepare for those careers.

The brief

Real World Learning had a presence on the Kauffman Foundation site but their system was very limiting in what the project team could accomplish. One of their needs was to be able to resource the teachers and volunteers who were part of the Real World Learning program. They had created a space on Google Drive to upload and share resources. But they wanted to bring those all into one place as well as create a cohesive branding for those resources.

The two main goals of the project were:

• to fashion a fun and engaging site
• to create a robust resource center that allowed visitors to filter through resources and find what they were looking for

Team challenge

One of the challenges that we faced as a project team was that the project manager, the strategist, and the designer for the project were all new to the LGND team. This was the first website redesign project that they had worked together at LGND. We had to learn how to effectively communicate with each other and how to best collaborate. We hit a lot of speed bumps early on and had a steep learning curve. But by the end of the project, we were smoothly collaborating and troubleshooting together with speed.

As the senior member of the project team, I invested much more time early on in the project than I had in previous projects. I helped guide my other teammates through the discovery, design, and build process. This leadership role was a learning curve for me as well. I was much more involved in the design process compared to previous website projects. I enjoyed getting to use my expertise and background to help guide the design solution to meet the project objectives.

Organizational challenges

Another unique challenge of this project was the challenge of working with a large organization. Different stakeholders were not always aligned on the direction set by the project leads. This posed several challenges for our team, who had to work together to find a solution that maintained the integrity of the direction we had set while still addressing the late-hour concerns of other parties in the client organization.

In the end, we were able to come up with a solution that met the client’s goals and maintained LGND’s original vision.

Solutions

The design solution that LGND was fun of a lot of fun elements. There were several shapes in the design and many of the images were cropped using those same shapes. The design also included a lot of handrawn doodles. I knew right away that I wanted to be able to animate those doodles using stroke animations so it looked like those elements were drawn on the page as you scrolled down.

Scroll animations

As I started investigating the doodles to implement scroll animations, I noticed that when I exported the graphics, they were not saving as paths which is what I needed to animate. So I was not sure how I was going to meet my original vision of animating those elements.

It was at this time that I watched a presentation from Cassie Evans on Unlocking SVG Superpowers. She was using a technique with clip-paths to do something similar to what I was wanting to achieve. Her technique gave me the idea to using SVG masks to make the animation come to life.

I saved the “doodles” as a PNG image (twice the size for high-density screens) and opened the doodles in Affinity Designer. In Affinity Designer, I used the pen tool to create paths that would be masked by the image. I could animate those paths with the DrawSVG plugin in GreenSock. For some of the doodles, I would draw multiple paths and/or have multiple images.

The paths that I drew in Affinity Designer did not have to be very precise because the image was masking the SVG. I just had to make sure the SVG covered the doodles so that the mask would be complete.

See the Pen Comparison of masked image and the mask by Jeff Bridgforth (@webcraftsman) on CodePen.

One of the elements that we needed to update late in the project was the doodles. The original doodles had a heavier stroke. We adjusted those strokes to be lighter. The originals were more like crayon or chalk, the updated doodles looked more like pen strokes. They were much cleaner and I believe they were a better solution in the end.

Read more about my adventures in SVG masking with this project

Shape animations

Another element in the design that I knew from the beginning that I wanted to animate was line drawing of shapes that were background images in the header and the footer. I found an animation on Codepen of a can floating around that I took and modified to make the shapes animate in the background. It is a very subtle addition but it gives the design more life and adds to the “fun” factor.

404 page

Another idea I had early on is that I wanted us to be able to come up with a creative solution for the 404 page. Most 404 pages are an afterthought in a project. I wanted our team to pour the same creative talent into this page as the rest of the site.

We had just hired Kosta who has mad illustrator skills. I wanted to collaborate with him to create something special and a bit of an easter egg for the site. When I approached him with the idea, he was very excited.

Kosta came up with a great animated illustration that would serve as the backbone of the page. He played off the idea of a dog eating your homework which was a great fit for our project. The project director loved it and said that it was her favorite part of our solution.

District map

One of the features of the homepage is an interactive piece that the user can view data for each of the districts participating in the Real World Learning program in the Kansas City area (both Missouri and Kansas schools).

Within each district, you can learn how schools are in the district, how many students they serve, demographic makeup of the district, and what Real World Learning strategies the district is employing. You can also view stories from the district from the Real World Learning Blog.

The information is view in a modal. I wanted to create a nice transition from the page to the modal that fit well with the other work we were doing.

I referenced an article on animating with a clip-path on CSS Tricks. I originally played with an accordion type clip-path but then decided a circular clip-path would fit the design better. I was very pleased with how it turned out.

Read more about how we built the district map

Robust resource center

As I mentioned in the introduction, one of the goals of the project was to create a robust resource center. The client wanted to be able to pull in resources for a variety of different places and have one centralized home. They also wanted to have robust filtering so that there would be many different ways to find content.

The site had four main audiences.

• Educators
• Employers
• Students
• Parents

The resource center is mainly for the first two audiences but there are some resources for the other two. They also wanted to be able to filter by:

• asset type (blog, PDF, presentation, video)
• content grouping (based on the Real World Learning strategies like employer engagement and entrepreneurship)
• asset use (classroom, etc.)
• by author (school district or the Real World Learning team).

I had become familiar with the WordPress plugin, FacetWP, from a prior project. The plugin makes it easy to add filtering and sorting to a listing page. I have done some hand-rolled filters in the past but we wanted a much more robust solution.

I was able to create several “facets” for the page in no time. I just had to style the filter inputs, the pager, and the “show how many posts per page” input. It is nice to have a solution in place that I feel confident about and is robust enough to add more functionality in the future.

Resource cards in the listing

As I worked on implementing the design, one of the other developers suggested that we use a different layout for resource cards when there was less horizontal space available on mobile. I like the idea and added a vertical alignment for smaller screens.

A new CSS layout tool became available in most browsers in the midst of our work on the project. Container queries allow developers to make changes by querying against the width of a parent container rather than the browser viewport (media query).

I came up with a solution to have a vertical or horizontal layout of the cards in a two-column and three-column layout because I based it on the width of the container (the card). I use progressive enhancement to add this to the site for browsers that support it.

I also embraced a more flexible solution for the resource listing grid. I set a minimum value for a card width. Once there was the available space, the grid would add another column automatically. In the past, I had used media queries to determine when a grid should add an extra column. My solution for this site embraced a more modern approach and required less coding.

Clip-paths on images

The design included many instances where images were contained within shapes or partial shapes. I wanted to create a solution where the client could upload a rectangular image and the image transform would happen with CSS. This included images that were rotated, were contained inside a circle, or contained inside a partial hexagon or circular shape.

For the secondary hero images, I wanted the Real World Learning team to be able to choose which clip-path to apply to the image. In the WordPress backend, I gave them instructions for image sizes for both options and then included an ACF true/false field that was stylized to ask which shape they wanted.

Because the shapes in the hero were not full shapes but only partial, I elected to use an image to define the clip-path. I had never used this technique before but was familiar with it. It is always good to be up on different techniques because you never know when the technique is the better solution to your problem.

Find out more specifics of how I crafted this solution

Results

Our team crafted a design and development solution that met both of the goals of the client. We created a site that was more “fun” and less corporate. The animations helped to bring the design to life and delighted both the project director and their wider team of educators and volunteers.

LGND delivered a custom-built WordPress solution that empowered the Real World Learning team to own and manage their content. We equipped them with the tools they needed to maintain and evolve a robust resource center for educators, employers, students, and parents. We trained them in how to use the custom-built WordPress blocks to edit content for the future.

In the course of the client quality assurance testing, the project lead shared a link to the staging site with education partners involved with Real World Learning. She wanted to give them a preview of this project that she had been promising them. Their response was very enthusiastic.

As she shared this feedback with our team, she teared up thinking about how her dream of an improved site experience was finally about to be fulfilled.

One of our values as a team at LGND is to care more than the client. We have a talented team of people who are all committed to premium work. Though this project threw several unique challenges our way, we came together and built a premium product that delighted the project director and helped to serve their audience.

Personal takeaways

For me personally, I had the opportunity to exercise leadership in a way that I have not done in the past. I grew as a teammate and as a leader because of the experience. I enjoyed the chance to employ a lot of different animation techniques that took the quality of the project to a new level. It was great to be able to learn a lot of new approaches.

Epilogue

Small world

Several months into the project, I found out that the project lead on the Kauffman team was married to a guy who lived on the same street when I was in elementary school. She and her husband were friends with a lot of my classmates, one of them being a guy that I was in the school band with and played on the soccer team with. I have never been involved in a project where project lead show up from time to time in my Facebook feed.

As I mentioned earlier, this project meant a lot to me personally because it is one of the only projects that I have ever done in the city I grew up in. I enjoyed seeing this video about how my high school was giving students real-world experience while also serving the community.

One final note

Several months after we delivered this project, the Kauffman Foundation moved the site into their WordPress VIP platform. When the site was moved to another platform and re-templated, several of the animations from our solution were removed. They also changed the 404 page and removed the animated easter egg that we were so excited about.

We had hoped that the project would lead to a longer-term relationship with the initiative but unfortunately, that did not work out. I am extremely proud of the solution that we delivered. But it was very disappointing in the end and soured my feelings quite about this project that I had so much of a personal investment in.

Deeper dive

I wrote regular weeknotes about the project throughout the development phase. You can do a deeper dive by reading these posts.

• Adventures in SVG Masking
• SVG Clip-Path
• Container Queries
• Resources page and FacetWP