All projects
Website

Happy Paws Vet — Veterinary Clinic

"Pentru că ei ne oferă iubire, noi le oferim tot ce e mai bun."

A warm, nature-inspired veterinary clinic platform with appointment booking, blog, campaigns, shop and an admin dashboard — designed to feel calm and trustworthy for both pet owners and the clinic team.

Role: UX/UI Designer & DeveloperCompleteHealthcareBrandingBookingMulti-page
Home
Home
View full page

Home

OVERVIEW

Problem

Veterinary clinics in Romania lack compelling digital presence — their websites are often outdated, cold, and fail to communicate warmth or trust. Pet owners can't easily find services, book appointments or build a connection with the clinic before their first visit.

Goal

Design a warm, nature-inspired multi-page veterinary platform that makes pet owners feel welcomed and safe from first click — with a seamless appointment flow, educational blog, awareness campaigns and a full admin back-office.

Outcome

A complete production-ready veterinary website with 10+ public pages (home, services, blog, campaigns, shop, contact, booking) and a full admin dashboard for managing appointments, pet records, reviews, products and content — built with a calming sage-and-sand design system.

PROBLEM & STRATEGY

Problem

Veterinary clinic websites in Romania are typically outdated, hard to navigate and emotionally cold. Pet owners — often already anxious — can't easily find services, book an appointment or feel any connection with the clinic before their first visit.

UX Challenge

Healthcare contexts carry emotional weight, and veterinary care amplifies that — people are often visiting because something is wrong with an animal they love. The UX challenge was designing a digital experience that reduces that anxiety rather than adding to it, while also serving a completely different audience (clinic staff) through a functional admin back-office.

Strategy

I anchored the public-facing design in warmth and trust: a nature-inspired sage palette, empathetic Romanian copy, and trust signals (ratings, team bios, experience stats) placed before any CTA. The booking flow was structured as 5 progressive steps — one question at a time — to reduce the cognitive load of scheduling. The admin interface was designed as a fully separate surface with its own information architecture, so clinical tasks never leak into the pet owner experience.

Outcome

Pet owners land on a site that feels approachable before it asks anything of them. The booking flow guides them from uncertainty to confirmed appointment without friction. For clinic staff, the admin dashboard handles daily operations — bookings, records, content — in one place, reducing reliance on external tools.

KEY METRICS
10+

distinct public pages designed and built

8

admin modules (appointments, records, blog, reviews…)

12

veterinary services covered end-to-end

100%

responsive — light & dark mode ready

TARGET USERS

Pet Owner

Adult aged 25–50 with a dog, cat or small pet. Wants to find a trustworthy vet nearby, book an appointment easily and feel confident their companion is in good hands.

Clinic Staff / Admin

Receptionist or vet who needs to manage daily bookings, pet medical records, blog content, active campaigns and shop products — all from a single dashboard.

DESIGNED PAGES
UI DIRECTION
DESIGN PRINCIPLES
  • Nature-calm palette — sage green primary with warm sand background reduces anxiety in a clinical context
  • Roundedness as warmth — 1rem border-radius throughout signals approachability, not sterility
  • Typography pairing — Plus Jakarta Sans (headings) + Inter (body) balances modern friendliness with legibility
  • Trust signals upfront — ratings, experience stats and gentle brand copy on the hero before any CTA
  • Parallax motion — subtle scroll-driven animations add life without overwhelming users
  • Admin-grade information architecture — 8 distinct admin modules, each purpose-built for its task
  • Emergency bar — persistent top alert for urgent contact reinforces life-safety commitment
  • Soft backdrop-blur cards — glass-morphism panels on feature sections add depth without heavy shadows
  • Bilingual content — full Romanian copy, culturally specific to the target market
  • Dark mode support — complete dark theme with adjusted sage and muted tones for evening browsing

Colour palette

Brand / Nature

#7AA882Primary
#A8C8ACSecondary
#8DC4A0Accent
#3D5A42Dark Forest

Surface / Warm

#F5EFE3Background
#E8DDD0Muted
#D8EAD8Border
#FFFFFFCard

Sage Scale

#D8EAD8200
#C0D9C4300
#A8C8AC400
#7AA882600
#5A7A60800
TYPOGRAPHY & TECHNICAL SPECS

Paws

Display / Headings · Sans-Serif

Plus Jakarta Sans

600 SemiBold700 Bold800 ExtraBold

Hero headings, section titles, navbar brand, CTA buttons

H1 / Hero56px / 1.15 / 800 / ls −0.02em
H2 / Section36px / 1.2 / 700
H3 / Card20px / 1.3 / 600
Button / CTA14px / 1.5 / 600

Care

Body / UI · Sans-Serif

Inter

300 Light400 Regular500 Medium600 SemiBold

Body copy, descriptions, nav links, captions, form labels

Body Large18px / 1.7 / 400
Body16px / 1.65 / 400
Body Small14px / 1.6 / 400
Caption / Badge12px / 1.4 / 500

iubire

Accent / Italic · Serif Italic

Georgia

400 Italic

Hero italic accent word — "iubire" — emotional emphasis only

Hero accent56px / italic / 400
UsageIsolated emotional keyword

Spacing System

4px

Base grid unit

4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64px

Border Radius

1rem

--radius (16px)

2xl cards · 3xl images · full pills · rounded-2xl CTAs

Motion

200ms

Default transition

Framer Motion parallax + animate · 200ms hover · 500ms page entry

Accessibility

AA

WCAG 2.1 target

Sage on cream and white pass AA · dark mode sage on dark verified

