Duducto

Live Preview

Website Design

Industry:

Branding

Design System

Year:

2026

Project Description

Deducto is a promotions engine built for e-commerce teams developers and marketers alike. It lets teams build custom discount logic, coupon campaigns, and stacking rules without writing custom code every time.  The challenge was clear: how do you explain a technically rich product to two very different audiences a developer who wants to see the logic, and a marketer who wants to see the campaign and make both of them feel like this page was built for them?

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 listed capabilities as flat bullet points. A visitor could see what Deducto could do, but never how it would actually behave in their store.

Problem 1

Every feature was shown, but nothing was explained.

The page listed capabilities as flat bullet points. A visitor could see what Deducto could do, but never how it would actually behave in their store.

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

Syne

aa Bb

Body Text

Syne

aa Bb

Color System

Final Result

A page where the logic engine demonstrates itself, developers and marketers each get a track built for them, real numbers sit next to every call-to-action, and every section from the hero to the pricing footer is governed by one design system rather than stitched together feature by feature.

Trusted By

Life behind the desk