Tech Hardware E-Commerce Website Revamp: Blok

Framer Shopify Developer

Web Designer

Copywriter

Figma

Framer

Shopify

Blok

Blok: The device that helps block distractions from your phone

Blok, a San Francisco-based startup, helps people reclaim their time by blocking distracting apps on their phones. Blok is more than just a gadget; it’s a lifestyle tool that helps people take control of their digital lives and focus on the present moment.

But, their website was a big blocker for business growth.

Problem: A website that didn't reflect product value and lacked functional e-commerce integration

Before the redesign, Blok's website didn't live up to the company's vision. Lacking in branding, storytelling, and proper e-commerce (Shopify) functionality, the website was a major roadblock to the company's growth.

The Website Before

Existing website that lacked strong brand identity and Shopify integration

Daniel Belfort, Blok's founder & CEO, felt the disconnect between his vision and the execution:

The current website looks bad and unpolished. I don't even want to invest in ads because I know the site just won't convert visitors to customers.

Without a strong visual identity or seamless Shopify integration, Blok faced challenges in scaling. Post-purchase issues created friction for the business, and the site’s design didn’t inspire the confidence needed to invest in ads or drive traffic.

The result? Lost sales opportunities and the CEO reluctant to promote the product, knowing the user experience wasn’t good enough to convert visitors into customers.

Solution: A complete visual and functional website transformation to reflect Blok's elevated vision

Blok needed an e-commerce website that aligns with the premium brand vision and drives sales.

Revamped website

Project Team

Miya Zhang from Sweeter Design led the web development(Framer), e-commerce integration(Shopify), interaction effects/design, and website copy. We partnered with the talented Ben Woodring (web design and branding) and Tino Zhabinskiy (3D renderings and animations) to make the website come to life.

Hero Section with 3D rendered video

Introducing Blok & social proof - The live site has scroll effects and animated components

Redesign Highlights:

Hero section with 3D renderings: stunning hero video draws users in, showcasing the sleekness of the product

Powerful brand voice: Through carefully crafted copy and animations, the site communicates Blok's values clearly - helping visitors connect emotionally with the brand.

Dynamic scroll effects: Every interaction on the site was designed to give visitors a sense of fluidity, and polished experience to reflect Blok's sleek brand.

Powerful brand voice with animated scroll effects on the live website

Mid-section CTA that entices viewers to buy blok - The live site contains scroll effects

Functional Highlights:

Seamless Shopify Checkout Integration: By integrating Shopify with Framer, we streamlined Blok’s post-purchase operations, simplifying order management and enhancing the overall customer experience. Additionally, we implemented quantity-based discounts to encourage higher cart values and drive sales growth.

CMS for Blog & Case Studies: We implemented a fully customizable content management system (CMS), allowing Blok to easily publish blogs and case studies without the need to build new web pages from scratch. This empowers the team to keep the site updated with fresh content, improving SEO and engagement.

Contact Form: A user-friendly contact form enables potential customers and leads to easily reach out to the Blok team via email, ensuring seamless communication and supporting lead generation efforts.

"Choose your Blok" copy to shift viewers' mindset from buy or not to which one to buy. Checkout is integrated with Shopify with quantity-based discounts.

Beautiful footer to leave a lasting impression

Responsive design across devices

Whether users visit the site on mobile, tablet, or desktop, the experience remains fluid, polished, and responsive, making Blok accessible anywhere, anytime.

Fully responsive to different screen sizes

Result: A sleek, e-commerce website that increased sale conversions by +70%

The revamped website aligned with the premium brand vision and ultimately drove sales. Daniel (Founder & CEO of Blok) is thrilled with the result:

When I show off the new site, I feel proud. It's beyond what I had envisioned - and more importantly it drives sales. Since the revamp, our sale conversions increased by over 70% and the first month of the new site launch was the highest sales month in Blok's history.