LogoJesús Hernández

Six health programs,
one site built to be found

Visit website

The client

Fundación Patricio Pataro is a foundation that works on medical training, research and healthcare management. It runs six programs, for the doctors, institutions and families they reach.

An end-to-end project, by one person: I designed the website, developed it, tested it and launched it to production.

Client
Fundación Patricio Pataro
Sector
Healthcare · Foundation
Scope
Design & Development
Role
UX/UI Designer & Developer
Stack
NextJS · ReactJS · TailwindCSS · Figma · Design System · Accessibility

01The challenge01 / 06

The front door to six health programs. It had to explain a lot in little time, feel as trustworthy as the people behind it, work on any phone, and be found.

02Process02 / 06

From the first conversation
to launch day

How a website gets made end to end: designed, developed, tested and launched, with the client seeing and approving something real at every step, long before there is code.

  1. DiscoveryListen firstKickoff with the foundation to learn what it does, who it serves and what the site has to achieve.The client getsA shared brief with goals and audiences
  2. IdeationStructure before pixelsSitemap and wireframes, with the six programs on one shared template, so hierarchy is settled before styling.The client getsSitemap and wireframes to review
  3. DesignShow it, don't describe itA clickable Figma prototype with the identity applied: the client navigates it, and a change costs minutes.The client getsA clickable prototype, revised and signed off
  4. DevelopmentDesign into codeThe approved design built with Next.js and Tailwind CSS, with SEO and performance done alongside the pages.The client getsA preview link to follow progress
  5. TestingCheck it before anyone else doesEvery page reviewed on phone, tablet and desktop, then measured with Lighthouse for speed, SEO and layout shift.The client getsA tested site, ready to go live
  6. LaunchLaunch and hand overDeployment on Vercel under the foundation's own domain, and the site handed over live and measured.The client getsThe live site, on their domain

03Visual identity03 / 06

Human first,
clinical second.

A foundation asks for trust before it asks for anything else. The identity is built to feel like the people in it: warm in its type, calm in its color, and precise in everything else.

A serif that sounds like a person

Source Serif 4 gives headings a human voice; Inter keeps everything else clear.

Innovación y cuidado para una vida más saludableSource Serif 4· Headings · Semibold, Bold
Impulsamos la excelencia médica mediante educación, investigación e innovación.Inter· Body and interface · Regular to Bold

One blue, used with restraint

One blue does the talking; teal is the only second voice.

Blue
PrimaryPrimary darkPrimary hover
Accents
SecondaryTeal
Surfaces
SkySoft blueBackgroundBorder

04Responsive04 / 06

Built for the phone in someone's hand

Most visitors arrive on a phone, so every screen was designed for it, not shrunk down.

Layout

One design, three sizes

The same content, ordered for each screen instead of shrunk to fit it.

Desktop · 1440
Two columns: the message beside the photo collage.
Tablet · 768
One column, with the collage moving under the text.
Mobile · 390
A full-height menu and the action within thumb reach.
Desktop1440Tablet768Mobile390
Home page at desktop size
Home page at tablet size
Home page at mobile size

05Technology05 / 06

A stack chosen for speed and upkeep

A foundation's site has to stay fast and keep working without an engineering team behind it. Each piece of the stack is there to remove a class of problems, not to add a feature.

  • Next.jsEvery page built ahead of time and served as HTML.
  • ReactOne component library behind all ten pages.
  • Tailwind CSSThe Figma tokens, written once as theme values.
  • FigmaDesign, prototype and the tokens behind the code.
  • VercelDeploys from Git, served from the edge.

06Search06 / 06

Built to be found

When someone searches for the foundation, the site is there. It was built from day one so Google understands every page.

Speed

Fast is part of being found

Google favours sites that open quickly, and people don't wait for slow ones. This one is on screen in under a second.

  • 96/ 100Speed
  • 100/ 100Search

On every page

Everything Google needs to understand it

Each page tells search engines what it is about, so the right page shows up for the right search.

  • A title and summary per page
  • Who the foundation is, for Google
  • A clear page structure
  • A map of every page
  • Previews when a link is shared
  • Images described in words
See it livefundacionpatriciopataro.com