No. 10 · Veterinary clinic

Northpaw Animal Hospital

A vet clinic website that starts by asking "What brings you in today?" and gives each answer its own next step, including an emergency check.

Classification
Independent concept
Business
Northpaw Animal Hospital (fictional)
Project type
Single-page website concept
Year
2026
Type
Nunito
Desktop view of the Northpaw Animal Hospital concept: an orange emergency bar, a teal hero with the headline "Good care for every pet, from the very first visit" and a white card asking "What brings you in today?" with five choices.
Desktop, first screen. Real screenshot of the concept site.

The brief

The brief

Design a website for a neighborhood veterinary hospital. Visitors arrive with very different needs, from a routine vaccine to a pet that might be seriously ill. The site has to sort them quickly, make emergency information impossible to miss, and keep hours and booking simple.

Goals

  1. 01Get each visitor to the right next step in one tap
  2. 02Make emergency and after-hours information visible on every screen
  3. 03Show whether the clinic is open right now
  4. 04Make booking feel calm and clear

On every screen

Designed for phones first

The Northpaw concept on a phone, with the emergency bar, open-now status and headline.
The "What brings you in today?" choices on a phone.
Phone, 390 px wide.
The full Northpaw homepage on desktop, with the visit chooser, hours table, new-client steps and appointment form.
Desktop, the whole page. Scroll inside the frame to see it all.

The work

The approach

A vet clinic’s visitors are rarely browsing. They have a reason, and sometimes it’s frightening. So the page leads with a question, “What brings you in today?”, and five large choices. Each one shows what that visit involves, what to bring and the right button.

Teal and mint feel clinical but kind. Tangerine is kept for one job only: emergencies. Nunito’s rounded shapes make the whole site feel friendly without looking childish.

Decisions worth noting

  • Emergencies are never more than a glance away. A tangerine bar above the header carries the daytime and after-hours numbers on every screen.
  • “It might be urgent” is a real option. It opens a short checklist of warning signs. Tick any of them and the page tells you to call now, or gives the after-hours clinic’s number if the hospital is closed.
  • Open or closed, right now. The header works out the status from the hours table and says when the clinic opens next.
  • No double entry. Choosing “Book a wellness exam” fills in that reason on the form.

How it’s built

One static page. The chooser uses real radio buttons and the checklist uses real checkboxes, so both work with a keyboard and a screen reader. A few lines of JavaScript handle the panels, the checklist answer and the opening hours.

What would change for a real client

The clinic’s real hours, doctors and services, the actual nearby emergency hospital, and a link to their practice-management booking system.

What’s on the site

Features actually built

  • Emergency bar with daytime and after-hours numbers above the header
  • "What brings you in today?" chooser with five visit types and tailored next steps
  • Red-flag checklist that tells you whether to call now or book a same-day visit
  • Live open/closed status worked out from the hours table
  • Booking buttons that fill in the visit reason on the form
  • Appointment request form (demonstration only, nothing is sent)

Palette

  • Teal#0B6E69
  • Mint#E3F4EF
  • Tangerine#F28C28
  • Deep green#12302E