Sonrisa Group
Lead Designer — Website & brand experience for a B2B SaaS consulting firm
Role & Setup
Lead designer for a 2-week sprint
Sonrisa Group came to me needing a website that could earn the trust of enterprise B2B SaaS clients without losing the warmth their name («Sonrisa» = smile in Spanish) implies. I owned the project end-to-end: brand strategy, IA, UX, UI, accessibility audit, and production-ready code.
My Role
Lead Designer & Strategist
Single point of accountability across 2 pages: brand voice, IA, UX, UI, motion direction, accessibility, dev handoff.
Build Model
Solo designer × AI eng pair
Two-week sprint. I drove every product call; AI accelerated palette exploration, copy variants, and Tailwind component scaffolding.
What I Owned
- Brand positioning & voice
- Information architecture (Landing + Services)
- Visual system & motion direction
- End-to-end UX & UI
- Wave SVG dividers & canvas hero
- WCAG 2.1 AA accessibility audit
- Responsive HTML/CSS/JS production
Honest scope note: Sonrisa's team handled their own service offerings copy. I handle CRM integration, design and deployable code.
The Why
How a consulting firm earns trust without going cold
The B2B SaaS consulting market is full of two extremes: cold corporate sites that read like enterprise brochures, or scrappy startup sites that don't earn enterprise dollars. Sonrisa needed a third path.
The brief was specific: convey deep technical credibility for high-growth SaaS clients, protect the warmth behind their brand name (Sonrisa = smile), and drive qualified inquiries — without feeling salesy. The challenge: thread that needle in a single visual system.
Overview
What was built
A full website (Landing + Services pages) with a deliberate emotional arc: dark navy hero that commands authority, transitioning through wave dividers into warm cream sections that invite reading. Animated canvas, counter animations, and accessibility baked in from the first sprint day.
In Context
Dark navy hero, warm cream body
An immersive dark hero with animated canvas + floating glow blobs creates first impact. Custom SVG wave dividers transition smoothly into warm cream content sections that invite a slower read.
Color & Typography
Navy depth meets warm cream
The palette is anchored by a deep navy that conveys authority and trust, balanced with warm cream that prevents the corporate coldness common in enterprise SaaS. Strategic blue accents guide the eye toward calls to action.
Headlines — Lora
The Human Side
Serif · Brushed curves · Gravitas with warmth
Body — Inter
Clean & Legible
Sans-serif · Open apertures · Tall x-height for screen reading
Sections Designed
Six sections, one cohesive emotional arc
Each section was designed to guide the visitor from initial impact to conversion, with a deliberate emotional shift from authority (dark hero) to approachability (cream body) to action (gradient CTA).
Hero with Animated Canvas
Full-viewport dark hero with particle animation, floating glow blobs, and gradient text. Two CTA buttons drive conversion above the fold.
✦ Animated CanvasServices Grid
4-column card grid with icon badges, subtle borders, and hover-lift animations. Each card is a clear entry point to a capability.
✦ Card GridAbout Section
Counter-animated statistics (150+ projects, 98% retention) paired with narrative about the company's mission and culture.
✦ Counter AnimationPartners & Trust
Logo strip with subtle grayscale-to-color hover effect, providing enterprise social proof and trust signals at a glance.
✦ Trust StripCTA Section
Dark navy contact section with gradient-bordered CTA button, creating a strong visual endpoint that drives inquiries.
✦ Gradient CTAFooter
Clean footer with navigation, contact info, and social icons — consistent with the dark-to-light brand language throughout.
✦ Brand FooterDecisions & Tradeoffs
Three calls where the obvious answer was wrong
Every design call is a tradeoff. Here are three places where the safe answer would have hurt Sonrisa's positioning, and the rationale for what I shipped instead.
How dark should the brand actually be?
Option A
All dark, all the time
Maximum authority, but reads as cold corporate — loses the «Sonrisa» warmth completely.
Option B
All light cream, soft brand
Warm and friendly, but loses the technical credibility B2B SaaS buyers need to take a consultancy seriously.
Chosen · C
Dark hero → cream body via wave dividers
First 100vh = dark navy authority. Wave dividers transition into cream body for readability and warmth.
Why C: Trust is built in two beats: first impact (hero needs to feel serious) + reading time (body needs to feel inviting). One palette can't do both. The wave divider is the literal handoff from authority to warmth.
How much motion is too much?
Option A
Heavy: video bg, parallax, 3D
Looks impressive in a portfolio shot, but kills page weight (LCP > 4s) and excludes lower-end devices.
Option B
Static, zero motion
Fastest possible load, but B2B SaaS buyers compare you to Linear / Vercel — no motion = looks dated.
Chosen · C
Lightweight canvas particles + counter + hover-lift
Three motion elements only. Each < 5kb JS, GPU-accelerated, respects prefers-reduced-motion.
Why C: Motion is a credibility signal in 2026 B2B, but only if it's purposeful. Canvas particles signal «modern technical» in the hero; counter animation rewards scroll; hover-lift teaches interactive affordance. No more, no less.
Where do accessibility tradeoffs land?
Option A
WCAG AAA, max contrast everywhere
Highest accessibility but kills the warm cream/blue subtleties; the brand starts to look generic.
Option B
Skip a11y, focus on look
Visually rich, but excludes ~15% of enterprise users (and most enterprise procurement requires AA).
Chosen · C
WCAG 2.1 AA on 100% of interactives, brand on backgrounds
Body text and CTAs hit AA contrast minimums; decorative gradients keep brand identity. 44px touch targets enforced.
Why C: Enterprise procurement teams check WCAG compliance — failing AA disqualifies you from contracts. AAA is over-engineering for marketing sites. The right line is AA on what users interact with, brand identity on what they read past.
Status & Measurement
What shipped, what we're measuring, and how
Sonrisa's site is live and in active iteration. Rather than claim numbers that aren't in yet, here is the full picture: shipped scope, the bets the design is making, and the measurement plan.
Shipped · Scope Metrics
What was built & delivered in 2 weeks
- 2Production pages: Landing + Services, fully responsive across 4 breakpoints
- 6Distinct sections per page, each with its own emotional purpose
- 3Motion elements (canvas particles, counter, hover-lift) all GPU-accelerated & reduced-motion safe
- 100%Interactive elements WCAG 2.1 AA compliant (color contrast, focus states, semantic HTML, 44px touch targets)
- 6Color tokens forming the navy & cream system; 2 type families (Lora + Inter)
- < 200kbJS payload total (canvas + animations + Tailwind utilities)
Hypotheses · Being Measured Now
The five bets the site is making
Dark navy hero + animated canvas signals «modern serious technical» in 3 seconds — reduces hero bounce vs the typical B2B consultancy site.
Target: hero bounce rate < 35% (vs ≈ 55% B2B benchmark) · Measured via: GA4 + Hotjar exit pointWave divider transition + warm cream body extends reading time on the Services page — visitors scan the full capability range.
Target: > 60% scroll depth on Services page · Measured via: Hotjar scroll heatmapGradient-bordered dark CTA section near footer drives qualified inquiries (vs scattered CTAs throughout).
Target: > 1.5% inquiry conversion rate · Measured via: form submit eventsLightweight motion + optimized assets keep the site fast on enterprise hardware — no bounce from slow load.
Target: Lighthouse Performance > 90, Accessibility 100, Best Practices > 95 · Measured via: PageSpeed InsightsMobile-first design + 44px touch targets keep mobile inquiry rate within 80% of desktop (vs the typical 50% B2B drop).
Target: mobile inquiry rate >= 80% of desktop · Measured via: device-segmented funnelMeasurement Plan
How we'll know
- Day 30Quantitative read on H1 & H2 + 5 user-test recordings
- Day 60Inquiry conversion (H3) + Lighthouse re-audit (H4)
- Day 90Mobile/desktop parity review (H5) + iteration plan
Tools
Stack for evidence
Funnels for inquiry conversion, heatmaps for layout validation, PageSpeed for performance truth, axe for accessibility regression checks.
Client Reflection
Why this matters to Sonrisa
Siria captured exactly the duality our brand needed — serious enough for enterprise, warm enough to live up to our name. The site finally feels like us. We're already getting better-qualified inbound conversations.
AI-Enhanced Workflow
How AI compressed a 6-week scope into 2 weeks
The premise
A two-page B2B SaaS marketing site — with custom canvas animation, accessibility audit, and motion direction — would have been a 6-week project in a traditional agency model. AI didn't replace the design or strategic thinking. It removed the friction that used to require a five-person team. I made every call. AI executed the boring middle.
Discovery & Positioning
Analyzed 10 competitor B2B consultancy sites; surfaced common patterns & the differentiation gap (warmth without sacrificing authority).
Interviewed Sonrisa's leadership team. Killed AI-suggested patterns that flattened the brand. Made the call: dark-to-light arc.
Visual System & Motion
Generated palette options around «serious + warm» brief. Suggested 6 type pairings.
Every taste call: navy hex, Lora × Inter pairing, wave SVG curves, canvas particle physics, motion duration tuning.
Production Code & Accessibility
Scaffolded responsive HTML/CSS/JS from Figma specs, generated Tailwind utility patterns, drafted canvas particle script.
Refined every interaction (hover-lifts, gradient borders, wave dividers). Ran axe accessibility audit, fixed every AA violation by hand.
Launch & QA
Ran Lighthouse audits on every iteration, summarized findings into prioritized action items, drafted SEO meta tags.
QA on 6 viewports, fixed motion bugs the AI missed, deployed to sonrisa.group, set up GA4 + Hotjar tracking.