Clearer Pathways to Critical Information

For Embrave, important actions need to be easy to find. KZ redesigned the header and navigation to make contact details, donation options, translation, and quick-exit functionality more visible.

The language switcher was also adjusted for a better mobile experience, helping ensure that multilingual access remained available without creating layout or usability issues on smaller screens.

The result is a site structure that better supports real user needs: finding help, learning about services, getting in touch, donating, or leaving the site quickly when needed.

Reworking Complex Content

Embrave’s site includes content-heavy pages with information about programs, shelters, careers, board involvement, FAQs, and contact options. KZ restructured these areas to make them easier to navigate and manage.

One major improvement was replacing the previous chatbot-style support content with a more transparent FAQ experience. Instead of requiring users to know what to ask, the new FAQ format allows visitors to browse common questions, expand answers, and find information that may speak to their situation.

The emergency shelter content was also redesigned with clearer layouts, jump links, sticky section navigation, and expandable content. This helped keep important details accessible without overwhelming visitors with long blocks of information.

Better Forms and Content Management

KZ rebuilt key forms using Formidable Forms to improve accessibility, structure, and error handling. This made forms clearer for users and better structured for assistive technology.

The new WordPress setup also gives Embrave a stronger editing experience. Content can be managed more consistently, new resources can be added more easily, and the team has a more stable foundation for future website growth.

Accessibility-Led UX Improvements

Accessibility was built into the redesign from the start. KZ improved font scaling, heading hierarchy, button styles, colour usage, link clarity, and form behaviour to create a more inclusive experience.

The design team also adjusted how Embrave’s brand colours were used across the interface. Instead of forcing brand colours into places where they created contrast issues, the new design uses them more intentionally, preserving visual identity while improving readability.

This created a cleaner, more accessible experience for users navigating by sight, keyboard, mobile device, or assistive technology.

Need a stronger foundation for your website?

KZ helps organizations improve website performance, accessibility, security, and long-term maintainability.

Check out other sites we’ve worked on!

The post Redesign & WordPress Development for Embrave appeared first on Kobayashi + Zeitguys.

Table of Contents

• Optimize Your Current Workflows
  • The “Drafting” Partner for Writing
  • The Researcher for Summarization
  • Data Parsing and Formatting
• Creative Collaboration
  • Image Generation for Visuals
  • Tone of Voice Synthesis for Your Brand
• Getting Started
• FAQs

The post A Beginner’s Guide to AI Workflows You Can Use Today appeared first on Kobayashi + Zeitguys.

If you’re not interested in our rational feel free to skip straight down to the how!

Table of contents

• Why the way you connect GA4 matters
• The three most common ways GA4 gets connected
• Why we recommend Google Tag Manager
• How to connect GA4 through Google Tag Manager
• Need help setting up GA4?

Why the way you connect GA4 matters

Connecting GA4 to your website is not just about getting the tracking code onto the page. The method you use affects how easy your analytics setup is to manage, update, and expand later.

A lot of websites technically have GA4 connected, but the setup creates more work than it should. We often see tracking added directly to the site, handled through a plugin, or split across multiple methods. That can make future updates harder, especially when you want to add event tracking, advertising pixels, or other platforms.

The better approach is usually the one that gives you a cleaner foundation long term.

Other common mistakes we always see:

• multiple tracking methods being used at once
• unclear event naming
• no consistent place to manage analytics and marketing tags
• difficulty adding future tracking without developer involvement
• Enhanced measurements not even turned on

If you already have a GA4 property use our PromptThis buttons to have your A.I evaluate your current GA4 implementations

If you want to learn more about PromptThis and potentially add it to your site check out our other blog.

The three most common ways we see GA4 being connected to websites

1. Directly in the site code

This means the Google tag is placed in the website itself, often in the theme, template, or platform settings.

This can work, but it is often not the most flexible option. Any tracking changes may require developer support or code changes later.