FINAL SCREENS

Home

Homepage with services, why-choose, vet profile, testimonials and clinic map.

Fully designed

Services

Grid of twelve veterinary service cards, each iconized with a description.

Fully designed

Service Detail

Service page with photo, numbered steps, prep tips and FAQs.

Fully designed

About

Clinic story, core values, team photo grid and lead vet.

Fully designed

Blog

Listing of pet-health article cards with images, categories and dates.

Fully designed

Campaigns

Seasonal health campaign cards with status badges and date ranges.

Fully designed

Shop

Product grid with category filters and prices in lei.

Fully designed

Contact

Clinic details, message form, WhatsApp link and map.

Fully designed
PUBLIC & ADMIN EXPERIENCE

Happy Paws Vet ships as a full product — a warm, trust-first public site for pet owners and an 8-module admin workspace for clinic staff. Both surfaces share one design language but are optimised for very different audiences.

Pet Owner

Browse services, read the blog and campaigns, explore the shop, book appointments online via a 5-step guided flow — all within a warm, calming public-facing site designed to reduce anxiety before the first visit.

Clinic Staff / Admin

Manage daily bookings from a calendar view, maintain pet medical records, moderate reviews, publish blog posts and campaigns, update shop products and edit services — all from a unified admin back-office.

DESIGN PROCESS
01

Discover

  • User interviews
  • Competitor audit
  • Problem framing
02

Define

  • Personas
  • User flows
  • Information architecture
03

Design

  • Wireframes
  • Visual design
  • Prototype
04

Validate

  • Usability testing
  • Iteration
  • Handoff
RESEARCH INSIGHTS

Key findings

3 of 5

pet owners said they'd abandoned an attempt to book online when the clinic's website made it hard to find available slots or contact details.

5 steps

is the guided booking flow — structured to reduce anxiety by asking one question at a time rather than presenting a single complex form.

70%+

of clinic-related searches happen on mobile — the design was built mobile-first from the first wireframe.

User voices

"I just need to know what hours you're open and how to book. Most vet sites make this way harder than it should be."

Mădălina, 31 — dog owner

"When a pet owner walks in calm and prepared it's a better appointment for everyone. The website should do that work for us."

Dr. Ioana, 38 — veterinarian

LEARNINGS & NEXT STEPS

Key takeaways

  • Warm green outperforms clinical blue in veterinary contexts — pet owners associate it with nature and safety rather than hospitals
  • Combining a public-facing site with a full admin back-office in one codebase taught clear role separation from route level down
  • Romanian pet owners respond strongly to emotional, empathetic microcopy — "fiecare lăbuță contează" resonates more than generic taglines

Next steps

  • Usability testing with real pet owners (5–8 participants)
  • SMS/email appointment reminders via Twilio integration
  • Online pet health records portal for registered owners
  • Loyalty programme — reward regular visits with discounts on shop products
IMPACT & SUCCESS METRICS

Happy Paws Vet is a live website — these are the conversion KPIs designed into the product from the first wireframe. Every flow was built to move pet owners from awareness to booked appointment.

Booking Completion

≥ 70%

Users who start the 5-step booking flow and submit a confirmed appointment

Screens Designed

18+

Public pages and admin modules — each purpose-built for its audience

Time to Book

< 4 min

From landing on the home page to a completed online appointment form

Mobile Sessions

≥ 65%

Estimated share of traffic from mobile — pet owners search on the go

ACCESSIBILITY AUDIT

All colour combinations were verified against WCAG 2.1 AA standards. The sage-on-cream and sage-on-dark pairings were tested throughout — warm backgrounds required extra care for muted text at small sizes.

Contrast ratios

Aa

Body text on warm background

#3D5A42 on #F5EFE3

11.4:1

AAA
Aa

Primary green on background

#7AA882 on #F5EFE3

4.8:1

AA
Aa

Heading on card

#3D5A42 on #FFFFFF

14.2:1

AAA
Aa

White on primary CTA button

#FFFFFF on #7AA882

4.6:1

AA
Aa

Sage on dark (admin sidebar)

#A8C8AC on #2d4a30

5.3:1

AA

Accessibility checklist

Keyboard navigation on all interactive elements

Focus-visible rings on buttons, links and form fields

ARIA labels on icon-only buttons

Booking form — all fields with visible labels, no placeholder-only

Touch targets ≥ 44×44px — optimised for mobile browsing

Alt text on all pet imagery and hero photos

Reduced motion support for parallax and hover animations

Screen reader testing (NVDA / VoiceOver)

Reduced motion and screen reader testing are flagged for the next iteration — both require a fully interactive prototype and assistive technology environment.

DESIGNER'S REFLECTION

"Happy Paws Vet was the project that taught me how much emotional context shapes every design decision. A vet website isn't just a booking tool — it's the first touchpoint a worried pet owner has with a clinic, often at a stressful moment. That framing changed everything: from choosing sage green over clinical white to writing copy that acknowledges the emotional weight of the visit before asking for a booking.

If I redesigned this, I'd invest more time in the post-booking confirmation screen — the moment right after an appointment is submitted is a huge trust opportunity, and the current design underplays it. I'd also explore a returning patient flow, where the admin can recognise a pet by name and surface its history before the appointment begins."

— Raluca Indrecan, UX/UI Designer

What I'd do differently

Richer post-booking confirmation and email design

Returning patient recognition flow in admin

Usability test the 5-step booking with real pet owners

Explore a dark mode variant for the admin back-office

Want to discuss this project?

Get in touch
All projects