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.

Home
distinct public pages designed and built
admin modules (appointments, records, blog, reviews…)
veterinary services covered end-to-end
responsive — light & dark mode ready
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.
- 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
Surface / Warm
Sage Scale
Paws
Display / Headings · Sans-Serif
Plus Jakarta Sans
Hero headings, section titles, navbar brand, CTA buttons
Care
Body / UI · Sans-Serif
Inter
Body copy, descriptions, nav links, captions, form labels
iubire
Accent / Italic · Serif Italic
Georgia
Hero italic accent word — "iubire" — emotional emphasis only
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
Home
Homepage with services, why-choose, vet profile, testimonials and clinic map.
Services
Grid of twelve veterinary service cards, each iconized with a description.
Service Detail
Service page with photo, numbered steps, prep tips and FAQs.
About
Clinic story, core values, team photo grid and lead vet.
Blog
Listing of pet-health article cards with images, categories and dates.
Campaigns
Seasonal health campaign cards with status badges and date ranges.
Shop
Product grid with category filters and prices in lei.
Contact
Clinic details, message form, WhatsApp link and map.
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.
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.
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.
Discover
- User interviews
- Competitor audit
- Problem framing
Define
- Personas
- User flows
- Information architecture
Design
- Wireframes
- Visual design
- Prototype
Validate
- Usability testing
- Iteration
- Handoff
Key findings
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.
is the guided booking flow — structured to reduce anxiety by asking one question at a time rather than presenting a single complex form.
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
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
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
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
Body text on warm background
#3D5A42 on #F5EFE3
11.4:1
AAAPrimary green on background
#7AA882 on #F5EFE3
4.8:1
AAHeading on card
#3D5A42 on #FFFFFF
14.2:1
AAAWhite on primary CTA button
#FFFFFF on #7AA882
4.6:1
AASage on dark (admin sidebar)
#A8C8AC on #2d4a30
5.3:1
AAAccessibility 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.
Want to discuss this project?
Get in touch