2. Through a plugin

Some websites use a plugin to connect GA4. This may seem convenient, but it adds another dependency to the setup. WordPress’s own documentation says plugins and themes should be kept updated for security, and Google’s web.dev documentation explains that third-party JavaScript can affect performance, privacy, security, and page behavior.

3. Through Google Tag Manager

This is the setup we usually recommend. Instead of placing separate tracking scripts directly on the site, Google Tag Manager gives you one place to manage GA4 and other marketing tags.

That creates a cleaner setup and makes future tracking changes much easier to manage.

Why we recommend Google Tag Manager

For most websites, Google Tag Manager (GTM) is the best way to connect GA4.

Here’s why:

• It keeps tracking in one place
• It reduces the need to add multiple scripts directly to the site
• It makes future tracking changes easier
• It supports platforms beyond Google, such as Meta and LinkedIn
• It gives your site a better long-term analytics foundation

This is especially important for growing websites. Even if your tracking needs are simple today, they often become more complex over time. A setup that works for basic pageviews may become limiting when you need to track form submissions, button clicks, campaign activity, or advertising conversions.

Learn everything about Google Tag Manager directly from Googles support site.

How to connect GA4 through Google Tag Manager

If you want a cleaner setup, the general process is straightforward.

1. Create a Google Tag Manager container

If the website does not already have GTM installed, start by creating a container for the site.

• Go to the Google Tag Manager site.
• In the top right click Create Account.
• Then fill in everything with the relevant information and click create.

2. Install the GTM container on the website

Once the container is created, Google Tag Manager will give you two code snippets to add to the site.

One goes in the <head> of the website, and the other goes immediately after the opening <body> tag.

Important: this part is different for every website. The exact method depends on the CMS, theme, builder, or framework the site uses. On some websites this is done in theme files, on others through platform settings, and on others through a tag injection area.

Because of that, we recommend only doing this step if you are confident editing the site safely.

Not sure how to add the GTM code to your site?

Every website handles code injection a little differently. If you are not sure where these snippets should go, or you want to avoid breaking anything, reach out to us and we can help you get it set up properly.

Need help installing GTM on your site?

3. Add your GA4 tag inside GTM

• Then go to the tags section on the right and click new in the top left.

• You can then click the center of the tag configuration panel and select Google Tag from the options the appear on the right.

• Next you’ll have to go to your GA4 property and click on the gear icon in the bottom right then Data streams then either add a stream or select the one that’s there.

• Then you just need to copy the Measurement ID.

• Then paste the Measurement ID in the area labeled Tag ID, and make sure the triggering is set to Initialization – All Pages.

• After that save and in the top right it’s as simple as submitting and publishing.

Need help setting up GA4 the right way?

If you want a cleaner setup, we can help review your current implementation, recommend a better structure, and set up GA4 through Google Tag Manager in a way that is easier to manage over time.

The post How to Connect GA4 to Your Website the Right Way appeared first on Kobayashi + Zeitguys.

We decided to meet that behavior where it already exists.

That’s why we built AI PromptThis a lightweight WordPress block that gives visitors a smarter next step after (or before) reading your content.

Think social sharing buttons, but for AI, with a “prompt engineering” assist.

Example #1 with prompt: Summarize this article

What Is AI PromptThis?

PromptThis is a custom WordPress Gutenberg block that adds simple AI prompt buttons to your content.

With one click, your website visitors can add your content TO THEIR OWN AI using these AI tools:

• ChatGPT
• Perplexity
• Claude

Each button opens the selected AI platform in a new tab, with:

• Your page URL included
• A pre-written prompt that you choose for your visitor (for example, “Summarize this page” or “What are the key takeaways?” or even more powerful with a prompt like “Review this article and tell me how it might be relevant to my business and list possible next steps”)

The Real Value: AI Familiarity

The value of AI PromptThis is simple and durable:
it helps your content become part of a person’s personal AI context.

