SC header logo

A Tailored Web Solution for ZATAP’s Growing Needs

We developed a custom WordPress platform to help ZATAP manage their content easily, enhance user experience, and support their product authentication goals.

ZATAP, a product authentication platform, needed a custom web solution to improve their online presence and support their content needs. We brought their vision to life by creating a responsive and dynamic website based on Figma designs for desktop, tablet, and mobile devices. We focused on building a tailored admin area that would allow ZATAP to easily manage content, create new pages, and support their growth.

Location

Zurich, Switzerland

Industry

Business/Productivity Software

Project Duration

6 weeks

Services

Web development

Technologies

WordPress Development, Timber & Bedrock, GSAP, JavaScript, HTML, SCSS, PHP

zatap-img-1
zatap-img-2
zatap-img-3
zatap-img-4
zatap-img-5

Challenges & Objective

ZATAP wanted a flexible and custom website that matched their brand and was easy to update. The designs contained different components with slight variations. The challenge was to build reusable and customizable content blocks that kept the admin area simple and easy to use. Our goal was to create a tailored web experience that looked great and was efficient to manage.

zatap-mockup

Our Approach

1

Understanding the Vision

We started by diving deep into ZATAP’s vision. We reviewed the designs for desktop, tablet, and mobile, taking time to understand every detail. Our goal was to create a tailored web solution that felt right for ZATAP and their users.

2

Planning for Flexibility

Next, we explored which default Gutenberg blocks could be reused and which custom blocks were needed. The idea was to build something simple yet flexible. We planned 20 custom content blocks that ZATAP could use in different ways without making the admin area complicated. This way, they could easily update content and create new pages.

3

Creating a Consistent Look

With a clear plan in place, we moved on to design. We created a style guide—covering colors, fonts, buttons, and image sizes—to make sure the site had a consistent look. We then used the Zimber framework and Roots Bedrock to build the theme, giving ZATAP a smooth and custom web experience.

4

Building Custom Blocks and Animations

This was where the fun began. We developed custom blocks that could be used across the website, making it easy to manage content. For a unique touch, we built a reveal slider using GSAP animations. As users scroll down, new slides appear smoothly, creating an interactive experience. We also added scroll-triggered fly-in sections, making the site feel dynamic as elements slide up into view while scrolling.

5

Reviewing and Launching the Site

Once the blocks and animations were in place, our QA team reviewed every detail. We made sure the site worked seamlessly on all devices and that it matched ZATAP’s design and needs. After gathering feedback from ZATAP and making final tweaks, we launched a custom web solution that enhanced their online presence.

team-table

Key Features

1

Reveal Slider with GSAP Animations

A scroll-based slider that reveals new slides as users scroll through the page. Using GSAP, we created smooth animations that add a unique touch to the design and engage users effectively.

2

Scroll-Triggered Fly-In Sections

The homepage includes special sections where elements, like a phone mock-up, slide up into view as users scroll. These smooth animations, powered by GSAP, help connect text and images, making the content more lively and interactive.

3

SEO & LCP Optimization

We focused on improving the site’s performance, especially the LCP (Largest Contentful Paint), to make sure the site loads quickly on both desktop and mobile. These improvements helped with SEO and made the site experience smoother for visitors.

4

Custom Content Blocks

We created 20 adaptable content blocks based on the design, making sure they were flexible and easy to use. This made it simple for ZATAP to create pages and manage content without a cluttered admin area.

5

Careers Page

We built a dedicated page for job postings, allowing applicants to send their resumes directly through the site. Applications are automatically forwarded to the client’s email, making the hiring process simple and efficient.

zatap-img-4

Outcome

Delivered a tailored web solution for a strong online presence.
Made content management easy for quick updates.
Enhanced Mobile Experience for users on all devices.
Responsive Design that looks great on desktop, tablet, and mobile.
User-Friendly Admin Area for quick and easy site management.
Scalable Foundation to support future growth and content needs.

zatap-home-full
cta-1

Want a Website That Works for Your Business?

More Success Stories

energy-1

Modern Web App Transformation in 9 Months

Energy, Utilities & Waste
657-excerpt

60-Day WordPress Build with API Integration

Event & Workspace for Creative Industries
storyof

Capture & Share Life Moments: Digital Storybook

Information technology & services
acceleon

Acceleon

Information technology & services
energy-1

Modern Web App Transformation in 9 Months

Energy, Utilities & Waste
657-excerpt

60-Day WordPress Build with API Integration

Event & Workspace for Creative Industries
storyof

Capture & Share Life Moments: Digital Storybook

Information technology & services
acceleon

Acceleon

Information technology & services
energy-1

Modern Web App Transformation in 9 Months

Energy, Utilities & Waste
657-excerpt

60-Day WordPress Build with API Integration

Event & Workspace for Creative Industries
storyof

Capture & Share Life Moments: Digital Storybook

Information technology & services
acceleon

Acceleon

Information technology & services
energy-1

Modern Web App Transformation in 9 Months

Energy, Utilities & Waste
657-excerpt

60-Day WordPress Build with API Integration

Event & Workspace for Creative Industries
storyof

Capture & Share Life Moments: Digital Storybook

Information technology & services
acceleon

Acceleon

Information technology & services
energy-1

Modern Web App Transformation in 9 Months

Energy, Utilities & Waste
657-excerpt

60-Day WordPress Build with API Integration

Event & Workspace for Creative Industries
storyof

Capture & Share Life Moments: Digital Storybook

Information technology & services
acceleon

Acceleon

Information technology & services
energy-1

Modern Web App Transformation in 9 Months

Energy, Utilities & Waste
657-excerpt

60-Day WordPress Build with API Integration

Event & Workspace for Creative Industries
storyof

Capture & Share Life Moments: Digital Storybook

Information technology & services
acceleon

Acceleon

Information technology & services
energy-1

Modern Web App Transformation in 9 Months

Energy, Utilities & Waste
657-excerpt

60-Day WordPress Build with API Integration

Event & Workspace for Creative Industries
storyof

Capture & Share Life Moments: Digital Storybook

Information technology & services
acceleon

Acceleon

Information technology & services