Skip to content
Luca Leone.
Back to projects
HUGAcademic · real client

Web development · Blood donation

The HUG are investigating

Three in ten people booked for a blood drive were leaving without being able to give.

We turned the eligibility questionnaire into a detective investigation, so that everyone knows whether they can give before they book.

Visit the live site(opens in a new tab)
Context
HEIG-VD integration project, commissioned by the HUG
Year
2026
Duration
4 weeks
My role
Full-stack developer, concept and UX/UI
Team
7 students
Tools
Laravel, Vue 3, MySQL, Figma
HUG – Digital campaign & web platform

The problem

30% of people who book cannot give blood on the day.

Our answer

Check your eligibility before booking, by leading the investigation.

The result

A site live for a year and the top grade: 6/6.

Three in ten, lost before they arrive

The Geneva University Hospitals (HUG) are the canton’s public hospital group. Their Blood Transfusion Centre has to keep blood reserves all year round, and part of the donations comes from blood drives held directly in Geneva companies, from banks to luxury brands.

of donations come from company blood drives
10%of donations come from company blood drives
of people who book end up unable to give
30%of people who book end up unable to give

The problem shows on the day itself: a recent vaccine, a trip, a fever, and the donor leaves without giving. Our brief: boost these blood drives.

Seven investigators, four weeks

The seven team members photographed against a height chart, each holding a sign with their name and role

There were seven of us, working in Scrum. I was the full-stack developer: a large part of the Vue 3 front end (public pages, the survey, company pages, label, trophy, kit), part of the Laravel back end, and my share of the concept and UX/UI.

What if the donor led the investigation?

Eligibility questionnaires are administrative checklists that people often discover too late. We turned them into an investigation: the agent’s file is examined criterion by criterion, without ever making anyone feel guilty. “Suspect” became “wanted profile”.

Flip chart covered with ideas written in marker during a brainstorm
Brainstorm
Hand-drawn wireframe of a page of the site
Paper wireframes
Pencil sketches of the label and the trophy
Label and trophy sketches

From wireframe to website

Admin dashboard on the live site, with the figures and the trophy ranking
Greyscale wireframe of the admin dashboard
WireframeLive site
The admin dashboard, from wireframe to live site. Drag to compare.
  1. Home page: “The HUG are investigating”, with a magnifying glass over a drop of blood

    01 / 06

    The home page speaks to companies: “The HUG are investigating”. It presents the programme and lets a company sign up.

  2. Banque Cantonale de Genève page, in red: “One blood donation saves 3 lives. A 7-minute mission.”

    02 / 06

    Each company gets its own page, in its own colours: one donation saves three lives, a seven-minute mission.

  3. Corkboard with cards linked by red threads: “What is blood donation?”

    03 / 06

    On the same page, an evidence board answers the questions people don’t dare to ask: does it hurt, how long does it take.

  4. Survey question on a kraft-paper file: “Are you between 18 and 75?”

    04 / 06

    The survey uses the official criteria, asked like interrogation questions. At the end, eligible people book an appointment; the others pass the survey on to a colleague.

  5. 2026 trophy ranking with a podium of three companies

    05 / 06

    Every company that holds a blood drive receives the Label 100 pour Sang; the Trophée Sangsationnel ranks the most committed ones.

  6. Admin analytics page: funnel, drop-offs per question, devices and sources

    06 / 06

    The transfusion centre follows everything from its admin area, down to the question where people drop out of the survey.

Under the hood, eligibility is calculated on the server: the browser never receives the answers that disqualify. And no personal data is stored, as medical confidentiality requires.

Vue 3

Browser

Receives the questions, never the criteria

Laravel

Server

Strips the criteria, calculates eligibility

MySQL

Database

Anonymous token, company, eligible: yes or no

The disqualifying criteria never leave the server.

The campaign: the same investigation, everywhere

The website was only part of the answer. With the marketing and UI team, we carried the investigation onto every medium a company can use: posters, flyers, a roll-up for the day of the drive, intranet banners, social media, a video for office screens and even stickers for donors. It all comes in a kit each company downloads from the site.

Black poster “Are you the wanted profile?” with a fingerprint under a magnifying glass
Poster “1 donation can save 3 lives, are you eligible?” in a blood bag with a detective hat
White poster “Are you the wanted profile?”
A3 and A4 posters, in black and white versions.
The video shown on company screens, in corridors and break rooms.
Front of the flyer: “Are you the wanted profile?”
Back of the flyer with the date, place and times of the blood drive
Campaign roll-up with the magnifying glass over the fingerprint
The double-sided A5 flyer, adapted to each blood drive, and the roll-up for the day.
Carousel slide: “The clues are clear”
Carousel slide: 700 donations needed every day
Carousel slide: one person in three will need a transfusion
A carousel for Instagram and LinkedIn that explains blood donation in figures.
Dark intranet banner: “We are holding a blood drive!”
Light intranet banner: “Help your company win the Trophée Sangsationnel”
Banners for company intranets, in dark and light versions.
Round “Certified donor” sticker with the detective hat
Round “Winner 2025” sticker with the trophy hand
Stickers handed to donors and to winning companies.

Results

project grade
6/6project grade
questions, about 7 minutes
24questions, about 7 minutes
languages
4languages
« The investigation-based concept is very original and brings an interesting approach to better engage the target audiences. »
Feedback from the HUG

What I take away

I loved working with this team: seven very different profiles, and real mutual support from the first day to the last. I’m proud of what we built, and of my part in it.

I really enjoyed the Scrum rhythm, with a stand-up every morning and a sprint every week. And answering a real brief changes everything: you’re no longer coding for an exercise, but for people who will use it.

Above all, I enjoyed leading a full-stack project without limiting myself to code: thinking through the concept and the experience, then building them from the database to the screen.

Credits

  • Luca Leone · Full-stack developer
  • Romain Blanchard · Product Owner
  • Étienne Bergeon · Scrum Master
  • Christophe Cunha · UX/UI designer
  • Aissya M’Ghirbi · UX/UI designer
  • Liliana Kolmakova · Marketing and communication
  • Marc Bridy · Marketing and communication

Integration project of the Bachelor in Media Engineering, HEIG-VD, for the HUG Blood Transfusion Centre.