AI systems increasingly respond based on:

• What a user has interacted with before
• Which sources they’ve asked about
• What domains appear repeatedly in their prompts

When someone actively summarizes, questions, or explores your content through AI, your site becomes part of their personal AI memory.

Click the PromptThis buttons below for another practical example with even more context added:

Example #3 with prompt “Generate clear, real-world use cases for the “PromptThis” WordPress block. Focus on business value, user intent, and decision-making moments not technical implementation.“

How it works

AI PromptThis is a WordPress Gutenberg block.

Once you add it you get an assortment of styling options (you’ve already seen a few in this blog post).

And you get the ability to customize the prompt that gets sent over with the article link. We recommend that you focus on what your visitor would like to do specifically with your content (you are giving them an assist with a bit of prompt engineering!)

That’s it. Once the prompt is set, the block handles the rest. You control how your content is introduced inside your visitors own AI tools.

Frequently Asked Questions (FAQs) 

Next Step: Want this on your site?

AI PromptThis is available as a custom block. If you’re interested in adding it to your site or want to discuss whether it’s a good fit, get in touch, we’re happy to help!

Got a problem to solve? Challenge accepted!

Full Name *

Email Address *

Phone Number *

Message *

If you are human, leave this field blank.

The post AI PromptThis: A Smarter Way for Visitors to Engage With Your Content appeared first on Kobayashi + Zeitguys.

The International Institute for Sustainable Development (IISD) is a global think tank advancing sustainable solutions to today’s environmental challenges.
Their work helps governments, businesses, and communities make informed decisions that protect ecosystems and support long-term development.

For this project, IISD needed to transform their Environmental Impact Assessment (EIA) guidebook — a technical, text-heavy manual — into an interactive, bilingual online learning tool that could teach environmental best practices around the world.

What we did

Information Architecture

We translated IISD’s written EIA process into a clear, seven-step digital framework, structuring content so it could be explored, tested, and understood intuitively.

UI/UX Design

We designed the site like a course, not a brochure. Each stage of the EIA process features custom hand-drawn illustrations and a learning flow that shifts from “Learn” to “Test” mode — color-coded to guide comprehension and reinforce retention.

Custom Development

Built before WordPress supported modern block editing, the platform’s responsive design was engineered completely by hand. Every breakpoint (1200px, 780px, 480px) was coded to maintain the flow of the illustrations and “joinery lines” — ensuring clarity across every screen size.

Interactive Learning Experience

We developed a lightweight quiz and scoring system that turns environmental knowledge into active learning — an experience that teaches through interaction.

The post IISD appeared first on Kobayashi + Zeitguys.

The Home Construction Regulatory Authority (HCRA) licenses and regulates the people and companies who build and sell new homes in Ontario. In addition to regulating new home builders and sellers, they protect consumers by providing them with educational resources and information to guide them in the home-buying journey.

What we did

• Visioning
• Information Architecture
• UI/UX Design
• Web Development

The post The Home Construction Regulatory Authority (HCRA) appeared first on Kobayashi + Zeitguys.

Workplace Medical provides a suite of occupational health services to clients across Canada. From prevention and response to return-to-work services, we help organization make the most of their greatest asset – its employees.

What we did

• Information Architecture
• UI/UX Design

The post Workplace Medical appeared first on Kobayashi + Zeitguys.

The Ontario CLRI helps the province’s 600+ LTC homes to enhance the quality of life and care for residents. The Program educates and trains the current and future LTC workforce and provides solutions to pressing issues, including an aging population, care complexity and workforce challenges.

What we did

Key Features

A key feature of the project was the development of a comprehensive Resource Centre. This section includes advanced filtering and sorting functionality, making it simple for users to find relevant materials across a large and varied library. Each resource was built using modular components, ensuring consistency and allowing for easy reuse. This approach also helped maintain a fully responsive layout that adapts seamlessly to any screen size or browser.

