I'm 16, a rising junior at Milpitas High School. My grandmother is fighting glioblastoma — one of the most aggressive forms of brain cancer. I built this website because I watched the people caring for her struggle with a system that wasn't designed for them. And because 30 seniors at the Milpitas Community Center signed up in a single afternoon, which confirmed the need was exactly as large as I thought.
Website vs. app — a quick distinction. MediMate Foundation has two products: this website (marketing, trust-building, donation, community outreach — what this case study covers) and a separate iOS app (patient health tracking, caregiver coordination, AI health insights). I built the website. The app is what the website persuades people to try.
What the design work actually produced
I didn't set out to build something that would grow this fast. I set out to make a website that would help people find the support they needed. These are the things that happened when real people found it.
Committed in donations from sponsors and donors in year one
National healthcare organizations joined as strategic partners
Reach — visitors from across the US and internationally within months
Student teams from countries worldwide registered for the AI Healthcare Hackathon
Strategic partners brought in through the website
“Truly a work of art by a High Schooler.”
— patients, caregivers, families, partners, and sponsors, on seeing the website for the first time
American Cancer Society · American Kidney Fund · Partners
The fit, finish, and polish of the website gave national organizations the confidence to enter formal partnerships with a foundation that, at the time, was less than a year old. The design had to signal credibility at a glance. It did.
Individual donors · Corporate sponsors
More than $10,000 in committed donations in year one came from people who first encountered MediMate through the website. The word that came back most often was not 'impressive' — it was trustworthy. That's not copywriting. That's design.
Patients · Caregivers · Families
Cancer patients, dialysis patients, caregivers at the end of long shifts. The consistent response wasn't about aesthetics — it was recognition: 'This feels like it was made for someone like me.' That is the highest compliment design can receive.
I didn't design this to impress people. I designed it so that a frightened caregiver landing on the page at midnight would feel like someone understood what they were going through. The fact that it also impressed the American Cancer Society and brought in donors and partners — that happened because the empathy was real, not because the design was polished.
My grandmother has Glioblastoma — an aggressive brain cancer where average survival is measured in months. When I visited her, I started paying attention to the caregivers: three rotating through her week, each doing their best with incomplete information. Medication schedules on paper. Vitals in a Notes app. No shared record of what happened the shift before. Each new caregiver was starting from zero.
When I joined MediMate Foundation — a nonprofit started by a kidney transplant survivor — I saw the same problem at scale. Whether a patient is recovering from a transplant, living with chronic kidney disease, or fighting cancer, the experience is the same: overwhelming, isolating, and managed mostly alone. The foundation had an iOS app in development. What it didn't have was a website that could build enough trust for someone to try it — or donate. That was my job.
“The hardest design constraint I gave myself: when a caregiver lands on this page at midnight because they're scared about their grandmother with brain cancer, or their mother on dialysis — what do they need to feel in the first ten seconds? Not impressed. Not overwhelmed. Seen.”— from my design brief to myself, October 2024
That question governed every decision: color, type size, button label, page order. My grandmother's illness didn't make me a worse designer. It made me a more precise one.
Before I touched a design tool, I spent weeks listening. I talked to the caregivers in my grandmother's life. I ran a sign-up event at the Milpitas Senior Community Center and in one afternoon got 30+ seniors to engage with MediMate and share what they thought. What came back directly shaped every major design decision.
Seniors signed up at Milpitas in one afternoon — cancer and kidney patients
Caregivers for my grandmother interviewed in depth — the core of my research
Additional caregiver signups through my grandmother's care network
User-testing rounds before launch — one with patients, one with caregivers
Caregiver 01 — Day Shift
“Every morning I have to figure out what happened the night before. Notes are in three places and sometimes they contradict each other.”
Six months into caring for my grandmother, who has glioblastoma. Her frustration wasn't the physical work — it was arriving each shift with no reliable context from the shift before. She asked me directly: 'If I recommend this to my agency, what would I show them?' That question — about explainability and trust — drove the How It Works page's plain-language structure.
→ Website: 'How It Works' written so a caregiver can explain it to a colleague in under 5 minutes
→ Website: Mission cards name care coordination as a headline feature
Caregiver 02 — Night Rotation
“There's no one to call at 2am when something seems slightly off. You just have to decide alone.”
She worked nights through brain cancer treatment. What she described most clearly was isolation. When I told her about the app's AI insights, she said: 'That's someone to call at 2am.' That phrase became the website's copy for the AI feature — word for word. The final How It Works step, 'The circle holds,' is her language, not mine.
→ Website: AI feature framed as 'a thinking partner, not an algorithm'
→ Website: How It Works final step copy came verbatim from this interview
Caregiver 03 — Weekend (Family)
“I wouldn't put my mother's medical data in an app unless I knew exactly who built it and why. Tell me that story first.”
My aunt. Most skeptical. Concerned about data privacy and whether tech can be trusted with something this sensitive. This single conversation changed my homepage: the founder's story moved from the About page to the hero. A 'Built by a Patient' trust card became the second thing a visitor sees. The 501(c)(3) credential moved to the first line of text after the logo.
→ Website: Founder story embedded on homepage — not buried in About
→ Website: '501(c)(3) Registered Nonprofit' as hero eyebrow — first text read
30+ Seniors — Milpitas Community Center
“If my friend uses it and it helped her, I'll try it. But I need to understand it in five minutes, not fifty.”
I set up a table during a community center gathering — people in their 70s and 80s managing complex health situations. 30+ signed up in one afternoon. The pattern was identical across both cancer and kidney groups: social proof converted instantly, feature lists did not. The most common question: 'Who made this and why?'
→ Website: Hero headline is founder-story-first, not feature-list-first
→ Website: Impact numbers band built around scale
After the conversations, I had pages of notes. Synthesizing them — turning specific things real people said into actionable design questions — was the hardest part. I used “How Might We” framing to stay in question mode rather than jumping to solutions.
Affinity mapping — major themes from 40+ conversations
HMW #1
How might we build trust with a frightened caregiver in under ten seconds of reading?
HMW #2
How might we serve three audiences — patient, caregiver, donor — from a single homepage?
HMW #3
How might we design every page for someone older, non-tech-savvy, or cognitively depleted — from the first decision, not the last?
HMW #4
How might we make it feel warm and human — not clinical, not startup-slick — without sacrificing credibility?
HMW #5
How might we add campaign and partner pages as the foundation grows, without requiring a developer each time?
HMW #6
How might we measure whether the website is actually connecting the right people with the app?
I want to be precise about “accessibility” — because in most design contexts it means a technical checklist run at the end. That's not what this is.
Here it means: designed from day one for someone older, or differently-abled, or non-tech-savvy, or exhausted from caregiving, or frightened about a diagnosis — for whom a confusing website is not an annoyance but a genuine barrier to care. Every one of the six decisions below was made before any page went live.
For: seniors with vision difficulties · bright hospital lighting · small screens
Minimum body text of 16px (Inter) and headlines at 28–60px using fluid clamp() sizing. I showed two versions to seniors and increased sizes until neither had to lean in to read. That's how the minimum was set — not from a style guide, but from watching real users read.
For: first-time users · older adults · caregivers who aren't tech professionals
Every nav label is plain and specific: 'How It Works,' not 'Platform.' 'Donate,' not 'Give Back.' The final navbar puts Donate as the highest-emphasis CTA, always visible. Every interactive element has a touch target of at least 44×44px.
For: limited health literacy · non-native English speakers · cognitively depleted users
I rewrote every section at roughly a 6th-grade reading level. No medical jargon ('post-transplant immunosuppression' → 'medication management after a transplant'). I tested by reading aloud to my aunt and watching where she paused. Each pause became a rewrite.
For: caregivers during appointments · patients on hospital wifi · family in waiting rooms
Mobile-first was the first constraint, set before any desktop layout. Every section was designed at 375px before 1280px. The site is installable as a PWA, and the manifest theme color matches the brand token exactly so the mobile status bar stays on-brand.
For: caregivers doing due diligence · skeptical older patients · anyone burned by a breach
I made the privacy page actually readable: clear headings, plain language, no buried clauses. I placed Privacy in the footer's Organization column — not just Legal — because people look for it near About-style content. Trust signals are the functional prerequisite for any other action.
For: caregivers at end of a shift · newly diagnosed patients · families of cancer patients
No autoplay video. No pop-ups. No exit-intent overlays. The count-up animation uses a cubic ease-out so it decelerates smoothly. prefers-reduced-motion disables all animation. The principle I kept returning to: this site should feel like a deep breath, not a pitch deck.
Principle 01
Healthcare design fails sterile-cold or over-designed-slick. MediMate needed neither. A single teal — trustworthy like medicine, warmer than hospital blue. Amber for human warmth. No gradients, no stock photos of people smiling at laptops.
Principle 02
37 million Americans with CKD. 500,000 on dialysis. 100,000+ on the transplant waitlist. Seniors didn't respond to mission statements — they responded to scale. The numbers got their own animated section. That pause is designed. Evidence earns trust in a way copy alone cannot.
Principle 03
The accessibility principle. If the system is designed right from the start for the most constrained user, it works better for everyone. If it's patched for them at the end, it works worse for everyone.
Principle 04
Every page ends with a CTA. The navbar always shows Donate. This isn't aggressive design — it's respect for the person who has already decided to act but can't find where. The path should be findable in under three seconds from any page.
I want to be upfront: I am not a coder. What I do have is a strong sense of what good design looks and feels like — built over years of art, graphics for clubs, and thinking about why some things communicate and others don't.
I bridged that gap through three tools used deliberately: Canva for layout and visual design, Procreate for illustration and exploration, and prompt engineering — translating precise design intentions into language technical tools could execute. Like a director working with a cinematographer: they don't operate the camera, but they know exactly what the shot should feel like.
“I didn't learn to code to build this. I learned to describe design decisions with enough precision that the right result could be produced. That's a different skill — and honestly, I think it's the more interesting one.”— reflection, after the first version shipped
Layout · Typography · Color · Visual Design
My primary design environment for visualizing every page before it was built — color combinations, typographic hierarchies, component layouts. Every design decision in this case study was prototyped in Canva before it became code.
Illustration · Visual Exploration · Mood Boarding
Where I do my most intuitive visual thinking — sketching layouts, exploring illustration directions, building mood boards. For MediMate I used it to explore what 'warm but clinical' actually looks like as texture and tone.
Technical Bridge · Design Communication
The tool I'm most deliberate about naming. I used it to translate precise design decisions into technical implementations — describing component behavior, color relationships, and accessibility requirements in enough detail that the result matched my vision. Vague prompts produce vague results; specific design intentions produce correct implementations.
Why I'm naming this explicitly
A lot of student portfolios either hide their tool use or overclaim what they built from scratch. The real skill here is design judgment: knowing what the right outcome looks like, specifying it precisely enough to be produced, and knowing how to evaluate and iterate on what comes back. The tools are just how that skill gets expressed — the same way a painter's skill isn't about the brand of brush.
Before designing any page I built a token-based design system — named values for colors, sizes, and spacing that every component references. Adjusting one token updates all ten pages at once. Consistency is enforced by architecture, not individual discipline.
Accessibility note embedded in the palette
I chose OKLCH format for perceptually uniform lightness — a 10% tint of the brand teal stays at exactly the right contrast rather than going unpredictably light. The neutral grays share a 180–200 hue angle, related to the teal, so they never feel dead against the cool background. The dark theme is a properly designed variant, not a CSS inversion.
| Page | Primary Job | Who It's For |
|---|---|---|
| / | Build trust in 10 seconds. Serve three audiences from one entry. Cancer and kidney given equal presence. | Everyone arriving for the first time |
| /about | Founder story (kidney transplant survivor) + mission that explicitly includes cancer patients. | Skeptical caregivers; potential donors |
| /how-it-works | Plain-language 6-step walkthrough. One action per step, no jargon. | Non-tech-savvy patients and caregivers |
| /donate | Tax-deductible giving tiers with full transparency about where money goes. | Donors referred by community or social |
| /partners | Organizational credibility. Institutional trust signals. | Healthcare orgs; institutional funders |
| /team | Human faces. Addresses 'who built this' before the visitor has to look. | Skeptical visitors; press; grant orgs |
| /ios-app | Full app feature landing and TestFlight funnel. | Tech-comfortable patients; caregivers |
| /contact | HubSpot-backed form with plain-language labels, segmented by inquiry type. | All user types with questions |
| /privacy | Readable privacy policy. Designed to actually be read — not avoided. | Caregivers doing due diligence |
| /terms | Terms of service in accessible language, written with the same care as any page. | All users; institutional partners |
Non-functional requirement: maintainable by a small non-technical team
New campaign pages, partner spotlights, and team members can be added using templated section blocks without touching core code. A nonprofit that requires a developer to update its website will eventually stop updating it. The design system enforces visual consistency through architecture — so the site looks the same on page 1 and page 10.
I came to this project not knowing how to build a website. What I did know was exactly who I was building it for — because I'd been sitting in a waiting room watching my grandmother's caregivers struggle, and I'd spent an afternoon watching 30 seniors sign up for an app because one person's story resonated, not because any feature was explained to them.
The outcomes genuinely surprised me. I didn't expect a website I designed as a 16-year-old to help attract over $10,000 in committed donations in year one, bring in national partners like the American Cancer Society and the American Kidney Fund, or give MediMate the credibility to host a global hackathon. Authentic design — built on real research, real conversations, and real people — earns trust at a scale you don't plan for. You just have to start with something true.
One of the most important decisions was also the simplest: I gave cancer and kidney disease equal weight throughout. It would have been easy to make kidney primary — the founder is a transplant survivor — and treat cancer as secondary. But my grandmother has glioblastoma. Her caregivers were the core of my research. The design had to reflect that real, equal, complicated picture.
I'm deliberate about naming how I built this: Canva, Procreate, and prompt engineering to bridge the gap between my design vision and the technical implementation I couldn't execute alone. I don't have a coding background. What I have is design judgment — knowing what I want a page to feel like, specifying it precisely enough to be produced correctly, and iterating on what comes back. That combination isn't a shortcut. It's a workflow.