My Framer Site

The site has its own look. One gradient, used carefully, not a mix of random startup colors. It looks like a real brand made these choices on purpose.

Creative Design

The site has its own look. One gradient, used carefully, not a mix of random startup colors. It looks like a real brand made these choices on purpose.

UX & CRO Thinking

The page is ordered like a conversation: promise, proof, trust, steps, then the ask. Buttons are placed exactly where someone is ready to act, not just wherever there's space.

UX & CRO Thinking

The page is ordered like a conversation: promise, proof, trust, steps, then the ask. Buttons are placed exactly where someone is ready to act, not just wherever there's space.

Founder Empathy

Two clear buttons let fast decision-makers and careful buyers each take their own path. The FAQ removes the two biggest doubts. Nothing on the page is there just to look nice — each part is meant to turn a visitor into a sign-up.

Founder Empathy

All Projects

Design System

Every button, card, and spacing choice reuses the same small set of rules. That's why landing, pricing, and mobile all feel like one product.

Design System

Every button, card, and spacing choice reuses the same small set of rules. That's why landing, pricing, and mobile all feel like one product.

LANDING PAGE

The top of the page has one job be clear

The headline says exactly what TaskHive does — no clever wordplay, no jargon. Right under it, two buttons: a solid "Try for Free" for people ready to jump in, and an outlined "Book a Demo" for people who want to talk first.

The shape next to the headline is decoration, not a screenshot. That way it doesn't compete with the words for attention — it just makes the page feel alive.

The page is ordered like a conversation — say what the product does, then back it up, one section at a time.

The page is ordered like a conversation say what the product does, then back it up, one section at a time.

The real product shows up right when it's needed.

After the promise, the page shows an actual picture of the app in use. This is the moment a visitor is asking "does this really work?" — so that's exactly when the proof appears.

After the promise, the page shows an actual picture of the app in use. This is the moment a visitor is asking "does this really work?" so that's exactly when the proof appears.

Right after it, short quotes from real teams sit in cards. One quote is made bigger than the others, so the eye knows where to start reading first.

"Say it, then show it — never the other way around."

How TaskHive Works is the one place numbers (1, 2, 3, 4) are used — because this really is a step-by-step process. Numbers are only used when order actually matters.

CHALLENGE

Established competitors like Asana and Trello already dominate the market, so layout needed to communicate credibility and value within the first 5 seconds.

GOAL

Make people trust the product before they read a word.

TaskHive competes with big names like Asana and Trello. So the site had one job: look clean, look confident, and make it easy for a visitor to say yes, I want to try this — without feeling confused or sold to.

TaskHive competes with big names like Asana and Trello. So the site had one job look clean, look confident, and make it easy for a visitor to say yes, I want to try this without feeling confused or sold to.

CHALLENGE

Make people trust the product before they read a word.

Established competitors like Asana and Trello already dominate the market, so layout needed to communicate credibility and value within the first 5 seconds.

DESIGN SYSTEM

A few simple rules, used everywhere.

Instead of picking new colors and fonts for every page, the whole site runs on one small set of choices. That's what makes it feel like one product, not three different pages stuck together.

The purple-pink gradient is used sparingly.

Just the logo and the main button. That way, it still grabs attention when it shows up — it hasn't been overused.

The purple-pink gradient is used sparingly.

Spacing follows one simple pattern.

Every gap between text, buttons, and sections is a multiple of the same small number. It's why nothing on the page looks squeezed or randomly placed.

Corners are rounded the same amount everywhere

Small rounding on buttons, a bit more on cards, and the most on big panels — one scale, no guessing.

DESIGN SYSTEM

Corners are rounded the same amount everywhere

Small rounding on buttons, a bit more on cards, and the most on big panels - one scale, no guessing.

WIREFRAME

Low Fidelity Wireframe highlights structure and interactions, helping refine usability before moving to final designs.

TASKHIVE

Remote Team Management SaaS System

Overview

TaskHive helps remote teams manage tasks and stay on schedule. This case study shows how the site was designed — and explains, in plain terms, why each choice was made.

TaskHive helps remote teams manage tasks and stay on schedule. This case study shows how the site was designed and explains, in plain terms, why each choice was made.

Overview

ROLES

UI/UX Designer

Wireframing

Prototyping

ROLES

UI/UX Designer

Wireframing

Prototyping

PAGES

Landing

Pricing

Mobile

PAGES

Landing

Pricing

Mobile

TOOLS

Figma

TOOLS

Figma

TASKHIVE

MOBILE

The mobile version doesn't just squeeze the desktop page sections were rearranged to work with one thumb and a narrow screen.

On the landing page, the row of features becomes a simple stack — one card at a time, easy to scroll.

On pricing, the three side-by-side plans become tabs you can switch between with one tap.

PRICING PAGE

Make the right choice obvious. Good pricing pages don't shout they quietly point at the plan most people should pick.

The middle plan (Pro) is a little bigger than the other wo, with the only solid purple button. That's enough to say this is the popular choice - no banner or badge needed.

Each plan builds on the last one. Basic lists 3 things. Pro says "everything in Basic" plus 3 more. Enterprise says "everything in Pro" plus 3 more. It's an easy way to show what you get for the extra money.

The FAQ starts closed. Only two questions are shown the two that actually stop someone from signing up ("what happens after the trial" and "can I cancel"). No filler questions.