Corporate website of the MergifAI
00
problem
As the company's first product designer, I had to design a corporate website and three standalone product landing pages (Docs Wizard, CPM, BPC Agents) with no existing design system. Several tensions had to be solved at once: No shared visual language — each product risked looking like it came from a different company. Complex, technical AI products explained to a non-technical B2B audience (SME owners, accountants, ops leads). A trust barrier — companies had to feel safe handing over sensitive financial data. Three distinct products that each needed their own message while still feeling like one family. A small in-house tech team, so designs had to be feasible on the real stack, not just pretty.
solution
I built the visual foundation first, then designed on top of it so consistency was structural, not manual. Design system. Created a shared UI Kit and brandbook — buttons, headings, form fields, and brand rules — so every page reused the same components and MergifAI's whole digital presence spoke one language. Corporate website. Designed the main site (home, about, products, contacts + 404) across desktop and mobile — 5 pages, 10 screens — leading with the problem MergifAI solves rather than AI buzzwords. Three product landings. Built a dedicated landing for each product (Docs Wizard, CPM, BPC Agents), keeping the page structure consistent but tailoring each homepage message to what that product actually does. Responsive by design. Every page adapted per breakpoint for desktop and mobile, rather than shrunk.
Process
Alignment first. Started with the CMO and tech team before the canvas — defined positioning and per-product messaging, and mapped engineering constraints (code-based frontend/backend on the company's own servers, WordPress where non-designers edit content quickly).
Exploration. Studied comparable AI/SaaS products on Dribbble and Behance, then chose a direction that fit MergifAI's brand instead of following a trend.
Architecture. Structured the narrative from "what is this" → "who's behind it" → "which product fits me" → "get in touch."
System → screens. Established the UI Kit, then designed all pages on top of it for speed and consistency.
Handoff. Delivered designs with the stack in mind and documentation (Figma links) attached, keeping implementation close to intent.
Impact
One consistent visual identity across a 3-product portfolio and the corporate site.
A reusable design system that cut production time and lets the brand scale as new products ship.
A clearer first impression that translates complex AI into a message a non-technical buyer understands and routes each visitor to the right product.
What I learned Designing for a technical product is mostly translation — turning business goals, engineering limits, and user needs into screens a non-technical buyer gets instantly. The biggest lever wasn't the UI; it was building the system and aligning marketing, tech, and design before opening Figma.
year
2026
timeframe
2 weeks
tools
Figma, Claude Design
category
Product Design
01
02
03
04
05
