Case Study

Figma-to-Webflow Service

Building complex and creative layouts for a recruitment firm website.

The client

Interskillar

Design

Polish Studio

Webflow Development

SA-C

Date of completion

2023

The Brief

Step 1

Lorem ipsum dolor sit amet consectetur. Diam habitasse habitasse tempus dictum amet adipiscing volutpat ante. Vitae mi nec sit venenatis diam lacus ut placerat. Auctor cursus tincidunt nibh ultrices non fringilla maecenas. In neque morbi venenatis nisl vestibulum elit adipiscing libero feugiat.

The Process

Step 1

Step 2

Step 3

The Results

Key Highlights

‍

Remo

Client:

Remo

View Site

No items found.

Change Google Tag for Google Analytics to gtag.js

Goal: Analysis team wants to track customers behavior through Google Analytics

Project was using Google Analytic as a way to track customers behavior on pages through Google tag prior.
Replacing Google tag method to connect with Google Analytics by gtag.js to increase page performance
Adding gtag Script to project <head> tag and connect with Google Analytics API
Designing a custom attribute system to track every “Book Demo”button click behavior.
Adding a script to trigger the button click event on every page and added it to project <footer>

‍

Custom Attribute for 2 differents type of button that need to be track.
The value received on Google Analytics will be the value of the attribute.

‍

Write a function with a click event that send data to Google Analytics every time a user clicks on one of the CTA button.
Data analytic team will receive the name of the clicked CTA button and its URL on Google Analytics.

‍

Fixing Hubspot embed display error on user mobile

Goal: Further fix any display error that can affect user’s experience on the site

Adding VWO script to help analytics team to further track user behavior on various pages.
Through Microsoft Clarity, analysis team discover 30% of the customer on certain mobile cannot load The Hubspot Contact form.
Discussing different options of solutions with Analysis team. Testing out Hubspot Integration method to replace the old embed method. The most time-saving solution is to create a backup link that will only be shown when form is not loaded.

Microsoft Clarity was able to detect an issue and provide some insights on what causing the issue

‍

Creating a backup link and hide it with custom CSS

Result

‍

Testing out Gated Content that required submitting form

Goal: Creating a page with a gated video that will appear after submitting form.

Updating page layout and content within it.
Creating a Webflow Form that allow developer to hide the video in the Success Table from the form component.
Adding a script to sent data submitting to HubSpot.

Hide video content in Success Table of Webflow form.

Add script to send data from form submitting to Hubspot

Result

Rebuild Homepage

Goal: Rebuilding homepage using a new layout design contains less background videos for better page performance.

Analyzing new layout to pick the right page structure and CSS method
Analyzing components (slider, tab, form to pick the right method to build)
Structuring a CSS system for the page layout
Structuring a new tracking system for gtag.js

Analyzing new layout to pick the right page structure and css method

Page layout is mostly the same with the old one, therefore, the same page structure and class naming system can be re-use

‍

Components such as slider and tab are still simple for native webflow slider and tab. F’insweet attributes are needed for navigation bar custom

‍

Form data needed to be sent over Hubspot, therefore the best solution is iframe embed.

‍

Main CTA will have 2 custom attributes. One global attributes to send the text content value inside it and the other to target it for custom event name

‍

Other button will have 2 custom attributes. One attribute with value to send the text content value inside it and the other to target it for custom event name

‍

Simple javascript to create custom event click name for the Analysis team to sort them out easily.

‍