Currently accepting inquiries for Webflow Websites and SEO Projects for Q2.

Building a Webflow Website with Airtable for a Pilot Program

September 12, 2022
Updated:
May 4, 2023

Building a Webflow Website with Airtable for a Pilot Program

Abby Costello

The Healthy Opportunities Pilot program is a North Carolina state-funded program. Access East commissioned Red Shark Digital to build both a marketable public-facing website and a logged-in experience for its partners to upload records, receipts, meeting minutes, and access training materials via secure logins.

What is the Healthy Opportunities Program?

The Healthy Opportunities Pilot program will focus on the provision of non-medical services to eligible Medicaid Managed Care enrollees. The four main areas of focus (food, housing, interpersonal violence/toxic stress, and transportation services) called “domains” will be delivered through local Human Service Organizations (HSOs).

Government Pilot Program Website ‍

When approaching this website build, we were conscious to keep in mind all user groups that would be visiting the site. The counties included in Access East’s region of the Healthy Opportunities Pilot program are primarily rural, with lesser access to broadband and fiber internet solutions. This led Red Shark Digital to take a very straightforward, clean approach to the design and function when building this Webflow website.

Building a Website for Slower Internet Connections

  • Avoid pages larger than 25kB
  • Design pages with 10-second load times at 20kbps connections
  • Minimize the amount of images used
  • Have good site structure
  • Use Style Sheets and minimize the number of requests.
  • Reduce and minimize Javascript requests
  • Enable image compression
  • Use a modern CDN with media caching
  • Avoid heavy use of PDFs
  • Use modern file types (ex: Webp)

Dynamic Dashboards Within Webflow

While Webflow has recently introduced native memberships within its platform, this function is still in beta. For this reason, and in pursuit of maintaining our low bandwidth website goal, we opted for a more straightforward solution when building a dashboard in Webflow.

Through a combination of Webflow CMS and AirTable forms, we built a dashboard experience that allows Access East’s Human Service Organizations (HSOs) to log in and view past documents submitted, meeting minutes, video resources, FAQs, and training materials. In addition to viewing proprietary information, HSOs are able to upload documents for review via this custom Webflow dashboard.

Membership Community Webflow Website | Red Shark Digital

Using Airtable and Webflow CMS to Create Dashboards

In this project, AirTable acts both as a backend for the Webflow website and the data collection tool for form submissions. In addition to the read-only data listed above within a user’s dashboard, we had 3 specific tasks that needed to be completed and managed.

AirTable and Webflow CMS Tasks Needed:

  1. Collect user information and relevant report files/documents
  2. Allow admins within the client’s team to approve reports prior to sending submitted data back to the front end
  3. Send data from approved specific AirTable rows back to Webflow CMS for front-end presentation

Sending User Data from Webflow to AirTable

Using AirTable’s form view within the client’s base, we embedded the form into each HSO’s dashboard. To further simplify this for the end user, we pre-populated the webhook dynamically based on the HSO’s dashboard, allowing the user to bypass having to select themselves from the form and filling in their email. These fields were then hidden from the form altogether while being confident that the needed data is still passed through to the admins within the Access East team.

Membership Community Webflow Website | Red Shark Digital

Allow Admin's Ability to Approve Webflow Submitted Data in AirTable

When a form is submitted via Webflow dashboard, a new record in Webflow is created including both the dynamically populated fields and the user-submitted file uploads.

Within the monthly reports table of our client’s base, we created an action to apply the status “Ready for review” to every new record created. Doing this allows our client to log in and filter by records ready for review and even update multiple records in batch form.

Membership Community Webflow Website | Red Shark Digital

Send Records in AirTable to Webflow CMS when Approved

As the client reviews reports within the table, changing the status of “Ready for review” to “Approved” signifies that the record should be pushed back to Webflow, creating an item within Webflow CMS from the AirTable record.

Data sent to Webflow from AirTable is stored as a collection item within a collection titled “Reports,” a collection that populates a collection list within the respective dashboards. Collection lists within each dashboard are filtered to only include items designated as belonging to the HSO logged-in.

Build a Webflow Membership Project

Webflow membership websites can be built using a combination of multiple third parties such as MemberStack, Webflow CMS, and AirTable, depending on the needs of your users and features of your platform.

While Webflow is an excellent website-building platform, and our team here at Red Shark Digital has received Webflow certification for their abilities, we still must look to third-party solutions for dashboard and logged-in user experiences as they continue to test and refine Webflow memberships.

Access East Healthy Opportunities Webflow Website

Check out the website for yourself at https://www.hopaccesseast.org/.

Want to transform your website design processes with the help of Airtable? Create your Airtable account today by visiting the Airtable website.

Home Page:

Membership Community Webflow Website | Red Shark Digital

About Page:

Membership Community Webflow Website | Red Shark Digital

Domains Page:

Membership Community Webflow Website | Red Shark Digital

HSOs Page:

Membership Community Webflow Website | Red Shark Digital

HSO Dashboard:

Membership Community Webflow Website | Red Shark Digital

Expense Report AirTable Upload:

Membership Community Webflow Website | Red Shark Digital

AirTable Dashboard:

Membership Community Webflow Website | Red Shark Digital

Counties Page:

Membership Community Webflow Website | Red Shark Digital

Contact Page:

Membership Community Webflow Website | Red Shark Digital

Related Articles