10,000 Small Businesses Case Study

The LGND team was contracted to create a new site for Goldman Sach’s 10,000 Small Businesses program. For over a decade, this program has helped thousands of entrepreneurs grow their businesses and create jobs in their communities.

This new site would help prospective entrepreneurs:

Block-based approach

Ben Stone was the designer for this project. He had joined LGND earlier in the year and this was my first time to work with him on a project. He took a very modular approach to the design of this site reusing design patterns throughout the site. This aligned well with the block-based structure of the WordPress Gutenberg editor.

I started building sites with WordPress blocks several years ago. We had waited a couple of years to embrace Gutenberg to allow the software to mature to the point that we were confident in building projects with it. We saw Gutenberg’s value to the client’s editing experience on the backend.

My first order of business was to go through the design and identify the different custom blocks that I needed to build for the site. I also began to think through how I could create variants on certain blocks that had similar characteristics.

For example, one of the blocks that I identified was a ‘media block.’ This block contained a media element such as an image or video along with descriptive content (a heading, paragraph(s), and a link button). There were several variations of the media used in this block with different grid layouts, one with a map, and one with bar graphs along with an image.

Example of a ‘media block.’ This block contains a 2 column image grid.

The media block also had the option for the media component to display on the left or the right for wider screens.

A media block with a map element is displayed in the right column.

Building the Blocks in WordPress

This was the first project in which I built custom WordPress blocks without the assistance of Advanced Custom Fields. I learned to build native blocks with React and PHP through a free course, WordPress Block Creator Series.

I saw that there was an advantage to building native blocks and that you could add custom options in the toolbar and sidebar inspector. You can also customize the code for the edit screen which allowed me to build in some enhancements that made for a better editing experience.

My teammate, Ross, had created a custom WordPress theme that made it easy for me to create new blocks by duplicating a folder template and then customizing the different files I needed for each block.

My process for this project was much different from other projects I had built. In the past, I would build out individual pages one by one. In this project, I built out each of the blocks and added them to a sample page to test that they worked and to style the layout and typography. I built a majority of the blocks first and then went back and built the individual pages by adding blocks and content to each of the pages. This project was one of my quickest builds because I built the smaller pieces first.

I built 13 different custom blocks for this project including a call to action block, homepage hero block, media block, testimonial grid, and other blocks to build out the design of the site.
I created some blocks that could only be used as inner blocks within other custom blocks. These are different options for inner blocks for the parent block labeled “Listing.”

Block variants

One of the blocks that I created was labeled as a “listing block.” This block would contain two columns of content in the desktop view. The left column would contain a heading and a paragraph. The right column would allow for a variety of different inner blocks to be used.

I originally built the listing block for two different types of inner blocks but as the project progressed, we recognized that we had other blocks that would also fit into that same structure. Those blocks were also listings of information.

Two of the allowed inner blocks were heading and paragraph. Different variants had different font sizes and spacing for the headings and paragraphs. I added an option for the block settings in the sidebar to choose which variant of the block was being used. This option added a class to the parent block that allowed for different styling based on the type of block needed.

Listing block with ‘curriculum’ variant on the Education page
Listing block with ‘cohort dates’ variant on the Program Details page

Crafting the back-end experience

My goal is to create products that are not just easy and intuitive for the audience on the front end but also easy and intuitive for the client team on the back end. I want to remove as many barriers as possible for the client to update and maintain the site after we hand off the site. One of the benefits of building native WordPress blocks is that you can craft and customize the edit screen experience.

For the admin screens, I wanted something that mimicked the design on the front end without being an exact match because the edit fields would not line up with the look of the front end and I wanted to be able to add help text for image sizes or other hints to make things clear for those editing the site.

For example. The homepage hero block contains a video background that needs to be embedded with an iframe. The iframe code block is in the position of where the video would show up in the homepage hero.

There is also a rotating text element in the homepage hero. The text choices are edited through the block sidebar.

One of the blocks was a map graphic that had different images in the layout. I customized the edit screen to show a screenshot of the image positions and used the corresponding numbers in the image upload.
The same interface with images uploaded. I created a custom button so that it would be clear how to remove images.

Animation strategy

I lean more in favor of subtle animations to enhance an interface. I used a similar strategy on this site as I had on a previous project with the client. A large portion of blocks included a similar tagline, “Small Business. Big _____. (Impact, Ideas, Network).”

The design called for the last word to be italicized. Because the last word was different, I decided to emphasize it with a sliding reveal that was triggered by the user’s scroll to animate the word from left to right. I coupled the word animations with the image reveals and a bar graph revealed in one of the blocks.

Results

My role

I was responsible for building the custom WordPress blocks including the block templates, JavaScript, and CSS. I was also responsible for the CSS and GreenSock animations.

I did not build the following blocks:

View the site