A website that explains a complex product and leads to a trial

ClientSayduck

Year2023

My roleDesign, UX, UI, web development, copy and all visuals

What I made

UX and UI design
Web development
Copywriting
Motion graphics
Static and video visuals

The Sayduck home page as designed and built

Sayduck's website had barely changed since the company's early days, while the company moved from selling to a few large accounts to winning self-serve customers. I rebuilt it end to end: the UX and UI, the build, every word of copy, and all the visuals and motion.

The problem

A site built for a different company

The old site was made when Sayduck was a startup and updated very little after that. It did not explain the product, it was slow, and it looked less professional than the brands Sayduck sold to.

Home page. The hero was a 3D animation, which the web archive could not capture.

3D viewer page, still showing figures from 2018

Not convertingVisitors had no clear next step, so few of them became trials or demos.

Hard to understandThe copy listed features and never said what the product does for a buyer.

Out of dateOld figures and screens stayed on the page long after the product had moved on.

SlowHeavy pages lose visitors before they read a word.

Not professionalThe design looked dated next to the furniture and tech brands Sayduck worked with.

The goal

Sayduck was moving from selling to a few large accounts to winning self-serve customers. The site had to explain the product in seconds and end in a free trial.

The process

Designed, written and built by one person

UX, UI, copy, visuals, motion and code were all done by me, so every decision was made together and nothing was lost in a hand-off.

UX and UI designA light, uncluttered interface where the product is the hero: product visuals in device frames on soft gradient shapes.

CopyWritten for a buyer, in plain words that explain the product and what it does for them.

Visuals and motionAll the static visuals and videos, made to show the product in use.

Web developmentI built the site myself, so what I designed is what shipped.

The site

One page for every question a buyer asks

The home page sets out the product in one scroll. Each product and proof page answers one question, and every page ends in a way to start a trial or book a demo.

The home page: what Sayduck does, the platform in three parts, proof from customers, and a path to a trial.

3D Viewer page — **3D Viewer**Shows the product the way a shopper uses it: rotate it, change the finish, zoom in.

Augmented reality page — **Augmented reality**App-less AR explained in one scroll: scan, place the product in your room, and decide.

Virtual photography page — **Virtual photography**Makes the case against slow, costly photo shoots with product images made from the 3D model.

Platform page — **Platform**One page for buyers who want the whole picture: how it works in three steps, and everything it does.

Case studies page — **Case studies**Customer stories sorted by industry, with logos at the top as quick proof.

Pricing page — **Pricing**Plans laid out so a self-serve buyer can choose without talking to sales.

Visuals and motion

Motion that shows the product

Short loops on the home page and the product pages show the product at work: switching materials, placing a chair in a room in AR, turning a 3D model. I made each one myself.