Accessibility

Accessibility and performance were top priorities. The build emphasizes semantic HTML and a clear heading hierarchy to support screen readers, along with high-contrast text for improved readability — an important consideration given CLRI’s diverse audience. Images are automatically optimized, and caching strategies were implemented to ensure fast load times, even for users accessing the site in different network conditions.

Design

Visually, the design aligns with CLRI’s existing brand identity, incorporating their brand elements and colour palette while introducing a clean, professional layout suited to a healthcare and education audience. To maintain consistency as the site grows, templates and design patterns were created for basic content pages, resource listings, course pages, and news items, ensuring new content can be added easily while preserving the visual structure.

Collaboration & Outcomes

This project was carried out in close collaboration with CLRI stakeholders from the outset, helping to clarify goals early and avoid unnecessary rework. The final product delivers a clear, accessible, and efficient user experience — improving the visibility of key resources and allowing users to quickly find what they need.

The post CLRI appeared first on Kobayashi + Zeitguys.

StarFish Medical is a leading provider of medical device design services, offering a comprehensive suite of design, development, and manufacturing solutions with offices across the US and Canada.

What we did

• Visioning
• Information Architecture
• UI/UX Design
• Web Development

The post Starfish Medical appeared first on Kobayashi + Zeitguys.

Search engines aren’t what they used to be. Between AI Overviews, ChatGPT, and Perplexity, people are getting their answers without going to a single website.

How we’re building FAQ pages in WordPress for our clients

---

Our approach isn’t just about writing Q&A content, it’s about structuring it for both humans and generative engines. Every FAQ page we build follows a process that blends good UX, content strategy, and technical implementation.

1. Build it on a real system not just a block.

We use a dedicated FAQ system instead of just individual pieces of page content (In WordPress that would be an FAQ post type instead of just Gutenberg blocks). That means every question and answer lives in one place, can be reused across the site, and supports proper schema markup automatically. It also allows for centralized updates edit once, update everywhere.

2. Write real, high-quality, questions.

We start with questions that actually come from users not hypotheticals. We first talk to our client because they know best the questions that are commonly asked. Then we use Semrush’s A.I toolkit to gather a comprehensive list of real questions users are asking tools like ChatGPT and Perplexity related to your business.

What that report looks like:

3. Write clear, answer-first, responses.

We provide a comprehensive writing guide tailored to our clients business. If you want an example of a general one we have one for you:

Download

4. Embed FAQs across the site.

We don’t limit them to a single “FAQ page.” We set-up and strongly encourage the FAQs to integrate into product pages, blog posts, and service areas, wherever they naturally fit. This helps search engines and generative engines connect context across your entire site.

5. Implement schema markup correctly.

As stated before schema markup is structured data added to your site’s code that helps search engines and AI tools understand your content. We use FAQPage Schema through Yoast SEO so every question and answer pair is machine-readable and eligible for display in AI-generated answers.

(We’ve even confirmed accordion-based FAQs still get indexed — as long as they’re visible in the HTML at load.)

6. Measure visibility over time.

We benchmark each client’s visibility across platforms like Google AI Overviews, ChatGPT, Perplexity, and Bing Copilot using Semrush’s A.I toolkit. Then we measure A.I visibility as well as, any changes in traffic.

Do you want to talk about GEO?

---

Whether you want your own GEO optimized FAQ page or if you just want to talk with us about your thoughts on GEO, please reach out!

We recognize that GEO is new, and strategies, best practices, and everything surrounding GEO will be changing as new studies, case studies and platforms change.

So please reach out and let’s join the conversation and help pioneer this revolution in A.I.

Got a problem to solve? Challenge accepted!

Full Name *

Email Address *

Phone Number *

Message *

If you are human, leave this field blank.

The post The Best Strategy For GEO Right Now appeared first on Kobayashi + Zeitguys.