Brickox

Live Preview

Website Design

Industry:

Branding

Design System

Year:

2025

Project Description

Synox is a modern payment platform for businesses and merchants. It enables secure payments, automated transactions, subscription management, and seamless checkout through one platform.

The challenge was to showcase a powerful payment solution that resonates with both business owners seeking growth and developers requiring secure, scalable integrations creating an experience that feels intuitive, reliable, and tailored to each audience.

Problem

I spent time understanding where the current experience fell short. I identified 4 core problems clusters that were silently hurting conversions and trust.

Problem 1

Every feature was shown, but nothing was explained.

The page highlighted payment features but didn't clearly show how Synox simplifies transactions and improves the payment experience.

Problem 1

Every feature was shown, but nothing was explained.

The page highlighted payment features but didn't clearly show how Synox simplifies transactions and improves the payment experience.

Problem 2

It spoke to everyone and connected with no one.

Copy and visuals tried to serve developers and marketers with the same generic language, so neither audience saw themselves in it.

Problem 2

It spoke to everyone and connected with no one.

Copy and visuals tried to serve developers and marketers with the same generic language, so neither audience saw themselves in it.

Problem 3

Visitors understood the product but had no reason to act.

The value of the tool was described in the abstract ("flexible," "powerful") instead of shown in numbers a visitor could feel.

Problem 3

Visitors understood the product but had no reason to act.

The value of the tool was described in the abstract ("flexible," "powerful") instead of shown in numbers a visitor could feel.

Problem 4

The UI looked assembled, not designed.

Sections had been added feature-by-feature over time, with no shared type scale or color logic tying them into one product.

Problem 4

The UI looked assembled, not designed.

Sections had been added feature-by-feature over time, with no shared type scale or color logic tying them into one product.

Solution

Each problem got a specific, deliberate answer not just a redesign pass, but a change in what the page was actually doing.

Solution 1

Show the logic running, don't just describe it.

I replaced static feature bullets with a live rules-demo embedded in the page: a real cart total, a real product tag

Solution 1

Show the logic running, don't just describe it.

I replaced static feature bullets with a live rules-demo embedded in the page: a real cart total, a real product tag

Solution 2

Split the page into two parallel tracks instead of one blended message.

I structured the content around three distinct value lanes Flexible for Developers, Creative for Marketers, Powerful for Growth each with its own visual register.

Solution 2

Split the page into two parallel tracks instead of one blended message.

I structured the content around three distinct value lanes Flexible for Developers, Creative for Marketers, Powerful for Growth each with its own visual register.

Solution 3

Put a number next to every claim.

Instead of telling visitors the tool was powerful, I let the demo cart do the arguing: Subtotal $110.00 → $81.50 after a "Reward Loyal Customers" rule applies, sitting right beside the install CTA.

Solution 3

Put a number next to every claim.

Instead of telling visitors the tool was powerful, I let the demo cart do the arguing: Subtotal $110.00 → $81.50 after a "Reward Loyal Customers" rule applies, sitting right beside the install CTA.

Solution 4

Give the whole page one typographic and color system.

Every card, badge, and code block now runs on a single sans-serif type family (Hanken Grotesk) and one restrained, purposeful color palette.

Solution 4

Give the whole page one typographic and color system.

Every card, badge, and code block now runs on a single sans-serif type family (Hanken Grotesk) and one restrained, purposeful color palette.

Typography & Color System

Typography

Title

boldonse

aa Bb

Body Text

inter

aa Bb

Color System

Final Result

A payment platform that clearly communicates its value, guides businesses and developers through tailored experiences, builds trust with clear messaging and meaningful insights, and creates a seamless journey where every section from the hero and features to pricing and footer is unified within one cohesive design system.